New Shopify Certification now available: Liquid Storefronts for Theme Developers

Add icon to add cart button in theme sense

Zebnation
Visitor
3 0 0

can somebody help with how to add a icon to the add to card button in theme sense?

Replies 4 (4)
WIlliams4
Excursionist
23 3 4

To add an icon to the Add to Cart button in the Sense theme, you can follow these steps:

Go to your Shopify admin and click Online Store > Themes > Actions > Edit code.
In the Assets folder, open the base.css file.
Add the following code to the bottom of the file:

.add-to-cart {
  background-image: url(/assets/icon.svg);
  background-position: left center;
  background-repeat: no-replace;
  padding-left: 20px;
}

Replace icon.svg with the name of your icon file.

  • Save the file and publish your theme.

    The icon will now appear to the left of the text on the Add to Cart button.

To center the icon, you can add the following code to the .add-to-cart CSS class:

background-position: center center;

You can also adjust the padding-left value to change the distance between the icon and the text.

Here is an example of a complete .add-to-cart CSS class:

.add-to-cart {
  background-image: url(/assets/icon.svg);
  background-position: center center;
  background-repeat: no-replace;
  padding-left: 20px;
}

Once you have added the CSS code, you can upload your icon file to the Assets folder in your theme.

 

Your icon file should be in SVG format and should be at least 20px wide and 20px tall.

 

Once you have uploaded your icon file, you can publish your theme and the icon will appear on the Add to Cart button.





If this answer is good for you don't forget to marked as solution
Zebnation
Visitor
3 0 0

it didnt work.

Zebnation
Visitor
3 0 0

I made a new asset with the svg code in it. and did the asset name in the code u gave me. 

WIlliams4
Excursionist
23 3 4

Great! Once you have added the CSS code and uploaded your icon file, you can publish your theme and the icon will appear on the Add to Cart button.

Here are some additional tips:

  1. If you are not comfortable editing CSS, you can use a Shopify app like Code Snippets to add the CSS code to your theme.
  2. You can use a free online SVG editor like SVGOMG to optimize your icon file for web use.
  3. You can also use a Shopify app like Iconjar to generate and manage SVG icons for your theme.

    I hope this helps!
If this answer is good for you don't forget to marked as solution