Using Metafields In Custom Liquid Blocks In Shopify 2.0

How (And Why) To Use Metafields In Custom Liquid Blocks - Shopify 2.0

This post will be very brief as it's just notes for the video above. If you want the full explanation of what is happening here, you should watch the video. 

Recently I published a video introducing Metafields and I got some interesting comments from people struggling with certain limitations of their theme when outputting metafields.

The answer I often gave was they should use a custom liquid block and output the metafield with code. This opens up a myriad of possibilities. You just need to know some basic html and liquid coding, which I will show below. 

    Example 1: Conditional Metafield output (IF)

    My product has a metafield called Fabric. 

    Output a metafield in Shopify dawn

    I can output it by using the 'Text' block and adding the static word "Fabric:" followed by the metafield data. 

    Metafield in theme editor

    But not all my products have the fabric metafield. A steel lunchbox should not be showing this. 



    So we solve this problem by outputting the metafield inside the 'custom liquid' block type.

    <p>Fabric: {{product.metafields.specs.fabric}}</p>

    We can wrap the metafield it inside a condition that it only shows if the product has that metafield filled out (isn't blank).

    {% if product.metafields.specs.fabric %}
    
    <p>Fabric: {{product.metafields.specs.fabric}}</p>
    
    {% endif %}

    Example 2: Referencing another product

    Another problem was simply that there wasnt a block type for what you want to do.

    So for example if you want to link to another product, a related product.

    Something simple like: "click here to see this product in another color".  

    That’s a cool idea right? And we even have this type of metafield available in the metafields section of the admin. When we define a metafield we can choose the type "reference" which is a reference to another product.

     

    Define product reference metafield

    So we can almost do it, but not quite because there isn't a good way to output that in the theme editor.

    So let's use the custom liquid block and output the product title. 

    <p>
    {{product.metafields.suggestions.related_product.value.title}}
    </p> 

    And let's also output the product image:

    <img src="{{product.metafields.suggestions.related_product.value.featured_image | img_url: '300x'}}">
    Output a related product using custom liquid block

    Lastly we can wrap it all in a link and put a heading on top:


    <h3>Related Product:</h3>
    <a href="{{product.metafields.suggestions.related_product.value.url}}">

    <p style="font-weight: bold; text-align: center;"> {{product.metafields.suggestions.related_product.value.title}} </p>

    <img src="{{product.metafields.suggestions.related_product.value.featured_image | img_url: '300x'}}">

    </a>

    So as you can see - the custom liquid block is very powerful, especially when used in combination with metafields.

    You just need to know a bit of HTML maybe a bit of CSS and you can do crazy things with it, that can really make your store easier to browse and ultimately get more people buying and make you more money.

    I'm creating a course! Coding skills for store owners 

    As you can see, a basic knowledge of coding is a very high value skill for a Shopify store owner. Even if you're not planning to become a developer.

    I will be releasing a coding course for Shopify store owners and entrepreneurs

    All of the Shopify coding courses I've seen are directed towards people that want to become professional Shopify developers.

    My course will instead dive straight into practical exercises and give you just the information you can start using right away.

    Subscribe to get notified when I release this course. Don't worry - I won't spam you. One email a month tops. 

    Back to blog

    3 comments

    Thanks for the help bro. You rock 🤟.

    I need some help into creating variants of a product that I sell in fractions of weight and each variant has its own price. How to do that and update my inventory at the same time as the main stock one

    Mutlaq Ali

    Hi Eduard, I was following your Youtube video on creating a related product section in Shopify Dawn Theme 3.0 using the custom liquid under the product page.

    My metafield is – product.metafields.Product_Page.related_products – and custom liquid section can’t retrieve the data for:
    {{product.metafields.Product_Page.related_products.value.url}}
    {{product.metafields.Product_Page.related_products.value.title}}
    and {{product.metafields.Product_Page.related_products.value.featured_image | img_url: ’300x’}}"

    I’d greatly appreciate if you can suggest how to overcome this (ie. if you have the time of course).

    Thanks for the great videos! I am your new fan (from Singapore)!

    Irene

    Great tips! Thank you.

    Tal Freibergs

    Leave a comment

    Please note, comments need to be approved before they are published.