How to add an image from dynamic source in a product page detail section in an accordian

Shopify Discussion
1

is there a way to add an image from dynamic source in a product page detail section in an accordian in trade theme?

2

Hey @edgeIT

Short answer, no, not by default. In Trade (and most themes) the collapsible or accordion block only accepts text or rich text, and the dynamic source picker on those fields only offers text based metafields, so there’s no image option to pick, which is why you’re stuck. Rich text fields won’t hold an image either.

The way to actually get it is with a bit of theme code, and it’s not a big job. Create a File type metafield on your products (Settings, Custom data, Products, add a definition of type File, image), upload the image per product there, then in the theme render it inside the accordion’s content with something like:

{% if product.metafields.custom.detail_image != blank %}
  {{ product.metafields.custom.detail_image | image_url: width: 800 | image_tag: loading: 'lazy' }}
{% endif %}

Once that’s in, every product just pulls its own image automatically, and you only ever upload the image on the product itself, no code again.

One thing worth knowing: if Trade gives you a Custom Liquid block in the product information section, you can drop that snippet in without editing any files at all, but it’ll sit above or below the accordion rather than inside it. To get the image properly inside the accordion content, it has to go in the theme code.

Happy to set it up on Trade for you if you’d rather not dig into the files, it’s a quick one.

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

Hi Moeed, tried adding this in the product detail css, but it doesnt work. i guess it has to be done at the template level. i tried changing the type from text to liquid, but that shows some blank image.

4

Hi @edgeIT — the Custom CSS box cannot execute Liquid, so that placement will not work. Changing a schema setting from text to liquid also does not, by itself, render the product image inside the accordion.

Before changing anything else, please test in a duplicate theme. Which Trade version are you using, and where did you change text to liquid: in the block schema, or in a Custom Liquid block? A screenshot of just that setting or code area, with private details removed, is enough.

That will help separate a placement problem from the image-metafield/rendering problem without guessing at changes to your live theme.

5

The following fix tested on Trade theme puts image in the collapsible:

The image rendering inside its own collapsible row on the product page
The image rendering inside its own collapsible row on the product page816Ă—446 73.4 KB

Steps:

1. Create the image field

  • Settings > Custom data > Products > Add definition.
  • Name it Detail image. Set Type to File, then choose Image. Save.

Detail image metafield, set to File then Image
Detail image metafield, set to File then Image1000Ă—465 50.8 KB

2. Put an image on the product

  • Open the product. In its Metafields, find Detail image (click View all if you do not see it). Upload the image.

3. Add the block

  • Online Store > Themes > … > Customize, then open a product.
  • In the product information area, click Add block, then Custom Liquid.
  • Paste this and Save:
{%- assign detail_img = product.metafields.custom.detail_image.value -%}
{%- if detail_img != blank -%}
  <div class="product__accordion accordion quick-add-hidden">
    <details id="Details-detail-image-{{ section.id }}">
      <summary>
        <div class="summary__title">
          <h2 class="h4 accordion__title inline-richtext">Size guide</h2>
        </div>
        {{- 'icon-caret.svg' | inline_asset_content -}}
      </summary>
      <div class="accordion__content rte">
        {{ detail_img | image_url: width: 1200 | image_tag: loading: 'lazy' }}
      </div>
    </details>
  </div>
{%- endif -%}

That gives you a new collapsible row, styled like the others, with that product’s image inside.

Notes:

  • Change Size guide to whatever heading you want.
  • The row only shows on products that have an image, so the rest stay clean.
  • The important part is .value on detail_image.value. Without it the image comes out blank, which is the blank image you were seeing.

Regards,
Ploqo

6

Hi @edgeIT

Create a product metafield with the type File and set it to accept images. Then, on the Trade theme’s product page, you can connect that metafield as a dynamic source inside the accordion/details section.

For example:

  • Create: product.metafields.custom.accordion_image
  • Type: File
  • Validation: Images only
  • Upload the required image for each product from the product admin.
  • In the accordion/details section, connect the metafield using the dynamic source option.

If the native Trade theme accordion doesn’t expose the image metafield as an available dynamic source, you can add a small custom Liquid block inside the accordion and render the metafield conditionally. This gives you more control over image sizing, responsive behavior, alt text, and whether the accordion displays only when an image exists.

Best regards,
Devcoder :laptop: