Cách làm cho menu điều hướng khớp với theme cửa hàng Shopify (Màu sắc, Font chữ, Mobile Menu)

Menu điều hướng không bao giờ nên trông như một phần ghép tạm bợ trên cửa hàng của bạn. Khi khách hàng duyệt qua các danh mục sản phẩm, kiểu chữ, màu sắc, khoảng đệm và độ bo góc của các liên kết menu cần hòa nhập mượt mà với toàn bộ giao diện. Tuy nhiên, nhiều chủ shop Shopify nhận thấy rằng trong khi banner trang chủ trông rất trau chuốt, thanh menu lại mang lại cảm giác lạc tông—dùng font chữ lạ lẫm, màu nền lệch pha, đường viền thô ráp hoặc một drawer mobile chưa hề được tạo kiểu.

Nguyên lý cốt lõi rất rõ ràng: menu khớp với theme khi nó tái sử dụng các giá trị mà theme của bạn đã dùng sẵn. Thay vì tự nghĩ ra mã màu hex mới hay chọn một font chữ ngẫu nhiên, bạn hãy đọc các design token của theme trước, ghi lại trên một bảng đối chiếu, và áp dụng chính bảng đó cho thanh menu desktop, drawer menu mobile và cả các menu do ứng dụng bên thứ ba cung cấp.

Quick Answer: How to Match a Navigation Menu to Your Store Theme

Để khớp menu điều hướng với theme cửa hàng, hãy sao chép các giá trị mà theme đã dùng: color scheme, font, độ bo góc và khoảng cách. Áp dụng chúng trước tiên qua cài đặt header, sau đó lấp các khoảng trống bằng CSS ngắn trên bản theme nhân bản, và kiểm tra cả drawer mobile.

Để đạt được sự đồng bộ trực quan hoàn chỉnh, hãy thực hiện theo 5 bước thực tế:

1. Đọc design token của theme: Kiểm tra Theme Settings để lấy color scheme đang dùng, font chữ typography và bo góc nút bấm.
2. Sử dụng cài đặt Header có sẵn: Chọn đúng menu, gán color scheme tương ứng cho header và thử nghiệm các bố cục có sẵn.
3. Lấp khoảng trống bằng Custom CSS dùng biến theme: Thêm đoạn CSS ngắn vào Header section, tham chiếu các biến CSS thay vì điền mã màu cứng.
4. Đồng bộ menu drawer mobile: Đảm bảo khung trượt, icon hamburger, đường phân cách và chữ chia sẻ cùng bảng màu với desktop.
5. Đồng bộ menu do ứng dụng thêm vào: Nhập đúng các thông số từ bảng đối chiếu vào phần cài đặt thiết kế của ứng dụng bên thứ ba.

Lưu ý rằng những thay đổi bạn thực hiện trong phần Theme Settings áp dụng cho toàn bộ cửa hàng trực tuyến, vì vậy việc chỉ muốn đổi riêng menu điều hướng sẽ cần dùng đến Custom CSS theo section hoặc cài đặt riêng của ứng dụng menu.

What “Matching Your Theme” Means: The Theme Match Sheet

Sự nhất quán về hình ảnh giúp cửa hàng trông hoàn chỉnh. Hướng dẫn về thiết kế menu và bản sắc thương hiệu của chúng tôi nói về các nguyên tắc thương hiệu đằng sau điều này; bài bạn đang đọc là phần thực hành, kỹ thuật. Một menu chuẩn theme không chỉ vận hành tốt mà còn tạo cảm giác tự nhiên như một phần của cửa hàng.

Để đạt được sự hài hòa mà không cần phỏng đoán, hãy lập một Theme Match Sheet (Bảng đối chiếu theme). Bảng này ghi nhận 7 thuộc tính thiết kế cốt lõi trong theme và chỉ rõ vị trí tìm kiếm cũng như nơi áp dụng chúng lên menu:

Khi áp dụng bảng này vào điều hướng của bạn, hãy tập trung vào 4 hành động cụ thể:

