Ride Theme - Collapsible Content - Dynamic images

Store Design
, , , ,

Topic summary

Need a way to show product-specific images in the Collapsible Content section of the product page in the Shopify Ride theme. Current method: can add an image via the “page” feature, but it’s static and not tied dynamically to each product. Goal: implement a dynamic image source so different products display different images in that section. No solutions or technical approaches have been provided yet. Status: open request for guidance or implementation ideas.

Summarized with AI on December 20. AI used: gpt-5.
1

Hi all,

I am using the Ride Theme and on product page collapsible content section.
I have already found out, how to add an image by the page feature.

Anyway I need another solution to create a dynamic source of image selection, due to different products - different images setup.
Does anyone have a solution for this?

Many thanks,

Theresa

1 Like
2

Hi @zeachild

This allows each product to have its own image, which you can dynamically display inside the collapsible content section.

  • Different image per product
  • Fully dynamic
  • No duplicate pages
  • Easy to manage in the admin
  • Theme-safe (Ride compatible)

Step 1: Create a product image metafield

  1. Go to Settings → Custom data → Products
  2. Click Add definition
  3. Set:
  • Name: Collapsible Image (or similar)
  • Namespace & key: custom.collapsible_image
  • Type: File → Image
  1. Save

Now each product will have an image picker in the product editor.

Step 2: Assign images per product

  • Open any product
  • Scroll to Metafields
  • Upload/select the image you want for that product
  • Save

Each product can now have a different image.

Step 3: Output the metafield in the collapsible content

Edit the collapsible content section (or block) in your theme, and add this where you want the image to appear:

{% if product.metafields.custom.collapsible_image %}
  <div class="collapsible-image">
    <img
      src="{{ product.metafields.custom.collapsible_image | image_url: width: 800 }}"
      alt="{{ product.title }}"
      loading="lazy"
    >
  </div>
{% endif %}

This will automatically show:

  • the correct image
  • for the correct product
  • only when an image is set

Optional: Style it (recommended)

.collapsible-image {
  margin-top: 1rem;
}

.collapsible-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

Best regards,
Devcoder :laptop:

3

thank you, can you give me a more detailed info, where exactly I’d have to paste in the new code?

1 Like
4

No, you don’t need to paste in the new code. You need to paste the code in the existing files, that said by Moeed. Could you please share your store url so that I explain with you step by step.

5

My main issue is, that my theme does not allow me to add any metafields other than text or url based. So whatever image/file based metafield I create, I can’t add it in the frontend theme editor.

my store url: https://14fbf7-c6.myshopify.com/

6

Hi,

Hope this will help

Use metafields for per product images or create multiple product templates if you only need a few variations.

7

Hi @zeachild ,
In the Ride theme, the Collapsible content section does not support a dynamic image source by default. Since each product needs a different image, the recommended approach is to use product metafields.

  1. Create a product metafield (type: File or Image), e.g. custom.collapsible_image.
  2. Assign a different image to this metafield for each product.
  3. Edit the collapsible content block and insert the image dynamically using Liquid:
{% if product.metafields.custom.collapsible_image %}
  {{ product.metafields.custom.collapsible_image | image_url: width: 800 | image_tag }}
{% endif %}

This allows each product to display its own image without creating separate pages.

8

thank you for the solution, can you specify where exactly I’d need to paste in the liquid code?