> ## 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_8yjxxn.png)

若商品有設定不同的規格價格，部分主題會顯示從 xxxx 金額起，此文章將教導你如何設定價格以區間 / 範圍顯示。

---

### 商品價格顯示為「從 $XXXX 起」請參考：[教學文章](https://support.easystore.co/zh-tw/article/xxxx-19yrctc/)
---

###### 設定前：


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

###### 設定後：


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


---
# 新版主題（Aroma 或其後發佈之佈景主題）

1. 前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → price.liquid 文件 → 搜尋 `product.price_varies`  （大約 21 或 22 行）

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_xgzsyp.png)

2. → 換成以下代碼

```
{% if product.price_varies and product_template == null %}
    {{ price }} - {{ product.price_max | money: shop.money_format }}
{% else %}
    {{ price }}
{% endif %}
```

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1rons1a.png)

###### 步驟二：點擊儲存，完成！

---

# 舊版主題（Candy 或之前發佈之佈景主題）

**此步驟適用於 Candy、Wave、X-force、Fall、Maker 等等舊版佈景主題**

###### 步驟一：編輯原始碼

1. 前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → product-grid-item.liquid 文件 → 搜尋 `product.price_varies`
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_edi65p.png)

2. → 換成以下代碼
```
{% if product.price_varies %}
    {{ price }} - {{ product.price_max | money: shop.money_format }}
{% else %}
    {{ price }}
{% endif %}
```

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_11x9r6m.png)

###### 步驟二：點擊儲存，完成！

---