Kiến Trúc Header Navigation Shopify: Bố Cục, Phân Bổ Không Gian, Menu Tiện Ích và Xử Lý Breakpoint

Header desktop hoạt động trong một ngân sách chiều ngang cố định, cân bằng giữa nhận diện thương hiệu, danh mục sản phẩm, công cụ tiện ích và đường dẫn thanh toán.

Xem header như một flex container tự do sẽ khiến liên kết va chạm với ô tìm kiếm, rớt dòng hoặc co cụm thành menu drawer. Điều hướng ổn định đòi hỏi lựa chọn bố cục chủ động, dự toán không gian và kiểm thử responsive kỹ lưỡng.

Câu trả lời nhanh: Bố cục Header Shopify nào phù hợp với cửa hàng của bạn?

Không có một bố cục header Shopify nào là tốt nhất cho mọi cửa hàng. Các store có danh mục sản phẩm thường hợp nhất với logo bên trái và các link danh mục thẳng hàng, boutique nhỏ có thể dùng logo ở giữa với link chia đôi hai bên, còn các store lớn nhiều ngành hàng cần header hai tầng với thanh tiện ích riêng. Hãy tránh giấu menu desktop sau nút hamburger.

Việc chọn kiến trúc header desktop phù hợp dựa trên bốn mô hình bố cục cốt lõi:

• Logo bên trái + Menu thẳng hàng: Đặt logo bên trái với các liên kết danh mục trải sang phải, mang lại khoảng trống chiều ngang rộng nhất cho danh mục trong khi gom tiện ích sang bên phải.
• Logo chính giữa + Điều hướng chia đôi (Split): Đặt logo ở giữa, hai bên là các link danh mục. Phù hợp với danh mục nhỏ, nhưng chia không gian ngang thành hai đoạn ngắn hơn.
• Điều hướng hai tầng xếp chồng (Two-Tier): Chia điều hướng thành hai thanh ngang. Dải mỏng phía trên chứa các tiện ích, dành thanh dưới cho danh mục sản phẩm.
• Drawer ẩn trên desktop: Giấu các link sau biểu tượng hamburger. Dù giao diện tối giản, Nielsen Norman Group khuyến cáo không dùng điều hướng ẩn trên giao diện desktop.

Vì sao không gian header bị cạn trên màn hình laptop

Nhà thiết kế thường duyệt giao diện trên màn hình lớn, nhưng khách hàng thường lướt web trên laptop nơi tỷ lệ display scaling làm giảm số pixel CSS khả dụng.

Làm ví dụ minh hoạ (là phép tính, không phải số liệu thống kê): một màn hình rộng 1920px ở mức scale 150% của Windows cho bề rộng CSS hiệu dụng 1280px (1920 / 1.5 = 1280). Hãy xem analytics của store để biết kích thước viewport mà khách hàng của bạn thực sự dùng.

Khi các thành phần header vượt quá bề rộng ngang, điều hướng có thể bị vỡ theo ba cách khác nhau:

+-------------------------------------------------------------------------------+
|  Wide Viewport - Illustration                                                 |
|  [Brand Logo]   Women   Men   Accessories   Footwear   Sale   [Search] [Cart] |
+-------------------------------------------------------------------------------+

+-------------------------------------------------------------------------------+
|  Laptop-Width Viewport - Unplanned Wrapping Illustration                      |
|  [Brand Logo]   Women   Men   Accessories   Footwear                          |
|  Sale   [Search] [Cart]  <-- Wraps onto second line, shifting content downward|
+-------------------------------------------------------------------------------+

1. Flexbox tự động xuống dòng ngoài ý muốn: Khung flex đẩy các danh mục cuối hoặc ô tìm kiếm xuống dòng thứ hai, làm tăng chiều cao header và đẩy tụt phần merchandising ở hero.
2. Tràn ngang và cụm tiện ích bị cắt: Khung flex với nowrap đẩy các tiện ích ra ngoài mép viewport, làm khuất nút giỏ hàng hoặc xuất hiện thanh cuộn ngang.
3. Thu gọn sớm thành Drawer trên Desktop: Media query của theme chuyển sang menu hamburger trên màn hình laptop khi không gian chiều ngang không được quản lý tốt.

