Để mở 4 ô này, bấm vào một mục trong cây menu để mở bảng Edit item, kéo xuống khối More ở cuối bảng rồi bấm See more. Hai nhóm hiện ra: Motion (có ô Animation) và Advanced (có ô Class names (reusable), CSS và Attributes). Mỗi ô là một dòng “Tên: giá trị”; bấm vào dòng hoặc nút bút chì để sửa. Nếu mục của bạn đã có ô nào khác mặc định, nhóm này tự mở sẵn.
Đây là phần nâng cao. Nếu bạn chỉ muốn đổi màu hay cỡ chữ, hãy xem bài Giao diện riêng của một mục.
Mọi cài đặt ở đây chỉ áp dụng cho đúng mục menu bạn đang mở. Nếu muốn viết CSS cho toàn bộ menu, bạn xem bài CSS riêng, class dùng lại và font chữ.
Thêm hiệu ứng chuyển động cho mục
Animation
Ở đâu: Edit item → More → See more → nhóm Motion → ô Animation. Ô tạo hiệu ứng chuyển động cho đúng mục này khi nó được vẽ ra trên cửa hàng.
Lựa chọn / mặc định: một danh sách chọn. Mặc định là Inherit (trống), nghĩa là mục không có hiệu ứng riêng.
Áp cho: cả sáu loại menu, mọi cấp mục, mọi gói. Loại mục có ô này: Icon + image + text, Big image + text, Image banner, Card, Custom HTML. Không có ở Group title, Blank space, Line, Tab.
Khách thấy gì khi đổi ô này: hiệu ứng bạn chọn được gắn vào phần bên trong của mục, nên mục chuyển động theo kiểu đó khi hiện ra. Để trống thì mục đứng yên.
- Danh sách hiệu ứng có sẵn được chia theo nhóm: Popular (bounce, flash, pulse, rubberBand, shakeX, shakeY, headShake, swing, tada, wobble, jello, heartBeat) và các nhóm hiệu ứng vào/ra như Back, Bouncing, Fading… Bạn bấm link Demo ngay cạnh nhãn để mở trang animate.style và xem thử từng kiểu.
- Khi nào nên dùng: khi bạn muốn thu hút mắt khách vào một mục quan trọng, chẳng hạn làm mục Sale rung nhẹ. Bạn chỉ nên dùng ít thôi, vì nhiều mục cùng chuyển động sẽ gây rối mắt.
Nếu bạn muốn chỉnh hiệu ứng khi mở bảng con, hãy vào Submenu → Animation trong bài Giao diện riêng của một mục. Còn hiệu ứng chung của cả menu nằm ở bài Mũi tên và hiệu ứng.
Gắn class dùng lại cho nhiều mục
Class names (reusable)
Ở đâu: Edit item → More → See more → nhóm Advanced → ô Class names (reusable). Ô dùng để gắn một hoặc nhiều class vào mục menu. Các mục có cùng class sẽ dùng chung một kiểu giao diện, nên bạn chỉ cần sửa kiểu một lần là cả nhóm đổi theo.
- Cách dùng: gõ vào ô Type to suggest classes or add custom. App sẽ gợi ý các class dùng lại mà bạn đã tạo ở bước Configure, mục Reusable Classes. Bạn chọn một gợi ý, hoặc tự gõ tên bất kỳ rồi bấm Enter hay dấu + để thêm. Mỗi class đã chọn sẽ hiện thành một thẻ nhỏ để bạn bấm xoá khi cần.
- Tạo class ở đâu: bạn viết kiểu cho class tại bước Configure, mục Reusable Classes (CSS), xem hướng dẫn ở bài CSS riêng, class dùng lại và font chữ. Nếu class chưa được viết kiểu ở đó thì gắn vào mục cũng chưa thay đổi gì.
- Mặc định: để trống.
- Áp cho: cả sáu loại menu, mọi cấp mục, mọi gói. Loại mục hỗ trợ: Icon + image + text, Big image + text, Group title, Image banner, Card, Custom HTML. Không có ở Blank space, Line, Tab.
- Khách thấy gì khi đổi ô này: các class bạn chọn được thêm vào khung ngoài của mục trên cửa hàng. Mục nào có class đã được viết kiểu thì mang kiểu đó; chưa viết kiểu thì nhìn không khác gì.
Viết CSS riêng cho mục
Ô CSS — tên đầy đủ là Internal Stylesheet / CSS — cho phép bạn viết CSS chỉ áp dụng lên đúng mục đang mở.
- Cách viết: dùng ký hiệu
&để chỉ chính mục này, ví dụ&{color:red}. Muốn chỉnh các phần bên trong mục thì bạn dùng.inner,.name,.icon, ví dụ.inner{padding:4px}. Bạn viết thẳng nhưcolor:red;thì app cũng tự áp dụng cho mục. - Phóng to khung gõ: bấm nút phóng to Expand editor ở góc ô để mở khung soạn thảo lớn hơn.
- Tra cứu tên các phần trong mục: xem bài Tra cứu tên class CSS của menu.
- Mặc định: để trống. Mục tạo từ mẫu có sẵn thường đi kèm một đoạn CSS; nếu chưa rõ tác dụng, bạn nên giữ nguyên.
- Loại mục hỗ trợ: Icon + image + text, Big image + text, Group title, Image banner, Card, Custom HTML. Không có ở Blank space, Line, Tab.
CSS sai có thể làm mục lệch hoặc biến mất. Sau khi lưu, xem lại trên cửa hàng bằng Test trước khi publish. Chưa chắc, hãy hỏi đội hỗ trợ.
Thêm thuộc tính HTML cho mục
Attributes
Ở đâu: Edit item → More → See more → nhóm Advanced → ô Attributes. Ô giúp bạn gắn thêm thuộc tính HTML vào mục menu. Bạn chỉ cần dùng ô này khi một đoạn JavaScript hoặc CSS bên ngoài — ví dụ của theme hoặc của app khác — cần tìm mục menu theo thuộc tính.
- Cách nhập: gõ theo dạng
tên=giá trị. Nếu nhập nhiều thuộc tính, bạn ngăn cách bằng dấu chấm phẩy;hoặc dấu phẩy,, ví dụattr1=value1;attr2=value2. - Mặc định: để trống.
- Áp cho: cả sáu loại menu, mọi cấp mục, mọi gói. Loại mục hỗ trợ: Icon + image + text, Big image + text, Card, Custom HTML. Không có ở Group title, Image banner, Blank space, Line, Tab.
- Tên thuộc tính chỉ gồm chữ, số, dấu
_và-; giá trị không được có dấu cách. Cặp nào sai dạng thì bị bỏ qua, các cặp đúng vẫn được gắn. - Khách thấy gì khi đổi ô này: không thấy gì thay đổi bằng mắt. Các thuộc tính được gắn vào khung ngoài của mục trong mã trang, để theme hoặc app khác tìm được mục.
Tóm tắt nhanh các ô
| Ô | Dùng để | Mặc định |
|---|---|---|
| Animation | Tạo hiệu ứng khi mục xuất hiện | Inherit (không có) |
| Class names (reusable) | Gắn class dùng lại | Trống |
| Internal Stylesheet / CSS | Viết CSS riêng cho mục này (&{…}) |
Trống |
| Attributes | Gắn thuộc tính HTML tên=giá trị |
Trống |
Cả sáu loại menu đều có các ô này, nhưng mỗi loại mục chỉ hiển thị một số ô nhất định. Bạn xem chi tiết tại bài Các loại mục menu.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Các ô giống hệt Shopify.
Các ô giống hệt Shopify.