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
undefined<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
undefined<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
undefined<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
Thank you!