Cách Tùy Chỉnh Bố Cục Header Menu Trong Shopify (Cài Đặt Theme, Dropdown & Mega Menu)

Quick Answer: How to Customize the Header Menu Layout in Shopify

Open Online Store > Themes > Customize and select the Header section. There you can change the logo position, pick which menu appears, and (in themes like Dawn) choose a menu type: Dropdown, Mega menu, or Drawer. Build the menu itself in Content > Menus.

Để tùy chỉnh bố cục header menu từng bước:

1. Mở cài đặt theme: Trong trang quản trị Shopify, điều hướng đến Online Store > Themes > Customize và nhấp vào mục Header ở cột bên trái.
2. Thiết lập vị trí logo và bố cục: Điều chỉnh cài đặt Logo position để chọn logo nằm bên trái cùng hàng hay nằm ở giữa phía trên menu. (Lưu ý: tên cài đặt khác nhau tùy theme; trong Dawn là Logo position).
3. Kết nối và lồng menu: Truy cập Content > Menus để dựng cấu trúc liên kết với tối đa 2 cấp lồng, sau đó gán danh sách đó tại Header > Menu.
4. Chọn kiểu menu và kiểm tra di động: Tại Menu type, chọn Dropdown, Mega menu hoặc Drawer, rồi kiểm tra hiển thị trên thiết bị di động với Mobile logo position.

What “Header Menu Layout” Means in Shopify

Khi các chủ shop nói về việc tùy chỉnh bố cục header menu, họ hiếm khi chỉ điều chỉnh một cài đặt đơn lẻ. Trong kiến trúc Shopify, bố cục header là sự kết hợp chặt chẽ của 4 tầng cấu trúc:

1. Nhận diện và căn chỉnh (Logo position): Quyết định vị trí logo thương hiệu xuất hiện tương quan với các liên kết điều hướng, thanh tìm kiếm và biểu tượng giỏ hàng.
2. Danh sách menu được gán (Menu được chọn): Bộ menu cụ thể trong trang quản trị được liên kết hiển thị vào khu vực header.
3. Cấu trúc phân tầng và kiểu menu (Độ sâu & hình thức hiển thị): Cách thức các nhánh danh mục con mở ra trên màn hình máy tính, dù là danh sách dọc hẹp, bảng lớn nhiều cột hay ngăn kéo ẩn.
4. Quy tắc hiển thị trên di động (Bố cục mobile & hành vi drawer): Cách banner co giãn thích ứng với màn hình cảm ứng, bao gồm vị trí biểu tượng, logo và ngăn kéo trượt.

Theo tài liệu chính thức từ Shopify, bạn có thể thay đổi menu chính hiển thị cho hầu hết các theme bằng cách chỉnh sửa cài đặt trong section Header. Tuy nhiên, bản thân các đường link, nhãn chữ và mối quan hệ cha-con được quản lý ở Content > Menus. Trong giao diện này, mục điều hướng cấp đầu hỗ trợ tối đa 2 cấp menu thả xuống lồng bên dưới, tạo nên cấu trúc tối đa 3 cấp logic.

Vì mỗi theme xử lý bố cục khác nhau, bài viết này sử dụng theme mẫu Dawn của Shopify để minh họa các cài đặt cụ thể. Trong Dawn, các tùy chọn này nằm trong schema thiết lập, nhưng tên gọi và tùy chọn sẽ khác nhau ở các theme khác. Để hiểu sâu hơn về các mô hình desktop, hiện tượng co giãn hiển thị trên laptop và điểm ngắt flex wrapping, bạn có thể tham khảo bài viết về mô hình bố cục header và breakpoint.

Step 1: Change the Logo and Menu Position in the Theme Editor

Tầng vật lý đầu tiên của bố cục header là sự căn chỉnh giữa logo thương hiệu và các liên kết điều hướng. Thao tác điều chỉnh trong Shopify như sau:

1. Đăng nhập vào trang quản trị Shopify.
2. Điều hướng tới Online Store > Themes.
3. Tại theme đang hoạt động hoặc bản sao thử nghiệm, bấm Customize.
4. Ở thanh bên trái, chọn mục Header.

Trong theme Dawn, bạn sẽ thấy cài đặt mang tên Logo position. Trình thả xuống này cung cấp 4 lựa chọn sắp xếp:

• Middle left: Đặt logo ở góc trái, nằm cùng một hàng ngang với các mục menu chính. Bố cục thẳng hàng này giúp tiết kiệm diện tích theo chiều dọc màn hình.
• Top left: Đặt logo ở góc trên bên trái, đưa toàn bộ hàng menu xuống một dòng riêng biệt ngay bên dưới.
• Top center: Đưa logo ra chính giữa phía trên và đặt menu điều hướng căn giữa ngay bên dưới. Nếu bạn muốn logo nằm giữa và menu nằm dưới logo, đây chính là tùy chọn gốc cần chọn.
• Middle center: Đặt logo ở giữa, menu nằm bên trái và các biểu tượng của header nằm bên phải.

Cần lưu ý rằng các lựa chọn này được định danh trong Dawn; tên cài đặt và các lựa chọn sẽ khác nhau ở các theme khác. Một số theme bên thứ ba tách biệt căn chỉnh logo và căn chỉnh menu thành hai trường riêng, hoặc chỉ hỗ trợ khung bố cục cố định. Nếu theme của bạn không có cấu hình mong muốn, hãy tham khảo phần cây quyết định khi theme hết tùy chọn bên dưới.

Step 2: Choose the Header Menu and Build Nested Links

Việc thay đổi vị trí hiển thị sẽ không có ý nghĩa nếu header liên kết sai menu hoặc các danh mục con không thể mở ra. Trong Shopify, menu được tạo ở trang quản trị chung rồi mới gán vào cài đặt theme.

Các bước tạo và gán menu:

1. Trong trang quản trị Shopify, vào Content > Menus (như hướng dẫn tại Shopify Help).
2. Nhấp vào Main menu (hoặc bấm Create menu nếu muốn dựng một cây menu hoàn toàn mới).
3. Thêm các danh mục chính làm mục cấp đầu (top-level).
4. Để tạo submenu, dùng chuột kéo mục con sang bên phải ngay dưới mục cha cho đến khi xuất hiện khoảng thụt đầu dòng, rồi thả chuột.
5. Bấm Save menu.

Theo quy chuẩn kỹ thuật của Shopify, mục cấp đầu có thể chứa tối đa 2 cấp menu thả xuống lồng bên dưới (tổng cộng 3 cấp). Tất cả các theme Shopify đều được thiết kế để hiển thị các mục lồng nhau này thành menu dropdown phân nhánh từ menu chính.

Sau khi lưu cấu trúc trong Content > Menus, bạn quay lại Online Store > Themes > Customize, chọn section Header, tìm thẻ thiết lập Menu, bấm Change, chọn đúng menu vừa tạo và nhấn Save. Để xem hướng dẫn chi tiết từng thao tác kéo thả và tổ chức danh mục mà không bị lỗi, bạn có thể tham khảo thêm bài hướng dẫn cách thêm submenu vào navigation menu.

Step 3: Pick Dropdown, Mega Menu, or Drawer

Khi các liên kết lồng nhau đã được gán vào header, bước tiếp theo là quyết định cách thức các danh mục này xuất hiện trên màn hình máy tính khi người mua di chuột hoặc bấm vào. Trong theme Dawn, tại phần cài đặt của section Header, bạn sẽ tìm thấy tùy chọn Menu type. Dawn cung cấp 3 kiểu hiển thị (nhãn khác nhau tùy theme):

Hình 1: Minh hoạ khái niệm (Concept illustration) — Step 3: Pick Dropdown, Mega Menu, or Drawer

