How to add custom image/icon to a collapsible row on product page? (Specifically next to the images)

Store Design
,
1

Hello, I’m looking for a way to add a custom image / icon to the icon slot of the collapsabe row in my product page. Shopify offers several different icons but I’m trying to find a way or an app to add the custom image. I have seen a few badge apps that offer text under but i need them to not only have a dropdown so i can offer more text but also be next to the product images or at least under to the left.

Does anyone know of a solution? my store theme is refresh 2.0.2

2 Likes
2

Hello @aidenkeck ,

If you want to use an app, you can go to Shopify App Store and search for “Collapsible sections”, there is plenty of apps can support this.

Or you can modify the theme code if you comfortable with it.

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Sections → click product-template.liquid
  • Scroll down to the “Collapsible” section and find the code that sets the icon.
  • Replace the code that sets the icon with code that displays your custom image. For example, you can use the following code to display an image named “custom-icon.png” located in your theme’s assets folder:
{% assign icon = 'custom-icon.png' | asset_url %}
{% if icon %}
  
{% endif %}
  • Save and test.

Hope this can help.

Ali Reviews team.

3

Thank you im not seeing the “product-template.liquid” in my code can you check refresh 2.0.2 would love to upload an image. if not compatible with my theme, what is an app that can achieve this? Every app i have tried has been under the fold images/icons rather than next took the product images or the one that did have it next to the product images had no option for a dropdown to show more text.

Thanks again for the help

1 Like
4

Hey still not seeing it?