glide marketing logo
Shopify Meta Fields Tutorial Blog Post Banner

How to Setup Meta-fields in Shopify: A Step-by-Step Guide

Facebook
LinkedIn
Twitter
WhatsApp
Email

Table of Contents

Creating a Meta-field Definition for images

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

Step 2: Select “Product” from the list of metafield types.

Step 3: Click 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 “File” content type from the list.

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

Step 9: Hit the Save button.

 

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 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 customise the product page template to show your recently created metafields on your store.


Displaying Metafields on your Shopify store by Connecting a Dynamic Source Image

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

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 or click on an existing block and rather than adding an image in the standard method. Click the three-layered cylinder button to select Connect a Dynamic Source to add images on the product page using the recently created metafields.
ShopifyMetaFieldsTutorialScreenshot

Step 18: Select your newly created metafield

Step 19: Hit the Save button.

Yay! We did it!

Now, you can add more metafields to your store theme like this on any page you like including the homepage and blog post pages. This feature you to more customisations to your store. Get creative with it and happy Shopifying!

Related posts
Glide Marketing Logo Black

Web Design & Landing Page Design Specialists