How to add extra image section inside the product description?

Store Design

Topic summary

A user is attempting to display unique images and descriptions below the main product description using metafields. Text metafields work correctly, but image metafields display the same image across all products despite uploading different images per product.

Suggested solutions include:

  • Verify metafield configuration: Ensure a product metafield with type “file” exists and is properly connected to each product’s image input
  • Code implementation: Add Liquid code in product.liquid template to reference the image metafield (e.g., {{ product.metafields.custom.extra_image | img_url: 'master' }})
  • Use metafield_tag filter: This outputs proper HTML for image/file metafields automatically
  • Check namespace and key: Ensure metafield references match the created namespace (e.g., product.metafields.extra.image_1)

Multiple respondents offered to review the theme code directly or provided code snippets for proper implementation. The issue likely stems from either incorrect metafield setup or improper Liquid code referencing the metafield values.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I’m trying to show extra images and descriptions below the main product description on each product page. These need to be different for each product.

I used metafields for this:

The text metafield works fine – I can show different content per product.

But the image metafield isn’t working as expected. It always shows the same image on every product page, even though I’ve uploaded different images for each product for each product. Am I missing something?

Is there a proper way to show unique images per product using metafields?

2

To fix this issue requires to take a look in your theme file.
Would you mind to share the 4 digits collab code in the p/m so that I can take a look and fix with the issue of showing the different images for different product description.

Waiting to hear back.

3

Hi @dung209
I hope you are doing well,

Please check if you have compatible metafield exists on product with type file, if not, then by clicking the dynamic resource icon, you can create file type metafield product metafield and then connect that metafield to image input. and after that you can update the image in product metafield per product. it should work just fine

Thanks!

4

Hi @dung209 ,

Go to Shopify Admin →online store→ themes→ edit code

in templates open product.liquid

Find this line

{{ product.description }}

paste this code below above line

{% if product.metafields.custom.extra_image %}
  <img src="{{ product.metafields.custom.extra_image | img_url: 'master' }}" alt="Extra Image" />
{% endif %}

save and preview

thanks

Manoj

1 Like
5

I would do the same.

6

Hi,

Hope this will help

  • Create a product metafield for extra image
  • Upload a different image for each product
  • Add code to show the metafield below product description

Code example

{%- comment -%} Show one extra image + caption under the description {%- endcomment -%}
<div class="extra-product-image">
  {%- if product.metafields.extra and product.metafields.extra.image_1 -%}
    <div class="extra-image-block">
      {{ product.metafields.extra.image_1 | metafield_tag }}
      {%- if product.metafields.extra.image_1_caption != blank -%}
        <p class="extra-image-caption">{{ product.metafields.extra.image_1_caption }}</p>
      {%- endif -%}
    </div>
  {%- endif -%}
</div>
  • product.metafields.extra.image_1 = metafield created (namespace = extra, key = image_1).
  • | metafield_tag is simple way — it will output the proper HTML for an image/file metafield.
  • If you made a separate metafield for caption (text), use product.metafields.extra.image_1_caption as shown.