Add SVG to ADD TO CART button - Dawn Theme

[Sabrii2]

 

Hello everyone i want to add the icon bag to my add to cart button. I have Dawn Theme v10. Please help!

Greetss

[Guleria]

Hello @Sabrii2 ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open  icon-cart.liquid and icon-cart-empty.liquid under Snippets 
a) icon-cart-empty.liquid In this file add svg when your cart is blank 
b) icon-cart.liquid In this file add svg when your cart have value in it.

Thanks

[Sabrii2]

Hello Guleria! Thanks for your reply. Does this add a icon to my add to cart button like the picture i posted? 

Greets

[Guleria]

  Please ignore my reply. It's incorrect.
I'll post the corrections in a few minutes.   

[Guleria · Accepted solution]

1) Edit buy-buttons.liquid, you can find this file under Snippets
Now here search for 

{{ 'products.product.add_to_cart' | t }}

and replace it with this code

{%- liquid  render 'icon-cart'  -%} 
 <p>{{ 'products.product.add_to_cart' | t }}</p>

2) Open your base.css file and paste the following code below: 

.product-form__submit span{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.product-form__submit span svg{
    width: 30px;
    margin: 2px 4px 0 0; 
}

Thanks

[Sabrii2]

It worked! Thank you very much!

Greeetss

[Sindiso]

I appreciate the resolution provided. It functions as intended when the product page initially loads. Nevertheless, once I select an alternative product variation after the page has already loaded, the cart icon vanishes from the "Add to cart" button. Are you aware of the reason behind this occurrence?

[Guleria]

It needs a callback function or we can say we have to check the existing JS to make it work.

[Chris15326]

Hey! Thanks a lot for the code! Could you actually show an example of that callback function? I tried it myself, but it always ends up wiping the button from everything that was inside of it. 

[Timbery]

Hi @Chris15326 and @Guleria,

I am having the same issue, when variant is being selected it erases the cart icon from the button. Did you find a solution for this?

Thanks!

[Veluxe]

Ok, so we both had the exact same problem. @Sindiso If you're still alive and haven't quit Shopify yet, then I've got the solution. 

First, put the cart icon into it's own snippet folder (if it's not there already).  Go into code editor, open snippets, and if 'icon-cart' doesn't exist, just create it and do this:

<svg class="icon icon-cart" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
<path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"></path>
</svg>

Below is your own code. So now, instead of doing this:

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
<span>
<svg class="icon icon-cart" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
<path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"></path>
</svg>
<p>Add to cart</p>
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>

 You can do this:

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
<span>
{%- render 'icon-cart' -%}
Add to cart
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>

 Both have the exact same effect, but the second one is more efficient, as now you can use it in multiple instances, as I will later show you how to do.

From hereon we can expand: give both the text and the icon a class. *Yes, I removed <p>, because it was useless. If you wanna know why, go search it up.*

Change it from this:

<span>
{%- render 'icon-cart' -%}
Add to cart
</span>

To this:

<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Now we can adjust the properties through CSS. You may have done this already, but since your button looks like this...

You probably should make some adjustments🤷‍

 Anyways, you add this into section-main-product.css:

.icon-class__container {
width: 40px;
height: 40px;
}

.product-form__submit--content {
justify-content: center;
align-items: center;
display: flex;
}

And now, it should look something like this:

 The problem still remains though, and I have a solution. I'll proceed to break it down.

First, add another button beforehand like this:

<span class="product-form__submit--content icon-class__container">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Adding the space in the middle for class="product-form__submit--content icon-class__container" combines the properties of both classes for the icon (whereas before it would just be one). If you have braincells and an eyeball, you would probably think that something's off. Because now, it looks like this:

And then, once you start selecting variants, now it looks like this:

You see, Shopify is very weird. It targets the first icon, but not the second. Even when it's invisible. I don't know why, but that's how it works.
So knowing this, you can now simply make the first one invisible. Like this: 

<span class="product-form__submit--content icon-class__container" style="visibility: hidden;">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

So now, it will permanently look wonky:

But remember, the cart-icon has a width of 40px. So all we need to do is to reverse that change, as it has pushed us 40px to the right. We do this by moving left.

<span class="product-form__submit--content icon-class__container" style="visibility: hidden;">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content" style="margin-left: -40px;">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Now, it should go back to permanantly looking like this. Hooray!

[ogikc]

Thanks for this solution. I wanted to ask if you can post a similar solution where we can use our own image from the shopify (files) section? Basically I wanted to add a secure shield png icon before the (Add To Cart) text. Here is the example.
Regards

https://ibb.co/pKwVBNy 

[Guleria]

That needs more customization. We need to create an option and then have to call it dynamically. If you need me to implement it you can drop an email to discuss further.