Solved

Add SVG to ADD TO CART button

JavierForero
New Member
5 0 0

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 🙂
JavierForero_0-1669854878365.png

 

Accepted Solution (1)
GemPages
Shopify Partner
5589 1261 1223

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5589 1261 1223

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
JavierForero
New Member
5 0 0

Hi there, 

Yes, here it is

https://larkwoodfurniture.com.au/

GemPages
Shopify Partner
5589 1261 1223

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
JavierForero
New Member
5 0 0

Thanks it worked!

JavierForero
New Member
5 0 0

Hi Again, 

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

JavierForero_1-1669975340226.png

 

 

 

GemPages
Shopify Partner
5589 1261 1223

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center