Khung icon và hộp bao quanh của một mục

Mỗi mục menu có thể có hai lớp khung, và mỗi lớp có bộ ô riêng:

Khung quanh icon hoặc ảnh — ôm sát icon (hoặc ảnh nhỏ) của mục. Trong khối Style nó tên là Icon background, hoặc Image frame nếu mục dùng ảnh.
Hộp bao quanh cả mục (Inner box) — lớn hơn, ôm cả icon lẫn chữ của mục.

Inner boxHộp ôm cả icon và chữ

Icon background / Image frameKhung ôm sát icon hoặc ảnh

Icon / ảnhHình của mục

Hai lớp khung của một mục menu: Inner box ôm ngoài cùng, khung icon nằm bên trong

Tìm các ô này ở đâu

Ở bước Build Menu, bấm vào một mục để mở Edit item, kéo xuống khối Style, bấm Customize rồi chọn thẻ cần dùng:

Thẻ trong Customize	Nhóm	Có các ô
Icon background (mục dùng ảnh thì hiện là Image frame)	Common	Background color, Padding (px), Corner radius (px)
Icon background border & shadow	More	Border color, Border size, Shadow
Inner box	More	Background color, Border color, Border size, Corner radius (px), Shadow

‹ BackEdit item

ORUpload small image (as icon)jpg, png, svg, webp…

Basic info

TextLanguage Áo thun

Link to Auto-clean URLLanguage collections/ao-thun

Add dividerAdd badge

Sub text (optional)Language E.g. Free shipping over $50

Layout

Display layoutAUTOICON + TEXTTEXT ▸IMAGETEXT ONLY

Width layoutAutomatic

Style

Follows the menu's styleCustomizeKhối Style

Visibility

Showing under all conditionsEdit rules

Submenu

Advanced

Thẻ nào chưa thêm thì mục vẫn theo kiểu chung của menu. Cách thêm, xoá (✕) và copy kiểu sang mục khác có trong bài Giao diện riêng của một mục.

Điểm chung của cả 11 ô:

Mặc định cho menu mới: để trống, nghĩa là không có khung nào. Trên form, ô Padding và Corner radius gợi ý “Default: 0”, ô Border size gợi ý “Default: 1” — đó chỉ là chữ mờ gợi ý, chưa phải giá trị đã lưu.
Loại menu: cả 6 loại (Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu).
Cấp: mục cấp 1 và mục con cấp 2–3.
Loại mục: các thẻ này chỉ hiện ở mục dạng Icon + image + text, Big image + text và Card. Các dạng khác (Tab, Banner, Custom HTML, Line…) không có.
Gói: không ô nào bị khoá theo gói.

Khung quanh icon hoặc ảnh

Đây là khung đặt ngay quanh icon hoặc ảnh nhỏ của mục. Ví dụ: icon nằm trong ô tròn màu xanh, hay ảnh có góc bo và đổ bóng nhẹ.

Vài điều cần biết trước khi chỉnh từng ô:

Mục phải có icon hoặc ảnh thì khung mới hiện. Mục không có cả icon lẫn ảnh (mà bố cục không phải chỉ-chữ) thì cửa hàng không vẽ khung rỗng.
Nếu bố cục của mục là Text only (không icon), khung này sẽ bọc quanh chữ, giống một nhãn màu. Riêng mục Card thì không làm vậy vì thẻ đã có nền riêng.
Chỉ cần điền một ô (màu nền, bo góc, viền hay bóng) mà để trống Padding, cửa hàng tự đặt khoảng trống 2 px quanh icon để khung hiện đúng hình hộp.
Với Image frame (mục dùng ảnh), thẻ không có ô màu nền, và thẻ Icon background border & shadow cũng ẩn. Riêng mục nào đang có sẵn giá trị ở các ô đó (ví dụ đã chỉnh từ khi còn dùng icon) thì ô vẫn hiện để bạn xem và xoá.

Background color (khung icon hoặc ảnh)

Ở đâu: Edit item › Style › Icon background › Background color. Dùng để tô màu phần nền phía sau icon (hoặc ảnh).

Giá trị: chọn trên bảng màu hoặc nhập mã dạng #RRGGBB. Mặc định để trống (không tô).
Áp cho: 6 loại menu, mọi cấp, mục Icon + image + text, Big image + text và Card. Không phụ thuộc ô nào khác. Với Image frame ô này ẩn, trừ khi mục đã có màu từ trước.
Khách thấy gì: phía sau icon có một ô màu. Nếu ô còn nhỏ sát icon, hãy tăng Padding để ô thoáng ra. Khi bố cục mục là Text only, màu này tô nền ngay sau chữ — cách làm chữ trắng nổi trên nền màu như nút “Buy now”.

Padding (px) (khung icon hoặc ảnh)

Ở đâu: Edit item › Style › Icon background › Padding (px). Dùng để chừa khoảng trống giữa icon và mép khung của nó.

Giá trị: số px. Có thể nhập 1, 2 hoặc 4 số và tách số cho điện thoại và máy tính theo cách như các ô khoảng cách khác — xem Cách nhập số vào ô khoảng cách. Mặc định để trống; nếu bạn đã đặt nền, viền, bo góc hoặc bóng mà để trống ô này, cửa hàng dùng 2 px.
Áp cho: như phần chung ở đầu bài (6 loại menu, mọi cấp, 3 dạng mục).
Khách thấy gì: số càng lớn thì khung quanh icon càng to, icon nhìn như nằm giữa một ô rộng. Số bằng 0 thì khung ôm sát icon.

Corner radius (px) (khung icon hoặc ảnh)

