Mega Menu Builder: Cài Đặt Menu Mega Cho Cửa Hàng Của Bạn

Ứng dụng Mega Menu Builder cho phép bạn nhanh chóng tạo menu điều hướng cửa hàng. Bạn có thể xây dựng một mega menu phù hợp với phong cách cửa hàng của mình thông qua các cài đặt tùy chỉnh và cá nhân hóa.

Ứng dụng cho phép bạn:

• Tạo các menu lớn một cách dễ dàng và nhanh chóng bằng cách sử dụng các mẫu thiết kế sẵn và số lượng mục menu không giới hạn.
• Cải thiện thiết kế cửa hàng thông qua các tùy chỉnh thiết kế đa dạng để làm cho cửa hàng của bạn trở nên độc đáo hơn.
• Cung cấp điều hướng rõ ràng và linh hoạt để nâng cao trải nghiệm mua sắm của khách hàng.
• Quảng bá các sản phẩm nổi bật và các hoạt động giảm giá để thúc đẩy doanh số bằng cách sử dụng nhiều kiểu menu khác nhau.

Xây dựng Menu

1. Trong SHOPLINE App Store, bạn có thể cài đặt ứng dụng Mega Menu Builder.
   
2. Tạo mega menu: Hiện tại có ba loại mega menu được hỗ trợ, bao gồm Menu dọc, Menu ngang và Menu nhãn.
   

• • Menu dọc: Mỗi mục menu có thể có các submenu được thêm lần lượt, với tối đa 6 cấp độ menu. Các menu được hiển thị từ trái sang phải, như hình dưới đây:
    
  • Menu ngang: Menu ngang là kiểu menu mà các mục menu được hiển thị theo chiều ngang trên mặt phẳng theo các quy tắc bạn thiết lập, như hình dưới đây:
    
  • Menu nhãn: Bao gồm khu vực menu nhãn và khu vực menu ngang. Mỗi nhãn được liên kết với một cấu hình cho menu ngang, như hình dưới đây:
    

3. Chọn tùy chọn menu để thêm: Bằng cách nhấp vào Thêm menu, bạn có thể chọn một mẫu mega menu được cấu hình sẵn theo nhu cầu để nhanh chóng tạo mega menu cho cửa hàng của mình.
   
   

Chỉnh sửa Menu

Ứng dụng hỗ trợ thiết kế nhiều loại menu khác nhau, bao gồm biểu tượng văn bản, sản phẩm, danh mục và hình ảnh. Các loại menu khác nhau có thể được hiển thị theo các phong cách khác nhau.

• Biểu tượng văn bản: Hỗ trợ chỉnh sửa tiêu đề, mô tả, biểu tượng và liên kết chuyển hướng tương ứng của biểu tượng văn bản. Sau khi thiết lập liên kết, nhấp vào menu sẽ chuyển hướng đến địa chỉ liên kết tương ứng.
• Sản phẩm: Hỗ trợ chọn các sản phẩm hiện có trong cửa hàng làm mục menu. Menu sẽ hiển thị hình ảnh sản phẩm tương ứng, tiêu đề sản phẩm, giá sản phẩm và các thông tin khác. Nhấp vào sẽ chuyển hướng đến trang sản phẩm tương ứng.
• Bộ sưu tập: Hỗ trợ chọn các bộ sưu tập sản phẩm hiện có trong cửa hàng làm mục menu. Menu sẽ hiển thị ảnh bìa bộ sưu tập sản phẩm và tiêu đề bộ sưu tập sản phẩm tương ứng. Nhấp vào sẽ chuyển hướng đến trang bộ sưu tập sản phẩm tương ứng.
• Hình ảnh: Hỗ trợ tải lên hình ảnh tùy chỉnh, và thiết lập vị trí cũng như chiều rộng hình ảnh để tạo thiết kế menu hình ảnh tùy chỉnh.
  
  

Thiết Lập Kiểu Menu

Nhấp vào Kiểu để thiết lập kiểu toàn cục cho mega menu bạn đã thiết lập. Hiện tại, ứng dụng hỗ trợ thiết lập kiểu trên phiên bản di động và PC bằng cách nhấp trực tiếp vào các biểu tượng tương ứng trên cả hai phiên bản.

Kiểu Menu Tùy Chỉnh (CSS Tùy Chỉnh)