Theo nghiên cứu từ Nielsen Norman Group, mega menu là “lựa chọn thiết kế rất tốt để đáp ứng số lượng lớn các tùy chọn”. NN/g nhấn mạnh rằng mega menu hiển thị mọi thứ trong một lần nhìn, giúp khách hàng nhìn thấy trực quan thay vì phải cố gắng ghi nhớ nội dung ẩn sau các đề mục chung chung.

Ngược lại, chọn Drawer trong Dawn (được điều khiển bởi điều kiện section.settings.menu_type_desktop == 'drawer' trong header.liquid của Dawn) sẽ ẩn các liên kết ngang sau một nút menu trên màn hình máy tính. Cách này nhìn gọn nhưng có đánh đổi thật sự: nghiên cứu năm 2016 của NN/g cho thấy khả năng tìm thấy giảm gần một nửa khi ẩn điều hướng chính của website. Nếu cửa hàng có danh mục rộng, hãy chỉ dùng drawer cho di động và để menu mở trên máy tính. Để thiết kế các cột liên kết, tiêu đề và ô hình ảnh cân đối, xem hướng dẫn thực hành thiết kế mega menu tốt nhất.

Show Menu Links Directly in the Header Instead of a Dropdown

Một câu hỏi thường gặp, trong đó có một chủ đề trên Shopify Community về theme Sense, là làm sao hiển thị các liên kết cấp đầu trực tiếp trên header mà không có dropdown.

Trong cơ chế của Shopify, dropdown không được bật/tắt bằng một nút gạt trong theme; nó được quyết định bởi cấu trúc phân tầng. Tài liệu Shopify Help nêu rõ rằng mọi theme sẽ hiển thị các mục lồng nhau thành menu dropdown từ menu chính. Nếu một mục menu có các mục con thụt lề bên dưới trong Content > Menus, theme sẽ tự động biến nó thành danh sách thả xuống.

Để đưa tất cả các liên kết hiển thị ngang trên thanh header:

1. Mở trang quản trị Shopify và vào Content > Menus.
2. Chọn menu điều hướng đang được gán cho header.
3. Kiểm tra danh sách liên kết. Nếu có mục nào đang thụt lề dưới mục khác, hãy nhấp và kéo mục đó sang bên trái cho đến khi thẳng hàng với mục cấp đầu.
4. Đảm bảo toàn bộ các mục đều nằm ở cấp cao nhất (root level).
5. Nhấn Save menu.

Khi xem lại cửa hàng, theme sẽ hiển thị các liên kết này nằm cạnh nhau trên thanh điều hướng ngang mà không kích hoạt bất kỳ hộp dropdown nào.

Hãy lưu ý giới hạn khung hiển thị. NN/g khuyến nghị: nếu website có 4 liên kết điều hướng cấp đầu trở xuống thì nên hiển thị chúng dưới dạng liên kết nhìn thấy được. Khi có nhiều liên kết cấp đầu, hàng menu có thể xuống thành hai dòng hoặc chen vào logo trên màn hình laptop hẹp, vì vậy hãy xem trước ở nhiều độ rộng. Nếu danh mục cần nhiều điểm đến, hãy gom chúng dưới các tiêu đề cha, ví dụ bằng mega menu, thay vì nhồi vào thanh chính.

Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

Một bố cục menu header trông cân đối trên màn hình máy tính có thể dễ vỡ trên điện thoại. Vì không gian màn hình di động hạn chế, các theme xử lý điều hướng di động bằng bố cục responsive riêng.

Hình 2: Minh hoạ khái niệm (Concept illustration) — Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

Trong cài đặt Header của Dawn, người bán có một tùy chọn chuyên biệt mang tên Mobile logo position, gồm hai lựa chọn:

• Center: Đặt logo ở giữa thanh header di động.
• Left: Căn logo về phía bên trái của thanh header di động.

