How to Display Images Using Metafields in Shopify

  • How to Display Images Using Metafields in Shopify

    Technical Writer

  • 5541 Views
  • Last updated: July 6, 2022
  • 3 Minutes
How to Display Images Using Metafields in Shopify

As we all know how important metafields are for building an outstanding storefront for your online store. After the Online Store 2.0 launch, Shopify merchants have a built-in metafields feature in their store. This guide is to help you how to use Shopify metafields to display images in your store.

Shopify Metafields Overview

Shopify metafields helps you store additional information related to your products, orders, collections, customers, and many more. Using these metafields, you can add dynamic data to your storefront and make the shopping experience better for your customers.

Shopify metafields are basically categorized based on the places where they can be used such as Products, Variants, Collections, Customers, and Orders. Know more about the types of Shopify metafields!

Adding Images via Shopify Metafields

Do you want to add more value to your online store using custom images? Here you will learn how to add images in Metafields Shopify.

You may need to add some icons to your product page that represents your product or brand values. For example, warranty stamps, non-toxic seals, cashless shipping, cash on delivery, and many more to build the trust of your shoppers in your products. If you are looking for the same solution, you can continue with us!

Using this solution you can expect the result as below in the screenshot.

badge-images-using-metafields

Add Trust Badges on Shopify Product Page

Let’s start adding extra images on the product page using metafields in Shopify.

Creating a Metafield Definition for images

Step 1: From your Shopify admin, go to Settings > Metafields.

Step 2: Select “Product” from the given type of metafields.

manage-metafield-definitions

Step 3: Click on the Add definition button.

add-metafield-definitions

Step 4: Give a name to your metafield definition.

Step 5: Keep the Namespace and key as it is. The system will use it to identify the metafield definition.

Step 6: Add a description to your metafield definition (optional). You can include the purpose of creating it.

create-metafield-definition

Step 7: Select the “File” content type from the list.

select-content-type

Step 8: Make sure you set the validation rules carefully.

Step 9: Hit the Save button.

This way we can create metafield definitions for all the images we want to display on the product page. I have created 3 product metafields to add 3 trust badges on my product page. Now, we need to add values to these metafields.

product-metafields-for-trust-badges

Adding Values to your recently created Metafields

Step 10: Go to Products from your Shopify Admin. Open a product for which you want to add the metafield values.

Step 11: Scroll down to the Metafields section. Click on the empty space beside the metafields name. Upload the image for your product metafield.

Step 12: Click on the Save button.

This way you can add images to your other product metafields. Next, you need to customize the product page template to show your recently created metafields on your store.

adding-values-to-metafields

Displaying Metafields on your Shopify store

Step 13: From the Shopify admin, go to Online Store > Theme.

Step 14: Open the theme editor by clicking on the Customize button on your current store theme. (Note: Make sure to use a Shopify theme that allows you to add the “Custom Liquid” section on the product page template, i.e. Shopify 2.0 themes).

theme-customization

Step 15: Open the Product page template “Default product” or a custom product page template if you’ve created it.

Step 16: Click on Add block and select “Custom Liquid” to add images on the product page using the recently created metafields.

Step 17: Now copy the below code and paste it to the custom liquid box.

{{ product.metafields.my_fields.namespace_key | img_tag }}

custom-liquid-for-image-metafield

Step 18: Replace “product.metafields.my_fields.namespace_key” with your metafield namespace. You can find your metafield namespace in Settings > Metafields > Products. Simply copy the namespace below the metafield name.

metafields-namespace

Step 19: Hit the Save button.

Now, the same way you can add all the metafield to your product page using the Custom liquid block.

badges-added-using-metafields

Yay!! We did it well. Now, you can add more metafields to your store theme like this and make your online store stand out from the crowd.

Wrapping Up!

Hope this step-by-step guide helps you to display extra images on your product page using Shopify metafields. Please let me know if you are facing any difficulty applying the same given solution. I would love to help you.

Also, would love to know how did you customize your storefront to make it trustworthy. If you need some best Shopify storefront examples, find them here.

13 Responses

  1. Hi Sagarika, love the tutorial, I followed your insructions and its worked liek a charm, but a bit small for what I need. I’m just wondering how to change the size of the image? What code do I add to the custom liquid to make it full width?

    1. Hello Stacy,
      Thanks for your response! 🙂

      I am not sure whether we can change the image size as the metafields are meant to show small images. So I would recommend posting a question to Shopify Community or getting the help of Shopify experts.

        1. Hello Martin,

          After creating the metafield go to your product page and choose the product that you want to show the image. Scroll down to the Metafields section in the product page. Click on the empty space beside the metafields name. Upload the image for your product metafield.

          1. I meant the code for the size. Or is this what you are talking about? Thanks for your reply!

          2. Hello Martin,

            Are you talking about how to change the size of the image? If it’s your query then I’m not sure whether it’s possible or not.

  2. Hi! Thank you so much for this explanation! It is excellent and I am already using it!

    However, I want to know how to create an IF statement for this exact situation. For example, if I have an image icon that I don’t want to appear on another product, I leave it blank, but on the product page, it shows up as “No Image”.

    Is there a way to make an IF statement with your code for IF there is a blank metafield, then “Blank”?

    Thank you for your help!

    Sebastian

  3. Hi Sebastian,

    Try below if statment (replace namespace_key with the name of your metafield, for example trust_badge)

    {% if != blank %}
    {{ product.metafields.my_fields.namespace_key }}
    {% endif %}

  4. If I follow these steps the image appear over each other and not side by side in line like in your example. Is there a way to fix this?

Leave a Reply

Your email address will not be published.