English Tiếng Việt
Xem demo Bắt đầu
Mục menu

Hiện sản phẩm tự động và nội dung HTML trong menu

Khi muốn hiện sẵn danh sách sản phẩm kèm ảnh, tên và giá ngay trong menu mà không phải gõ tay từng món, bạn dùng khối sản phẩm tự động. Nếu cần nhúng video, form đăng ký hay tiện ích riêng, bạn chèn thêm khối HTML.

Trước khi bắt đầu

  • Mở menu trong app Navi+, ở bước Build Menu, cây mục menu nằm trong khung Menu items bên trái.
  • Khối sản phẩm tự động chỉ đặt được trong menu con cấp 2–3 và trong Icon Menu. Bạn không đặt được khối này ở thanh trên cùng cấp 1 của Tab Bar, Floating Button hay ở cấp cột của Desktop Mega Menu. Nếu đặt sai chỗ, app sẽ báo bạn chuyển khối vào menu con.
  • Cả khối sản phẩm tự động lẫn khối HTML đều không có mục con bên dưới.

Hiện sản phẩm tự động từ collection

Mục Auto content: sync by rule tự điền sản phẩm vào menu theo điều kiện bạn chọn. Bạn không cần sửa từng dòng sản phẩm. Khi thông tin sản phẩm hay giá bán trong cửa hàng thay đổi, danh sách trên menu sẽ tự cập nhật theo.

  1. Trong một menu con hoặc Icon Menu, bấm Add item tại vị trí bạn muốn đặt khối sản phẩm.

  2. Ở bước Type, chọn một mẫu trong nhóm Auto content như Products, image left hoặc Products, image on top. Bạn cũng có thể vào Links & icons rồi bật Auto: products by rules.

  3. Đặt điều kiện lấy sản phẩm. Khung xem trước bên cạnh sẽ hiện ngay các sản phẩm thật khớp với lựa chọn của bạn:
    • From: lấy từ một hay nhiều collection, hoặc chọn All products để lấy trên toàn cửa hàng.
    • Sort by: sắp xếp theo hàng mới nhất Newest, bán chạy Best selling, giá thấp đến cao, giá cao đến thấp hoặc theo bảng chữ cái A–Z.
    • Lọc chi tiết hơn theo Tag, Vendor hoặc Product type nếu cần.
    • Skip first: bỏ qua một số sản phẩm đầu tiên. Mỗi khối hiện tối đa 20 sản phẩm. Dòng nào không muốn hiện, bạn bấm dấu × để loại ra, khối sẽ tự lấy sản phẩm kế tiếp bù vào.

  4. Bấm Next: choose style để chọn kiểu hiển thị và các thông tin hiện trên mỗi dòng như giá bán, giá giảm, nhãn lấy từ tag và cách xử lý khi sản phẩm hết hàng.

  5. Bấm Add products block, sau đó bấm Save ở góc trên để lưu menu.

    Một cột trong Desktop Mega Menu tự hiện sản phẩm của collection

Ngay trong bước Type, bạn cũng có thể chọn nhóm Live sections với các khối dựng sẵn gồm New arrivals, Best sellers và Shop by category. Mỗi khối đều có vài bố cục như dạng lưới, danh sách dọc hoặc thanh cuộn ngang.

Cách danh sách sản phẩm cập nhật ngoài cửa hàng

Danh sách sản phẩm được lưu thành một bản chụp đi kèm với menu. Bạn có hai cách làm mới bản chụp này:

  • Bật công tắc Auto-update on storefront: cửa hàng tự cập nhật sản phẩm, giá và tồn kho mới mà bạn không cần mở lại Navi+. Gói Starter cập nhật mỗi 1 giờ, còn từ gói Business trở lên bạn chọn được tần suất tới mỗi 5 phút.
  • Bấm Refresh now rồi bấm Save bất cứ khi nào bạn muốn cập nhật danh sách ngay lập tức.
Lưu ý

Nếu không có sản phẩm nào khớp điều kiện lọc, khối này sẽ tự ẩn trên cửa hàng. Khi bản chụp cũ hơn 7 ngày, app sẽ nhắc bạn làm mới.

Chèn khối HTML riêng vào menu

Khi muốn đưa video nhúng, form đăng ký, bảng tin mạng xã hội hoặc widget của dịch vụ khác vào menu, bạn dùng khối HTML.

  1. Bấm Add item, vào phần Media & code rồi chọn nhóm HTML block.

  2. Dán đoạn mã của bạn vào ô Paste HTML code.

  3. Chỉnh độ rộng, vị trí và chiều cao khung nếu cần. Nếu bạn để trống chiều cao, khối sẽ tự co giãn vừa khít nội dung theo chế độ Fit content.

  4. Bấm Add, sau đó bấm Save.

Khối HTML dùng được trong Desktop Mega Menu, Mobile Mega Menu, Mobile Menu và Icon Menu, không hỗ trợ ở Tab Bar và Floating Button. Với khối này, bạn chỉ chỉnh được phần khung bên ngoài như độ rộng, khoảng cách, class và quy tắc hiển thị. Các mục icon, ảnh, mô tả và link sẽ ẩn đi vì phần nội dung hoàn toàn theo đoạn mã HTML của bạn.

Giữ menu tải nhẹ và an toàn khi dùng HTML

  • Về tốc độ: đoạn mã HTML chưa chạy ngay lúc trang vừa mở. Nội dung này chỉ tải khi khách bấm mở menu, nên video hay khung nhúng nặng sẽ không làm chậm trang của bạn.
  • Về an toàn: bạn chỉ nên dán đoạn mã tự viết hoặc lấy từ dịch vụ uy tín. Đừng dán các đoạn mã script lạ mà bạn không rõ nguồn gốc, vì mã chạy trực tiếp trên cửa hàng có thể thu thập thông tin của khách.
  • Để menu luôn gọn gàng, bạn chỉ nên dùng HTML cho vài khối nội dung nhỏ thay vì dựng toàn bộ menu bằng HTML.

Nền tảng khác

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

Bài liên quan

Bài này có giúp ích không?

Cần người xem cùng? Chat với chúng tôi trong app hoặc viết về [email protected] — gửi kèm địa chỉ cửa hàng và tên menu.