加入購物車彈窗（Add to Cart Modal） 是當顧客在商品分類頁、商品列表頁等點擊「加入購物車」按鈕時所跳出的購物車視窗。此彈窗可讓顧客即時查看已加入的商品內容，無需離開當前頁面，進一步提升購物流程的順暢度與使用體驗。

目錄：

功能效果

如何關閉加入購物車彈窗

如何開啟加入購物車彈窗

功能效果

電腦版

手機版

購物車頁面內可編輯和更新購物車

購物車頁面將會看到商品旁的【編輯】按鈕

點擊【編輯】按鈕可編輯想要購買的商品數量、更換規格、更換商品自訂資料等等

加入購物車彈窗僅會在以下情況出現：

• 商品有多規格

• 商品有設定進階規格選項擴充（Product property 擴充）

點擊 ➕ 加入購物車 ：

• 商品有規格或設定進階規格選項擴充時 → 會顯示加入購物車彈窗

• 商品沒有規格或設定進階規格選項擴充時 → 會直接加入購物車

如何關閉加入購物車彈窗

如果你不想在官網開啟加入購物車彈窗，你可參考以下步驟移除代碼

1. 前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → theme.liquid 文件

2. 搜尋 {% app_snippet 'global/body_end' %}

3. 移除 {% include 'product-quickview-modal' %}

如何開啟加入購物車彈窗

如果你想在官網開啟加入購物車彈窗，你可參考以下步驟加入代碼

1. 前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → theme.liquid 文件

2. 搜尋 {% app_snippet 'global/body_end' %}

3. 於 {% app_snippet 'global/body_end' %} 上方加入 {% include 'product-quickview-modal' %}

4. 如果你使用的主題是新版主題（Aroma 與其後發佈之主題），你需要額外執行以下動作 （舊版主題 （Candy 或之前發佈之主題）可忽略此步驟）

4.1 移除從

window.variantStrings = {

到

shareSuccess: `{{ 'general.social.copied_success_message' | t }}`,
    }  

的代碼

4.2 並用以下代碼代替

window.variantStrings = {
      addToCart: `{{ 'products.product.add_to_cart' | t }}`,
      updateCart: `{{ 'cart.general.update' | t }}`,
      soldOut: `{{ 'products.product.sold_out' | t }}`,
      unavailable: `{{ 'products.product.unavailable' | t }}`,
    }

    window.accessibilityStrings = {
      shareSuccess: `{{ 'general.social.copied_success_message' | t }}`,
    }
    
    window.promotionStrings = {
      title: `{{ 'products.product.promotion' | t }}`,
    }
    
    window.productSettings = {
      variantOptionsDisplay: `{{ settings.sections.main-product.settings.variant_options_display | _default: 'radio' }}`,
    }

更新時間： 08/07/2025