Desktop Mega Menu — độ rộng, điểm chuyển và cột

Bạn tìm các cài đặt này tại Configure › Display on desktop › For desktop only. Phần này chỉ có trên Desktop Mega Menu, dùng để chỉnh độ rộng thanh menu, chọn lúc nào menu đổi sang bản điện thoại và chỉnh kích thước bảng thả xuống.

Chỉnh thanh menu và bảng thả xuống

yourshop.com

STORE

ClothingT-shirtsHoodiesJacketsPantsShoesSneakersBootsSandalsSlippersAccessoriesBagsHatsSocksBeltsNew season2Bảng thả xuống

Trong app, các thẻ xếp từ trên xuống theo thứ tự: Menu bar width → Mobile switch breakpoint → Menu overflow navigation → Multi-column submenu → Single-column submenu → Advanced.

Cài đặt này quyết định thanh menu cấp 1 rộng bao nhiêu bên trong khung nét đứt nơi bạn đặt menu.

Lựa chọn	Kết quả trên web
Auto	Đi theo theme. Ở một số trang, thanh menu có thể hẹp hơn
Fill container	Thanh menu trải kín toàn bộ khung chứa trên mọi trang và mọi cỡ màn hình

Mặc định là Auto.
Nếu bạn nhập một menu có sẵn độ rộng cố định tính bằng px từ nơi khác vào, app sẽ báo “Custom width in use” và cả hai nút trên đều không sáng. Bạn chỉ cần bấm chọn Auto hoặc Fill container để bỏ độ rộng cũ đó.

Mobile switch breakpoint

Bạn điền số vào ô Breakpoint (px). Khi màn hình người xem hẹp hơn con số này, menu máy tính sẽ tự đổi sang bản điện thoại.
Mặc định là 768, thấp nhất là 200.
Nếu bạn muốn giữ menu máy tính trên cả những màn hình hẹp hơn, hãy giảm số này xuống. Khi giảm số, bạn nên bật thêm Menu overflow navigation ngay bên dưới để các mục menu không bị rớt xuống dòng.

Menu overflow navigation

Đánh dấu vào ô Show navigation arrows when menu overflows để giữ toàn bộ mục menu nằm gọn trên một hàng khi không đủ chỗ. Phần bị khuất sẽ có hai nút mũi tên ở hai đầu để khách bấm trượt qua xem tiếp.
Mặc định ô này tắt.
Khi bạn bật lên, app sẽ hiện thêm hai ô chỉnh màu cho nút mũi tên:

Ô cài đặt	Mặc định
Button background color	`#7777771A`
Arrow icon color	`#777777B8`

Màu nền nút mũi tên (Button background color)

Ô màu bên trái, trong thẻ Menu overflow navigation, chỉ hiện khi bạn bật Show navigation arrows when menu overflows.

Mặc định: #7777771A (xám nhạt, hơi trong suốt).
Trên cửa hàng: đổi màu nền hai nút mũi tên ở hai đầu thanh menu cấp 1. Nếu bạn để màu mặc định, nền nút đậm lên một chút khi khách rê chuột vào; nếu bạn chọn màu riêng thì nút giữ nguyên màu đó khi rê chuột.
Chỉ có trên Desktop Mega Menu, mọi gói. Nút chỉ xuất hiện khi menu thật sự tràn khỏi một hàng.

Màu mũi tên (Arrow icon color)

Ô màu bên phải, đi cùng ô trên và cũng chỉ hiện khi đã bật mũi tên trượt.

Mặc định: #777777B8.
Trên cửa hàng: đổi màu hình mũi tên bên trong hai nút trượt. Nên chọn màu tương phản với màu nền nút để khách thấy rõ.

Multi-column submenu

Thẻ này dùng để chỉnh kích thước bảng thả xuống cho những mục menu cấp 1 chia nhiều cột.

Ô cài đặt	Tác dụng	Mặc định
Max width	Độ rộng tối đa của bảng thả xuống. Bạn để trống sẽ là `Full screen`, chọn Auto để vừa khít khung nội dung của theme, hoặc gõ một con số tính bằng px	`Full screen`
Column gap	Khoảng cách giữa các cột trong bảng, tính bằng px	`0`

Cách chọn Max width cho đẹp theo gợi ý trong app:

Bảng có 2–3 cột: nên gõ độ rộng cố định, khoảng 520 cho 2 cột và 780 cho 3 cột. Với độ rộng dưới 980px, bảng sẽ thả thẳng từ mép trái của mục menu cấp 1 xuống.
Bảng từ 4 cột trở lên: nên để Full screen, hoặc chọn Auto cho bằng độ rộng nội dung cửa hàng.

