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.
5

Hi @Algebruh ,

You have to add it in the snippet.liquid, which is the icon-accordian.liquid. The second place is the schema, at the main-product.liquid