Add SVG to ADD TO CART button

[JavierForero]

Hi everyone!

I would like to add the 'bag' or 'cart' icon to my ADD TO CART button, like in the example below. 

I have the SVG ready but I am having trouble with the coding, 

Anyone here that could help me out?!!

Thanks 🙂

[GemPages]

Hello @JavierForero 

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[JavierForero]

Hi there, 

Yes, here it is

https://larkwoodfurniture.com.au/

[GemPages · Accepted solution]

You can follow these steps:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid theme file
3. Paste below code before </body> :

<style>
     [action="/cart/add"] .button.alt[name="add"]:before{
          content: "";
          display: inline-flex;
          width: 16px;
          height: 16px;
          background: url(https://cdn.shopify.com/s/files/1/0579/9673/8721/files/bag.png?v=1669863100);
          background-size: cover;
          margin-right: 5px;
          padding-right: 10x;
          transform: translateY(1px);
     }
</style>

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[JavierForero]

Thanks it worked!

[JavierForero]

Hi Again, 

Do you have any suggestions on how to add it to the sticky button on mobile?

[GemPages]

Hello @JavierForero 

To add an icon to a sticky button on mobile devices, you can update the code above with the following code:

<style>
     [action="/cart/add"] .button.alt[name="add"]:before,
     .product-area__add-to-cart-xs .button:before{
          content: "";
          display: inline-flex;
          width: 16px;
          height: 16px;
          background: url(https://cdn.shopify.com/s/files/1/0579/9673/8721/files/bag.png?v=1669863100);
          background-size: cover;
          margin-right: 5px;
          padding-right: 10x;
          transform: translateY(1px);
     }
</style>

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team