Articles on: Online Store (Website)

Add / Change the Add to Cart icon

In this article :
  1. Add icon for Add To Cart button
  2. Change icon for Add To Cart button


  1. 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

Was this article helpful?

Share your feedback

Cancel

Thank you!