Các loại mục menu

Khi bấm Add item để thêm mục vào menu, bạn chọn loại mục ở phần Choose menu item type. Loại mục quyết định mục đó hiển thị ra sao trên web và có những ô cài đặt nào.

Các loại mục hiện thành lưới ô hình nhỏ, không kèm chữ. Bạn rê chuột vào từng ô để xem mô tả ngắn. Tên các loại mục trong bài này lấy theo dòng Type ở khối More, nằm cuối bảng Edit item.

Chọn loại mục

Menu item type

• Ở đâu, để làm gì: ở bước Build Menu, bấm + ITEM (hoặc Item below / Sub-item trên thanh hiện khi rê chuột vào một mục) để mở cửa sổ Add item. Bạn chọn một mẫu trong đó, và mẫu đó quyết định loại mục. Muốn xem đúng lưới Choose menu item type, bấm Classic view ở đầu cửa sổ.
• Lựa chọn: các loại trong bài này (Icon + image + text, Big image + text, Group title, Blank space, Line, Tab, Image banner, Card, Custom HTML, Shopify menu, Menu reference, Sticky line…). Trong Classic view, Icon + image + text được chọn sẵn.
• Áp cho: cả 6 loại menu, nhưng mỗi loại menu có bộ loại mục riêng, xem bảng Loại mục nào có trong menu nào. Việc chọn loại không bị khoá theo gói. Riêng Line ở gói Starter bị khoá hai ô kiểu nét và độ dài.
• Khách thấy gì: loại mục quyết định mục vẽ ra sao trên cửa hàng (icon và chữ, ảnh lớn, tiêu đề, khoảng trống, đường kẻ, tab, banner, thẻ, HTML…) và quyết định những ô nào hiện trong bảng Edit item (xem Mỗi loại mục có những ô chỉnh nào).
• Không đổi được sau khi tạo: bảng Edit item không có chỗ đổi loại. Muốn đổi, thêm mục mới đúng loại rồi xoá mục cũ.
• Nền tảng khác: giống Shopify, trừ Shopify menu chỉ có trên Shopify.

Các loại mục cơ bản

Năm loại này luôn có sẵn trong mọi loại menu. Khi bạn mở màn thêm mục, Icon + image + text được chọn sẵn.

Loại	Dùng làm gì	Cách chỉnh & lưu ý
Icon + image + text	Mục menu thông thường gồm icon, ảnh nhỏ và tên. Khách chạm vào sẽ mở link.	Loại mặc định. Bạn xếp được icon và chữ nằm trên–dưới hoặc trái–phải, hoặc chỉ hiện icon, chỉ hiện chữ. Xem Display layout.
Big image + text	Mục có ảnh lớn làm điểm nhấn, hợp với danh mục, bộ sưu tập hoặc bài viết.	Có thể viết thêm một dòng mô tả bên dưới để khách hiểu rõ nội dung, và cắt ảnh theo tỉ lệ ở ô Image ratio.
Group title	Tiêu đề chỉ có chữ để gom các mục liên quan lại với nhau.	Giúp khách lướt mắt tìm nhanh. Không có các ô Display layout, Width layout, Align và Animation.
Blank space	Khoảng trống có chiều cao cố định để tách các mục ra.	Không chứa nội dung. Bạn chỉnh chiều cao ở ô Size (px) và đặt thêm màu nền hoặc ảnh nền nếu muốn.
Line	Đường kẻ ngang phân cách giữa các mục.	Không có chữ hay icon. Bạn chỉnh được màu, độ dày, kiểu nét liền, đứt hoặc chấm, và độ dài chạm mép hoặc thụt hai đầu.

Với Line, nếu bạn đang ở gói Starter thì hai ô kiểu nét Type và độ dài Width sẽ bị khoá.

Tab: tạo dải chuyển nội dung

Tab tạo một dải tab ngay trong menu. Bạn thêm các mục Tab cạnh nhau để gom thành nhóm; khách chạm vào từng tab để chuyển qua lại giữa các phần nội dung mà không rời khỏi menu. Loại này có ở mọi loại menu. Xem cách làm từng bước tại bài Tab, banner và card.

Image banner: đặt ảnh quảng cáo

Image banner là một tấm ảnh banner thuần: chỉ có ảnh, không chữ, không icon và không chứa mục con. Khách chạm vào banner sẽ mở link. Loại này có ở mọi loại menu. Xem hướng dẫn tại bài Tab, banner và card.

Card: tạo thẻ có nền và chữ

Card là một thẻ có nền ảnh hoặc nền màu, bên dưới đáy thẻ có icon hoặc ảnh nhỏ đi kèm chữ. Toàn bộ thẻ là một vùng chạm để mở link và không chứa mục con.

