> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/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).

# Tùy chỉnh Customization Options với Custom Class

| Bài viết này hướng dẫn bạn dùng tính năng **Custom class** để chỉnh giao diện riêng cho một tùy chọn cá nhân hóa cụ thể trên trang sản phẩm.

|| Bạn sẽ cần biết một chút về code (CSS), nhưng các bước bên dưới khá dễ làm theo nên bạn đừng lo nhé.


Khi chỉnh sửa một Layer trong Artwork Editor, bạn sẽ thấy ô này:

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/image_aiej4j.png)


Như bạn có thể đã nhận thấy, với các element cùng loại, Teeinblue sẽ sử dụng cùng cấu trúc HTML và cùng class cho chúng. Bạn xem ví dụ ở hình dưới:

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1iv1h7t.png)

|| Vì vậy, nếu chỉ muốn chỉnh một tùy chọn mà không ảnh hưởng tới các tùy chọn khác, bạn hãy đặt cho nó một `custom class` riêng. Sau đó dùng class này để viết CSS áp dụng cho đúng tùy chọn đó.

Ví dụ: mình muốn làm nổi bật hai ô nhập tên của cô gái (Girl Name) và chú chó (Dog Name). Đầu tiên, mình sẽ thêm custom class cho hai layer này.

### BƯỚC 1. CHUẨN BỊ

* Thêm custom class cho layer **Dog Name**.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/image_rs4fgq.png)


* Làm tương tự với layer **Girl Name**.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/image_1iv4ii8.png)


| Bạn nên đặt tên class ngắn gọn, dễ nhớ để lúc viết CSS cho tiện.

* Thêm xong thì nhớ **Update** lại Campaign để áp dụng thay đổi. Lúc này, ô tùy chọn trên trang sản phẩm sẽ có thêm tên class bạn vừa đặt.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_dml5vs.png)

### BƯỚC 2. THÊM CSS

* Đăng nhập **Shopify Admin > Themes > Edit code**.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_5i6eqg.png)

* Mở file `theme.liquid`, nhấn `Ctrl + F` (hoặc `Command + F` trên Mac) để tìm thẻ `</head>`. Dán đoạn code sau ngay phía trên thẻ `</head>`:

```
{{ 'teeinblue-custom.css' | asset_url | stylesheet_tag }}
```

| Đoạn code này giúp theme đọc được file `teeinblue-custom.css` trong thư mục `Assets`. Bạn có thể đặt tên file khác tùy ý, miễn là tên trong đoạn code và tên file giống nhau.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_161ozu4.png)

* Trong thư mục `Assets`, tạo một file CSS mới và đặt tên là `teeinblue-custom.css`.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_veb6c5.png)

* Giờ bạn có thể viết CSS để chỉnh các ô này theo ý mình.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1a9i2wk.png)

|| Đây chỉ là vài dòng CSS đơn giản để minh họa. Với một số thuộc tính, bạn có thể phải thêm `!important` thì CSS mới có tác dụng.

* Mở trang sản phẩm để xem kết quả.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_7ei3l7.png)


| Xong rồi! Hai ô nhập tên đã có style riêng, còn tiêu đề của các tùy chọn khác vẫn giữ nguyên.