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

# 【官網設計】如何調整商品分類區塊和頁面的商品名稱和價格大小（Aroma 與其後發佈之主題）


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

| 本文僅針對新版主題（Aroma 與其後發佈之主題）

||| EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必慎重考慮及深入評估。

---

本文將說明如何編輯原始碼以更改商品分類區塊和頁面的商品名稱和價格大小。

### 於官網首頁的商品分類區塊

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

### 於商品分類頁面

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

---

# 更改商品分類區塊和頁面的商品名稱大小

1. 前往 EasyStore 後台 > 品牌官網 > 編輯原始碼 > assets > 第一個 component-card.css.


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

2. 搜尋  .card-information__text > 在下方置入 

```
font-size: 20px; 
```

你可隨意調整大小

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

3. 點擊儲存
---

# 更改商品分類區塊和頁面的商品價格大小

1. 前往 EasyStore 後台 > 品牌官網 > 編輯原始碼 > component-price.css 

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

2. 搜尋 `.price {`  > 調整 `font-size: 1.4rem;`

*數字越大代表字體大小越大*

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

3. 搜尋 `.price--on-sale .price-item--regular  {` > 調整  `font-size: 1.3rem;`


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

4. 點擊儲存