Theo hướng dẫn Cumulative Layout Shift (CLS) của web.dev, “a layout shift occurs any time a visible element changes its position from one rendered frame to the next” (dịch: “dịch chuyển bố cục xảy ra bất cứ khi nào một phần tử hiển thị thay đổi vị trí từ khung hình được vẽ này sang khung hình kế tiếp”). Một header đã rớt dòng ngay từ lần render đầu là vấn đề về bố cục, nhưng bản thân nó không phải là dịch chuyển bố cục. Dịch chuyển xảy ra khi header thay đổi sau khi đã hiển thị, chẳng hạn khi font hoặc script tải muộn làm đổi chiều cao của nó. Các dịch chuyển bố cục trong vòng 500 mili giây sau thao tác của người dùng không được tính vào CLS.

Nghiên cứu thực nghiệm nói gì về thói quen quét mắt, tìm kiếm và liên kết tiện ích

Nghiên cứu khả năng sử dụng đã công bố thiết lập những kỳ vọng nền tảng cho thiết kế header thương mại điện tử, phân biệt rõ giữa kết quả đo lường và suy luận thiết kế.

Điều hướng hiển thị so với điều hướng ẩn trên desktop

Trong nghiên cứu của Nielsen Norman Group do Pernice & Budiu (2016) thực hiện, “on desktop, people used the hidden menus in only 27% of the cases” (dịch: “trên desktop, người dùng chỉ dùng menu ẩn trong 27% các trường hợp”), trong khi điều hướng hiển thị và điều hướng kết hợp lần lượt được dùng trong 48% và 50% các trường hợp. Khuyến nghị của NN/g rất thẳng thắn: “Do not use hidden navigation (such as hamburger icons) in desktop user interfaces.” (dịch: “Không dùng điều hướng ẩn (chẳng hạn biểu tượng hamburger) trong giao diện người dùng desktop.”)

Quét mắt góc trên bên trái và giả thuyết về điều hướng chia đôi

Bài viết của NN/g về mẫu hình chữ F (Pernice, 2017) mô tả “many fixations concentrated at the top and the left side of the page” (dịch: “nhiều điểm dừng mắt tập trung ở phía trên và bên trái của trang”). Logo căn trái cùng các link danh mục nằm đúng vùng đó.

Bố cục menu chia đôi với logo ở giữa là một giả thuyết, chưa có nghiên cứu độc lập nào công bố. Nếu sự chú ý bắt đầu từ góc trên bên trái, người mua phải nhảy mắt qua logo ở giữa để xem tiếp danh mục bên phải, có thể làm giảm tương tác. Chủ shop dùng header chia đôi nên tự kiểm chứng bằng bản đồ nhiệt hoặc dữ liệu nhấp chuột.

Vị trí và kích thước ô tìm kiếm

NN/g (Nielsen, 2001) khuyến nghị rằng “trên trang chủ, tìm kiếm nên là một ô nhập chứ không phải một liên kết”, đặt ở đầu trang, thường ở góc phải và “đủ rộng để chứa truy vấn thông thường”. Cửa hàng nhỏ dùng icon mở rộng nên tự kiểm tra sự đánh đổi này.

Danh mục sản phẩm phải là các mục cấp cao

Baymard Institute (2023) nhận thấy rằng “33% of mobile sites fail to make the product categories the top-level items” (dịch: “33% site di động không đặt các danh mục sản phẩm làm mục cấp cao nhất”), và lưu ý rằng “having the product categories as top-level items on desktop sites matches the ideal mobile implementation” (dịch: “việc đặt các danh mục sản phẩm làm mục cấp cao nhất trên site desktop khớp với cách triển khai di động lý tưởng”). Suy luận của chúng tôi: nếu “About Us”, “FAQ” hoặc “Track Order” nằm cùng hàng với các danh mục, chúng sẽ tranh giành không gian và sự chú ý vốn có hạn với các danh mục. Đó là một nhận định thiết kế, không phải kết quả đo lường.

So sánh 4 mô hình bố cục header

Chủ shop nên đánh giá kiến trúc header dựa trên quy mô danh mục, nhu cầu tìm kiếm và mức độ phức tạp của các tiện ích vận hành.