Bạn chỉnh chiều cao thẻ ở ô Height (px) và chọn vị trí chữ ở ô Text position gồm Top, Middle hoặc Bottom, mặc định là Bottom. Loại này có ở mọi loại menu. Xem thêm tại bài Tab, banner và card.

Text position

• Ở đâu, để làm gì: trong bảng Edit item của một mục Card, ngay dưới ô Height (px). Đặt khối chữ (tên mục và icon nhỏ) nằm ở phần trên, giữa hay dưới của thẻ.
• Lựa chọn: Top (trên) · Middle (giữa) · Bottom (dưới). Mục Card mới chọn sẵn Bottom.
• Áp cho: chỉ loại mục Card, ở mọi loại menu và mọi cấp. Mọi gói.
• Khách thấy gì: ô này chỉ thấy rõ khi thẻ cao hơn phần chữ (bạn đặt Height (px) lớn). Top và Bottom cách mép thẻ khoảng 16px, Middle căn giữa thẻ. Ô này chỉnh chiều dọc, còn chiều ngang do ô Align của mục quyết định.
• Nền tảng khác: giống Shopify.

New season TopNew season MiddleNew season Bottom

Custom HTML: nhúng mã riêng vào menu

Custom HTML cho bạn dán đoạn mã HTML của riêng mình như video, form nhúng, mạng xã hội hoặc tiện ích bên thứ ba. Khối này rộng bằng cột chứa nó và tự co giãn chiều cao vừa theo nội dung nếu bạn để trống ô Height (px). Khối chỉ tải khi khách mở menu nên không làm chậm trang web, và không chứa mục con.

• Có ở: Desktop Mega Menu, Mobile Mega Menu, Mobile Menu, Icon Menu.
• Không có ở: Tab Bar và Floating Button, vì mỗi mục ở hai menu này là một ô icon cố định.

Xem cách dùng tại bài Hiện sản phẩm và HTML riêng.

Shopify menu: lấy nguyên menu có sẵn trên Shopify

Shopify menu nhúng nguyên một menu Shopify của bạn vào đây, giữ đủ các cấp và đúng thứ tự. Khi cần sửa, bạn cứ vào Online Store → Navigation trên Shopify sửa như bình thường rồi quay lại bấm Sync, không phải dựng lại bằng tay.

• Có ở: chỉ Mobile Menu, và chỉ có trên Shopify.

Xem hướng dẫn tại bài Nhúng menu Shopify.

Nhúng Desktop Mega Menu vào Mobile Menu

Loại mục có nhãn Menu reference giúp bạn nhúng một Desktop Mega Menu có sẵn vào trong Mobile Menu. Các mục bên trong giữ nguyên cấp bậc và tự lấy kiểu hiển thị của Mobile Menu. Bạn chỉ cần chọn mega menu nguồn một lần; về sau sửa mega menu đó thì bên Mobile Menu tự cập nhật theo.

• Có ở: chỉ Mobile Menu.

Xem thêm tại bài Tạo Mobile Menu.

Sticky line: ghim mục ở đầu hoặc cuối menu

Sticky line là vạch chia vùng ghim của Mobile Menu, bản thân vạch này không hiện ra ngoài giao diện. Mọi mục nằm phía trên vạch Pin header sẽ dính ở mép trên khi khách cuộn; mọi mục nằm phía dưới vạch Pin footer sẽ dính ở mép dưới.

Trong bảng chỉnh, ô This line marks cho bạn chọn vạch đó là Pin header hay Pin footer. Nếu bật Auto-hide while scrolling, phần ghim sẽ tự trượt ẩn đi khi khách cuộn xuống và hiện lại khi cuộn lên.

• Có ở: chỉ Mobile Menu, và chỉ đặt ở cấp trên cùng.
• Mỗi menu có tối đa một đường Pin header và một đường Pin footer, trong đó đường header phải nằm trên đường footer.

This line marks

• Ở đâu, để làm gì: trong bảng Edit item của mục Sticky line, thẻ Sticky line. Cho biết vạch này chia vùng ghim ở đầu hay ở đáy menu.
• Lựa chọn: Pin header (ghim đầu) · Pin footer (ghim đáy). Vạch mới chọn sẵn Pin header.
• Áp cho: chỉ Mobile Menu, chỉ loại mục Sticky line, chỉ ở cấp trên cùng. Mọi gói.
• Khách thấy gì: với Pin header, mọi mục nằm phía trên vạch dính ở mép trên khi khách cuộn. Với Pin footer, mọi mục nằm phía dưới vạch dính ở mép dưới. Bản thân vạch không hiện ra.
• Nền tảng khác: giống Shopify.

9:41•••

yourshop.com

STORE

