How to Display Images Using Metafields in Shopify

Metafields play a crucial role in creating a standout storefront for your online store. With the launch of Online Store 2.0, Shopify merchants now have access to a built-in metafields feature. This guide will walk you through the process of using Shopify metafields to display images on your store.

Shopify metafields allow you to store extra information about your products, orders, collections, customers, and more. By leveraging metafields, you can add dynamic content to your storefront, enhancing the shopping experience for your customers. Additionally, to offer more personalized purchasing options, you can integrate top Shopify apps like iCart into your store.

Shopify metafields are primarily organized based on where they can be applied, such as Products, Variants, Collections, Customers, and Orders. Learn more about the different types of Shopify metafields!

Adding Images via Shopify Metafields

Looking to enhance your online store with custom images? This guide will show you how to add images using Shopify Metafields.

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.

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 > Custom Data.

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

Step 3: Click on the Add definition button.

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).

Step 7: Select the Type File and sub-select List of files
Step 8:
Hit the Save button.

Adding Values to your recently created Metafields

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

Step 10: Scroll down to the Metafields section. Click on Select Files in front of Trust Badges and select multiple files.

Step 11: Click on the Save button.

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

Displaying Metafields on your Shopify store

Step 12: From the Shopify admin, go to Online Store > Theme
Step 13:
Open the theme editor by clicking on the Customize button on your current store theme.

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

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

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

{%- if product.metafields.custom.trust_badges != blank -%}

{% for badge in product.metafields.custom.trust_badges.value %}

<img
class=”lazyload”
src=” {{ badge | image_url }}”
/>

{% endfor %}

{% endif %}


Yay!!
We did it. Now, you can add more trust badges on your products and stand out from the crowd.

Related Posts:

Leave a Comment