Lưu ý: Bảng so sánh này là bản tóm tắt các mẫu kiến trúc, không phải kết quả kiểm tra đo lường trên các cửa hàng cụ thể.

Menu thẳng hàng với logo bên trái là tiêu chuẩn phổ biến trong thương mại điện tử, cố định logo bên trái và trải danh mục sang phải cho chuỗi liên kết liền mạch.

Bố cục chia đôi với logo ở giữa mang lại vẻ cân đối cho thương hiệu boutique, nhưng việc bổ sung danh mục hoặc bộ chọn khu vực sẽ nhanh chóng gây chật chội chiều ngang.

Bố cục xếp chồng hai tầng phân tách các mối quan tâm theo chiều dọc: thương hiệu, tìm kiếm và tiện ích nằm ở trên, dành trọn thanh bên dưới cho danh mục. Chiều sâu danh mục có thể chuyển vào mega menu: Baymard ghi nhận “drop-down menu dạng hover (tức ‘mega menu’) hiện được dùng làm điều hướng chính ở 88% các trang thương mại điện tử hàng đầu của Mỹ” trong báo cáo benchmark điều hướng chính, tổng hợp từ 344 website. Xem hướng dẫn về thực hành tốt nhất cho mega menu Shopify.

Về khả năng tiếp cận, tài liệu W3C WAI ARIA Menubar Pattern chỉ rõ rằng “một menu hiển thị thường trực được gọi là menubar”.

Tách menu tiện ích khỏi điều hướng danh mục sản phẩm

Menu tiện ích bao gồm các công cụ hỗ trợ người dùng ngoài danh mục sản phẩm—như tài khoản, theo dõi đơn hàng, chuyển đổi tiền tệ và hỗ trợ khách hàng. NN/g định nghĩa “Menu tiện ích gồm các hành động và công cụ phụ”.

Hình 1: Concept illustration (Minh hoạ khái niệm) — header trộn link tiện ích vào menu chính so với header chuyển chúng sang thanh tiện ích riêng.

Theo Nielsen Norman Group (Farrell, 2015), liên kết tiện ích có thể chiếm “một vị trí hiển thị phụ (ít nổi bật hơn)” so với điều hướng chính.

Trên Shopify, chủ shop thường có ba cách để tách liên kết tiện ích khỏi hàng chính, tùy thuộc vào theme:

1. Cài đặt menu phụ trong Header section của theme: Một số theme hỗ trợ menu thứ hai hoặc dải tiện ích phía trên thanh chính. Hãy kiểm tra cài đặt theme để tận dụng tùy chọn có sẵn.
2. Thanh tiện ích trên cùng: Theme có dải trên cùng có thể chứa bộ chọn tiền tệ, tài khoản và tra cứu đơn hàng, giữ thanh chính hoàn toàn cho danh mục.
3. Chuyển bớt xuống footer: Đưa các liên kết như “Giới thiệu”, “Báo chí” và “FAQ” xuống footer giúp header gọn gàng mà người dùng vẫn dễ dàng tiếp cận.

Để tối ưu hóa điều hướng trong quy trình thanh toán, hãy xem phân tích của chúng tôi về header navigation trong trang checkout.

Kỹ thuật xử lý breakpoint: Kiểm thử header trên bề rộng laptop

Hãy lập kế hoạch điều hướng dựa trên ngân sách pixel chiều ngang cụ thể thay vì chỉ nhìn trực quan trên màn hình rộng.

Hình 2: Concept illustration (Minh hoạ khái niệm) — một header Shopify được kiểm thử ở bề rộng màn hình rộng và ở bề rộng laptop hẹp hơn, nơi menu cần một phương án.

Công thức tính khoảng trống khả dụng

Ước tính khoảng trống chiều ngang khả dụng cho liên kết danh mục bằng công thức thực tế sau:

Available Width = Viewport Width - (Logo Width + Utility Cluster Width + Container Padding & Margins)
Max Width Per Item = Available Width / Number of Primary Links

Cấu trúc minh họa (không có số đo thật): hãy đo logo, cụm tiện ích và lề của chính shop bạn, trừ chúng khỏi bề rộng viewport để ra Available Width, rồi chia cho số liên kết danh mục để có ngân sách cho mỗi liên kết. So ngân sách đó với nhãn rộng nhất mà bạn đo được trên shop.

