Add / Change the Add to Cart icon

In this article :

Add icon for Add To Cart button
Change icon for Add To Cart button

Remove floating add to cart button on product page

⚠️ Kindly take note :
Above all code editing, you will need to re-edit the code again if you switch to a new theme template
Different themes will have different Add to Cart icons.
Some themes do not have Add to Cart icon.
We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons

1. Add a bag icon for Add To Cart button

Step 1 : From EasyStore admin panel > Channels > Online Store > Edit Source > select product.liquid

Step 2 : Copy the code below and paste it in front of <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>

{% include 'svg-definitions' with 'cart-icon' %}



Step 3 : Save

Before (do not have Add to Cart icon) :



After:

2. Change icon for Add To Cart button

Step 1 : From EasyStore admin panel > Channels > Online Store > Edit Source > select svg-definitions.liquid

Step 2 : Look for {% when 'cart-icon' %} > Remove the current coding



Step 3 : Copy the code below



Bag Icon

<svg class="svg-icon" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width: 20px;height: 20px;fill: white;vertical-align: text-bottom;margin-right: 5px;"><title>cart</title><path d="M177.6,166.25,162.94,56.34a8.79,8.79,0,0,0-8.72-7.63H138A36.67,36.67,0,0,0,101.47,15H98.54A36.66,36.66,0,0,0,62.05,48.71H45.78a8.79,8.79,0,0,0-8.72,7.63L22.4,166.25a9,9,0,0,0-.07,1.16A17.61,17.61,0,0,0,39.91,185H160.09a17.61,17.61,0,0,0,17.58-17.59A9,9,0,0,0,177.6,166.25ZM98.54,32.59h2.93a19.06,19.06,0,0,1,18.8,16.12H79.73A19.07,19.07,0,0,1,98.54,32.59ZM40,167.41,53.48,66.29H61.9V79.48a8.79,8.79,0,1,0,17.58,0V66.29h41V79.48a8.79,8.79,0,1,0,17.58,0V66.29h8.43L160,167.41Z"></path></svg>

Trolley Icon

<svg class="svg-icon" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>icon-cart</title><path d="M34.68,73.28a10.61,10.61,0,1,0,10.61,10.6A10.61,10.61,0,0,0,34.68,73.28Zm0,14.14a3.54,3.54,0,1,1,3.53-3.54A3.55,3.55,0,0,1,34.68,87.42Z"/><path d="M73.57,73.28a10.61,10.61,0,1,0,10.61,10.6A10.61,10.61,0,0,0,73.57,73.28Zm0,14.14a3.54,3.54,0,1,1,3.54-3.54A3.54,3.54,0,0,1,73.57,87.42Z"/><path d="M96,16.12H19.51l-1.39-7.7s0,0,0,0A2.62,2.62,0,0,0,18,8c0-.09-.05-.19-.09-.28l-.16-.32c-.06-.1-.1-.2-.16-.29s-.13-.16-.19-.24l-.24-.29c-.07-.07-.15-.12-.22-.18a3.31,3.31,0,0,0-.3-.25c-.08-.06-.17-.09-.25-.14A2.37,2.37,0,0,0,16,5.8l-.23-.08a3.52,3.52,0,0,0-.43-.13,1.66,1.66,0,0,0-.22,0,3.91,3.91,0,0,0-.48,0H4a3.54,3.54,0,1,0,0,7.07h7.65L20.05,59A15.13,15.13,0,0,0,35,71.51H84.18a3.54,3.54,0,0,0,0-7.07H35a8.06,8.06,0,0,1-5.39-2.07L87,55a3.54,3.54,0,0,0,2.94-2.5l9.42-31.82A3.53,3.53,0,0,0,96,16.12ZM83.8,48.26,26.7,55.6,20.79,23.19H91.23Z"/></svg>

Step 4 : Save


💡 Tips :
If your theme does not have Add to Cart icon before, kindly proceed with steps for 1. Add a bag icon for Add To Cart button, then only proceed with the steps above.

If you do not want to have any icon on Add to Cart button, just remove the code > Save will do

Only these 4 themes below are available for changing the icon of Add To Cart Button:
a. Candy
b. X-FORCE
c. LUCKY
d. WAVE

3. Remove floating add to cart button on product page

Step 1: Go to EasyStore Admin > Channels > Online Store > Edit source > templates > product.liquid

Step 2 : Remove the code below

<a class="btn addToCart-btn top-addToCart-btn hide medium--hide small--hide"> {% include 'svg-definitions' with 'cart-icon' %}<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span> </a>

Step 3 : Save and done

Updated on: 11/10/2023