Ở đâu: Edit item › Style › Icon background › Corner radius (px). Dùng để bo tròn góc của khung icon, hoặc bo góc ảnh nhỏ.

Giá trị: số px, mặc định để trống (góc vuông). Số càng lớn góc càng tròn; để khung thành hình tròn hoàn toàn thì đặt số lớn hơn nửa cạnh khung.
Áp cho: như phần chung; với mục dùng ảnh ô này nằm trong thẻ Image frame.
Khách thấy gì: góc khung tròn dần. Ảnh nằm trong khung cũng bị cắt theo góc bo, nên ảnh vuông có thể thành ảnh tròn. Khi bố cục mục là Text only, chỉ khung bọc chữ được bo, chữ không bị cắt.

Border color (khung icon hoặc ảnh)

Ở đâu: Edit item › Style › Icon background border & shadow › Border color. Dùng để chọn màu viền của khung icon.

Giá trị: bảng màu hoặc #RRGGBB, mặc định để trống.
Áp cho: như phần chung. Với Image frame, cả thẻ này ẩn trừ khi mục đã có giá trị.
Khách thấy gì: khung icon có đường viền theo màu này. Nếu bạn chọn màu mà chưa nhập Border size, viền dày 1 px.

Border size (khung icon hoặc ảnh)

Ở đâu: Edit item › Style › Icon background border & shadow › Border size. Dùng để chọn độ dày viền của khung icon, tính bằng px.

Giá trị: số px, mặc định để trống (không viền); ô gợi ý “Default: 1”.
Áp cho: như phần chung.
Khách thấy gì: viền khung icon dày hơn khi số lớn hơn. Nếu bạn nhập độ dày mà chưa chọn Border color, viền hiện màu đen.

Shadow (khung icon hoặc ảnh)

Ở đâu: Edit item › Style › Icon background border & shadow › Shadow. Dùng để đổ bóng cho khung icon.

Lựa chọn: Not used (không bóng, mặc định) · Light (bóng sát, nhẹ) · Medium (bóng vừa) · Strong (bóng đậm, toả rộng). Chỉ có 3 mức có sẵn, không nhập giá trị tuỳ ý.
Áp cho: như phần chung.
Khách thấy gì: khung icon nổi lên khỏi nền. Bóng chỉ nhìn rõ khi khung có nền khác màu nền mục — nên đặt kèm Background color.

Hộp bao quanh cả mục (Inner box)

Inner box là hộp lớn ôm cả icon và chữ của một mục, nằm trong phần nền của mục. Dùng khi bạn muốn mục trông như một nút bấm hoặc một viên thuốc có nền, viền và bóng riêng — khác với nền của cả menu.

Nếu mục chỉ có chữ (Text only) thì hộp này nhìn như ôm quanh chữ.
Với mục Card, Inner box là dải màu hoặc lớp phủ chữ của thẻ, nên thẻ này lúc nào cũng hiện trong Style của Card. Khi bạn đặt màu đặc cho dải này mà chưa chọn màu chữ, chữ của thẻ tự đổi sang tối hoặc sáng cho dễ đọc.
Khoảng trống bên trong hộp là ô Padding riêng trong khối Style, không nằm trong thẻ Inner box — xem Giao diện riêng của một mục.

Background color (Inner box)

Ở đâu: Edit item › Style › Inner box › Background color. Dùng để tô nền cả hộp bao quanh mục.

Giá trị: bảng màu hoặc #RRGGBB, mặc định để trống.
Áp cho: 6 loại menu, mọi cấp, mục Icon + image + text, Big image + text và Card.
Khách thấy gì: mục có một khối màu nằm trên nền chung của menu, chữ và icon nằm trên khối đó. Khác với Background (nền của cả dòng/ô mục) và khác với Background color của khung icon (chỉ tô quanh icon).

Border color (Inner box)

Ở đâu: Edit item › Style › Inner box › Border color. Dùng để chọn màu viền của hộp.

Giá trị: bảng màu hoặc #RRGGBB, mặc định để trống.
Áp cho: như phần chung của Inner box.
Khách thấy gì: hộp có viền màu này. Chọn màu mà chưa nhập Border size thì viền dày 1 px.

Border size (Inner box)

Ở đâu: Edit item › Style › Inner box › Border size. Dùng để chọn độ dày viền của hộp, tính bằng px.

Giá trị: số px, mặc định để trống (không viền); ô gợi ý “Default: 1”.
Áp cho: như phần chung của Inner box.
Khách thấy gì: viền hộp dày lên theo số bạn nhập. Nếu chưa chọn Border color, viền hiện màu đen.

Corner radius (px) (Inner box)

Ở đâu: Edit item › Style › Inner box › Corner radius (px). Dùng để bo góc hộp.

Giá trị: số px, mặc định để trống (góc vuông).
Áp cho: như phần chung của Inner box.
Khách thấy gì: hộp bao quanh mục có góc tròn; số lớn cho dạng viên thuốc. Cần có nền hoặc viền thì mới nhìn thấy góc bo.

Shadow (Inner box)

Ở đâu: Edit item › Style › Inner box › Shadow. Dùng để đổ bóng cho hộp.

Lựa chọn: Not used (mặc định) · Light · Medium · Strong — cùng 3 mức bóng như bóng của khung icon.
Áp cho: như phần chung của Inner box.
Khách thấy gì: cả mục nổi lên khỏi nền menu như một thẻ nhỏ. Nên đặt kèm Background color để bóng nhìn rõ.

Nền tảng khác

Các bước ở trên dành cho Shopify — đây là cách mặc định.