Bạn vừa cài đặt Dawn (hoặc Refresh, hoặc Sense), và menu của bạn hoạt động. Các danh mục hiển thị, biểu tượng hamburger mở trên di động, và biểu tượng giỏ hàng nằm ở góc trên bên phải. Bạn nghĩ: “Cũng được, tôi sẽ chuyển sang ảnh sản phẩm.”
Bản năng đó sẽ làm mất đi các chuyển đổi của bạn. Không phải vì những chủ đề này kém—chúng thực sự được xây dựng tốt. Nhưng “hoạt động” và “hoạt động tốt để bán” là những điều khác nhau. Mỗi chủ đề mặc định tạo ra các sự đánh đổi thiết kế cụ thể, và một số sự đánh đổi đó thực tế gây hại cho các cửa hàng mới.
Hướng dẫn này hướng dẫn bạn qua ba chủ đề Shopify miễn phí phổ biến nhất—Dawn, Refresh, và Sense—và xác định chính xác tính năng menu nào đủ tốt để giữ, tính năng nào cần điều chỉnh nhẹ, và tính năng nào bạn nên thay đổi ngay lập tức.
- Điều hướng của Dawn rõ ràng và nhanh nhưng thiếu hỗ trợ mega menu và tab bar di động ngoài hộp
- Refresh (2024) thêm header hiện đại hơn nhưng vẫn sử dụng mô hình hamburger tiêu chuẩn trên di động
- Sense ưu tiên sự hấp dẫn trực quan và hoạt động tốt cho các thương hiệu có nhiều hình ảnh nhưng có thể cảm thấy chậm trên các điện thoại cấp thấp
- Cả ba chủ đề đều chia sẻ các khoảng trống phổ biến: không có tab bar dưới cùng, không có biểu tượng menu, tùy chỉnh di động hạn chế
- Bạn có thể khắc phục hầu hết các vấn đề thông qua cài đặt chủ đề—chỉ có một số ít yêu cầu ứng dụng hoặc mã tùy chỉnh
Một ghi chú nhanh về lựa chọn chủ đề
Nếu bạn chưa chọn chủ đề, đừng suy nghĩ quá nhiều. Dawn, Refresh, và Sense đều miễn phí, đều được Shopify duy trì, và tất cả đều hoạt động tốt ngoài hộp. Sự khác biệt chủ yếu là về hình ảnh—Dawn tối giản, Refresh hiện đại, Sense biên tập.
Đối với điều hướng cụ thể, không có chủ đề nào trong ba cái có ưu thế rõ ràng so với các cái khác. Các khoảng trống và điểm mạnh giống nhau trên cả ba. Chọn dựa trên thẩm mỹ thương hiệu của bạn, sau đó tùy chỉnh điều hướng.
Dawn: chủ đề mặc định phổ biến nhất
Dawn là chủ đề miễn phí hàng đầu của Shopify, và là chủ đề mà hầu hết các cửa hàng mới bắt đầu. Nó cố ý tối giản, tải nhanh, và tuân theo các phương pháp tiếp cận tốt nhất về khả năng truy cập. Chúng ta hãy phân tích điều hướng của nó.
Những gì hoạt động tốt
Cấu trúc header rõ ràng. Header của Dawn đơn giản: logo ở bên trái, menu ngang ở giữa hoặc căn trái, các biểu tượng tiện ích (tìm kiếm, tài khoản, giỏ hàng) ở bên phải. Điều này tuân theo bố cục thương mại điện tử tiêu chuẩn mà người dùng mong đợi.
Menu di động tương đối tốt. Biểu tượng hamburger mở một ngăn trượt sạch sẽ với các mục menu của bạn. Nó hỗ trợ một cấp độ lồng ghép (nhấn vào mục cha để mở rộng mục con), đó là đủ cho hầu hết các cửa hàng nhỏ đến vừa.
Tải nhanh. Điều hướng của Dawn nhẹ. Nó không tải các framework JavaScript nặng hoặc động hoạ tùy chỉnh, vì vậy menu xuất hiện nhanh chóng ngay cả trên các kết nối chậm. Trong các bài kiểm tra PageSpeed Insights, Dawn liên tục ghi được 85+ về hiệu suất di động.
Tùy chọn header dính. Trong Theme Settings → Header, bạn có thể bật header dính ở lại khi người dùng cuộn. Điều này giữ menu, tìm kiếm và giỏ hàng của bạn có thể truy cập mọi lúc—một cải thiện khả năng sử dụng đáng kể mà nhiều chủ cửa hàng quên bật.
Tìm kiếm tích hợp sẵn. Dawn bao gồm một biểu tượng tìm kiếm trong header mở một lớp phủ tìm kiếm dự đoán. Nó hiển thị kết quả khi bạn nhập, giúp khách hàng tìm sản phẩm nhanh hơn.
Những gì cần điều chỉnh
Không có mega menu theo mặc định. Dawn hỗ trợ menu thả xuống (một cấp độ danh mục con), nhưng không phải mega menu thật sự với bố cục đa cột, hình ảnh danh mục hoặc các banner quảng cáo. Đối với các cửa hàng có 30+ sản phẩm, một danh sách thả xuống có 15 danh mục con trở thành một danh sách dài, có thể cuộn khó điều hướng.
Giải pháp: Bạn có thể tạo một pseudo-mega-menu bằng cách tổ chức điều hướng Shopify của bạn thành các nhóm logic (Online Store → Navigation), nhưng kết quả trực quan vẫn là một danh sách thả xuống một cột. Đối với một mega menu đa cột thật sự với hình ảnh, bạn sẽ cần một ứng dụng điều hướng.
Biểu tượng tìm kiếm so với thanh tìm kiếm. Trên máy tính để bàn, Dawn chỉ hiển thị một biểu tượng kính lúp theo mặc định. Nhấp vào nó mở lớp phủ tìm kiếm, điều này tốt—nhưng nghiên cứu từ Baymard Institute cho thấy rằng một trường tìm kiếm hiển thị (không chỉ một biểu tượng) làm tăng việc sử dụng tìm kiếm thêm 20-30%.
Giải pháp: Một số tùy chỉnh Dawn cho phép bạn hiển thị một thanh tìm kiếm liên tục trong header. Kiểm tra cài đặt chủ đề hoặc tài liệu Dawn của bạn để tìm kiếm các tùy chọn “tìm kiếm dự đoán”. Nếu phiên bản chủ đề của bạn không hỗ trợ điều này, một ứng dụng tập trung vào tìm kiếm có thể thêm nó.
Hạn chế thanh thông báo header. Thanh thông báo của Dawn hỗ trợ văn bản và một liên kết, nhưng không hỗ trợ nhiều tin nhắn xoay hoặc hẹn giờ đếm ngược. Để quảng bá ngưỡng vận chuyển (“Miễn phí vận chuyển trên $50”) hoặc các ưu đãi có thời hạn, một tin nhắn tĩnh duy nhất là chức năng nhưng cơ bản.
Những gì thay đổi ngay lập tức
Bật header dính. Đi tới Theme Settings → Header → chọn “Enable sticky header.” Chuyển đổi một lần này giúp điều hướng của bạn có thể truy cập mọi lúc thay vì biến mất khi cuộn. Không có nhược điểm.
Bật tìm kiếm dự đoán. Trong Theme Settings, hãy đảm bảo tìm kiếm dự đoán được bật. Nó hiển thị gợi ý sản phẩm khi khách hàng nhập, giảm các bước giữa tìm kiếm và trang sản phẩm.
Kiểm tra độ sâu menu của bạn. Đi tới Online Store → Navigation và xem xét cấu trúc menu của bạn. Nếu bất kỳ danh mục nào lồng ghép sâu hơn hai cấp độ (Danh mục → Danh mục con → Danh mục con), hãy san bằng nó. Menu di động của Dawn xử lý một cấp độ lồng ghép một cách tao nhã nhưng trở nên lúng túng ở hai hoặc nhiều cấp độ hơn.
Refresh: bản cập nhật hiện đại
Refresh là một trong những chủ đề miễn phí mới của Shopify, được phát hành vào năm 2024. Nó lấy phương pháp tập trung vào hiệu suất của Dawn và thêm độ bóng hơn về hình ảnh—các góc tròn, chữ mềm mại hơn, và bố cục header hơi khác.
Những gì hoạt động tốt
Bố cục header cập nhật. Refresh cung cấp nhiều tùy chọn bố cục header: logo bên trái với menu nội tuyến, logo ở giữa với menu dưới, hoặc bố cục nhỏ gọn cho màn hình nhỏ hơn. Tính linh hoạt này cho phép bạn phù hợp với kiểu của thương hiệu của bạn mà không cần mã tùy chỉnh.
Ngăn kéo di động được cải thiện. Ngăn kéo menu di động trong Refresh cảm thấy rõ ràng hơn so với của Dawn. Nó bao gồm các hoạt ảnh mượt mà hơn, chữ rõ ràng hơn, và khoảng cách tốt hơn giữa các mục nhấn. Thứ tự trực quan giữa các danh mục cha và danh mục con rõ ràng hơn.
Bộ lọc trang bộ sưu tập. Mặc dù không chính xác là điều hướng, trang bộ sưu tập của Refresh bao gồm chức năng bộ lọc và sắp xếp tích hợp sạch hơn so với mặc định của Dawn. Khách hàng có thể lọc theo giá, khả năng sẵn có, và loại sản phẩm—giảm tải trên menu chính của bạn để hiển thị mọi biến thể.
Khả năng truy cập. Giống như Dawn, Refresh tuân theo các hướng dẫn WCAG. Các mục menu có các nhãn ARIA thích hợp, các trạng thái tập trung hiển thị rõ ràng để điều hướng bàn phím, và tỷ lệ độ tương phản đáp ứng các tiêu chuẩn khả năng truy cập.
Những gì cần điều chỉnh
Hạn chế mega menu tương tự. Refresh kế thừa cùng một ràng buộc như Dawn: menu thả xuống hỗ trợ danh mục con, nhưng mega menu thật sự với hình ảnh và bố cục đa cột yêu cầu tùy chỉnh bổ sung hoặc một ứng dụng.
Hiệu suất động hoạ trên các thiết bị cũ. Các hoạt ảnh mượt mà hơn của Refresh trông tuyệt vời trên điện thoại mới nhưng có thể gây độ trễ nhỏ trên các thiết bị cũ (iPhone SE, điện thoại Android giá rẻ). Nếu công chúng mục tiêu của bạn bao gồm những người mua hàng nhạy cảm với giá sử dụng phần cứng cũ hơn, hãy kiểm tra trên một thiết bị cấp thấp hơn.
Giải pháp: Hầu hết các độ trễ liên quan đến động hoạ có thể được giảm nhẹ bằng cách giảm số lượng các mục menu và vô hiệu hóa các hiệu ứng thị sai trong cài đặt chủ đề.
Những gì thay đổi ngay lập tức
Bật header dính. Giống như Dawn—bật nó trong Theme Settings → Header. Header dính của Refresh hơi nhỏ gọn hơn so với header đầy đủ, điều này tốt: nó tiết kiệm không gian màn hình trong khi giữ cho điều hướng có thể truy cập.
Xem xét các tùy chọn bố cục header. Refresh cung cấp 3-4 biến thể bố cục header. Hãy thử từng cái và xem cái nào cung cấp danh mục của bạn mức độ khả năng hiển thị tốt nhất. Đối với các cửa hàng có 5+ danh mục cấp cao, một bố cục với menu dưới logo (toàn chiều rộng) thường hoạt động tốt hơn so với việc nhét mọi thứ thành một hàng.
Kiểm toán khoảng cách di động. Mặc dù menu di động của Refresh có khoảng cách mặc định tốt hơn so với Dawn, hãy xem xét nó bằng cách nhấn thực tế bằng ngón tay cái. Nếu bất kỳ mục nào quá gần nhau, hãy tăng phần đệm menu trong CSS tùy chỉnh hoặc cài đặt phần của chủ đề của bạn.
Sense: chủ đề biên tập
Sense được thiết kế cho các thương hiệu theo xu hướng kể chuyện—hãy tưởng tượng các sản phẩm thủ công, các thương hiệu sắc đẹp, hoặc các cửa hàng lối sống. Điều hướng của nó phản ánh sự tập trung biên tập đó.
Những gì hoạt động tốt
Trọng lượng trực quan trong header. Header của Sense cung cấp nhiều chỗ hơn cho logo và nhận dạng thương hiệu của bạn. Điều hướng cảm thấy cố ý hơn là tiện ích, phù hợp với các thương hiệu nơi thẩm mỹ là điểm bán.
Trang bộ sưu tập thân thiện với hình ảnh. Bố cục bộ sưu tập của Sense nhấn mạnh hình ảnh sản phẩm, và điều hướng hỗ trợ điều này bằng cách giữ cho menu sạch sẽ và không lộn xộn. Đối với các cửa hàng nơi ảnh sản phẩm bán tốt hơn so với tên danh mục, đây là một ưu điểm.
Menu di động thanh lịch. Ngăn kéo di động của Sense được tinh chỉnh trực quan—chữ sạch sẽ, khoảng trắng rộng, các chuyển đổi mượt mà. Nó tạo ra một cảm giác cao cấp phù hợp với các thương hiệu biên tập hoặc xa xỉ.
Những gì cần điều chỉnh
Ít tùy chọn bố cục header hơn. So với Dawn và Refresh, Sense cung cấp ít tùy chọn tùy chỉnh hơn cho bố cục header. Vị trí logo và vị trí menu bị khóa hơn, điều này có thể cảm thấy hạn chế nếu cấu trúc danh mục của bạn không phù hợp với bố cục mặc định.
Sự đánh đổi hiệu suất. Sense tải nhiều CSS và JavaScript hơn một chút so với Dawn, chủ yếu là các hiệu ứng trực quan. Đối với hầu hết các cửa hàng sự khác biệt là không đáng kể (50-100ms trên di động), nhưng nếu bạn xếp chồng các ứng dụng khác lên trên, mỗi mili giây đều quan trọng.
Giải pháp: Giảm thiểu các kịch bản của bên thứ ba và tránh cài đặt nhiều ứng dụng thêm JavaScript vào header của bạn. Nếu bạn sử dụng Sense, hãy đặc biệt chú ý đến tổng trọng lượng trang.
Những gì thay đổi ngay lập tức
Đơn giản hóa cấu trúc menu của bạn. Thiết kế menu thanh lịch của Sense hoạt động tốt nhất với ít danh mục được lựa chọn cẩn thận hơn (5-7 mục cấp cao). Nếu bạn đã kế thừa một cây danh mục phức tạp từ một chủ đề trước đó, đây là một lúc tốt để hợp nhất.
Kiểm tra trên các thiết bị Android tầm trung. Độ bóng trực quan của Sense được thiết kế cho các màn hình hiện đại, nhưng một phần đáng kể của lưu lượng thương mại điện tử toàn cầu đến từ các điện thoại tầm trung. Mở cửa hàng của bạn trên điện thoại Samsung Galaxy A-series hoặc thiết bị tương tự và xác minh menu mở mượt mà.
Bật tìm kiếm nổi bật. Biểu tượng tìm kiếm của Sense có thể cảm thấy thứ yếu đối với thiết kế trực quan. Hãy đảm bảo nó được định vị nổi bật trong header—khách hàng không nên phải tìm kiếm nó.
Các khoảng trống được chia sẻ bởi cả ba chủ đề
Bất kể chủ đề nào bạn chọn, cả ba đều chia sẻ các hạn chế điều hướng ảnh hưởng đến các chủ cửa hàng mới:
Không có tab bar dưới cùng
Không có chủ đề miễn phí của Shopify nào bao gồm tab bar di động dưới cùng (điều hướng kiểu Instagram/Amazon ở dưới cùng của màn hình). Đây là một khoảng trống đáng kể vì:
- Tab bar giữ cho điều hướng hiển thị mà không cần nhấn để mở menu hamburger
- Chúng thân thiện với ngón tay cái (dưới cùng của màn hình là vùng đạt dễ nhất)
- Chúng giảm các bước từ “duyệt” đến “điều hướng” từ 2 lần nhấn (mở menu → chọn danh mục) thành 1 lần nhấn
Thêm tab bar yêu cầu một ứng dụng điều hướng hoặc mã chủ đề tùy chỉnh.
Không có biểu tượng menu
Cả ba chủ đề đều hiển thị các mục menu chỉ có văn bản. Không có biểu tượng cho Trang chủ, Tìm kiếm, Giỏ hàng hoặc danh mục. Nghiên cứu cho thấy rằng ghép các biểu tượng với nhãn văn bản cải thiện tốc độ quét 20-35% và giúp khách hàng tự định hướng nhanh hơn.
Tùy chỉnh di động hạn chế
Bạn không thể định cấu hình các menu di động và máy tính để bàn riêng biệt theo cách bản địa. Những gì bạn thiết lập trong Online Store → Navigation áp dụng cho cả hai kích thước màn hình. Nhưng người dùng di động và máy tính để bàn có nhu cầu khác nhau—menu di động phải phẳng hơn và trực tiếp hơn, trong khi menu máy tính để bàn có thể cho phép sâu hơn.
Không có phân tích menu
Không có chủ đề nào trong số này cho bạn biết các mục menu nào nhận được lượt nhấp nhiều nhất, danh mục nào lái lưu lượng nhiều nhất, hoặc đường dẫn điều hướng nào dẫn đến mua hàng. Bạn cần theo dõi sự kiện Google Analytics hoặc một ứng dụng điều hướng dành riêng để lấy dữ liệu này.
| Tính năng | Dawn | Refresh | Sense | Lý tưởng |
|---|---|---|---|---|
| Header dính | Có (chuyển đổi) | Có (chuyển đổi) | Có (chuyển đổi) | Có |
| Mega menu | Không | Không | Không | Đa cột với hình ảnh |
| Tab bar di động | Không | Không | Không | 4-5 tab ở dưới cùng |
| Biểu tượng menu | Không | Không | Không | Biểu tượng + nhãn văn bản |
| Tìm kiếm dự đoán | Có | Có | Có | Có |
| Menu di động/máy tính để bàn riêng biệt | Không | Không | Không | Cấu hình độc lập |
| Phân tích nhấp chuột menu | Không | Không | Không | Theo dõi nhấp chuột tích hợp sẵn |
| Danh mục con thả xuống | Có (1 cấp độ) | Có (1 cấp độ) | Có (1 cấp độ) | 2+ cấp độ |
Khi mặc định đủ (và khi không phải)
Giữ các mặc định nếu:
- Bạn có ít hơn 30 sản phẩm
- Cấu trúc danh mục của bạn phẳng (5-7 danh mục, không có danh mục con)
- Lưu lượng của bạn chủ yếu là máy tính để bàn
- Bạn vừa phát hành và muốn xác thực sự phù hợp sản phẩm trên thị trường trước khi đầu tư vào điều hướng
Trong trường hợp này, Dawn, Refresh hoặc Sense với header dính được bật và tìm kiếm dự đoán được bật sẽ phục vụ bạn tốt. Đừng chi tiền cho các ứng dụng điều hướng cho đến khi bạn có dữ liệu lưu lượng hiển thị nơi khách hàng bị mắc kẹt.
Nâng cấp nếu:
- Bạn có 30+ sản phẩm với danh mục con
- Lưu lượng di động vượt quá 50% (kiểm tra trong Shopify Analytics → Online Store → Sessions by device)
- Tỷ lệ thoát của bạn trên 60% và bạn nghi ngờ sự nhầm lẫn về điều hướng
- Bạn muốn một mega menu với hình ảnh danh mục, biểu tượng hoặc banner quảng cáo
- Bạn cần tab bar di động để duyệt thân thiện với ngón tay cái
Trong những trường hợp này, một ứng dụng điều hướng như Navi+ Menu Builder có thể cầu nối khoảng cách giữa những gì chủ đề của bạn cung cấp và những gì khách hàng của bạn cần. Nó lớp lên trên chủ đề hiện có của bạn mà không thay thế nó, thêm mega menu, tab bar, biểu tượng, và các cấu hình di động/máy tính để bàn riêng biệt.
Cập nhật chủ đềShopify thường xuyên cập nhật các chủ đề miễn phí của nó. Một số khoảng trống được đề cập ở đây có thể được giải quyết trong các phiên bản tương lai. Sau khi cập nhật chủ đề, hãy kiểm tra lại điều hướng của bạn để xem liệu các tính năng mới đã được thêm vào—và để đảm bảo các tùy chỉnh hiện có không bị ghi đè.
Các bước tiếp theo của bạn
- Xác định chủ đề của bạn. Đi tới Online Store → Themes để xác nhận chủ đề nào bạn đang chạy.
- Bật header dính. Mỗi chủ đề hỗ trợ điều này. Bật nó ngay bây giờ.
- Bật tìm kiếm dự đoán. Cũng vậy—một chuyển đổi, cải thiện ngay lập tức.
- Xem bảng so sánh ở trên. Xác định khoảng trống nào quan trọng nhất cho kích thước cửa hàng và mô hình lưu lượng của bạn.
- Quyết định: điều chỉnh hoặc nâng cấp. Nếu các mặc định đáp ứng nhu cầu của bạn, hãy tập trung vào nội dung và tiếp thị. Nếu bạn cần mega menu, tab bar, hoặc bố cục di động riêng biệt, hãy đánh giá một ứng dụng điều hướng.
Các chủ đề Shopify mặc định cung cấp cho bạn một điểm khởi đầu vững chắc cho điều hướng, và đối với nhiều cửa hàng mới, điểm khởi đầu đó thực sự đủ tốt. Mấu chốt là biết tính năng nào để bật ngay lập tức (header dính, tìm kiếm dự đoán) và hạn chế nào sẽ quan trọng khi cửa hàng của bạn phát triển (không có mega menu, không có tab bar, không có menu di động riêng biệt). Bắt đầu với những gì bạn có, theo dõi nơi khách hàng gặp khó khăn, và nâng cấp cố ý khi dữ liệu cho bạn biết để làm như vậy.
Bài viết này là một phần của hướng dẫn lớn hơn trên Kiến thức cơ bản về điều hướng cho cửa hàng trực tuyến đầu tiên của bạn: 5 yếu tố thiết yếu.