Đo kích thước nhãn thực tế trong DevTools

Kiểm tra bề rộng thực tế của nhãn trong DevTools để xác minh menu có vừa vặn hay không:

1. Mở Chrome DevTools (F12) và bật Device Mode.
2. Đặt chiều rộng viewport về bề rộng laptop hiệu dụng từ ví dụ scaling ở trên hoặc một bề rộng lấy từ analytics của bạn.
3. Kiểm tra nhãn menu dài nhất trong tab Computed, ghi nhận kích thước pixel bao gồm cả padding và margin.
4. Nhân bề rộng nhãn dài nhất với tổng số liên kết. Nếu tổng vượt quá khoảng trống khả dụng, menu nhiều khả năng sẽ bị rớt dòng hoặc tràn ngang.

Quy tắc định hướng kiến trúc

Các nguyên tắc kiến trúc này là định hướng thiết kế chứ không phải ngưỡng tuyệt đối. Luôn kiểm chứng bằng công thức tính khoảng trống ở trên.

• Shop danh mục nhỏ: Với ít danh mục chính, logo bên trái hoặc chia đôi logo giữa thường vừa vặn dễ dàng trên màn hình laptop.
• Shop danh mục vừa: Bố cục thẳng hàng hoạt động tốt nếu liên kết tiện ích dùng icon gọn gàng và nhãn ngắn.
• Shop nhiều ngành hàng: Với lượng danh mục lớn, bố cục thẳng hàng dễ bị vỡ trên laptop; hãy cân nhắc bố cục hai tầng hoặc mega menu.
• Shop đa quốc gia: Bộ chọn tiền tệ và ngôn ngữ chiếm nhiều diện tích; nên chuyển lên thanh tiện ích trên cùng hoặc xuống footer.

Khi menu vượt quá chiều ngang khả dụng, bạn có ba hướng xử lý: giảm bớt liên kết cấp cao, rút gọn chữ trên nhãn, hoặc chuyển sang bố cục hai tầng. Tránh vội vã thu gọn desktop thành menu drawer ẩn.

Các bẫy riêng trên Shopify: Bộ chọn Markets, số lượng DOM header và chữ in hoa

Xây dựng điều hướng trên Shopify đòi hỏi xử lý những yếu tố kỹ thuật đặc thù của nền tảng.

Bộ chọn tiền tệ và ngôn ngữ Shopify Markets

Các shop bán hàng quốc tế thường thêm bộ chọn tiền tệ, quốc gia hoặc ngôn ngữ vào header. Tùy theo theme, các thành phần này hiển thị thành nút khá rộng. Trong header một hàng, bộ chọn lớn sẽ chiếm chỗ của danh mục và gây rớt dòng trên laptop. Cân nhắc chuyển bộ chọn Markets lên thanh tiện ích trên cùng hoặc xuống footer.

Kích thước DOM header và chi phí tải Liquid

Render menu thả xuống nhiều cấp trực tiếp bằng Liquid làm tăng lượng HTML tải về trong mỗi lượt truy cập. Theo hướng dẫn DOM size của Google Chrome Lighthouse, công cụ “cảnh báo khi thẻ body có hơn khoảng 800 node” và “báo lỗi khi có hơn khoảng 1.400 node”. Header cồng kềnh sẽ tiêu tốn ngân sách này từ sớm. Xem thêm phân tích của chúng tôi về điều hướng và Core Web Vitals.

Kiểu chữ in hoa và khoảng cách ký tự

Bộ nhận diện thương hiệu thường yêu cầu chữ in hoa kèm letter spacing rộng cho menu. Việc đặt chữ in hoa (text-transform: uppercase) và tăng letter-spacing làm tăng bề rộng thực tế của liên kết. Hãy đo lại kích thước nhãn mỗi khi thay đổi typography của storefront.

Giới hạn phân cấp menu mặc định của Shopify

Theo tài liệu chính thức của Shopify về drop-down menu, “mục cấp cao nhất có thể có tối đa hai cấp menu thả xuống lồng nhau”, tạo nên giới hạn 3 cấp điều hướng. Bạn thiết lập menu trong trang quản trị Shopify và kết nối với theme như Horizon hoặc các theme khác trong hub theme Shopify.

