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

Chia cột, kẻ phân cách và ghim mục trong menu con

Khi menu con có nhiều mục, danh sách dài một cột sẽ khiến khách khó tìm. Bạn có thể chia menu thành nhiều cột, thêm đường kẻ tách nhóm hoặc ghim cố định các mục quan trọng ở đầu và chân menu.

Chia cột cho menu con trong Desktop Mega Menu

Trong Desktop Mega Menu, bạn chia cột cho menu con bằng cách đặt độ rộng ở mục Width layout cho từng cột.

  1. Mở mục menu cấp 1 bạn muốn chia cột, tìm phần Multi-column layout rồi bật Split menu into columns. Khi bật, mỗi mục cấp 2 bên dưới sẽ trở thành một cột riêng, còn các mục cấp 3 sẽ nằm bên trong cột đó.

  2. Bấm vào từng mục cấp 2 đóng vai trò là cột để mở bảng Edit item.

  3. Tại mục Width layout, chọn độ rộng cho cột theo lưới 12 phần. Các cột nằm cùng một hàng cần có tổng độ rộng vừa đủ 12/12.

  4. Bấm Save rồi mở cửa hàng để kiểm tra.

    Ba cột 4/12 + 4/12 + 4/12 trong một menu con

Một số cách chia cột hay dùng:

Cách chia Chọn ở Width layout
4 cột đều nhau 3/12 + 3/12 + 3/12 + 3/12
3 cột đều nhau 4/12 + 4/12 + 4/12
2 cột đều nhau 6/12 + 6/12
Cột trái bằng 1/3 chiều rộng 4/12 + 8/12

Tên của mục cột chỉ hiện trong app để bạn phân biệt khi chỉnh sửa, không hiện thành mục menu ngoài cửa hàng.

Lưu ý

App khuyên dùng lưới 12 phần. Các lựa chọn Automatic, lưới 10 phần, độ rộng cố định hoặc Hug content dễ làm bố cục nhảy khi mở menu.

Nếu muốn giới hạn độ rộng tối đa của toàn bộ khung menu con, bạn nhập số pixel vào ô Multi-column submenu width (px) ở mục cấp 1. Nếu để trống, menu con sẽ lấy theo độ rộng chung của menu.

Thêm đường kẻ phân cách giữa các mục

Bạn có hai cách thêm đường kẻ vào menu:

  • Kẻ ngay dưới một mục có sẵn: mở Edit item của mục đó rồi bật Add divider.
  • Tạo một dòng kẻ độc lập: bấm Add item, vào nhóm Basics và chọn Divider. Mục này chỉ hiện một đường kẻ ngang, không có chữ hay icon.

Để chỉnh kiểu đường kẻ dùng chung cho toàn bộ menu, bạn sang bước Configure và mở thẻ Divider. Bạn cũng có thể bấm nút Divider trong phần Advanced display settings ở bước Design để mở thẳng thẻ này.

Tùy chọn Ý nghĩa
Color Màu của đường kẻ
Size (px) Độ dày tính bằng pixel
Type Kiểu nét: Solid là nét liền, Dashed là nét đứt, Dotted là nét chấm, Double là kẻ đôi
Width Độ dài đường kẻ: Full kéo hết chiều ngang, Inset thụt lề hai đầu, Under text chỉ kẻ dưới phần chữ

Cài đặt trong bước Configure là mặc định cho cả menu. Nếu bạn chỉnh kiểu đường kẻ riêng trong Edit item của một mục, mục đó sẽ ưu tiên dùng kiểu riêng.

Lưu ý

Trong Edit item của từng mục, hai ô Type và Width của đường kẻ bị khoá ở gói Starter (cần Business trở lên). Thẻ Divider chung của menu thì app không đánh dấu khoá.

Ghim phần đầu hoặc phần chân trong Mobile Menu

Trong Mobile Menu, bạn có thể giữ cố định phần đầu như ô tìm kiếm, hoặc phần chân như nút đăng nhập để chúng luôn đứng yên khi khách cuộn danh sách ở giữa. Để đặt ranh giới phần ghim, bạn thêm một mục đặc biệt tên là Sticky line.

  1. Bấm Add item, vào nhóm Special rồi chọn Sticky line.

  2. Chọn Pin header nếu muốn ghim phần đầu menu, hoặc chọn Pin footer nếu muốn ghim phần chân menu.

  3. Kéo dòng này đến đúng vị trí làm ranh giới trong cây mục menu:
    • Các mục nằm phía trên dòng Pin header sẽ đứng yên ở đầu menu.
    • Các mục nằm phía dưới dòng Pin footer sẽ đứng yên ở chân menu.
    Dòng Sticky line chia menu thành phần ghim và phần cuộn

  4. Bấm Save rồi mở Mobile Menu trên cửa hàng để kiểm tra.

    Phần đầu và chân đứng yên, phần giữa cuộn

Dòng Sticky line chỉ dùng để đánh dấu ranh giới trong app, không hiện ra ngoài cửa hàng.

Nếu muốn tiết kiệm diện tích cho màn hình điện thoại nhỏ, bạn có thể bật thêm Auto-hide while scrolling. Khi đó, phần ghim ở đầu menu sẽ tự trượt ẩn đi lúc khách cuộn xuống và hiện lại khi cuộn lên, còn phần ghim ở chân menu hoạt động ngược lại.

Xử lý các lỗi thường gặp

Ghim mục không có tác dụng

Bạn kiểm tra lần lượt các điểm sau:

  • Bạn có đang sửa đúng Mobile Menu không? Mục Sticky line chỉ hoạt động trên Mobile Menu vì chỉ loại menu này mới có vùng cuộn riêng để ghim.
  • Dòng Sticky line đã nằm ở cấp 1 chưa? Bạn không thể kéo dòng này vào trong mục con cấp 2 hoặc cấp 3.
  • Trong menu có bị dư dòng ghim nào không? Mỗi menu chỉ dùng một dòng Pin header và một dòng Pin footer, đồng thời dòng Pin header phải nằm phía trên dòng Pin footer. Dòng thừa hoặc đặt sai chỗ sẽ bị báo viền đỏ trong cây mục menu và hiện cảnh báo khi bấm lưu. Ngoài cửa hàng, menu chỉ lấy dòng hợp lệ đầu tiên của mỗi đầu.

Ngoài ra, bạn nên giữ phần ghim thật gọn. Trên màn hình điện thoại nhỏ, phần ghim quá dài sẽ chiếm mất chỗ của danh sách cuộn ở giữa.

Làm sao đổi đường kẻ sang nét đứt hoặc nét chấm?

Bạn vào bước Configure, mở thẻ Divider rồi đổi mục Type sang Dashed hoặc Dotted. Nếu bạn chỉnh riêng cho một mục trong bảng Edit item mà thấy ô này bị khoá, nghĩa là tính năng chỉnh lẻ chưa có ở gói Starter và cần gói Business trở lên.

Khi menu con quá cao khiến danh sách cấp 3 bị cắt khuất, bạn có thể dùng CSS riêng để ghim danh sách cấp 3 lên đầu menu. Xem hướng dẫn tại bài CSS riêng, class dùng lại và font chữ.

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.