How can I insert an image into a product page accordion on the Dawn theme?

Store Design

Topic summary

A user seeks to add images inside product page accordion/collapsible tabs on Shopify’s Dawn theme. The solution involves using Dawn’s built-in “Collapsible Tab” block combined with product metafields.

Implementation steps:

  • Change collapsible tab type from “Rich text” to “liquid” in main-product.liquid
  • Create a product metafield with Content type = Image
  • Upload images to the metafield in product admin
  • Insert code {{ product.metafields.namespace | img_tag }} in the collapsible tab content

Follow-up issues resolved:

  • Image sizing: Wrap the img_tag in a div with inline width styling (e.g., style="width:50%")
  • Product-specific images: Either use metafields for dynamic content or create separate product page templates for different products

Additional context:

  • A guide for creating custom product templates in Shopify 2.0 was shared
  • Similar question raised for Ritual theme, where image blocks can be added under accordion rows and connected to metafields
  • Multiple users confirmed the solution worked successfully
Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

How to create an accordion on the product page where I can insert an image?

Example:

IMG_2033.jpeg
IMG_2033.jpeg828×462 21.3 KB

Url: https://flaud.world/

Password: 202135283

Thanks,

B

2

@bhristopher - free accordion code here , you can use it and put image instead of text

3

@suyash1 - Can’t seem to figure out why it isn’t dropping down. Could you take a look?

Thanks,

B

4

Hello @bhristopher ,

Hope you are doing well!

In Shopify 2.0 themes like Dawn, you can achieve this using the “Collapsible Tab” block. Then you can insert images (by selecting dynamic data source) using Shopify metafields.

SagarikaDas_0-1636954019127.png
SagarikaDas_0-1636954019127.png1914×893 209 KB

5

@SagarikaDas - Thank you for that! How exactly do I add the image using metafields?

6

Hello @bhristopher ,

This Shopify guide will help you in creating metafields in your dawn theme: https://help.shopify.com/en/manual/metafields

First, we need to change the type of the Collapsible tabs that is by default “Rich text”. Go to Online Store > Edit Code and open main-product.liquid file. Change the type to “liquid” for the content of the Collapsible tab.

Save the changes!

SagarikaDas_0-1637039645244.png
SagarikaDas_0-1637039645244.png983×577 28.9 KB

Now, for adding images using metafield:

  • First, you have to define a ‘Product’ metafield of Content type = Image.
  • Then, go to your store admin > Product. Open the product detail and upload the image to your metafield.
  • Now go to the theme editor and open your product template. Add Collapsible tabs and enter the below code (replace the “namespace” with your metafield name) in the content tab.
{{ product.metafields.my_fields.namespace | img_tag }}

You can see the image in your Collapsible tab!

SagarikaDas_1-1637040114704.png
SagarikaDas_1-1637040114704.png1895×901 227 KB

4 Likes
7

It worked! Thank you so much.

Now i’m running into a problem with the size of the image in the collapsible tab. The image in the tab is the same px width as the dropdown menu and “add to cart” button.

Are you able to take a look at the code and tell me where I need to make the adjustment?

Url: https://flaud.world/products/copy-of-copy-of-copy-of-copy-of-sweatsuit-pullover

Password: 202135283

Thanks,

B

8

Hello @bhristopher ,

I found a solution! Kindly replace the Collapsible tab content with the below code:

Cheers!!

9

@SagarikaDas - I’m trying to add a different image in the collapsible tab for a specific product, but it’s changing for all of the other products. How do I fix this?

Thanks,

B

10

Dear @bhristopher ,

As you are working on the default product template for all the products, it will happen!

You either need to use metafields for dynamic data product-wise (that only shows small-size images) or you can create different product page templates for specific products.

11

@SagarikaDas Got it, I will try to create a different product theme template.

While I have you here, i’m looking to align the title and price on one line. The title being on the left side, and the price being on the right side. Are you able to take a look and come up with a fix for this?

Screen Shot 2021-11-22 at 12.03.42 AM.png
Screen Shot 2021-11-22 at 12.03.42 AM.png890×389 55.5 KB

Screen Shot 2021-11-22 at 12.03.56 AM.png
Screen Shot 2021-11-22 at 12.03.56 AM.png445×531 41.9 KB

12

@SagarikaDas How do I create the exact same template? I’m unsure of what file/asset I need to copy and paste from.

13

Hello @bhristopher ,

I think this guide will help you to resolve your issue: How To Create Custom Product Template in Shopify 2.0 Themes

14

AMAZING!!! Thank you, this worked perfect.

1 Like
15

Hi @SagarikaDas ,

But how do you make those collapsible tabs closed when another one is open? And how do you make the first one open as default?

Cheers

16

THANK YOU!!! Seriously, you saved me with this bit of knowledge.

18

Hi, I’m also trying to create an accordion/collapsible row but in Ritual theme. I’m unable to find main-product.liquid. I can see something about _accordion-row.liquid but there is no ‘richtext’ I can see like in the Dawn theme. Hoping you can help. Thanks in advance.

Screenshot 2025-07-25 213621
Screenshot 2025-07-25 2136211899×874 119 KB

19

Use Metafield as an File and Call it in the product page where you want.

1 Like
20

Hey @Johnny999,
Could you please share your store url and password [if applicable] so that I can take a look and provide you with the solution code.
Waiting to hear back from you.
Thanks

23

Thanks for sharing the store url @Johnny999,
I just check your site and found that in order to add the image near the collapsible row requires to do the custom code in your theme.
Could you please share the 4 digits collab code in the p/m so that I can do it for you.
Waiting to hear back from you.
Thanks

1 Like