Cài đặt ở đây áp dụng chung cho toàn bộ menu. Nếu bạn muốn chỉnh riêng cho một mục nào đó, hãy bấm vào mục menu cấp 1 đó rồi mở Multi-column layout › Dropdown width.

Độ rộng tối đa bảng nhiều cột (Max width)

Ô nhập bên trái trong thẻ Multi-column submenu (Configure › Display on desktop › For desktop only). Biểu tượng (i) cạnh nhãn mở sơ đồ giải thích nhanh.

Giá trị: để trống = Full screen; gõ auto = bám khung nội dung của theme; hoặc gõ một số px. Mặc định để trống.
Áp cho: Desktop Mega Menu, các mục cấp 1 đang bật Multi-column layout. Mục nào đặt Dropdown width riêng thì mục đó thắng.
Trên cửa hàng: bảng thả xuống của mục nhiều cột rộng đúng bằng số bạn đặt. Số dưới 980 thì bảng thành khung hẹp thả ngay mép trái của mục cấp 1. Màn hình khách hẹp hơn con số bạn đặt thì bảng tự quay về Full screen.
Gói: mọi gói. Giống nhau trên Shopify, Wix và website khác.

Khoảng cách giữa các cột (Column gap)

Ô nhập bên phải ô Max width, tính bằng px.

Mặc định: để trống, tức 0 — các cột sát nhau.
Áp cho: Desktop Mega Menu, bảng nhiều cột.
Trên cửa hàng: đặt số lớn hơn 0 thì giữa các cột có thêm khe trống đúng số px đó. Menu cũ chưa đặt ô này vẫn giữ khoảng cách 0 như trước.
Gói: mọi gói.

Single-column submenu

Thẻ này chỉnh kích thước bảng thả xuống cho các mục menu cấp 1 chỉ có một cột đơn. Các mục chia nhiều cột sẽ đi theo thẻ Multi-column submenu ở trên.

Ô cài đặt	Tác dụng	Mặc định
Width	Độ rộng của bảng, tính bằng px	`360`
Max height	Chiều cao tối đa tính bằng px. Nếu danh sách mục con dài hơn mức này, bảng sẽ hiện thanh cuộn dọc	`No limit` — không giới hạn

Độ rộng bảng một cột (Width)

Ô nhập bên trái trong thẻ Single-column submenu, tính bằng px.

Mặc định cho menu mới: 360.
Áp cho: Desktop Mega Menu, bảng thả xuống của mục cấp 1 chỉ có một cột (cả bảng cấp 3 thả ra từ đó). Thẻ này chỉ hiện khi bạn chọn Desktop Mega Menu.
Trên cửa hàng: bảng con rộng đúng số px bạn nhập.
Gói: mọi gói.

Chiều cao tối đa bảng một cột (Max height)

Ô nhập bên phải ô Width, tính bằng px. Biểu tượng (i) cạnh nhãn giải thích ngắn.

Mặc định: để trống (No limit, không giới hạn).
Áp cho: Desktop Mega Menu, bảng thả xuống cấp 2.
Trên cửa hàng: danh sách mục con dài hơn số px này thì bảng giữ nguyên chiều cao và hiện thanh cuộn dọc bên trong. Để trống thì bảng cao theo số mục.
Gói: mọi gói.

Ô này nằm bên trong thẻ Advanced, dùng để căn lề các mục trên thanh menu.

Lựa chọn	Kết quả trên web
Auto	Giữ nguyên bố cục hiện tại
Left · Center · Right	Thanh menu trải kín khung chứa và dồn các mục menu về bên trái, ra giữa hoặc sang phải

Mặc định là Auto.

Tóm tắt nhanh các cài đặt

Ô trong app	Giá trị	Mặc định
Menu bar width	Auto · Fill container	Auto
Breakpoint (px)	số từ `200` trở lên	`768`
Show navigation arrows when menu overflows	bật hoặc tắt	Tắt
Button background color · Arrow icon color	mã màu	`#7777771A` · `#777777B8`
Max width — bảng nhiều cột	`Full screen` · Auto · số px	`Full screen`
Column gap	số px	`0`
Width — bảng một cột	số px	`360`
Max height	số px	`No limit` — không giới hạn
Menu bar alignment	Auto · Left · Center · Right	Auto

Các cài đặt này giống hệt nhau trên Shopify, Wix và các nền tảng web khác. Tất cả các gói đều dùng được đầy đủ, không có ô nào bị khóa.