0%
Back to blogShopify

How to setup meta-fields in Shopify: A step-by-step guide

How to setup meta-fields in Shopify: A step-by-step guide

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

Mike McDonnell
24 March 2024

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!

If you’re new to Shopify, check out our Shopify Guides.

Ready for a website that works in the AI era?

We build modern websites, web apps, and the custom functionality behind them, engineered for AI search. Book a 30-minute scoping call to talk through what you're trying to achieve.

Let's scope your project

Book a 30-minute scoping call. We'll talk through what you're trying to achieve, who you're going after, and what an AI-powered website or app could look like for your business.

Scope your project

30 minutes. No obligation. Just a straight conversation about what you're trying to build.