Mục nhúng — HTML, sản phẩm tự động, menu Shopify, mega menu

Bốn loại mục này không tự vẽ nội dung mà lấy nội dung từ nơi khác rồi đặt vào menu: đoạn HTML bạn dán, danh sách sản phẩm của cửa hàng, một menu bên Shopify, hoặc một Desktop Mega Menu có sẵn. Bài này tra cứu từng ô của chúng. Muốn xem cách thêm từng bước, đọc Hiện sản phẩm và HTML riêng và Nhúng menu Shopify.

Cách mở các ô: ở bước Build Menu trên thanh bước bên trái, bấm vào mục nhúng trong cây Menu items. Panel đổi sang Edit item (có nút ‹ Back ở đầu), và các ô nằm ngay trong panel này.

Custom HTML

Loại mục dành cho đoạn mã HTML riêng của bạn (video nhúng, form đăng ký, widget bên thứ ba). Có ở Mobile Menu, Desktop Mega Menu, Mobile Mega Menu và Icon Menu; không có ở Tab Bar và Floating Button.

HTML

• Ở đâu: trong Edit item của mục Custom HTML, ô nhập mã nhiều dòng có nhãn HTML (chữ gợi ý “HTML code”).
• Dùng để làm gì: dán đoạn mã bất kỳ. Nội dung mục này hoàn toàn là mã của bạn, nên các ô icon, ảnh, mô tả và link của mục thường ẩn đi.
• Giá trị: gõ tự do, mặc định để trống.
• Áp cho: Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu; mọi cấp; chỉ loại mục Custom HTML. Mọi gói. Có ở cả ba nền tảng (Shopify, Wix, website khác).
• Khách thấy gì: đoạn mã được giữ nguyên ở dạng “ngủ” lúc trang vừa mở và chỉ được dựng ra khi khách mở menu. Vì vậy video hay khung nhúng nặng không làm chậm trang chủ. Khối rộng bằng cột chứa nó; nếu bạn để trống ô Height (px) thì tự co giãn theo nội dung, còn nhập số thì khối cao đúng số đó và phần dài hơn bị cắt.
• Lưu ý: chỉ dán mã tự viết hoặc từ dịch vụ uy tín, đừng dán đoạn script lạ.

Sản phẩm tự động (Auto products)

Khối tự điền sản phẩm (hoặc bộ sưu tập, trang) theo một luật bạn đặt. Chỉ có trên Shopify. Đặt được ở menu con cấp 2–3 và trong Icon Menu, không đặt được ở thanh cấp 1 hay hàng cột của Desktop Mega Menu.

Trong Edit item của khối, bạn thấy một thẻ Content & style (tóm tắt: nguồn, luật, kiểu hiển thị) kèm nút Edit block và liên kết Style only →, bên dưới là dòng Auto-update on storefront và nút Refresh now. Bản thân danh sách sản phẩm không sửa từng dòng được.

yourshop.com

STOREHomeShopCollectionsAboutContact

ÁoÁo thunÁo khoácQuầnJeanKakiAuto productsCột sản phẩm tự điền

Edit block

• Ở đâu: thẻ Content & style trong Edit item của khối, nút Edit block. Bấm vào sẽ mở lại cửa sổ chọn nguồn và luật giống lúc bạn thêm khối. Nếu khối đang trống, dòng cảnh báo vàng “Nothing matches these rules” cũng có nút Edit block này.
• Dùng để làm gì: quyết định khối hiện món nào.
• Các lựa chọn của luật:
  • Nguồn: Products, Collections hoặc Pages.
  • From: lấy từ một hay nhiều collection, hoặc All products.
  • Sort by: Newest, Best selling, Price: low to high, Price: high to low, Name A–Z, Collection order.
  • Số lượng: tối đa 20 món mỗi khối.
  • Skip first: bỏ qua một số món đầu (0 đến 100).
  • Tuỳ chọn ẩn món hết hàng, để món hết hàng không hiện trong khối.
  • Lọc thêm theo Tag, Vendor, Product type (không bắt buộc).
• Áp cho: mọi loại menu, nhưng chỉ ở menu con cấp 2–3 hoặc Icon Menu; chỉ có trên Shopify; mọi gói.
• Khách thấy gì: đổi luật thì danh sách món hiện ra đổi theo, sau khi bạn bấm Save. Nếu không món nào khớp, khối tự ẩn trên cửa hàng.
• Giá trị mặc định cho khối mới: do cửa sổ Add item quyết định lúc thêm khối; không có ô riêng trong Edit item để “đặt lại”.

Content & style

