Lưới ô icon hoặc ảnh có tên, nằm thẳng trong trang và trôi theo khi khách cuộn. Khách thấy ngay cửa hàng bán gì mà không phải mở menu. Dùng cho cả điện thoại lẫn máy tính.
Trước khi làm: đã cài Navi+ và bật Store Connector trong theme.
1Chọn loại menu
Trong Navi+ bấm Add menu rồi chọn thẻ Icon Menu.
2Hai cách bắt đầu
Dựng từ link của cửa hàng
Bấm Create from your website > Build it step by step. Tick các link muốn thành ô ở cột Pick a menu list (menu hiện có, collection, sản phẩm), chọn 3, 4 hoặc 5 ô ở How many items per row?, chọn một mẫu ô rồi bấm Generate menu.
Từ mẫu hoặc tự dựng
Bấm Create from a template > Browse templates. Chọn một mẫu rồi Use this template (có Quick test để xem thử), hoặc chọn thẻ Blank để có menu trống rồi tự Add item.
3Chỉnh tay tiếp
Dù dựng từ link hay từ mẫu, bạn vẫn chỉnh tay ở Build Menu: kéo thả đổi thứ tự ô, bấm một ô để đổi tên, icon hoặc ảnh, nhãn như New, -30% và link. Sang Design để đổi màu và cỡ chữ.
Giới hạn: Icon Menu chỉ có một lớp ô, mỗi ô là một mục và không có mục con. Muốn khách chọn tiếp vào danh mục con thì dùng Mobile Mega Menu hoặc Mobile Menu.
4Mẫu item tiêu biểu
Bấm + ITEM để mở popup Add item, rồi chọn mẫu. Đây là những mẫu hay dùng nhất trong lưới.
Ô icon và ô ảnh: mẫu tạo nên lưới
Trong Links & icons, chọn Icon grid (icon có tên bên dưới) hoặc Image grid (ảnh danh mục có tên). Mỗi ô là một mục: bấm vào để đổi tên, thay icon bằng ảnh, gắn nhãn hay đổi link. Muốn một ô rộng hơn hay hẹp hơn, đặt Width layout cho ô đó, ví dụ 3/12 hoặc 2/10: ô càng hẹp thì một hàng càng xếp được nhiều ô.
Banner và Cards
Trong Cards & banners: ảnh lớn có chữ và nút, đặt cạnh các ô để đẩy một chiến dịch hay bộ sưu tập mới.
Khối sản phẩm tự động
Trong Live sections: New arrivals, Best sellers hay Custom rule. Sản phẩm tự lấy theo collection và tự làm mới, tối đa 20 mỗi khối. Chỉ Shopify.
Campaign spot
Ô chừa sẵn cho chiến dịch: gán vào thì hiện Tag (HOT, SALE), đếm ngược hoặc banner theo lịch, hết hạn tự gỡ.
HTML block
Trong Media & code: dán mã HTML (video nhúng, form đăng ký, widget) vào giữa lưới. Chỉ dán mã bạn tin cậy.
Shopify menu (nhúng nguyên menu Shopify), Sticky line và Menu reference chỉ có ở Mobile Menu, không dùng được trong Icon Menu: Mobile Menu.
5Publish: đặt lưới vào trang
Mở Publish, chọn chỗ đặt rồi bấm Turn on. Icon Menu nằm trong trang nên cần một chỗ đặt; Navi+ đã tự tìm sẵn chỗ ngay dưới header trên theme của bạn.
Add below your header
Lưới ô nằm ngay dưới header, phía trên nội dung trang. Menu điều hướng của theme vẫn còn nguyên. Hợp nhất khi muốn lối vào danh mục ở đầu trang chủ.
Below another Icon Menu
Xếp tiếp dưới một Icon Menu đã đặt sẵn. Chọn Icon Menu đứng trên, tuỳ chọn khoảng cách và một đường kẻ ngăn giữa hai lưới. Hợp khi muốn hai lưới liền nhau, ví dụ danh mục chính rồi bộ sưu tập nổi bật.
Cần chỗ khác, ví dụ trước hay sau một phần tử bất kỳ? Chọn Somewhere else và dùng CSS selector. Hiện trên điện thoại, máy tính hay cả hai thì chọn ở Configure. Hiện ở trang nào: Chọn trang, thiết bị và khách thấy menu.
Số ô mỗi hàng trên máy tính
Một menu dùng cho cả hai thiết bị: màn hình rộng xếp nhiều ô hơn. Đặt Desktop/mobile display ratio từ 1x đến 5x, ví dụ 4 ô trên điện thoại với 2x thành 8 ô trên máy tính.
Xem cách chỉnhNền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Trên Wix, Add menu mở thẳng bộ chọn mẫu thay cho trình dựng ở trên; chọn Icon Menu và một mẫu rồi sửa trong màn sửa menu. Wix không có khối app “Menu in Section”, chỉ đặt được bằng CSS selector. Khối Live sections chỉ có trên Shopify.
Trên WordPress và website khác, Add menu mở thẳng bộ chọn mẫu thay cho trình dựng ở trên; chọn Icon Menu và một mẫu rồi sửa trong màn sửa menu. Không có khối app “Menu in Section”, chỉ đặt được bằng CSS selector. Khối Live sections và Shopify menu chỉ có trên Shopify.