Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Add SVG to ADD TO CART button

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
5625 1262 1292

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
5625 1262 1292

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
5625 1262 1292

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
5625 1262 1292

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