• Ở đâu: cũng thẻ Content & style, nhưng bấm liên kết Style only → (thay vì Edit block). Cửa sổ mở thẳng ở bước chọn kiểu, giữ nguyên luật.
• Dùng để làm gì: đổi cách mỗi dòng sản phẩm hiện (kiểu hiển thị, số ô mỗi hàng, tiêu đề khối, liên kết “View more”, thông tin giá, cách xử lý hàng hết) mà không đụng đến việc chọn món nào.
• Giá trị: theo mẫu bạn đã chọn lúc thêm khối. Dòng tóm tắt trong thẻ hiện kiểu đang dùng và số ô mỗi hàng.
• Áp cho: như ô Edit block ở trên.
• Khách thấy gì: chỉ đổi kiểu dáng; danh sách món giữ nguyên.

Auto-update on storefront

• Ở đâu: thẻ riêng dưới Content & style: công tắc Auto-update on storefront và hàng nút chọn khoảng thời gian.
• Dùng để làm gì: bật thì cửa hàng tự làm mới danh sách (sản phẩm, giá, tồn kho) theo chu kỳ, không cần bạn mở Navi+ bấm Refresh now.
• Lựa chọn: 5 · 10 · 20 · 30 · 45 phút hoặc 1 hour. Các nút dưới 1 giờ có ổ khoá và chữ Business nếu bạn đang ở gói thấp hơn.
• Mặc định: khối mới được tạo sẵn ở trạng thái bật, mỗi 1 giờ. Khối cũ (tạo trước khi có tính năng này) giữ trạng thái tắt cho đến khi bạn bật; khối cũ từng chọn chu kỳ dài (6, 12 giờ, 1 ngày, 3 ngày) vẫn chạy đúng nhịp đó đến khi bạn đổi.
• Gói cần có: chu kỳ dưới 1 giờ cần gói Business trở lên. Gói Starter cố định mỗi 1 giờ.
• Áp cho: chỉ Shopify.
• Khách thấy gì: danh sách trên cửa hàng tự đổi khi sản phẩm hoặc giá thay đổi, trễ tối đa bằng chu kỳ bạn chọn. Tắt công tắc thì danh sách đứng yên ở bản chụp lần cuối; khi bản chụp cũ hơn 7 ngày, app hiện cảnh báo nhắc bạn làm mới.

Refresh now

• Ở đâu: cùng thẻ với công tắc Auto-update, nút Refresh now cạnh dòng “Snapshot…” (thời điểm bản chụp gần nhất).
• Dùng để làm gì: lấy ngay danh sách mới nhất từ cửa hàng, khi bạn không muốn chờ chu kỳ tự cập nhật (ví dụ vừa đổi giá hay vừa thêm hàng mới).
• Lưu ý quan trọng: nút chỉ làm mới bản chụp trong app; bạn phải bấm Save để đưa lên cửa hàng. Thông báo “Updated. Save the menu to publish the new list.” nhắc việc này.
• Áp cho: như ô Edit block; chỉ có trên Shopify. Đây là nút thao tác, không lưu thành một giá trị cài đặt.

Shopify menu

Nhúng nguyên một menu bạn đã dựng ở Online Store > Navigation của Shopify vào Mobile Menu. Chỉ có trên Shopify, chỉ ở Mobile Menu, chỉ đặt ở cấp 1.

9:41•••

yourshop.com

STORE

STORE

HomeShopBlog

Cây menu Shopify hiện trong ngăn kéo

Shopify menu

• Ở đâu: Edit item của mục Shopify menu, ô chọn Shopify menu (mặc định “— Choose a Shopify menu —”).
• Dùng để làm gì: chọn menu Shopify cần lấy (ví dụ main-menu).
• Khách thấy gì: dòng Shopify menu biến mất và được thay tại chỗ bằng cả cây menu bên Shopify, giữ nguyên các cấp và thứ tự. Mục trỏ tới collection có ảnh và mô tả thì ảnh, mô tả hiện kèm.
• Áp cho: Mobile Menu, cấp 1, chỉ Shopify; mọi gói.
• Lưu ý: Navi+ lưu một bản chụp của menu Shopify tại lúc bạn chọn hoặc bấm Sync now. Sửa menu bên Shopify xong phải đồng bộ lại (xem ô kế tiếp).

Sync now

• Ở đâu: ngay dưới ô chọn menu; cạnh nút là dòng trạng thái (báo Synced kèm số link).
• Dùng để làm gì: lấy lại cây menu mới nhất từ Shopify sau khi bạn sửa ở Online Store > Navigation.
• Quy trình: sửa và lưu ở Shopify → quay lại Navi+, mở mục Shopify menu → Sync now → Save. Chưa bấm Save thì cửa hàng vẫn hiện bản cũ.
• Áp cho: như ô Shopify menu. Đây là nút thao tác, không lưu thành giá trị cài đặt. Nếu nút không bấm được, mở trang chính của app Navi+ một lần để cấp quyền đọc menu.

Level 1 style

