Add icon to add to cart button - DAWN

Store Design
, , , ,

Topic summary

Goal: Add a cart icon to the “Add to cart” button in the Shopify Dawn theme without changing the button’s existing style.

Proposed solution: Add CSS in base.css targeting the button’s span with a ::before pseudo-element to display an icon via background-image. Initial selector used: button.product-form__submit.button.button–full-width.button–primary > span and ::before. An external PNG URL was provided as an example.

Updates/changes:

  • Recommendation to upload a chosen icon (e.g., from svgrepo.com) to Shopify files and use that URL instead of the external link.
  • When a white PNG appeared black, the cause was CSS filter: invert(1);. Removing that filter fixes the color.

Open issues:

  • Mobile alignment: icon + text not vertically centered within the button, and user wants more spacing between icon and text. No final CSS fix for mobile centering/spacing was provided yet.
  • Another user reports the method not working on the latest Dawn theme; no resolution posted.

Context notes:

  • Dawn = Shopify’s default theme; base.css is the theme stylesheet.
  • Images/screenshots were used to illustrate alignment issues and desired icon style.

Status: Partially solved; alignment and latest-theme compatibility remain unresolved/ongoing.

Summarized with AI on December 19. AI used: gpt-5.
4

You are welcome.

I actually recommend that you don’t use the icon I sent. Find your own icon online and upload it to Shopify. Then, replace it using the link above. I hope I understood correctly. You can use the website below for icons. Once you find the icon, let me know and we’ll also fix the mobile area.

https://www.svgrepo.com/