Bạn vừa sắp xếp xong danh mục hè của mình. Bốn mươi ba bộ sưu tập mới đã sẵn sàng, mỗi bộ liên kết đến một tập hợp sản phẩm được curation. Bạn mở trình chỉnh sửa chủ đề Shopify, điều hướng đến phần mega menu tiêu đề của mình và bắt đầu thêm các khối cho mỗi bộ sưu tập. Bạn thêm mười sáu khối đầu tiên mà không gặp vấn đề gì. Sau đó, khi bạn nhấp “Thêm khối” cho khối thứ 17, không có gì xảy ra. Nút được làm xám đi. Chủ đề của bạn đã chạm đến giới hạn khối của nó, và bảy trong số các danh mục mới của bạn không có cách nào để xuất hiện trong menu.
Kịch bản này diễn ra mỗi ngày tại các cửa hàng chạy các chủ đề phổ biến như Dawn, Prestige, Impact và Impulse. Mỗi chủ đề đặt số khối tối đa của riêng nó cho mỗi phần, và những giới hạn đó thường thấp hơn những gì danh mục đang phát triển yêu cầu. Hiểu biết về nguồn gốc của những giới hạn này — và khi nào chúng trở thành một vấn đề thực sự — tiết kiệm hàng giờ sự bực bội và ngăn chặn mất doanh thu vô hình từ các danh mục ẩn.
- Nền tảng Shopify cho phép tối đa 50 khối trên mỗi phần, nhưng hầu hết các chủ đề thực thi giới hạn thấp hơn riêng của họ (Dawn: 25, Prestige: 16, Impact: 20).
- Mỗi mục menu, hình ảnh, tiêu đề và liên kết trong mega menu thường sử dụng một khối.
- Các cửa hàng thường chạm đến giới hạn khối ở 100–200 sản phẩm trên 20+ bộ sưu tập.
- Các ứng dụng menu bỏ qua giới hạn khối hoàn toàn bằng cách hiển thị điều hướng bên ngoài kiến trúc phần của chủ đề.
Giới hạn khối thực sự là gì
Shopify Online Store 2.0 đã giới thiệu một kiến trúc phần và khối chi phối cách các chủ đề hiển thị nội dung. Mỗi phần (tiêu đề, chân trang, biểu ngữ anh hùng, lưới sản phẩm) có thể chứa một số lượng khối cố định. Mỗi khối đại diện cho một phần tử có thể định cấu hình — một liên kết menu, một hình ảnh, một tiêu đề, một biểu ngữ quảng cáo trong một bảng điều khiển mega menu.
Bản thân nền tảng giới hạn các khối ở 50 trên mỗi phần — đây là giới hạn cấp Shopify được ghi trong nhật ký thay đổi kiến trúc chủ đề của họ. Nhưng các chủ đề hiếm khi cho phép toàn bộ 50. Nhà phát triển chủ đề đặt giá trị max_blocks trong lược đồ phần của họ để xác định có bao nhiêu khối khả dụng. Lý do để hạn chế điều này khác nhau:
Ổn định hiệu suất. Mỗi khối thêm các phần tử DOM và dữ liệu cấu hình. Ở các số lượng cao hơn, trình chỉnh sửa chủ đề chậm lại, kết xuất xem trước mất nhiều thời gian hơn, và các thương nhân ít có kinh nghiệm hơn phải đối mặt với các giao diện quản trị nhầm lẫn.
Giả định thiết kế hình ảnh. Các nhà thiết kế chủ đề xây dựng các bố cục mega menu giả định một số lượng mục nhất định. Một mega menu được thiết kế cho 16 mục có thể sử dụng bố cục 4 cột trong đó mỗi cột chứa 4 mục. Thêm mục thứ 17 sẽ phá vỡ lưới, đẩy nội dung xuống dưới nếp gấp hoặc tạo bố cục hình ảnh không cân bằng.
Phạm vi đảm bảo chất lượng. Kiểm tra một chủ đề trên tất cả các cấu hình khối có thể là tốn kém. Bằng cách giới hạn các khối ở 16 hoặc 20, các nhà phát triển chủ đề có thể kiểm tra kỹ lưỡng mọi kết hợp bố cục có thể và đảm bảo nó trông tốt. Ở 50 khối, số lượng hoán vị bố cục làm cho việc kiểm tra toàn diện trở nên không thực tế.
Giới hạn khối trong các chủ đề Shopify phổ biến
Dưới đây là cách các giới hạn khối diễn ra trong các chủ đề mà các cửa hàng Shopify thường sử dụng:
| Chủ đề | Khối tối đa (phần mega menu tiêu đề) | Ghi chú |
|---|---|---|
| Dawn (miễn phí) | 25 khối | Chủ đề tham khảo của Shopify; các khối mega menu chia sẻ giới hạn 25 khối với các phần tử tiêu đề khác |
| Prestige (Clean Canvas) | 16 khối trên mỗi mega menu | Một trong những giới hạn chặt chẽ nhất; các cửa hàng có 20+ danh mục sẽ chạm đến điều này nhanh chóng |
| Impact (Maestrooo) | 20 khối trên mỗi phần | Mega menu của Impact sử dụng các khối lồng nhau, vì vậy hình ảnh và tiêu đề sử dụng các khối quá |
| Impulse (Archetype) | 16 mục menu trên mỗi danh sách thả xuống | Impulse đếm các liên kết menu thực tế, nhưng các khối hình ảnh và bộ sưu tập nổi bật cũng sử dụng các khe |
| Warehouse (Maestrooo) | 20 khối | Tương tự như Impact, được thiết kế cho các danh mục lớn hơn nhưng vẫn bị giới hạn |
| Symmetry (Clean Canvas) | 12 khối trên mỗi cột mega menu | Giới hạn mỗi cột chặt chẽ hơn có nghĩa là các danh mục lớn phải chia tách trên nhiều cột |
Những con số này đánh lừa vì không phải mọi khối đều là một liên kết menu. Trong hầu hết các chủ đề, một bảng điều khiển mega menu duy nhất có thể sử dụng các khối cho:
- Liên kết mục menu (một khối trên mỗi liên kết)
- Tiêu đề phần (một khối trên mỗi tiêu đề)
- Hình ảnh quảng cáo hoặc biểu ngữ khuyến mãi (một khối trên mỗi hình ảnh)
- Thẻ bộ sưu tập hoặc spotlight sản phẩm (mỗi cái một khối)
Một bảng điều khiển mega menu có hai tiêu đề, hai hình ảnh khuyến mãi và 12 liên kết bộ sưu tập sử dụng 16 khối — giới hạn tối đa trong Prestige — mặc dù chỉ có 12 liên kết menu thực tế hiển thị. Thêm một liên kết bộ sưu tập nữa, và bạn sẽ vượt quá giới hạn.
Cách biết nếu giới hạn khối đang làm hại cửa hàng của bạn
Giới hạn khối tạo ra một loại vấn đề cụ thể: các danh mục vô hình. Không giống như bố cục bị hỏng hoặc trang chậm, thiệt hại từ các mục menu bị thiếu là im lặng. Các khách hàng mua sắm đơn giản là không bao giờ khám phá các danh mục không xuất hiện trong menu, và bạn không bao giờ nghe nói về các sản phẩm họ không biết tồn tại.
Dưới đây là những dấu hiệu:
Menu của bạn không phản ánh cấu trúc danh mục đầy đủ của bạn. Mở quản trị viên Shopify của bạn và liệt kê tất cả các bộ sưu tập hoạt động của bạn. Sau đó mở menu điều hướng cửa hàng của bạn. Nếu có khoảng cách — các bộ sưu tập tồn tại nhưng không xuất hiện trong bất kỳ menu nào — bạn có thể đã chạm đến giới hạn khối hoặc đã lựa chọn có ý thức để ẩn các danh mục. Dù bằng cách nào, những danh mục ẩn đó là vô hình đối với những khách hàng mua sắm qua menu (khoảng 69% các khách hàng mua sắm trực tuyến, theo nghiên cứu của Baymard Institute).
Bạn đang thoả hiệp về danh mục để phù hợp với giới hạn. Bạn có đang nhóm các bộ sưu tập không liên quan dưới một tiêu đề mơ hồ như “Khác” hoặc “Hơn nữa” để tiết kiệm các khe menu không? Bạn có đang kết hợp “Giày chạy” và “Giày bộ” thành một danh mục “Giày thể thao” duy nhất vì bạn không thể tiêu tốn hai khối không? Những thoả hiệp này trao đổi khám phá vì sự tiện lợi.
Mega menu của bạn trông khác nhau trên các trang khác nhau. Một số chủ sở hữu cửa hàng tạo nhiều cấu hình menu — hiển thị các tập hợp danh mục khác nhau trên các trang khác nhau — để giải quyết giới hạn khối. Sự không nhất quán này làm nhầm lẫn những khách hàng mua sắm mong đợi menu trông giống nhau ở mọi nơi.
Bạn đã ngừng thêm các bộ sưu tập mới vào menu. Đây là tín hiệu rõ ràng nhất. Nếu bạn tạo các bộ sưu tập mới nhưng không thêm chúng vào điều hướng vì “không có chỗ,” giới hạn khối đang tích cực hạn chế sự phát triển của cửa hàng bạn.
Tìm kiếm trang web của bạn cho thấy mức sử dụng cao cho các điều khoản liên quan đến danh mục. Nếu những khách hàng mua sắm tìm kiếm tên bộ sưu tập như “áo khoác ngoài trời” hoặc “đồ dùng nhà bếp” mà sẽ là các danh mục có thể duyệt, có nghĩa là họ không thể tìm thấy những danh mục đó trong menu. Xem lại phân tích tìm kiếm trang web của bạn — nếu các điều khoản cấp danh mục xuất hiện thường xuyên trong các truy vấn tìm kiếm, menu của bạn không hiển thị những danh mục đó một cách hiệu quả.
Toán học: khi giới hạn khối làm tổn thất doanh thu của bạn
Định lượng tác động của các mục menu bị thiếu cần một số giả định, nhưng khung là rõ ràng.
Giả sử cửa hàng của bạn có 35 bộ sưu tập hoạt động nhưng mega menu của chủ đề của bạn chỉ hiển thị 20 do giới hạn khối. Điều đó có nghĩa là 15 bộ sưu tập — khoảng 43% danh mục của bạn — không thể truy cập trực tiếp từ menu chính. Những khách hàng mua sắm vẫn có thể truy cập những bộ sưu tập này thông qua tìm kiếm, liên kết trực tiếp trên các trang bộ sưu tập hoặc duyệt thông qua các danh mục cha rộng hơn, nhưng mỗi con đường thay thế thêm ma sát.
Nghiên cứu từ Baymard Institute cho thấy rằng các danh mục không hiển thị trong điều hướng chính thấy tham gia thấp hơn đáng kể, thường là 30–50% lưu lượng truy cập ít hơn so với các danh mục hiển thị menu. Nếu những 15 bộ sưu tập ẩn đó trung bình $2,000/tháng doanh thu (khi được tiếp xúc đúng cách), và ẩn chúng làm giảm lưu lượng truy cập 35%, bạn đang mất khoảng $10,500/tháng — $126,000/năm — doanh thu tiềm năng từ ma sát điều hướng một mình.
Con số tỷ lệ với danh mục của bạn. Một cửa hàng có 60 bộ sưu tập chạm đến giới hạn 16 khối đang ẩn 44 bộ sưu tập. Thậm chí các ước tính bảo thủ cũng gợi ý mất doanh thu đáng kể từ các danh mục mà những khách hàng mua sắm đơn giản là không bao giờ khám phá.
Giải pháp trong chủ đề của bạn
Trước khi chuyển sang ứng dụng, có những cách hợp pháp để mở rộng giới hạn của bạn:
Hợp nhất các tiêu đề menu và hình ảnh. Nếu mega menu của bạn sử dụng các khối cho các tiêu đề phần và hình ảnh khuyến mãi, xóa một số trong đó sẽ giải phóng các khe cho các liên kết danh mục thực tế. Một tiêu đề nói “Mua hàng theo danh mục” chiếm một khối mà có thể là một liên kết trực tiếp đến một bộ sưu tập. Những khách hàng mua sắm không cần được bảo vệ rằng họ đang xem các danh mục — bối cảnh là hiển nhiên.
Sử dụng ít các khối quảng cáo hơn. Hình ảnh sản phẩm nổi bật và biểu ngữ theo mùa trong mega menu trông hấp dẫn, nhưng mỗi cái tiêu thụ một khối. Trong những khoảng thời gian khi bạn cần khả năng hiển thị danh mục tối đa (khởi động theo mùa, sự kiện bán hàng), tạm thời thay thế các khối quảng cáo bằng các liên kết danh mục.
Tái cấu trúc hệ thống phân cấp danh mục của bạn. Đôi khi vấn đề thực sự không phải là giới hạn khối — đó là cấu trúc danh mục quá chi tiết. Nếu bạn có các bộ sưu tập riêng biệt cho “Áo phông xanh,” “Áo phông đỏ” và “Áo phông xanh lá cây,” hợp nhất chúng thành “Áo phông” và sử dụng các bộ lọc sản phẩm cho màu sắc làm giảm mức sử dụng khối của bạn mà không mất chức năng.
Chỉnh sửa mã chủ đề để tăng giới hạn. Nếu bạn có quyền truy cập vào nhà phát triển, giá trị max_blocks trong lược đồ phần của chủ đề có thể tăng lên. Mở tệp phần .liquid có liên quan, tìm tham số max_blocks và tăng lên. Đây là một thay đổi mã rủi ro thấp, nhưng hãy lưu ý rằng:
- Tăng các khối vượt quá những gì chủ đề được thiết kế có thể gây ra các vấn đề bố cục
- Các cập nhật chủ đề có thể ghi đè lên thay đổi của bạn
- Hiệu suất trong trình chỉnh sửa chủ đề có thể giảm xuống ở các số khối cao hơn
Đây là cách thay đổi mã trông như thế nào:
// Trong lược đồ phần tiêu đề của chủ đề
{
"name": "Mega menu",
"max_blocks": 16 // Đổi điều này thành 30 hoặc 50
}
Điều này hoạt động, nhưng đó là một bản vá, không phải giải pháp. Bố cục được thiết kế cho 16 mục, vì vậy thêm 30 có thể sẽ tạo ra các vấn đề tràn cần các bản sửa CSS bổ sung.
Khi nào chuyển sang ứng dụng menu
Điểm quyết định rõ ràng khi bạn đã dùng hết các giải pháp:
Bạn đã hợp nhất các danh mục và vẫn không có đủ khối. Nếu cấu trúc danh mục của bạn đã gọn gàng nhất có thể và bạn vẫn chạm đến giới hạn, chủ đề đơn giản là không thể hỗ trợ danh mục của bạn.
Bạn cần các khối cho cả điều hướng và thương mại. Nếu chiến lược mega menu của bạn bao gồm hình ảnh quảng cáo, sản phẩm nổi bật và liên kết danh mục đầy đủ, bạn sẽ tiêu thụ các khối nhanh chóng. Các ứng dụng tách riêng những điều này — cấu trúc điều hướng sống trong ứng dụng, và mega menu của bạn có thể bao gồm nội dung thương mại phong phú mà không hy sinh được phạm vi danh mục.
Danh mục của bạn phát triển theo mùa. Nếu bạn thêm 10–20 bộ sưu tập trong các mùa lễ hội và xóa chúng sau đó, liên tục điều chỉnh menu của bạn để ở trong giới hạn khối là một gánh nặng bảo trì định kỳ. Một ứng dụng hiển thị các danh mục một cách động từ danh sách bộ sưu tập của bạn xử lý các thay đổi theo mùa tự động.
Nhiều nhân viên cần quản lý menu. Các ứng dụng thường cung cấp các trình chỉnh sửa hình ảnh dễ sử dụng hơn hệ thống khối của trình chỉnh sửa chủ đề. Khi các thành viên nhóm không chuyên về kỹ thuật cần thêm hoặc sắp xếp lại các mục menu, giao diện kéo và thả của ứng dụng làm giảm lỗi và thời gian đào tạo.
Các ứng dụng như Navi+ hiển thị điều hướng độc lập với kiến trúc khối của chủ đề, có nghĩa là giới hạn 16 khối hoặc 50 khối đơn giản là không áp dụng. Bạn xác định cấu trúc menu của mình trong ứng dụng, và nó hiển thị trực tiếp trên cửa hàng của bạn. Phần tiêu đề được xây dựng sẵn của chủ đề vẫn tồn tại (cho logo, tìm kiếm và giỏ hàng), nhưng lớp điều hướng được quản lý hoàn toàn bởi ứng dụng.
Trước khi bạn chuyển đổiXuất cấu trúc menu hiện tại của bạn (ảnh chụp màn hình hoặc ghi lại mọi liên kết và mức lồng của nó) trước khi cài đặt một ứng dụng. Điều này cung cấp cho bạn một đường cơ sở để sao chép trong ứng dụng và đảm bảo không có danh mục nào bị mất trong quá trình chuyển đổi.
Di chuyển từ các khối chủ đề đến ứng dụng: những gì để mong đợi
Quá trình di chuyển từ mega menu chủ đề sang menu do ứng dụng quản lý thường mất 1–3 giờ cho một cửa hàng có 20–50 bộ sưu tập. Dưới đây là những gì quá trình liên quan:
- Cài đặt và cấu hình ứng dụng. Hầu hết các ứng dụng menu cung cấp một trình hướng dẫn onboarding đọc cấu trúc menu Shopify hiện có của bạn và nhập nó.
- Ánh xạ bộ sưu tập vào các mục menu. Đối với các bộ sưu tập không nằm trong menu chủ đề (vì giới hạn khối), thêm chúng vào cấu trúc menu của ứng dụng. Đây là bước mà bạn khôi phục các danh mục ẩn.
- Cấu hình bố cục. Chọn kiểu mega menu, số cột và bất kỳ phần tử khuyến mãi nào. Các ứng dụng thường cung cấp nhiều tùy chọn bố cục phù hợp với số lượng mục.
- Kiểm tra trên thiết bị di động và máy tính để bàn. Xác minh rằng menu hiển thị chính xác trên các thiết bị. Hãy chú ý đến kích thước bảng điều khiển mega menu, hành vi cuộn và mục tiêu nhấp trên thiết bị di động.
- Vô hiệu hóa menu được xây dựng sẵn của chủ đề. Hầu hết các ứng dụng cung cấp hướng dẫn để ẩn điều hướng gốc của chủ đề để tránh menu trùng lặp.
Vấn đề phổ biến nhất trong quá trình di chuyển là menu trùng lặp — điều hướng được xây dựng sẵn của chủ đề hiển thị cùng với menu của ứng dụng. Điều này xảy ra khi phần tiêu đề của chủ đề không được cấu hình đúng cách để ẩn điều hướng của nó. Hầu hết các ứng dụng bao gồm tài liệu dành riêng cho chủ đề để xử lý công tắc này, và các nhóm hỗ trợ có thể giúp.
Sau khi di chuyển, giám sát phân tích của bạn trong 2–4 tuần. Tìm kiếm sự thay đổi trong:
- Lưu lượng truy cập trang bộ sưu tập (sẽ tăng cho các danh mục ẩn trước đó)
- Tham gia điều hướng thiết bị di động (nhiều lần nhấp, tỷ lệ thoát thấp hơn)
- Khối lượng tìm kiếm trang web cho các điều khoản danh mục (sẽ giảm khi các danh mục trở nên hiển thị menu)
Nếu những con số cải thiện — và nghiên cứu gợi ý chúng sẽ làm vậy cho các cửa hàng chạm đến giới hạn khối — ứng dụng đã tự trả hết.
Bài viết này là một phần của hướng dẫn lớn hơn về Hạn chế menu Shopify: khi nào nên sử dụng ứng dụng menu thay vì chủ đề.