• Ở đâu: trong Edit item của mục Shopify menu, khối tiêu đề Level 1 style gồm năm nhóm: Text (Text Color, Font Size), Icon / small image (Icon Color, Icon Size), Media container (Padding, Curve), Container (outer) (Background Color, Background Image), Inner box (Padding). Bấm biểu tượng bút ở mỗi nhóm để mở.
• Dùng để làm gì: chỉnh kiểu chữ, màu và khoảng đệm cho các mục cấp 1 lấy từ menu Shopify. Các mục này là mục “ảo” không nằm rời trong cây nên không mở Edit item từng dòng được; kiểu đặt một lần ở đây áp cho cả cụm.
• Mặc định: để trống, hiện Inherit = theo giao diện chung của menu.
• Áp cho: Mobile Menu, mục Shopify menu, chỉ Shopify; mọi gói.

Level 2-3 style

• Ở đâu: ngay dưới Level 1 style, cùng năm nhóm ô; có dòng gợi ý “Leave empty to follow Level 1”.
• Dùng để làm gì: chỉnh riêng kiểu cho mục cấp 2–3 của menu Shopify.
• Mặc định: để trống = giống cấp 1.
• Áp cho: như Level 1 style.

Menu reference — nhúng Desktop Mega Menu vào Mobile Menu

Loại mục Menu reference hiện các mục của một Desktop Mega Menu ngay trong Mobile Menu, theo bố cục dành cho điện thoại. Chỉ có ở Mobile Menu (mọi nền tảng), và là tham chiếu sống: sửa mega menu thì Mobile Menu đổi theo mà không phải chép lại.

Desktop Mega menu to embed

• Ở đâu: Edit item của mục Menu reference, ô chọn Desktop Mega menu to embed (mặc định “— Choose a Desktop mega menu —”). Danh sách hiện tên các Desktop Mega Menu của cửa hàng kèm mã embed.
• Dùng để làm gì: chọn mega menu nguồn, một lần.
• Khách thấy gì: các mục cấp 1 của mega mở thành dòng dọc trong ngăn kéo Mobile Menu, các cột bị gỡ và xếp lại cho vừa màn hình hẹp (lưới sản phẩm luôn giữ ít nhất 2 ô một hàng). Mega đang trỏ tới một Menu reference khác thì bị bỏ qua, để khỏi lặp vòng.
• Muốn bỏ một mục của mega khỏi bản điện thoại: mở mega đó, sửa mục, vào Visibility và bật Exclude when embedded. Nút Open this mega menu dưới ô chọn mở thẳng mega ở tab mới.
• Áp cho: Mobile Menu, cấp 1, mọi nền tảng; mọi gói.

Choose icons for level 1 items

• Ở đâu: trong Edit item của mục Menu reference, nhóm Choose icons for level 1 items, một danh sách “ô icon + tên mục”. Chưa chọn mega thì hiện “Choose a Desktop mega menu above to set icons.”
• Dùng để làm gì: gắn icon riêng cho từng mục cấp 1 của mega khi nó hiện trong Mobile Menu này.
• Giá trị: mỗi mục một icon, hoặc để trống (dùng icon gốc của mega). Chỉ áp cho Mobile Menu này; mega gốc không đổi.
• Khách thấy gì: mục có icon riêng sẽ hiện icon đó thay cho icon hoặc ảnh của mega; mục nào chữ-thuần sẽ thành mục có icon. Mega thêm hoặc xoá mục sau này thì icon thừa hay thiếu không gây lỗi.
• Áp cho: Mobile Menu, mục Menu reference; mọi nền tảng; mọi gói.

Tabs on mobile

• Ở đâu: trong Edit item của mục Menu reference, nhóm Tabs on mobile. Nhóm này chỉ hiện khi mega đã chọn có mục Tab (hoặc khi đã có cấu hình lưu từ trước).
• Dùng để làm gì: chỉnh cách dải tab của mega hiện trên điện thoại. Trên điện thoại, tab luôn là một thanh ngang ở trên và cuộn ngang được, kể cả khi mega dùng tab bên trái.
• Ba ô lựa chọn:
  • Style: Same as mega menu (mặc định) · Underline · Pill · Segmented · Outline.
  • Alignment: Same as mega menu (mặc định) · Left · Spread out (các tab giãn đều lấp thanh).
  • When tabs don’t fit: Swipe (mặc định) · Swipe with snap + faded edges (cuộn hít, hai mép mờ dần) · Faded edges + arrows (mép mờ kèm mũi tên).
• Khách thấy gì: để trống cả ba ô thì tab giữ y như mega. Chọn giá trị nào thì chỉ riêng dải tab trong Mobile Menu này đổi theo.
• Áp cho: Mobile Menu, mục Menu reference; mọi nền tảng; mọi gói.

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.