Adding an icon PNG into the collapsible row in a product.json in the Dawn theme

Technical Q&A

Topic summary

A user seeks help adding a custom icon (PNG/SVG) to collapsible rows in Shopify’s Dawn theme product template.

Initial Guidance:

  • Icons are located in icon-accordion.liquid (Snippets folder)
  • Modifications also needed in main-product.liquid schema

Solution Provided:
A community member shares a working method with tutorial videos:

  • Use SVG format (correct sizing is critical for display)
  • Add SVG code to icon-accordion.liquid
  • Update main-product.liquid with value/label entries
  • Reference tutorials at timestamp 10:35 for step-by-step instructions
  • Working example visible on contributor’s live website

Theme-Specific Variation (Craft Theme):

  • Upload SVG file to assets with naming format: icon-[name].svg
  • Add option entry in main-product.liquid with matching value
  • Update language schema file (en.default.schema.json) with corresponding label

Unresolved Issue:
One user reports icons not appearing in menu despite following steps, and existing default icons (like “Apple”) persist even after deletion attempts.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
10

hi, everything you need to know how to do this can be learnt from this video here: https://youtu.be/sj42pjgpEmc?t=635

The important part starts at timestamp, 10:35. The most important part is creating the SVG icon to the correct size. If you don’t size the SVG correctly the graphic will not display.

Here’s a video to create SVG’s. https://www.youtube.com/watch?v=cACcJBsEVII

My Website.

I created several custom icons, you can go to my mattress website and click on any caravan mattress product and scroll down the product page, you will see my custom icons.

https://mybespokemattress.com/collections/caravan-mattresses-comfort-for-your-mobile-adventures

1 Like