Đánh đổi: Khi nào không nên dùng từng mô hình header

Mỗi bố cục header đều mang lại sự đánh đổi giữa thẩm mỹ, hiệu quả không gian và khả năng khám phá danh mục.

Shop một sản phẩm dùng header thẳng hàng dễ tạo khoảng trống lạc lõng giữa logo và giỏ hàng. Ngược lại, bố cục chia đôi nhanh chóng hết chỗ khi mở rộng bộ sưu tập hoặc thêm bộ chọn Markets.

Header hai tầng làm tăng chiều cao dọc và đẩy sản phẩm chính xuống dưới màn hình đầu tiên. Hãy đo chiều cao kết hợp của thanh thông báo, thanh tiện ích và thanh điều hướng chính. Khi khách truy cập chủ yếu dùng điện thoại, chiều cao desktop lớn có thể không cần thiết.

Cuối cùng, drawer ẩn trên desktop đi ngược lại khuyến nghị của NN/g và phát hiện rằng người dùng desktop chỉ mở menu ẩn 27% trường hợp so với 48% ở menu hiển thị. Trong khi drawer phù hợp cho mobile, màn hình máy tính có đủ diện tích cho các liên kết trực quan. Về kiến trúc drawer cho điện thoại, hãy đọc hướng dẫn thiết kế menu drawer mobile.

Checklist hành động: Kiểm tra toàn diện header Shopify

Kiểm tra điều hướng storefront Shopify của bạn với danh sách 6 bước thực tế sau:

• Bước 1: Kiểm toán Viewport trên Laptop — Trong DevTools, kiểm tra bố cục storefront ở bề rộng laptop hiệu dụng từ ví dụ scaling và ở các bề rộng từ analytics, đảm bảo danh mục không rớt dòng hay kích hoạt hamburger desktop.
• Bước 2: Đưa các tiện ích phụ ra khỏi hàng danh mục — Chuyển “Tra cứu đơn hàng”, “Giới thiệu” và “FAQ” từ hàng danh mục lên thanh tiện ích trên cùng, dropdown tài khoản hoặc footer.
• Bước 3: Đặt ngân sách chiều cao cho Header — Đo tổng chiều cao thanh thông báo, thanh tiện ích và thanh menu chính để bảo toàn không gian hiển thị sản phẩm trên laptop.
• Bước 4: Kiểm tra Typography và cách đặt tên nhãn — Rút gọn các nhãn dài và kiểm tra xem kiểu chữ in hoa hay letter spacing có làm phình bề rộng hiển thị của liên kết hay không.
• Bước 5: Kiểm tra kích thước vùng bấm — Đảm bảo mục tiêu đạt W3C WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum): tối thiểu 24 × 24 CSS pixel, hoặc có đủ khoảng cách bù.
• Bước 6: Kiểm tra bàn phím và quản lý focus — Xác thực điều hướng bằng phím Tab di chuyển hợp lý, và phím Escape đóng menu rồi trả focus theo W3C WAI ARIA Menubar Pattern.

Vai trò và vị trí của Navi+

Khi danh mục phát triển vượt quá khả năng chứa của header theme, một hướng đi là tùy biến code Liquid. Navi+ mang đến giải pháp ứng dụng Shopify để xây dựng điều hướng riêng biệt mà không cần chỉnh sửa code theme.

• Tách biệt Menu Desktop và Mobile: Xây dựng Desktop Mega Menu cho người dùng máy tính, đồng thời cấu hình Mobile Menu (drawer), Tab Bar (xem phân tích về kiến trúc mobile tab bar), Icon Menu hoặc Floating Button cho thiết bị di động.
• Tối đa 3 cấp: Giống menu gốc của Shopify, menu Navi+ có tối đa ba cấp. Một Desktop Mega Menu có thể chứa chiều sâu danh mục trong một panel thay vì trong thanh header.
• Kích hoạt qua Theme App Embed: Navi+ bật thông qua theme app embed chuẩn của Shopify. Menu được lưu dạng cấu hình và dựng phía trình duyệt bằng script của app mà không cần sửa file Liquid của theme.

Chúng tôi không đưa ra tuyên bố nào về tốc độ ở đây. Hãy đo tác động trên chính storefront của bạn bằng Google PageSpeed Insights.