• Copy theme colors: Lấy đúng color scheme được gán cho Header section thay vì chọn màu ngẫu nhiên.
• Reuse theme fonts: Áp dụng font chữ tiêu đề hoặc font nội dung sẵn có của theme trực tiếp cho các mục menu.
• Match corner radius: Đảm bảo các khung dropdown, thanh tìm kiếm hoặc huy hiệu dùng chung độ bo góc với các nút bấm trên storefront.
• Mobile menu match: Mở rộng color scheme, font chữ và đường kẻ sang drawer mobile để người mua bằng điện thoại nhận được trải nghiệm tương tự.

Step 1: Read Your Theme’s Design Tokens

Một “design token” đơn giản là một quyết định thiết kế được đặt tên—giá trị lưu trữ cho một màu sắc, font chữ, khoảng cách hoặc độ bo góc cụ thể. Thay vì gõ mã hex rải rác trong nhiều quy tắc kiểu dáng, các theme lưu trữ chúng dưới các tên gọi tái sử dụng được. Việc lấy trực tiếp các giá trị này từ theme Shopify giúp loại bỏ hoàn toàn sự lệch tông.

Colors and color schemes

Trong trang quản trị Shopify, vào Online Store > Themes, nhấn Customize và mở Theme settings. Chọn bảng Colors.

Theme Shopify quản lý bảng màu thông qua khái niệm Color scheme—một nhóm màu gồm màu nền, chữ và nút bấm. Trong trình chỉnh sửa theme của Shopify, bạn có thể tạo và duy trì tối đa 21 color scheme. Hãy xác định color scheme nào đang được gán cho Header section của bạn và ghi lại chính xác màu nền cũng như màu chữ đang dùng.

Fonts and text size

Tiếp theo, mở Theme settings > Typography. Tại đây bạn sẽ thấy các họ font chữ và độ đậm (weight) được chọn cho Headings (Tiêu đề) và Body (Nội dung).

Hãy ghi lại các font chữ này. Shopify Help Center nêu rõ rằng những thay đổi bạn thực hiện trong Theme Settings sẽ áp dụng cho toàn bộ cửa hàng trực tuyến của bạn. Nếu bạn đổi font tại đây để chỉnh menu, mọi tiêu đề hoặc đoạn văn trên toàn trang cũng sẽ đổi theo. Ngoài ra, tài liệu của Shopify cũng gợi ý nên cân nhắc dùng system font cho phần typography.

Corner radius and spacing

Xem các cài đặt nút, thẻ và ô nhập trong Theme settings. Nhiều theme có cài đặt bo góc, thường gọi là Button radius; tên chính xác khác nhau theo theme.

Kiểm tra xem nút của bạn có góc vuông sắc nét, bo nhẹ hay bo tròn hoàn toàn dạng viên thuốc. Khi các menu dropdown hoặc huy hiệu dùng cùng độ cong này, tổng thể menu sẽ rất ăn khớp. Tương tự, hãy quan sát khoảng cách quanh các nút và section để quyết định khoảng cách liên kết menu nên dày hay thoáng.

Reading CSS variables in your browser

Để xem cách theme lưu trữ các giá trị này dưới dạng mã code, hãy mở công cụ DevTools trên trình duyệt:

1. Mở trang cửa hàng đang live hoặc bản xem trước bằng Chrome, Firefox hoặc Safari.
2. Nhấp chuột phải vào thanh menu header và chọn Inspect (Kiểm tra).
3. Chọn phần tử <html> hoặc <body> và quan sát bảng Styles.

Các theme Shopify hiện đại như Dawn khai báo cài đặt theme thành các biến CSS trực tiếp trong file theme.liquid. Ví dụ, Dawn ánh xạ cài đặt tùy biến thành các biến:

• --font-body-family: phản ánh font chữ được chọn cho phần body.
• --font-heading-family: phản ánh font chữ được chọn cho tiêu đề.
• --color-foreground: phản ánh màu chữ đang dùng, được lưu dưới dạng ba số đỏ, xanh lá, xanh dương, nên được dùng là rgb(var(--color-foreground)).
• --buttons-radius: phản ánh giá trị bo góc của nút bấm từ cài đặt theme.

