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 that eliminates the need for third-party apps to display custom data.

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.

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.