> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 【官網設計】加入購物車彈窗

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/6ygp55so5ywo6yoo5pa55qgi_styv8u.png)

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

---

# 目錄：

[功能效果](#3-5yqf6io95pwi5p6c)

[如何關閉加入購物車彈窗](#3-5aac5l2v6zec6zaj5yqg5ywl6lo854mp6luk5b2i56qx)

[如何開啟加入購物車彈窗](#3-5aac5l2v6zal5zwf5yqg5ywl6lo854mp6luk5b2i56qx)


---

### 功能效果

###### **電腦版**


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/new-add-to-cart-modal-pc_1yns31l.gif)


###### **手機版**


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/new-add-to-cart-modal-phone_66zegl.gif)

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

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

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1aqszfz.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1fm25pz.png)

---

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

* 商品有多規格

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

 **點擊 ➕ 加入購物車 ：**

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

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

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_8iu23s.png)


---

### 如何關閉加入購物車彈窗

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

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

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

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



![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_k77xwa.png)



---

### 如何開啟加入購物車彈窗

| 如果你的 theme.liquid 文件中沒有客製化程式碼，你可以直接重設該檔案，以啟用加入購物車彈窗功能

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

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

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

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



![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_11wbnos.png)

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

4.1 移除從  

```
window.variantStrings = {
```

   到  

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

的代碼


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1aomnby.png)


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' }}`,
    }
```


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_3etsgs.png)