Bằng cách xác định đúng các giá trị cho Color scheme, Typography và Button radius, bạn có thể tận dụng chính hệ thống của theme thay vì gõ số cố định. Tên biến có thể khác nhau tùy theme, vì vậy hãy luôn kiểm tra tên biến cụ thể trên theme của bạn bằng DevTools.

Concept illustration: Bảng cài đặt theme đặt cạnh bảng đối chiếu Theme Match Sheet liệt kê color scheme, typography và button radius để sao chép vào menu.

Step 2: Use the Header Settings Your Theme Already Has

Trước khi viết bất kỳ đoạn code tùy chỉnh nào hoặc cài thêm ứng dụng, hãy khai thác tối đa các tùy chọn cấu hình sẵn có trong trình tùy biến theme Shopify.

Connecting your menu and color scheme

1. Trong trình tùy biến theme, mở phần Header.
2. Tìm cài đặt menu (nhãn khác nhau theo theme) và xác nhận danh sách liên kết mong muốn đã được chọn. Menu được tạo và quản lý tại Online Store > Navigation, nơi bạn có thể lồng các liên kết sâu tối đa 3 cấp.
3. Tìm cài đặt color scheme trong phần cài đặt của Header (nhãn khác nhau theo theme). Chọn đúng color scheme mà bạn đã ghi lại trong Theme Match Sheet.
4. Xem bản xem trước: tùy theme, thanh header và menu có thể đã nhận màu nền và màu chữ của color scheme đó.

Evaluating header menu layouts

Các theme Shopify cung cấp các kiểu hiển thị menu khác nhau. Theo tài liệu của Shopify, menu chính và các menu thả xuống hiển thị ở những vị trí khác nhau trên cửa hàng trực tuyến tùy thuộc vào theme của bạn, và mục cấp cao nhất có thể có tối đa hai cấp menu thả xuống lồng nhau.

Tùy vào theme đang dùng, bạn có thể thiết lập:

• Kiểu menu: Danh sách dropdown tiêu chuẩn, mega menu nhiều cột hoặc drawer trượt.
• Vị trí desktop: Căn trái trên cùng, căn giữa phía trên logo hoặc cùng hàng với thanh tìm kiếm.
• Sticky header: Giữ thanh menu luôn hiển thị cố định ở cạnh trên màn hình khi khách cuộn trang.

Native customizer boundaries

Cài đặt Header có sẵn rất tiện lợi nhưng có những ranh giới nhất định:

• Tên gọi và các nút bật tắt khác nhau tùy theo theme; một số theme cho chỉnh padding liên kết, một số khác lại không có tùy chọn này.
• Vì cài đặt Typography trong Theme Settings áp dụng trên toàn bộ cửa hàng, bạn không thể đổi riêng font chữ của liên kết menu bằng các tùy chọn thông thường mà không làm thay đổi các phần khác.

Khi các cài đặt mặc định không thể đáp ứng hết bảng đối chiếu theme, bạn cần chuyển sang bước dùng Custom CSS.

Step 3: Close the Gaps with Custom CSS That Reuses Theme Variables

Custom CSS cho phép bạn tinh chỉnh giao diện menu điều hướng mà không cần sửa đổi các file mẫu Liquid của theme. Việc viết CSS ngắn gọn và chuẩn xác giúp bạn bảo trì dễ dàng về sau.

Duplicate the theme first

Trước khi thêm bất kỳ đoạn CSS nào, hãy tạo một bản sao lưu theme của bạn.

Tài liệu chính thức của Shopify Help về việc nhân bản theme nhấn mạnh rằng việc tạo bản sao lưu là thói quen tốt để bạn có thể hủy bỏ các thay đổi và bắt đầu lại nếu cần. Trong trang quản trị Shopify tại mục Online Store > Themes, mở menu thao tác cạnh theme đang dùng và chọn Duplicate. Hãy thực hiện các điều chỉnh trên bản nhân bản này, kiểm tra kỹ lưỡng và xuất bản khi đã hài lòng.

