Trình tạo Mega Menu: Cài đặt Mega Menu cho cửa hàng của bạn

Ứng dụng Trình tạo Mega Menu cho phép bạn nhanh chóng tạo một menu điều hướng cho 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 cửa hàng 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 có 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ế khác nhau để làm cho cửa hàng của bạn trở nên độc đáo hơn.
• Cung cấp một điều hướng rõ ràng và linh hoạt để cải thiện 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á để tăng doanh số bằng cách sử dụng các kiểu menu khác nhau.

Xây dựng Menu

1. Tại Cửa hàng Ứng dụng SHOPLINE, bạn có thể cài đặt ứng dụng Trình tạo Mega Menu.
   
2. Tạo mega menu: Hiện tại có ba loại mega menu được hỗ trợ, tức là 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 vào 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à một 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 đặt, như hình dưới đây:
    
  • Menu nhãn: Nó bao gồm một khu vực menu nhãn và một khu vực menu ngang. Mỗi nhãn được liên kết với một cấu hình cho một menu ngang, như hình dưới đây:
    

3. Chọn một 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 của bạn để nhanh chóng tạo mega menu cho cửa hàng của bạn.
   
   

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 kiểu 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 một biểu tượng văn bản. Sau khi thiết lập một 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 nó 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ị 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 nó 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í và chiều rộng của hình ảnh để đạt được thiết kế menu hình ảnh tùy chỉnh.
  
  

Cài đặt Kiểu Menu

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


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

Mã Ví Dụ

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

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

/* PC - Toàn cầu */
/* Vui lòng thay đổi màu nền 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ầu */
/* Vui lòng thay đổi màu nền 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à Làm cho Nó Có Hiệu Quả

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

1. Đi đến Kiểu > Ghi đè mặc định của chủ đề để cấu hình cách thức có hiệu lực. Bạn có thể kiểm tra Áp dụng cho tất cả các chủ đề hoặc Xác định chủ đề để ghi đè.
   
   
2. Trong ứng dụng, bật Áp dụng cho Cửa hàng.
   
   
   
   
3. Đi đến 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 (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 việc xây dựng menu lớn của mình. Trong trường hợp đó, bạn cần nhấp vào 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ữ mục tiêu mà bạn muốn dịch, sau đó nhấp vào Dịch Tự Động hoặc điền nội dung một cách thủ công.

Các ngôn ngữ mục tiêu đượ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 Menu Chia / Menu Thu gọn không được hỗ trợ, việc áp dụng các bố cục như vậy sẽ khiến menu hiển thị bất 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 menu lớn sẽ không được hiển thị. Bạn có thể nhấp vào Lưu và sau đó vào cửa hàng để xem hiệu ứng hiển thị menu lớn.
   
   
2. Menu dọc hiện tại không hỗ trợ cuộn để xem. Do đó, xin đừng đặt quá nhiều mục dữ liệu để tránh hiển thị bất thường cho 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ị bất thường do chiều cao quá mức của menu. Do đó, xin đừng đặt quá nhiều mục menu trong trường hợp mẫu giao diện Brooklyn.