Nhãn khác nhau tùy theme. Ví dụ, ở các theme bên thứ ba như Stiletto, menu di động dùng các cài đặt trong section Header. Ở nhiều theme, các liên kết điều hướng di động thu gọn vào một ngăn kéo trượt ra từ cạnh màn hình, mở bằng cách chạm vào biểu tượng hamburger.

Tuy nhiên, phụ thuộc hoàn toàn vào ngăn kéo hamburger ẩn có cái giá của nó. Nghiên cứu năm 2016 của Nielsen Norman Group cho thấy khả năng tìm thấy giảm gần một nửa khi ẩn điều hướng chính của website.

Ngăn kéo ẩn vẫn hữu ích cho danh mục lớn, nhưng bạn cũng có thể giữ vài trang quan trọng luôn hiển thị bằng một thanh tab cố định ở đáy (ví dụ Home, Shop, Search và Cart) trong tầm ngón cái, và để các danh mục sâu hơn cho ngăn kéo. Để cấu hình cấu trúc liên kết riêng cho từng khung hiển thị, xem hướng dẫn cách thiết lập tạo menu riêng cho máy tính và di động.

When Your Theme Runs Out of Options: Code Edits vs a Menu App

Sẽ có lúc các tùy chọn có sẵn trong Theme Customizer không còn đáp ứng đủ nhu cầu của cửa hàng. Bạn có thể cần 5 cột thay vì 4 cột trong mega menu, muốn bố cục chia đôi với liên kết nằm hai bên logo ở giữa, hoặc muốn chèn banner khuyến mãi vào ngăn kéo di động. Khi chạm tới giới hạn này, bạn sẽ đứng trước lựa chọn: tự chỉnh sửa mã Liquid của theme hay cài đặt một ứng dụng menu bổ trợ.

Before you edit code: duplicate the theme

Nếu bạn quyết định can thiệp trực tiếp vào mã nguồn theme (như file sections/header.liquid hoặc các stylesheet CSS liên quan), đừng bao giờ chỉnh sửa trực tiếp trên theme đang chạy thực tế. Tài liệu chính thức của Shopify khuyến nghị bạn nên tạo một bản sao lưu theme để có thể hủy bỏ các thay đổi và bắt đầu lại nếu xảy ra lỗi.

Các bước tạo bản sao theme an toàn:

1. Trong trang quản trị Shopify, vào Online Store > Themes.
2. Tìm theme hiện tại, mở menu hành động của theme và chọn Duplicate.
3. Đổi tên bản sao để ghi rõ đây là bản thử nghiệm chỉnh sửa mã nguồn.
4. Mọi thao tác chỉnh sửa và kiểm tra chỉ thực hiện trên bản sao này trước khi xuất bản.

The hidden cost of custom theme edits

Chỉnh sửa mã trực tiếp kéo theo công việc bảo trì liên tục. Tài liệu của Shopify cảnh báo rằng khi bạn cập nhật theme, các thay đổi mã của bạn có thể bị gỡ khỏi bản đã cập nhật. Nếu bạn viết lại header.liquid để đổi căn chỉnh, media query CSS hoặc hiệu ứng ngăn kéo, hãy kiểm tra và áp dụng lại các chỉnh sửa đó sau mỗi lần cập nhật theme.

Nếu nhu cầu bố cục vượt quá các cài đặt có sẵn, bạn có thể cân nhắc một theme được xây cho điều hướng phức tạp hơn, hoặc một ứng dụng hoạt động song song với theme.

Common Header Menu Problems and Fixes

Khi tùy chỉnh bố cục header, những sơ suất nhỏ trong cấu hình có thể khiến menu biến mất hoặc hiển thị sai lệch. Dưới đây là bảng chẩn đoán các lỗi thường gặp:

Trade-offs: When Not to Change Your Header Layout

