有關的文章: 官網設計

新增或更改加入購物車按鈕圖標(Candy 或之前發佈之主題)

⚠️ 注意事項:

此文章說明僅適用於舊版主題(Candy 或之前發佈之主題)
更換佈景主題需要重新編輯原始碼
不同佈景主題會有不同的加入購物車按鈕圖標
部分佈景主題會無加入購物車按鈕圖標
基於安全問題,我們不開放編輯結帳頁面上的加入購物車按鈕圖標

1. 新增加入購物車按鈕圖標


步驟 1 : 前往 EasyStore 後台 > 銷售管道 > 品牌官網 > 編輯原始碼 > 選擇 product.liquid 檔案。



步驟 2 :

使用WAVE,Candy,X-Froce,Lucky主題:

複製以下代碼 > 在 <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span> 的前方貼上代碼。



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




使用其他佈景主題:

複製以下代碼 > 在 <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span> 的前方貼上代碼。

<i class="icon icon-cart"></i>步驟

3 : 儲存。

之前:



之後:





更改加入購物車按鈕圖標



步驟 1 : 前往 EasyStore 後台 > 銷售管道 > 品牌官網 > 編輯原始碼 > 選擇 svg-definitions.liquid 檔案。



步驟 2 : 尋找 {% when 'cart-icon' %} > 刪除以下代碼。





步驟 3 : 複製以下代碼。




手袋圖標:

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

購物車圖標:

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

步驟 4 : 儲存


💡 注意事項 :

若您的佈景主題沒有加入購物車按鈕圖標,請先根據文章第一部去新增,之後才做以上步驟進行更改。

若不想要有任何圖標在加入購物車按鈕上,直接移除以下代碼 > 儲存即可。





3. 移除商品頁面浮動的加入購物車按鈕








步驟 1: 前往 EasyStore 後台 > 銷售管道 > 品牌官網 > 編輯原始碼 > 選擇product.liquid 檔案。



步驟 2 : 移除以下代碼。



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





步驟 3 : 儲存即完成。

更新時間: 05/03/2024

這篇說明對您有幫助嗎?

分享您的反饋

取消

感謝!