Where custom CSS goes and its limits

Trình chỉnh sửa theme của Shopify cung cấp hai vị trí để nhập Custom CSS mà không cần đụng đến file code:

1. Custom CSS toàn theme: Tại Theme settings > Custom CSS, ảnh hưởng đến toàn bộ giao diện cửa hàng.
2. Custom CSS theo section: Nằm ở cuối bảng thuộc tính của section, mục Custom CSS (ví dụ trong Header section).

Hãy chú ý các giới hạn kỹ thuật nghiêm ngặt do Shopify quy định:

• Các quy tắc CSS ảnh hưởng đến toàn bộ theme bị giới hạn tối đa 1500 ký tự.
• Các quy tắc CSS ảnh hưởng đến một section cụ thể bị giới hạn tối đa 500 ký tự.
• Khi bạn thêm Custom CSS vào một section, phạm vi tác động của CSS sẽ được tự động giới hạn (scope) trong section đó.
• Custom CSS toàn theme không áp dụng cho trang Checkout (thanh toán).

Vì thanh menu nằm trọn trong Header, việc đặt các đoạn CSS ngắn trong ô Custom CSS của Header section là giải pháp an toàn và gọn gàng nhất.

Use var() instead of hard-coded values

Tránh gõ cứng mã màu hex hoặc tên font tĩnh trực tiếp vào CSS. Nếu sau này bạn đổi bảng màu hoặc đổi typography, các đoạn CSS gõ cứng này sẽ bị lệch tông ngay lập tức. Thay vào đó, hãy đọc biến CSS của theme thông qua hàm var(), như tài liệu MDN hướng dẫn:

.header__menu-item {
  font-family: var(--font-heading-family);
  color: rgb(var(--color-foreground));
}

(Lưu ý: tên class và biến CSS ở trên theo theme Dawn; hãy tự kiểm tra biến của theme bạn trong DevTools).

Nhờ dùng var(--font-heading-family) và rgb(var(--color-foreground)), liên kết menu sẽ đi theo theme khi bạn đổi màu hoặc font trong Theme Settings. Để hoàn tác thay đổi, bạn chỉ cần xóa khối CSS trong ô hoặc xuất bản lại bản theme nhân bản ban đầu.

Step 4: Make the Mobile Menu Match, Not Just the Desktop Menu

Một lỗi rất thường gặp là chủ shop chăm chút thanh header desktop rất kỹ nhưng lại để drawer mobile dùng giao diện mặc định trơ trọi và lệch màu.

Why mobile drawers diverge

Trong nhiều theme Shopify, menu desktop và menu mobile không dùng chung cấu trúc HTML. Các liên kết desktop thường là danh sách nằm ngang trong header, trong khi menu mobile được dựng bên trong một khung drawer trượt ra từ cạnh màn hình.

Vì drawer mobile thường là một phần tử tách biệt, các quy tắc CSS viết cho liên kết desktop có thể không áp dụng được vào bên trong drawer. Thêm vào đó, màu của biểu tượng hamburger thường kế thừa màu chữ của header, nên bản thân drawer có thể cần nền, màu chữ và đường kẻ riêng.

Aligning drawer styling

Để mang lại trải nghiệm đồng nhất trên di động, hãy đảm bảo drawer mobile sở hữu:

• Same font family: Các liên kết trong drawer phải dùng cùng font chữ như thanh header desktop.
• Same text color: Tiêu đề danh mục và liên kết con phải hiển thị đúng màu chữ trong bảng màu header.
• Same divider style: Các đường kẻ ngang ngăn cách danh mục mobile phải tương đồng với màu đường viền mảnh trên các thẻ sản phẩm của theme.

