add an image to a collapsible row?

[trong2409]

Hi, how can I add an image to a collapsible row?

[DaisyVo]

Hi @trong2409 ,

Can you share with me your store URL?

Also, may I ask which image you want to add? Do you want to add a logo to it?

Look forward to your response!

Best,

Daisy

[trong2409]

Hi Daisy, I was wondering if the process is simple. I’d like to add product size images to the dimensions section on each product page. It would be much more convenient if I knew how to do it since I have a large number of products.

[DaisyVo · Accepted solution]

Hi @trong2409 ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Edit code

Step 2: Add this code into your Custom liquid

Here is the code:

<div class="product__accordion accordion quick-add-hidden" >
                  <details id="Details-123-456">
                    <summary>
                      <div class="summary__title">
                        <span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-ruler" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18.984 5.329 14.67 1.016 1.017 14.672l4.313 4.312zM15.39.298a1.016 1.016 0 0 0-1.437 0L.298 13.953a1.016 1.016 0 0 0 0 1.437l4.312 4.312c.397.397 1.04.397 1.437 0L19.702 6.047a1.016 1.016 0 0 0 0-1.437z"></path><path d="M11.786 2.67a.51.51 0 0 1 .719 0l1.919 1.92a.508.508 0 1 1-.719.718l-1.919-1.919a.51.51 0 0 1 0-.718M8.939 5.363a.51.51 0 0 1 .719 0l1.918 1.919a.508.508 0 1 1-.718.719l-1.92-1.919a.51.51 0 0 1 0-.719M6.243 8.207a.51.51 0 0 1 .719 0l1.918 1.92a.508.508 0 0 1-.718.718L6.243 8.926a.51.51 0 0 1 0-.719m-2.87 2.671a.51.51 0 0 1 .719 0l1.918 1.918a.508.508 0 0 1-.718.719l-1.919-1.919a.51.51 0 0 1 0-.718"></path></svg></span>
                        <h2 class="h4 accordion__title inline-richtext">
                          Ani check
                        </h2>
                      </div>
                      <svg class="icon icon-caret" viewBox="0 0 10 6"><path fill="currentColor" fill-rule="evenodd" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708" clip-rule="evenodd"></path></svg>
                    </summary>
                    <div class="accordion__content rte" id="ProductAccordion-123-456">
                      <img src="https://cdn.shopify.com/s/files/1/0674/2743/4660/files/389-300x300-blur_5-grayscale.jpg?v=1732506807" width="30px" />
                      content
                    </div>
                  </details>
                </div>

- For images, you can upload in the Files section in Shopify and copy the link there: https://prnt.sc/C64Qwnpf6XJL

- You can change the link of the image here: https://prnt.sc/2ZCfCnsnfE8K

If the icon is available in the Dawn theme, you can copy it directly. Should you need further assistance, please let us know, and we will help accordingly.

If the icon is not present in the Dawn theme, please share the link to the store containing the desired icon so we can review it and provide support.

Here is the result:

Let me know if it works!

Best,

Daisy

[trong2409]

Hi @100x-elevate, I was wondering if the process is simple. I’d like to add product size images to the dimensions section on each product page. It would be much more convenient if I knew how to do it since I have a large number of products.

[AlexMH]

I tried following your suggestion, but when I click into the rich format text field in step 3 there is no icon representing an image. I also read, that this field only supports text input, no html (img) tags nor images. I also try to insert an image in this dropdown for size charts, which get their source from a meta object. I use the Sense theme. 

I also tried to build a collapsible row snippet which supports images but can't figure out which elements I have to change in order to make it work. Unfortunately I couldn't find any other snippets or blocks on the web which support this kind of content. 

[xeoloex]

I am dealing with same issue here, i have add the picture according to the instructions and it works.. But when i checked the other products it was on all of them. Can we doit for each product separately?

[trong2409]

Thanks for everyone's help!