Khi bạn bấm vào một mục menu ở bước Build Menu, bảng Edit item sẽ mở ra. Kéo xuống khối Style, bạn sẽ thấy các ô chỉnh bố cục: cách xếp icon và chữ, độ rộng và vị trí đứng của mục đó.
Mỗi ô ở đây chỉ tác động lên đúng mục bạn đang mở. Nếu muốn đổi bố cục cho cả menu, bạn chuyển sang bước Design (xem Chỉnh kiểu menu chính).
Tìm và bật các ô bố cục ở đâu?
Trong khối Style, mỗi cài đặt bố cục hiện thành một thẻ riêng. Ban đầu, chỉ những ô đang khác mặc định mới hiện ra.
Nếu chưa thấy ô cần chỉnh, bạn bấm nút Customize, gõ tên ô vào thanh Search a setting… rồi bấm chọn để thêm thẻ. Muốn trả một ô về mặc định, bạn bấm dấu ✕ ở góc thẻ đó.
| Ô cài đặt | Tác dụng | Mặc định |
|---|---|---|
| Display layout | Cách xếp icon/ảnh và chữ trong mục | Automatic |
| Width layout | Độ rộng của mục trên hàng | Automatic |
| Width fix (px) | Độ rộng cố định bằng px, khi chọn “Enter a fixed width” | Trống |
| Position | Đẩy mục ra giữa, sang phải hoặc sang trái, khi dùng độ rộng cố định hoặc ôm nội dung | Automatic |
| Size (px) / Height (px) | Chiều cao của mục (Blank space, Card, Custom HTML) | Tuỳ loại |
| Margin (px) | Khoảng trống bên ngoài mục | 0 |
| Align | Căn nội dung sang trái, giữa hoặc phải | Automatic |
| Text position | Đặt chữ ở trên, giữa hay dưới thẻ (chỉ Card) | Bottom |
Hầu hết các ô này dùng chung cho cả sáu loại menu (riêng Width layout và Width fix (px) không có ở Tab Bar và Floating Button). Một mục có những ô nào sẽ phụ thuộc vào loại mục bạn chọn.
Xếp vị trí icon và chữ (Display layout)
Display layout
Nằm trong Edit item, khối Style, là một hàng ô hình nhỏ. Ô Display layout quyết định icon (hoặc ảnh) nằm ở đâu so với chữ trong một mục. Bạn bấm chọn trực tiếp trên các ô hình nhỏ; rê chuột vào từng ô để xem tên kiểu xếp. Tên kiểu đang chọn sẽ hiện ngay cạnh nhãn Display layout.
| Lựa chọn | Hiển thị trên menu |
|---|---|
| Automatic | Dùng cách sắp xếp mặc định của cả menu |
| Top down | Icon ở trên, chữ ở dưới |
| Left right | Icon bên trái, chữ bên phải |
| Down top | Chữ ở trên, icon ở dưới |
| Right left | Chữ bên trái, icon bên phải |
| Icon/image only | Chỉ hiện icon hoặc ảnh, ẩn chữ |
| Text only | Chỉ hiện chữ |
| Blank | Không hiện nội dung |
- Lựa chọn: bấm một trong các ô hình ở bảng trên, từ Automatic đến Blank.
- Mặc định cho menu mới: Automatic.
- Áp cho: cả 6 loại menu, mọi cấp, mọi gói. Chỉ có ở mục Icon + image + text, Big image + text, Card, Tab. Không có ở Group title, Blank space, Line, Image banner, Custom HTML.
- Khách thấy gì: ở Automatic, mục tự quyết theo nội dung: có icon hoặc ảnh thì xếp theo cách của menu, không có thì chỉ hiện chữ; mục không có chữ thì chỉ hiện icon/ảnh. Riêng Card mà có icon hoặc ảnh thì xếp icon bên trái, chữ bên phải; Card không có icon hay ảnh thì chỉ hiện chữ (dù bạn chọn kiểu nào). Khi bạn chọn một kiểu cụ thể thì mục giữ đúng kiểu đó, không tự đổi nữa.
- Khi nào nên chỉnh: khi bạn muốn một mục trông khác các mục còn lại, ví dụ mục Cart chỉ hiện icon trong khi các mục khác có cả chữ.
Chỉnh độ rộng của mục (Width layout)
Width layout
Nằm trong Edit item, khối Style. Ô Width layout quyết định mục chiếm bao nhiêu phần chiều ngang trên hàng của nó.
| Lựa chọn | Cách hoạt động |
|---|---|
| Automatic | Tự co giãn theo menu (mặc định) |
| Grid 12 columns: 1/12 đến 12/12 | Mục chiếm n phần trên 12 phần của hàng. Chọn 12/12 (Full width) để mục trải kín cả hàng |
| Grid 10 columns: 1/10, 2/10, 5/10, 10/10 | Lưới 10 phần của bản cũ. Bạn nên dùng lưới 12 cho các mục mới |
| Enter a fixed width (px) | Đặt độ rộng cố định theo số px nhập ở ô Width fix (px) |
| Hug content (Fit to content) | Co gọn vừa đủ với nội dung bên trong |
- Lựa chọn: một trong các kiểu ở bảng trên (hộp chọn, hoặc lưới ô lớn với cột của Desktop Mega Menu).
- Mặc định cho menu mới: Automatic.
- Áp cho: Mobile Menu, Desktop Mega Menu, Mobile Mega Menu và Icon Menu, mọi gói. Tab Bar và Floating Button không có ô này.
- Khách thấy gì: với lưới 12 hay 10 phần, mục rộng đúng phần trăm đã chọn (ví dụ 6/12 là 50% hàng). Với số px cố định, mục rộng đúng số px, các mục còn lại ở cùng hàng chia đều phần còn lại. Với Hug content, mục co lại vừa nội dung. Ở Automatic, mục cấp 1 của Mega Menu cũng co theo nội dung (giống Hug content), còn ở các menu khác mục tự co giãn theo menu.
- Khi nào nên chỉnh: khi bạn muốn chia một hàng thành các mục có độ rộng khác nhau, ví dụ hai mục mỗi mục 6/12, hoặc một mục 4/12 đi cạnh một mục 8/12.
- Cách tính các mục cùng hàng: Tổng độ rộng các mục trên một hàng nên cộng đủ 12/12, ví dụ 3/12 + 3/12 + 3/12 + 3/12 sẽ tạo ra bốn cột đều nhau.
- Riêng với cột của Desktop Mega Menu: Bảng chọn hiện dạng lưới ô lớn (12-column grid, 10-column grid (legacy), Other…) kèm nút More… để mở thêm tỉ lệ. Bạn nên dùng lưới 12. Các kiểu Automatic, lưới 10, độ rộng cố định và Hug có thể làm cột bị nhảy bố cục (xem Cột, đường kẻ và mục ghim).
- Có ở loại mục: Icon + image + text, Big image + text, Blank space, Button, Image banner, Card, Custom HTML. Không có ở Group title, Line, Tab.
Đặt độ rộng cố định và vị trí đứng (Width fix, Position)
Hai ô này bình thường sẽ ẩn, chỉ hiện ra khi lựa chọn ở Width layout cần đến chúng.
Width fix (px)
Hiện ra ngay cạnh Width layout khi bạn chọn Enter a fixed width. Bạn nhập số px muốn đặt vào ô, ví dụ 120.
- Lựa chọn: số px, không cần gõ chữ
px. - Mặc định cho menu mới: để trống.
- Áp cho: cùng loại menu và loại mục với Width layout (Mobile Menu, hai Mega Menu, Icon Menu). Chỉ có tác dụng khi Width layout là Enter a fixed width.
- Khách thấy gì: mục rộng đúng số px bạn nhập. Nếu để trống ô này thì mục không có độ rộng cố định và xử lý như Automatic.
Position hiện ra khi bạn chọn Enter a fixed width hoặc Hug content. Vì lúc này mục thường hẹp hơn hàng, bạn có thể chọn Automatic, Float to center (ra giữa), Float to right (dạt phải) hoặc Float to left (dạt trái) để đẩy mục về phía mình muốn.
Khi bạn đổi Width layout sang kiểu khác (lưới 12, lưới 10 hoặc Automatic), hai ô này sẽ tự ẩn đi.
Chỉnh chiều cao của mục (Height, Size)
Size / Height (px)
Nằm trong Edit item, khối Style. Ô chỉnh chiều cao nằm cùng một chỗ nhưng đổi tên tùy theo loại mục bạn đang mở:
| Loại mục | Tên ô | Cách hoạt động |
|---|---|---|
| Blank space | Size (px) | Chiều cao của khoảng trống |
| Card | Height (px) | Chiều cao của thẻ |
| Custom HTML | Height (px) | Chiều cao khung HTML; nếu để trống thì khung tự cao vừa nội dung |
Các loại mục khác không có ô này.
- Lựa chọn: số px, không cần gõ chữ
px. - Mặc định cho menu mới: để trống. Card để trống thì cao 200px; Custom HTML để trống thì khung cao vừa nội dung.
- Áp cho: cả 6 loại menu, mọi gói. Chỉ có ở mục Blank space, Custom HTML và Card.
- Khách thấy gì: khoảng trống, thẻ hoặc khối HTML cao đúng số px bạn nhập. Riêng Blank space đặt ở hàng cấp 1 xếp ngang (Tab Bar, Floating Button, Icon Menu, Mega Menu), số này là bề rộng của khoảng trống chứ không phải chiều cao, và các mục còn lại chia đều phần còn lại của hàng. Trong Mobile Menu (xếp dọc) thì nó là chiều cao như thường.
Đặt vị trí chữ trên thẻ Card (Text position)
Với mục kiểu Card, bạn sẽ thấy thêm ô Text position nằm ngay dưới ô Height (px). Ô này cho phép bạn đặt chữ nằm ở Top (trên), Middle (giữa) hoặc Bottom (dưới — mặc định) của thẻ.
Tạo khoảng trống bên ngoài mục (Margin)
Ô Margin (px) tạo khoảng trống bên ngoài viền mục để đẩy các mục bên cạnh ra xa (mặc định là 0). Bạn nhập số theo thứ tự gợi ý sẵn trong ô là top right bottom left (trên, phải, dưới, trái).
- Có ở loại mục: Hầu hết các loại mục, trừ Blank space, Line, Tab và các loại mục tự động.
- Nếu muốn chỉnh khoảng trống bên trong mục (Padding), bạn xem bài Giao diện riêng của một mục.
Căn lề nội dung trong mục (Align)
Ô Align dùng để căn nội dung bên trong mục sang trái, ra giữa hoặc sang phải. Mặc định ô này để Automatic (đi theo cài đặt của cả menu).
- Có ở loại mục: Icon + image + text, Big image + text, Card. Không có ở Group title, Blank space, Line, Tab, Image banner, Custom HTML.
- Với mục Card, Align dùng để căn ngang, còn muốn căn theo chiều dọc thì bạn chỉnh ở ô Text position phía trên.
Scroll direction
Ô này chỉ hiện ra khi mục có menu con. Mặc định là Automatic (các mục con xếp dọc). Chọn Horizontal thì nhóm mục con của mục này nằm trên một hàng và khách vuốt hoặc cuộn ngang để xem hết.
- Lựa chọn: Automatic, Horizontal.
- Mặc định cho menu mới: Automatic.
- Áp cho: Mobile Menu, Desktop Mega Menu và Mobile Mega Menu, ở mục cấp 1 và cấp 2 (Icon + image + text, Group title, Image banner, Tab).
- Khách thấy gì: nhóm mục con cuộn ngang thay vì xếp dọc.
Chia menu con thành nhiều cột (Desktop Mega Menu)
Hai ô này chỉ có ở mục cấp 1 của Desktop Mega Menu, trong cùng bảng Edit item. Phần chia từng cột và chọn độ rộng cho cột, bạn xem ở bài Cột, đường kẻ và mục ghim.
Multi-column layout
Là một thẻ riêng trong Edit item, thu gọn hiện chữ Single-column hoặc Multi-column kèm hình thu nhỏ. Bấm vào thẻ để mở ô tick Split menu into columns.
- Lựa chọn: ô tick bật/tắt.
- Mặc định cho menu mới: tắt (Single-column).
- Áp cho: chỉ Desktop Mega Menu, chỉ mục cấp 1 loại Icon + image + text, Big image + text hoặc Button. Mọi gói.
- Khách thấy gì: khi bật, rê chuột vào mục này thì menu con mở thành một bảng rộng, mỗi mục cấp 2 là một cột và các mục cấp 3 nằm trong cột đó. Khi tắt, menu con xếp thành danh sách thường. Chữ của các mục làm cột chỉ để bạn phân biệt trong app, không hiện ra cửa hàng.
Multi-column submenu width (px)
Hiện ra ngay dưới ô tick Split menu into columns, chỉ khi ô tick đó đang bật.
- Lựa chọn: số px, ví dụ
1200. Để trống thì ô hiệnInherit from Setting. - Mặc định cho menu mới: để trống.
- Áp cho: chỉ Desktop Mega Menu, mục cấp 1 đã bật Multi-column layout. Mọi gói.
- Khách thấy gì: bảng nhiều cột của riêng mục này rộng đúng số px bạn nhập. Để trống thì bảng lấy theo độ rộng tối đa chung của menu (Display on desktop › Multi-column submenu › Max width); nếu chỗ đó cũng trống thì bảng trải hết bề ngang màn hình, phần cột bên trong rộng tối đa 1440px và nằm giữa.
Loại mục nào có ô bố cục nào?
| Loại mục | Display layout | Width layout | Height | Align | Margin |
|---|---|---|---|---|---|
| Icon + image + text | ✓ | ✓ | ✓ | ✓ | |
| Big image + text | ✓ | ✓ | ✓ | ✓ | |
| Group title | ✓ | ||||
| Blank space | ✓ | ✓ | |||
| Line | |||||
| Tab | ✓ | ||||
| Image banner | ✓ | ✓ | |||
| Card | ✓ | ✓ | ✓ | ✓ | ✓ |
| Custom HTML | ✓ | ✓ | ✓ |
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 ô bố cục giống hệt Shopify.
Các ô bố cục giống hệt Shopify.