Shopify metafields allow you to store and display custom data — including images — on your storefront without third-party apps. Since the launch of Online Store 2.0, Shopify has provided built-in metafield support that makes it straightforward to add extra product images, collection banners, and custom visual content to any page. This step-by-step guide shows you how to create metafield definitions, upload images, and display them in your Shopify theme using Liquid code or the no-code theme editor.
What Are Shopify Metafields?
Shopify metafields are primarily organised based on where they can be applied: Products, Variants, Collections, Customers, Orders, and more. They allow you to store any additional information that doesn't fit into Shopify's standard fields — including images, files, text, numbers, and dates.
Step 1: Create a Metafield Definition
Navigate to Settings → Custom data → Products (or your target resource). Click "Add definition" and choose the type "File" for image uploads. Give it a name like "Extra Product Images" and a namespace/key like custom.extra_images.
Step 2: Upload Images to the Metafield
Open any product, scroll to the Metafields section at the bottom of the page, and upload your image. Shopify stores this as a file reference that can be queried via Liquid or the Storefront API.
Step 3: Display the Metafield in Your Theme
In your theme's Liquid template, access the metafield value using:
{{ product.metafields.custom.extra_images.value | image_url: width: 800 | image_tag }}For Online Store 2.0 themes, you can also connect metafields directly to section blocks in the theme editor without writing code. If you need help with metafields or custom Shopify theme work, our Shopify theme development team can implement advanced features like this for your store.
Step 4: Use the Theme Editor
Modern Shopify themes built for OS 2.0 allow you to connect metafield sources directly to content blocks in the theme editor. This is the no-code approach — simply select your metafield as the data source for an image block.
Frequently Asked Questions About Shopify Metafields
What are Shopify metafields?
Shopify metafields are custom data fields that let you store additional information beyond Shopify's standard fields. They can hold text, numbers, dates, files, and images, and can be attached to products, variants, collections, customers, orders, and other resources. Metafields are essential for displaying custom content on your storefront.
How do I display a metafield image in my Shopify theme?
To display a metafield image in your theme, use the Liquid code: {{ product.metafields.custom.your_field.value | image_url: width: 800 | image_tag }}. For Online Store 2.0 themes, you can also connect metafield images directly to section blocks in the theme editor without writing any code.
Can I use metafields without coding in Shopify?
Yes. With Online Store 2.0 themes, you can connect metafields to content blocks in the theme editor using the "Dynamic source" option. This no-code approach lets you display metafield images, text, and other data without editing any Liquid templates.