Tái cấu trúc bố cục header không phải lúc nào cũng là quyết định đúng đắn. Trước khi quyết định thay đổi menu hay áp dụng giao diện nhiều cột, bạn cần cân nhắc các điểm đánh đổi thực tế:

• Danh mục nhỏ không cần mega menu: Nếu cửa hàng chỉ có vài danh mục đơn giản, một bảng mega menu rộng có thể thừa chỗ trống. Dropdown một cột hoặc một hàng liên kết phẳng thường là đủ.
• Drawer trên máy tính làm giảm khả năng nhìn thấy điều hướng: Chọn Drawer trên máy tính cho giao diện gọn, nhưng nghiên cứu năm 2016 của NN/g cho thấy việc ẩn điều hướng chính làm khả năng tìm thấy giảm gần một nửa. Chỉ dùng cho cửa hàng mà việc khám phá sản phẩm dựa vào nội dung kể chuyện trên trang.
• Chỉnh sửa Liquid tùy chỉnh tạo thêm việc khi nâng cấp: Theo tài liệu của Shopify, các chỉnh sửa header.liquid hoặc CSS tùy chỉnh có thể bị mất khi bạn cập nhật theme. Nếu không có ai duy trì các chỉnh sửa qua các phiên bản, hãy ưu tiên cài đặt theme tiêu chuẩn hoặc một ứng dụng.
• Cài thêm ứng dụng đồng nghĩa thêm đầu mối quản lý: Sử dụng công cụ bên ngoài sẽ bổ sung thêm một giao diện thiết lập cần theo dõi. Chỉ nên cài đặt thêm khi các tùy chọn mặc định của theme thực sự không thể đáp ứng được quy mô danh mục của bạn.

Where Navi+ Fits

Khi các tùy chọn header có sẵn trong theme đã chạm giới hạn, Navi+ là một cách để bổ sung tính năng điều hướng bên cạnh theme.

Bạn dựng menu trong ứng dụng Navi+ và bật nó dưới dạng app embed trong trình chỉnh sửa theme. Menu được vẽ trong trình duyệt bên cạnh header sẵn có của theme, nên bạn không cần chỉnh sửa header.liquid:

• Desktop Mega Menu: Hiển thị dropdown phong phú với các cột, hình ảnh và liên kết nổi bật.
• Mobile Menu: Menu di động trượt vào, hiển thị toàn bộ điều hướng mà không rời khỏi trang.
• Tab Bar: Thanh tab cố định ở đáy cho di động, giữ vài điểm đến chính trong tầm ngón cái.

Menu Navi+ cũng có tối đa ba cấp. Để quyết định loại menu phù hợp với danh mục của bạn, hãy xem khung hướng dẫn chọn loại menu phù hợp cho Shopify.

If your theme’s Header section stops at a basic dropdown, Navi+ lets you add a Desktop Mega Menu, a Mobile Menu, or a bottom Tab Bar alongside your theme — try it on a duplicate theme first and keep what works.

Action Checklist

Sử dụng checklist 8 bước này để lên kế hoạch, thiết lập và rà soát lại bố cục header menu trên cửa hàng Shopify của bạn:

• Tạo bản sao lưu theme: Nhân bản theme trong mục Online Store > Themes trước khi thay đổi các cấu hình bố cục quan trọng.
• Căn chỉnh vị trí logo: Trong Customize > Header, chọn cài đặt Logo position phù hợp (ví dụ: Top center hoặc Middle left trong Dawn; tên cài đặt khác nhau tùy theme).
• Xây dựng cấu trúc menu: Trong Content > Menus, tổ chức các mục điều hướng bằng thao tác kéo thả lồng nhau (tối đa 2 cấp lồng bên dưới mục cấp đầu).
• Gán menu vào Header: Kiểm tra mục Header > Menu để chắc chắn section đang liên kết chính xác tới danh sách menu bạn vừa dựng.
• Chọn kiểu menu desktop: Chọn Dropdown, Mega menu hoặc Drawer dựa trên độ rộng của danh mục sản phẩm.
• Kiểm tra bố cục di động: Xem trước giao diện trên điện thoại và điều chỉnh Mobile logo position (Center hoặc Left).
• Đánh giá công thái học cảm ứng: Kiểm tra ngăn kéo trượt trên điện thoại thực tế và cân nhắc bổ sung thanh tab đáy nếu cần giữ các trang chính luôn hiển thị.
• Xem trước trên nhiều độ phân giải: Kiểm tra trên máy tính bàn, laptop và máy tính bảng để đảm bảo các mục menu không bị rớt dòng hay đè lên logo.