Nghiên cứu công thái học từ Nielsen Norman Group (Pernice & Budiu, 2016) chỉ ra rằng điều hướng ẩn (như menu hamburger) khó phát hiện hơn điều hướng hiện hoặc hiện một phần. Vì menu mobile bắt buộc người dùng phải chạm vào biểu tượng mới thấy danh mục, các điểm chạm nhìn thấy được—từ nút hamburger, bề mặt drawer cho đến nhãn chữ—phải cực kỳ rõ ràng và thống nhất với thương hiệu.

Để tìm hiểu sâu hơn về kiến trúc sắp xếp liên kết lồng nhau trên mobile, hãy đọc hướng dẫn của chúng tôi về thực tiễn tốt nhất cho drawer menu mobile. Hãy luôn kiểm tra trực tiếp trên điện thoại thật thay vì chỉ xem chế độ co giãn responsive trên máy tính.

Concept illustration: Menu header desktop và drawer menu mobile cùng sử dụng font family, màu chữ và kiểu đường phân cách từ theme của cửa hàng.

Step 5: Match a Menu Added by an App (Tab Bar, Mobile Menu, Mega Menu)

Khi danh mục sản phẩm mở rộng vượt quá khả năng của menu dropdown mặc định, bạn có thể cài thêm ứng dụng menu Shopify để bổ sung thanh Tab Bar dính đáy mobile, mega menu nhiều cột hoặc nút điều hướng nổi.

Vì menu của ứng dụng được thêm vào cửa hàng tách biệt với theme, chúng có thể không tự động đi theo cài đặt màu và font của theme. Nếu để mặc định, menu của app có thể trông khác với phần còn lại của cửa hàng.

Applying your theme match sheet to app settings

Thay vì chỉnh màu mò mẫm trong trang quản trị ứng dụng, hãy mở Theme Match Sheet ra:

1. Typography: Chọn đúng font family và độ đậm tương ứng với tiêu đề hoặc nội dung của theme.
2. Màu sắc: Nhập đúng mã hex từ color scheme của header cho màu nền menu, màu chữ và màu trạng thái kích hoạt (active).
3. Corner radius: Điều chỉnh bo góc của khung menu và nút bấm khớp với bo góc nút của theme.
4. Đường phân cách: Chọn độ dày và màu đường viền tương đồng với viền thẻ sản phẩm của theme.

Keeping custom CSS inside the app

Nếu menu của app cần thêm Custom CSS để tinh chỉnh chi tiết, hãy nhập CSS trực tiếp vào ô Custom CSS chuyên dụng trong dashboard của app thay vì sửa vào file theme.

Nếu ứng dụng lưu CSS bên ngoài các file theme, việc nâng cấp hoặc đổi sang theme mới sẽ không làm mất kiểu dáng đó. Hãy kiểm tra cách ứng dụng của bạn xử lý điều này trước khi dựa vào nó.

Nếu bạn lần đầu cấu hình menu qua ứng dụng, hãy xem bài hướng dẫn từng bước về cách bắt đầu với ứng dụng tạo menu.

Common Mismatches and How to Fix Them

Khi đối chiếu menu với cửa hàng, hãy sử dụng bảng chẩn đoán sau để xử lý nhanh các lỗi lệch tông thường gặp:

Trade-offs: When Not to Restyle the Menu

Việc chỉnh sửa màu sắc và font chữ giúp cải thiện phần nhìn, nhưng đổi kiểu dáng không phải lúc nào cũng là giải pháp đúng đắn. Hãy cân nhắc các giới hạn sau trước khi đầu tư thời gian vào CSS:

Vấn đề cấu trúc danh mục sản phẩm

Nếu khách hàng gặp khó khăn khi tìm kiếm sản phẩm vì hệ thống danh mục bị rối rắm hoặc quá tải liên kết, việc đổi font hay đổi màu nền hoàn toàn không giải quyết được vấn đề. Giao diện đẹp không thể sửa chữa một cấu trúc thông tin yếu kém. Khi catalog mở rộng vượt qua giới hạn thông thường, hãy xem xét các giới hạn của menu theme Shopify để tái cấu trúc bộ sưu tập thay vì chỉ tập trung đổi màu sắc.

