How to Add Different A+ Images for Each Product? Metafields Guide Part 2 (39)

Actually, as long as you understand the basic logic of Metafields, you don't really need me to create a separate guide for every single scenario.

But users have demands, and I'm also thinking about creating some content, so I'll cover more metafield usage scenarios in the future.

The previous metafield application scenario was adding size charts for each product. It was also the first article in my 99 Shopify Tips series, feel free to check it out if needed.

Boost Conversion! How to Add Collapsible Size Charts? | 99 Shopify Building Tips (1)

Requirement Scenario Recap: Each Product Needs Different Banner Images

Newcomers might get confused - if you set it up in the template, you'll find that this image appears on every product.

To display different banner images for different products, we need to use the Metafields feature, mapping this module to a product attribute. This way, it's more convenient for us to add different banner images during subsequent product editing.

Step 1: Add Banner Module on Product Page, Map to Metafields

In Shopify admin, go to Online Store > Themes > Customize, enter the product page template.

Add a banner image module (or similar modules like slide), and set the image source to map to a metafield.

This associates the image with the product's metafield.

Step 2: Add Image-Type Metafield

When setting up the metafield:

1. Set namespace to custom (or your custom namespace)
2. Define a name, such as banner_image or product_banner
3. Select type as Image
4. Save the metafield definition

Step 3: Add Corresponding Banner Images in Each Product

After saving the metafield and template, enter each product separately:

1. Open the product edit page
2. Scroll to the metafields section at the bottom of the page
3. Find the metafield you just created
4. Upload the exclusive banner image for this product
5. Save the product

And you're done.

FAQ

How to Handle Image Dimensions?

Shopify free templates are annoying like this - image dimensions are hard to get right. You need to test and adjust repeatedly, and you also need to consider mobile responsiveness.

Important Tip: Don't put text on the image itself!

Otherwise it's even harder to adjust and容易 blurry.

Can I Have Two Images?

Of course!

Create a new module (or select second image), then add a new mapping.

Each module corresponds to one metafield - you can add multiple image metafields to achieve multi-image display.

Core Logic of Metafields

The essence of metafields is extending Shopify's default data structure.

Through metafields, you can:

• Add custom attributes to products (such as material, origin, special instructions, etc.)
• Associate multimedia resources like images and videos with products
• Add SEO-related metadata to products
• Create relationships between products (such as recommended products, accessories, etc.)

Three Steps to Use Metafields

1. Define Metafields

Define the namespace, name, and type of metafields in Shopify admin or through code.

2. Populate Metafield Data

Fill in specific metafield values in products, collections, blog posts, and other objects.

3. Call Metafields in Templates

Call metafield data through Liquid code or Dynamic Source in the theme editor.

More Metafield Usage Scenarios

I'll continue sharing more practical metafield application cases:

• Product specification tables
• Brand story modules
• Product usage scenario images
• Video showcase areas
• Featured customer reviews
• Related product recommendations

Stay tuned for future content.