FAQ

How many levels can a Shopify header menu have?

Mục đầu của menu Shopify có tối đa 2 cấp lồng bên dưới, tạo nên cấu trúc phân cấp tối đa là 3 cấp.

How do I make a dropdown in the Shopify header?

Trong trang quản trị Shopify, bạn vào mục Content > Menus, chọn menu cần sửa, dùng chuột kéo các mục con dịch sang phải bên dưới mục cha để lồng vào, rồi nhấn lưu.

How do I put the logo in the center with the menu below?

Trong theme Dawn, vào phần chỉnh sửa Header và tại mục Logo position, chọn Top center. Tùy chọn này sẽ đặt logo ở giữa phía trên và hàng menu nằm ngay bên dưới. (Tên cài đặt khác nhau ở các theme khác).

Can I show menu links in the header instead of a dropdown?

Có. Các theme Shopify mặc định hiển thị mục có con thành dropdown. Muốn liên kết hiển thị thẳng hàng ngang trên header, bạn chỉ cần đưa toàn bộ các mục lên cấp đầu tiên trong Content > Menus.

Can I change the menu layout only on mobile?

Có. Theme Dawn có cài đặt riêng Mobile logo position (Center hoặc Left) trong section Header. Menu trên di động thường dùng chung danh sách liên kết với desktop trong ngăn kéo trượt, nhưng một số theme có thiết lập mobile riêng trong Header.

Should I edit header.liquid?

Bạn chỉ nên chỉnh sửa header.liquid sau khi đã tạo bản sao dự phòng của theme. Lưu ý rằng các thay đổi mã của bạn có thể bị gỡ khi bạn cập nhật lên phiên bản theme mới.

Sources

• Shopify Help Center: Drop-down menus — Hướng dẫn chính thức về giới hạn phân tầng menu, gán menu vào header và thao tác trong Content > Menus.
• Shopify Help Center: Duplicating themes — Tài liệu khuyến nghị sao lưu dự phòng theme trước khi tiến hành chỉnh sửa mã nguồn.
• Shopify Help Center: Editing theme code — Cảnh báo chính thức về việc các thay đổi mã nguồn sẽ bị xóa khi nâng cấp theme.
• Shopify Dawn GitHub Repository: en.default.schema.json — Schema mã nguồn xác định các cài đặt gốc gồm Logo position, Menu type và Mobile logo position.
• Shopify Dawn GitHub Repository: sections/header.liquid — File mẫu mã nguồn thực thi các điều kiện hiển thị menu desktop và ngăn kéo drawer.
• Nielsen Norman Group: Mega Menus Work Well Anywhere Navigation Needs to Go — Nghiên cứu chuyên sâu về hiệu quả của bảng mega menu và khả năng ghi nhớ thị giác của người dùng.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt Metrics (2016) — Nghiên cứu chứng minh việc giấu thanh điều hướng chính sau biểu tượng ngăn kéo làm giảm khả năng tìm thấy gần một nửa.
• Fluorescent Theme Documentation: Stiletto Header — Tài liệu tham chiếu minh họa cách các theme thương mại quản lý thông số header trên máy tính và di động.
• Shopify Community: How to change header-menu layout Sense theme — Thảo luận thực tế từ người bán về việc đưa liên kết trải ngang trực tiếp trên thanh header.