STORE

SearchHomeShopCollectionsAbout usContactLog in

Auto-hide while scrolling

• Ở đâu, để làm gì: ngay dưới ô This line marks, trong thẻ Sticky line. Là một ô tick, cho phần ghim nhường chỗ cho nội dung khi khách cuộn.
• Giá trị: tick bật, bỏ tick tắt. Mặc định tắt.
• Áp cho: như This line marks (Mobile Menu, mục Sticky line, cấp trên cùng). Mọi gói. Mỗi phía (header, footer) tự đọc ô tick ở vạch của phía đó.
• Khách thấy gì: với phần ghim đầu, khi khách cuộn xuống phần ghim trượt đi, cuộn lên là hiện lại ngay. Phần ghim đáy làm ngược lại (theo mô tả ngay trong app).
• Nền tảng khác: giống Shopify.

Xem cách đặt tại bài Cột, đường kẻ và mục ghim.

Sản phẩm tự động

Loại mục có nhãn Auto products tự lấy sản phẩm ra hiển thị theo quy tắc bạn đặt, chẳng hạn lấy từ một bộ sưu tập, hàng mới về hoặc hàng bán chạy.

Bạn không chọn loại này trong lưới ô loại mục mà thêm từ thư viện mẫu trong màn Add item. Bảng chỉnh của mục này chỉ có ô đặt tên nhãn trong cây menu và quy tắc hiển thị; còn phần kiểu dáng nằm trong mục cấu hình sản phẩm. Xem chi tiết tại bài Hiện sản phẩm và HTML riêng.

Top header: thêm phần đầu menu có logo và tìm kiếm

Top header là khối đầu menu dựng sẵn gồm logo, ô tìm kiếm và các phím tắt. Bạn thêm khối này từ thư viện mẫu bằng cách vào nhóm Layout, chọn mục Top header, chứ không chọn tay trong lưới loại mục.

Loại này có ở Mobile Menu và Desktop Mega Menu. Xem chi tiết từng ô cài đặt tại bài Khối Top header.

Campaign spot: chừa chỗ hiện chiến dịch

Campaign spot là một vị trí đặt sẵn trong menu để hiện công cụ chiến dịch như đồng hồ đếm ngược. Nếu bạn để trống chưa gán gì, ngoài cửa hàng sẽ không hiện ra.

Để dùng, bạn thêm mẫu Campaign spot trong màn Add item, lưu menu lại, rồi bấm Edit trên mục đó để gán công cụ chiến dịch. Loại này có ở mọi loại menu. Xem thêm tại bài Campaign.

Loại mục nào có trong menu nào

Loại mục	Tab Bar	Floating Button	Mobile Menu	Desktop Mega Menu	Mobile Mega Menu	Icon Menu
Icon + image + text	✓	✓	✓	✓	✓	✓
Big image + text	✓	✓	✓	✓	✓	✓
Group title	✓	✓	✓	✓	✓	✓
Blank space	✓	✓	✓	✓	✓	✓
Line	✓	✓	✓	✓	✓	✓
Tab	✓	✓	✓	✓	✓	✓
Image banner	✓	✓	✓	✓	✓	✓
Card	✓	✓	✓	✓	✓	✓
Custom HTML			✓	✓	✓	✓
Shopify menu			✓
Menu reference			✓
Sticky line			✓
Top header			✓	✓
Campaign spot	✓	✓	✓	✓	✓	✓
Auto products	✓	✓	✓	✓	✓	✓

Mỗi loại mục có những ô chỉnh nào

Bảng dưới đây cho biết từng loại mục có những ô cài đặt nào khi mở bảng Edit item. Để xem chi tiết từng ô, bạn mở bài Bố cục của một mục, Giao diện riêng của một mục và Hiệu ứng, class, CSS và thuộc tính.

Loại mục	Display layout	Width layout	Height / Size	Align	Animation	Class names	CSS	Attributes	Submenu
Icon + image + text	✓	✓		✓	✓	✓	✓	✓	✓
Big image + text	✓	✓		✓	✓	✓	✓	✓	✓
Group title						✓	✓		✓
Blank space		✓	✓
Tab	✓
Image banner		✓			✓	✓	✓
Card	✓	✓	✓	✓	✓	✓	✓	✓
Custom HTML		✓	✓		✓	✓	✓	✓

Riêng Line chỉ có các ô chỉnh đường kẻ. Các loại còn lại như Shopify menu, Menu reference, Sticky line, Campaign spot và Auto products gần như không có ô chỉnh kiểu dáng chung mà chỉ có ô cài đặt riêng của loại đó. Chỉ những mục có mục con bên trong mới hiện ô Submenu.

Nền tảng khác

Shopify Wix Website khác

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