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 bạn.
   

Thiết Lập Menu Riêng Cho Thị Trường

Nếu cửa hàng của bạn đã kích hoạt Thị trường, Mega Menu Builder cho phép bạn thiết lập menu khác nhau cho từng thị trường, để mỗi thị trường có thể hiển thị nội dung menu riêng của mình.

Trong menu thả xuống thị trường ở đầu trình chỉnh sửa, chọn thị trường bạn muốn cấu hình. Sau đó bạn có thể thiết lập nội dung menu, kiểu dáng và các cài đặt khác chỉ dành cho thị trường đó. Nhấn Lưu khi bạn hoàn tất.

Khi một thị trường đã có cài đặt riêng, nó sẽ không còn theo dõi các thay đổi được thực hiện trong Cài đặt Mặc định. Bất kỳ chỉnh sửa nào trong tương lai đối với menu Cài đặt Mặc định sẽ không tự động áp dụng cho các thị trường đã có cấu hình riêng.

Nếu bạn muốn áp dụng menu Cài đặt Mặc định cho các thị trường khác, hãy nhấp vào Sao chép menu chỉ với một cú nhấp ở góc dưới bên trái. Điều này sẽ đồng bộ cấu hình mặc định cho tất cả các thị trường trong một bước.

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 tương ứng và tiêu đề bộ sưu tập sản phẩm. 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 Phong cách Menu

Nhấp vào Phong cách để thiết lập phong cách toàn cục cho menu mega mà bạn đã thiết lập. Hiện tại, ứng dụng hỗ trợ thiết lập phong cách 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.


 

Phong cách 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 trong phần Style để 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 sẽ 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, một đường sẽ xuất hiện phía trên và phía dưới mục.

Để đạt được hiệu ứng trên, hãy thêm CSS tùy chỉnh sau trong phần Style.

/* 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;
}

/* Mobile - 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

Sau khi xây dựng mega menu, 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 mega menu 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 (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 mega menu. 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, hãy nhấp vào nút Dịch ở góc trên bên phải.

Chọn ngôn ngữ đích mà bạn muốn dịch, sau đó nhấp vào 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, các bố cục điều hướng Chia Menu / Thu gọn Menu 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 Đầ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 đầ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ấp 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 giao diện mẫu Brooklyn.