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

# 【官網設計】以範圍顯示商品價格

有關的文章： [官網設計](/zh-tw/category/5a6y57ay6kit6kii-1kvbh2w/)

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

## Candy 或之前發佈之佈景主題

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

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

  
  
*   前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → product-grid-item.liquid 文件 → 搜尋 ` product.price_varies`
  
![](https://storage.crisp.chat/users/helpdesk/website/48ec9227252a2c00/9cd20234-d52c-4bb8-a2aa-bd5a46_thvdhw.png)  
  
*   → 換成以下代碼
  

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

  
  
  
  
  
  
![](https://storage.crisp.chat/users/helpdesk/website/29091c8d7cd6a400/c7b58544-d699-465b-9439-7a0de5_1yxoe7g.png)  
  

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

  
  

## Aroma 或其後發佈之佈景主題

  
  
  
  
*   前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → price.liquid 文件 → 搜尋 ` product.price_varies` （大約 21 或 22 行）
  
  
![](https://storage.crisp.chat/users/helpdesk/website/b3157c9501edb800/a15821f7-3bfd-4510-a0c1-3b697c_c9929b.png)  
  
*   → 換成以下代碼
  

``` {% 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/a5c5a8d0a8eb2800/3287cbb7-c90d-4c47-94a8-1fe849_1u09g8d.png)  
  
  
  

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

  
  
  
  

###### 設定顯示結果：

  
  
  
![](https://storage.crisp.chat/users/helpdesk/website/5ed72fbad27c8400/2fe14bad-ce04-4878-a4e0-adc759_xttxi9.png)