Gánh nặng bảo trì và giới hạn ký tự của CSS theme

Việc chèn Custom CSS vào theme tạo ra gánh nặng bảo trì kỹ thuật. Do CSS toàn theme bị giới hạn ở mức 1500 ký tự và CSS section ở mức 500 ký tự, các đoạn mã phức tạp sẽ nhanh chóng chạm trần dung lượng. Hơn nữa, mỗi khi nhà phát triển theme tung ra bản cập nhật lớn, bạn buộc phải kiểm tra và chuyển đổi mã CSS thủ công.

Tác dụng phụ typography toàn store

Việc đổi font menu bằng cách chỉnh Typography trong Theme Settings sẽ làm thay đổi font của toàn bộ thẻ sản phẩm, tiêu đề bộ sưu tập và đoạn văn trên cửa hàng. Tài liệu của Shopify gợi ý nên cân nhắc system font, nên việc thêm một font riêng chỉ cho các liên kết menu cần được suy nghĩ kỹ.

Where Navi+ Fits

Nếu theme Shopify hiện tại của bạn thiếu các dạng menu nâng cao—như thanh Tab Bar trên mobile, mega menu nhiều cột, drawer mobile chuyên dụng, menu icon hoặc nút điều hướng nổi—Navi+ cung cấp bộ công cụ chuyên dụng để bạn thiết lập chúng.

Trong trang quản trị Navi+, tab Design mang đến các tùy chọn trực quan để chỉnh màu nền, typography (chọn font family và cỡ chữ) cũng như biểu tượng hoặc hình ảnh. Bạn có thể nhập trực tiếp các giá trị từ Theme Match Sheet vào các cài đặt này.

Bên cạnh đó, Navi+ tích hợp sẵn ô soạn thảo Custom CSS riêng biệt, nơi mỗi quy tắc đều tự động được gắn tiền tố theo từng menu và tách biệt hoàn toàn khỏi file theme Shopify. Nhờ lưu trữ độc lập, việc nâng cấp theme hay đổi theme mới sẽ không làm mất hoặc vỡ giao diện menu Navi+ của bạn.

Để đảm bảo tính minh bạch về mặt kỹ thuật, hãy lưu ý các phạm vi hỗ trợ:

• Menu Navi+ hỗ trợ cấu trúc điều hướng sâu tối đa 3 cấp.
• Tab Design cung cấp các thanh công cụ chỉnh giao diện trực quan cho 2 cấp đầu tiên.
• Việc đặt cỡ chữ hoặc kích thước icon riêng biệt cho cấp 2 và cấp 3 sẽ cần thêm các dòng CSS ngắn trong ô Custom CSS của app.

If your theme doesn’t have the menu type you need, such as a bottom Tab Bar or a mega menu, Navi+ lets you build one and set its fonts and colors from your theme match sheet in the Design tab — you can try it on a duplicate theme first.

Action Checklist Before You Publish

Hãy rà soát danh sách 10 điểm kiểm tra sau trước khi xuất bản các thay đổi menu lên cửa hàng:

