Bài viết này cũng có sẵn trong:

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:

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:

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.

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

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.

BƯỚC 2. THÊM CSS

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

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.

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

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

Đâ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ả.

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.

Cập nhật vào: 06/10/2026

Bài viết có hữu ích không?

Cảm ơn!