Khi nào không nên dùng Navi+: Các thương hiệu một sản phẩm hoặc store có danh mục rất nhỏ hiếm khi cần ứng dụng điều hướng của bên thứ ba. Với các store này, cài đặt header có sẵn của theme có thể là đủ. Các hướng dẫn thiết lập Navi+ cho Shopify theme của chúng tôi bao quát các theme phổ biến nếu bạn muốn so sánh.

Nếu header theme của bạn đã hết chỗ, bạn có thể thử Navi+ để xây Desktop Mega Menu và Mobile Menu riêng mà không sửa code theme — rồi chạy lại phép kiểm tra bề rộng laptop từ checklist bên trên.

Câu hỏi thường gặp

Làm thế nào để thay đổi menu header trong Shopify?

Mở theme trong theme editor và chọn phần Header. Theo Shopify Help Center, với hầu hết theme bạn có thể đổi menu chính mặc định trong cài đặt phần Header.

Menu drop-down của Shopify có thể có tối đa bao nhiêu cấp?

Theo tài liệu chính thức của Shopify, một mục cấp cao nhất có thể có tối đa hai cấp menu thả xuống lồng nhau, tạo thành tối đa ba cấp điều hướng.

Có nên dùng menu hamburger trên desktop không?

Nielsen Norman Group khuyến cáo không nên: “Không dùng điều hướng ẩn (chẳng hạn biểu tượng hamburger) trong giao diện người dùng desktop.” Trong thử nghiệm, người dùng desktop dùng menu ẩn 27% trường hợp so với 48% ở menu hiển thị.

Ô tìm kiếm nên đặt ở đâu trong header?

NN/g khuyến nghị dùng ô nhập chữ thay vì một liên kết, đặt ở đầu trang (thường là góc bên phải) và đủ rộng để chứa truy vấn thông thường.

Các link tài khoản, tra cứu đơn hàng và tiền tệ nên đặt ở đâu?

Đây là điều hướng tiện ích: các thao tác và công cụ phụ. NN/g lưu ý chúng có thể đặt ở vị trí thứ cấp, ít nổi bật hơn, như thanh tiện ích phía trên hoặc góc phải, tách biệt khỏi danh mục.

Các link và biểu tượng trên header nên lớn bao nhiêu?

Theo W3C WCAG 2.2 SC 2.5.8, kích thước mục tiêu cho thiết bị trỏ tối thiểu là 24 × 24 CSS pixel, trừ khi áp dụng ngoại lệ như có đủ khoảng cách bù.

Nguồn tham khảo

1. Nielsen Norman Group: Pernice, K. & Budiu, R. (2016). Hamburger Menus and Hidden Navigation Hurt UX Metrics. nngroup.com/articles/hamburger-menus
2. Nielsen Norman Group: Nielsen, J. (2001). Search: Visible and Simple. nngroup.com/articles/search-visible-and-simple
3. Nielsen Norman Group: Pernice, K. (2017). F-Shaped Pattern of Reading: Misunderstood, But Still Relevant. nngroup.com/articles/f-shaped-pattern-reading-web-content
4. Nielsen Norman Group: Farrell, S. (2015). Utility Navigation: What It Is and How to Design It. nngroup.com/articles/utility-navigation
5. Baymard Institute: ‘Main Navigation’ Design Examples. baymard.com/homepage-and-category-usability/benchmark/page-types/drop-down-menu
6. Baymard Institute (2023): Make Product Categories the Top-Level Navigation Items on Mobile Sites (33% Don’t). baymard.com/blog/main-navigation-product-categories
7. Shopify Help Center: Set up drop-down menus in your online store. help.shopify.com
8. W3C Web Accessibility Initiative: Understanding SC 2.5.8: Target Size (Minimum). w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
9. W3C WAI ARIA: Menu and Menubar Pattern. w3.org/WAI/ARIA/apg/patterns/menubar
10. Google web.dev: Cumulative Layout Shift (CLS). web.dev/articles/cls
11. Google Chrome Lighthouse: Avoid an excessive DOM size. developer.chrome.com
12. Navi+: Setup guides for Shopify themes. naviplus.io/shopify-themes