• Nhân bản theme: Đã tạo bản sao lưu theme trước khi thêm CSS hoặc chỉnh kiểu dáng để có thể hoàn tác ngay khi cần.
• Hoàn thành Theme Match Sheet: Đã ghi lại đầy đủ color scheme, họ font chữ typography, độ đậm và bo góc nút bấm.
• Gán Color Scheme cho Header: Đã kiểm tra Header section trong trình tùy biến theme sử dụng đúng bảng màu thương hiệu.
• Khớp Font chữ: Đã xác nhận các liên kết menu sử dụng đúng font tiêu đề hoặc font nội dung từ Theme settings > Typography.
• Kiểm tra tương phản WCAG: Đã xác minh tỷ lệ tương phản giữa chữ và nền đạt tối thiểu 4.5:1 cho chữ thường và 3:1 cho chữ lớn.
• Đồng bộ Bo góc: Đã đảm bảo khung dropdown, huy hiệu và nút menu có cùng độ cong bo góc với nút bấm storefront.
• Kiểm tra trạng thái Hover và Focus: Đã xác nhận liên kết desktop phản hồi rõ khi rê chuột và có viền focus tiếp cận cho bàn phím.
• Kiểm tra Drawer Mobile trên điện thoại thật: Đã trực tiếp kiểm tra icon hamburger, nền drawer, đường kẻ và độ nhạy chạm trên smartphone thực tế.
• Đồng bộ Menu Ứng dụng: Đã nhập các thông số từ bảng đối chiếu vào thanh Tab Bar, mega menu hoặc drawer của app bên thứ ba.
• Viết CSS ngắn gọn và an toàn: Duy trì CSS ngắn (trong giới hạn 500/1500 ký tự) và tham chiếu biến CSS của theme thông qua hàm var().

FAQ

Can I change only the menu font without changing my whole store’s font?

Cài đặt typography trong Theme Settings áp dụng cho toàn bộ cửa hàng trên mọi tiêu đề và đoạn văn. Để đổi riêng font menu, hãy thêm quy tắc Custom CSS có phạm vi cụ thể vào Header section trong trình tùy biến theme hoặc điều chỉnh cài đặt typography bên trong ứng dụng menu chuyên dụng.

Where do I add custom CSS in Shopify?

Trong trình tùy biến theme, bạn có thể thêm Custom CSS cho toàn theme (giới hạn 1500 ký tự) hoặc cho từng section riêng biệt như Header (giới hạn 500 ký tự). CSS theo section chỉ có tác dụng trong section đó, và CSS toàn theme không áp dụng cho trang thanh toán (checkout).

Why does my mobile menu look different from my desktop menu?

Các theme thường dựng drawer mobile thành một phần tử HTML tách biệt, nên các quy tắc CSS cho desktop không chạm tới được. Biểu tượng hamburger thường nhận màu chữ header, nhưng khung trượt drawer lại cần được tùy chỉnh riêng về nền, font chữ và đường phân cách.

How do I keep my menu matching after I change theme colors later?

Hãy tham chiếu các biến CSS sẵn có của theme bằng hàm var() (chẳng hạn như var(--font-heading-family) hoặc var(--font-body-family)) thay vì điền mã màu hex tĩnh. Khi bạn đổi màu hoặc font trong Theme Settings sau này, menu sẽ đi theo.

What contrast should menu text have?

Theo Tiêu chuẩn Khả năng Tiếp cận Nội dung Web (WCAG 2.1), chữ menu thông thường cần đạt tỷ lệ tương phản tối thiểu 4.5:1 so với nền, và tối thiểu 3:1 đối với chữ lớn.

Should I edit CSS or use an app?

Hãy ưu tiên sử dụng cài đặt header có sẵn của theme trước, và dùng các đoạn Custom CSS ngắn cho các tinh chỉnh nhỏ. Khi bạn cần các định dạng menu mà theme không hỗ trợ—như Tab Bar trên mobile hay mega menu nhiều cột—hãy dùng ứng dụng menu, và kiểm tra xem ứng dụng có lưu kiểu dáng bên ngoài file theme hay không để chúng không mất khi đổi theme.

Sources

• Shopify Help Center: Customizing Theme Settings
• Shopify Help Center: Adding Custom CSS to Your Theme
• Shopify Help Center: Duplicating Themes
• Shopify Help Center: Set up Drop-Down Menus in Your Online Store
• Shopify Developer Documentation: Navigation and Search Architecture
• W3C Web Accessibility Initiative: WCAG 2.1 Understanding Contrast (Minimum)
• MDN Web Docs: Using CSS Custom Properties (Variables)
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Pernice & Budiu, 2016)
• Shopify Dawn Theme Repository: theme.liquid layout configuration
• Navi+ Help Center: Using Built-in Settings or Custom CSS
• Fudge: How to Change the Mobile Menu in Shopify