# Theme Settings

Tùy theo từng theme mà cách viết và sắp xếp setting có sự khác biệt phù hợp với mỗi theme.

* Quick view được viết setting tách riêng với Product page
* Có setting để khách có thể bật / tắt Custom CSS/JS
* Có setting cho Product Card, những setting trong phần này không liên quan đến Product page
* Các function được sử dụng đồng thời ở nhiều nơi thì viết setting chung để setup một lần như: Coundown, Hot stock,...
* Để tránh bị giới hạn ở file en.default.scheme.json thì sử dụng chung các biến ngôn ngữ để có thể sử dụng lại nhiều lần và thống nhất cách viết trên theme.

## Cách viết setting

* Đặt tên setting chỉ viết hoa từ đầu tiên và danh từ riêng.
* Sử dụng tên setting mô tả chức năng của setting đó. Tránh việc dùng nhiều số thứ tự trên setting:

<figure><img src="https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FaU0Ut8u4OANe0qIop8wN%2Fimage.png?alt=media&#x26;token=c7b4bbb8-f4cc-4c99-831f-9eed8b635b7b" alt=""><figcaption></figcaption></figure>

* Sử dụng ngôn ngữ trực quan, dễ hiểu cho người dùng.
* Sử dụng tiếng Anh của người Mỹ:

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FWxekjQi2FO4jHRhyBNFb%2Fimage.png?alt=media\&token=afe162fb-29a4-4fcd-bd95-ca6bb6738a22)

* Tiêu đề của section chỉ dùng một lần trên phần tên section / preset, không dùng cho các setting bên trong section.
* Tất cả các button và action đều phải bắt đầu bằng một động từ.
* Tất cả các thông số kỹ thuật phải tuân theo format chung:

<figure><img src="https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FCVagIk189viohFEoQnt7%2Fimage.png?alt=media&#x26;token=9ff85b8b-2660-4db5-b7b7-799a22db5565" alt=""><figcaption></figcaption></figure>

* Sử dụng thuật ngữ mà Shopify cho phép dùng:

<figure><img src="https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FVvwTQkyUDm0RVzsDe0T9%2Fimage.png?alt=media&#x26;token=c55ad887-eb30-4ccc-9e1d-e3e4805608c7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FWYD6aUAlSNPkddjFZTws%2Fimage.png?alt=media&#x26;token=194da066-3206-438f-9b11-f3673ad5a168" alt=""><figcaption></figcaption></figure>

* Sử dụng [icon placeholder](https://www.shopify.com/ca/partners/blog/placeholder-images?shpxid=0910ecc5-F409-47F0-495A-1F8B73C8665C) của Shopify để đối với các banner mặc định của theme.

## Multiple Layouts

Viết các setting để tùy chọn Header, Footer, Password Page, Mobile Menu, Product card.

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2F8en26N9apmaKmrU5Mexn%2Fimage.png?alt=media\&token=d008d7bb-fbfa-4718-a18c-64b7911e6e9d)

## Colors

Có hai cách viết setting cho colors: Color scheme và Color custom.

### Color Schema

Đây là cách setting và phối màu cho theme Dawn của Shopify. Mỗi section, block hay content sẽ có 3 loại setting color cơ bản gồm:

* **Foreground color**: dùng cho màu text
* **Background color**: dùng cho màu background
* **Background gradient**: dùng màu gradient cho background, trong trường hợp không nhập Background graidient thì màu

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FqD8EsY5S408TmbPU9wHA%2Fimage.png?alt=media\&token=d11288d3-7700-42aa-9286-1c6faf18022a)

Theme Dawn sẽ setup thành 5 color schema dự theo cách setting trên. Ở mỗi section, block hoặc content thì khách hàng có thể lựa chọn color schema mà mình muốn sử dụng. Các text, background, border sẽ được áp dụng theo cách phối màu này theo tỉ lệ phù hợp:

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2Fh2jYg3DcGRRvbsjQmcAw%2Fimage.png?alt=media\&token=874eadc9-8ac7-4c10-8b70-abcfecbb6cd9)

### Custom Color

Đây là cách setting phổ biến và đơn giản nhất. Mỗi setting về color sẽ riêng biệt:

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FGtocO4Lo9sY9NtR9VSZg%2Fimage.png?alt=media\&token=568602ca-61f1-4138-a49b-d8bf96b22dfa)

## Typography

* Viết setting để chọn font cho toàn theme. Cho khách có thể chọn 2-3 font có thể sử dụng được trên theme. Mỗi font sẽ được lựa chọn từ Shopify font, Google font và Normal font.

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FqCTcYZTwTAWQelKcg44l%2Fimage.png?alt=media\&token=4308ab99-098d-4387-91ab-0162689d04ec)

* Thêm các setting để điều chỉnh letter-spacing và line-height chung cho cả theme:

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FZG4TCzZTIAspkwznMI80%2Fimage.png?alt=media\&token=90b9182f-6dbf-4ec7-8138-385188961f4d)

### Heading

Chọn các setting về font-size, font-size trên mobile, font-weight, text-transform cho toàn bộ heading ở các section:

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2F16HuLu8GwmszQFnIRsll%2Fimage.png?alt=media\&token=8a3d6379-88fe-4af8-9a2d-e73bb5cdee94)

### Body

Chọn các setting về font-size, font-weight chung cho các text.

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FbnzDjYH44GZFjlDFHXxw%2Fimage.png?alt=media\&token=467641d7-b7ea-474a-976e-7f665bdb848c)

### Page Title

Chọn các setting về font-size, font-size trên mobile, font-weight, text-transform cho toàn bộ page title ở phần lớn các page (trừ product page,...)

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FKMBaO12njAQJe0hNkHpG%2Fimage.png?alt=media\&token=3042503d-a2db-4656-9d52-9bcbb115f061)

## Button Styles

Viết các setting về button chung cho theme.

* Phải có các setting để điều chỉnh về Border width, Border style, Border corner, Box shadow:

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FfDGtYg2bqzDwNZECkhtq%2Fimage.png?alt=media\&token=f262fd2c-e42a-4446-a592-8d75c08c897e)

* Thêm setting cho khách có thể chọn màu của 3-5 loại button:

![](https://3810038871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7wRGiGMySPoVEOT9Sw6O%2Fuploads%2FfikqdmLZKek6o6OBegRN%2Fimage.png?alt=media\&token=7164c4a7-c06e-4553-85f1-ed3ff3b362f4)
