Dawn Theme - Customise Quick add Buttons

Topic summary

Goal: Replace Dawn theme’s bulky “Quick Add” buttons in Featured Products with a streamlined, brand-colored button using the existing basket SVG icon.

Guidance provided: One approach suggests editing sections/product-grid.liquid or sections/featured-products.liquid, swapping the button markup, adding CSS in assets/theme.css, and optionally using AJAX to add to cart without redirect. Another provides detailed steps to modify a product-card template, inject a custom-quick-add button with the icon-cart SVG, style it in base.css, and verify the icon in snippets/icon-cart.liquid.

Roadblocks: The requester cannot find product-card.liquid in Sections and instead sees snippets/card-product.liquid without the referenced render code, indicating file/path differences across Dawn versions.

Artifacts: Images show the desired button style and a code screenshot, which are central to understanding the design target and where the user is looking in code.

Status: Unresolved. Next action is for the requester to share the store URL and password so the helper can inspect the theme structure and provide exact file paths and implementation.

Clarifications: Dawn is Shopify’s default theme; SVG is a scalable vector icon; AJAX enables adding to cart without page reload.

Summarized with AI on December 13. AI used: gpt-5.

Thanks @LizHoang !

This looks great however, I’ve already encountered my first problem. I do not have this ‘product-card.liquid file’ in the sections folder. Could it have another name?

In the snippets folder I have located a file named card-product-liquid but this does not contain the following {% render ‘product-card’, product: product %} within the html as far as I can tell!

I look forward to hearing from you!

1 Like