Nếu bạn có kiến thức về lập trình, bạn có thể sử dụng CSS tùy chỉnh để tạo kiểu menu theo ý muốn. Thêm CSS tùy chỉnh của bạn vào phần Kiểu để thiết lập kiểu toàn cục cho Mega Menu.


Bạn cũng có thể thêm CSS tùy chỉnh khác nhau cho từng cấp độ của menu. Các kiểu này độc lập với nhau. Kiểu của menu cha sẽ không ảnh hưởng đến menu con, và menu con cũng không kế thừa kiểu từ menu cha.

Mã Ví Dụ

Hiệu ứng trên Website: Khi bạn di chuột qua menu, sẽ xuất hiện một đường kẻ phía trên và phía dưới mục menu.

Để đạt được hiệu ứng trên, thêm CSS tùy chỉnh sau vào phần Kiểu.

/* PC - Toàn cục */
/* Vui lòng thay đổi background-color thành màu bạn muốn */
.mega-menu-root-pc .mega-nav-title:hover span {
position: relative;
}

.mega-menu-root-pc .mega-nav-title:hover span::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}

.mega-menu-root-pc .mega-nav-title:hover span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}

/* Di động - Toàn cục */
/* Vui lòng thay đổi background-color thành màu bạn muốn */
.mega-menu-root-mb .mega-nav-title:hover span {
position: relative;
}

.mega-menu-root-mb .mega-nav-title:hover span::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}

.mega-menu-root-mb .mega-nav-title:hover span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}

Cấu Hình Menu Trên Trang và Kích Hoạt Nó

Sau khi xây dựng menu mega, bạn có thể cấu hình menu để có hiệu lực trên phần đầu trang bằng cách làm theo các bước dưới đây.

1. Đi tới Style > Ghi đè mặc định chủ đề để cấu hình cách thức có hiệu lực. Bạn có thể chọn Áp dụng cho tất cả các chủ đề hoặc Chỉ định chủ đề để ghi đè.
   
   
2. Trong ứng dụng, bật Áp dụng cho Cửa hàng.
   
   
   
   
3. Đi tới Bảng Quản trị > Cửa hàng Trực tuyến > Thiết kế và bật khối menu mega trong Nhúng ứng dụng. Sau khi bật, menu sẽ có hiệu lực trên trang.
   
   

Cập nhật Dữ liệu Cấu hình

Giả sử dữ liệu cấu hình của bạn (chẳng hạn như tiêu đề sản phẩm và giá cả) được cập nhật sau khi bạn hoàn thành xây dựng menu mega. Trong trường hợp đó, bạn cần nhấn Cập nhật dữ liệu để cập nhật dữ liệu cấu hình mới nhất trong ứng dụng.

Dịch Menu

Để dịch nội dung trong menu của bạn, nhấn nút Dịch ở góc trên bên phải.

Chọn ngôn ngữ đích bạn muốn dịch, sau đó nhấn Dịch tự động hoặc điền nội dung thủ công.

Các ngôn ngữ đích được hỗ trợ dựa trên cài đặt đa ngôn ngữ của bạn. Đường dẫn: Cài đặt > Ngôn ngữ > Cài đặt đa ngôn ngữ

Giới thiệu về sự không tương thích với Ứng dụng

1. Trong ứng dụng, bố cục điều hướng Menu Split / Menu Collapse không được hỗ trợ, việc áp dụng các bố cục này sẽ khiến menu hiển thị không bình thường.
   Bằng cách vào SHOPLINE - Cửa hàng trực tuyến > Thiết kế, bạn có thể chọn Thiết kế để vào trang thiết kế giao diện và sau đó chọn Phần đầu trang để chỉnh sửa bố cục điều hướng tương ứng.
   Sau khi bạn chỉnh sửa cài đặt phần đầu trang trong thiết kế giao diện, hiệu ứng xem trước mega menu sẽ không được hiển thị. Bạn có thể nhấn Lưu và sau đó vào cửa hàng để xem hiệu ứng hiển thị mega menu.
   
   
2. Menu dọc hiện tại không hỗ trợ cuộn để xem. Do đó, vui lòng không đặt quá nhiều mục dữ liệu để tránh hiển thị không bình thường do vượt quá giới hạn chiều rộng.
   
   
3. Đối với menu mẫu giao diện Brooklyn, việc cấu hình quá nhiều mục menu có thể gây ra hiển thị không bình thường do chiều cao menu vượt quá giới hạn. Vì vậy, vui lòng không đặt quá nhiều mục menu trong trường hợp sử dụng mẫu giao diện Brooklyn.