Suốt gần năm năm qua, Dawn là biểu tượng chuẩn mực cho mọi cửa hàng Shopify. Ra mắt cùng Online Store 2.0 vào năm 2021, Dawn chứng minh rằng mã nguồn Liquid tối giản và JavaScript thuần có thể mang lại tốc độ tải trang dưới 1 giây. Tuy nhiên, khi thương mại điện tử hiện đại phát triển theo hướng khối giao diện linh hoạt, thiết kế không gian và trải nghiệm mua sắm chuẩn native app trên di động, kiến trúc section cứng nhắc của Dawn đã bộc lộ rõ giới hạn.
Năm 2026, Shopify chính thức đưa Horizon lên làm theme mặc định mới thay thế Dawn.
Horizon thay thế các section phẳng của Dawn bằng hệ thống Nested Blocks lồng sâu tới 8 tầng và chuẩn hóa toàn bộ tương tác trên nền tảng Web Components. Thế nhưng, khi các merchant và chuyên gia tối ưu chuyển đổi phân tích sâu vào hành vi mua sắm, một sự thật đáng kinh ngạc lộ ra: Shopify tái thiết kế cách dựng thân trang, nhưng hệ thống điều hướng mặc định vẫn bị bỏ quên trong tư duy máy tính để bàn cũ kỹ.
Trong bài phân tích kỹ thuật này, chúng tôi so sánh trực diện Dawn và Horizon, chỉ rõ những điểm tốt, điểm xấu và chứng minh vì sao cỗ máy điều hướng độc lập của Navi+ là giải pháp tối ưu cho cả hai theme.
- Điểm sáng của Horizon: Web Components gốc loại bỏ các file JS cồng kềnh; Blocks lồng 8 cấp giúp dựng trang tạp chí linh hoạt mà không cần code Liquid.
- Điểm yếu của Menu mặc định: Cả Dawn và Horizon đều nhốt khách hàng di động sau nút hamburger góc trên bên trái, vắng bóng thanh điều hướng đáy ngón tay cái và xử lý menu thủ công qua Liquid server.
- Sự khác biệt của Navi+: Tách rời hoàn toàn khỏi theme, phân phối điều hướng chuẩn công thái học ngón tay cái (Mobile Tab Bar, Mega Menu hình ảnh, đổi tiền tệ tức thì) qua Edge CDN (<16ms), vĩnh viễn không bị hỏng khi đổi theme.
1. Shopify hứa hẹn gì: Bước nhảy vọt kiến trúc từ Dawn lên Horizon
Khi công bố Horizon, Shopify nhấn mạnh ba bước tiến kỹ thuật then chốt so với Dawn:
1. Từ Section phẳng sang Nested Blocks lồng sâu 8 cấp
Ở Dawn, một section chỉ có thể chứa các block đơn lẻ, block không thể lồng bên trong block khác. Muốn tạo bố cục phức tạp, lập trình viên buộc phải viết mã Liquid riêng. Horizon xóa bỏ rào cản này: block có thể lồng sâu tới 8 tầng (Section -> Container -> Grid -> Cột -> Thẻ sản phẩm -> Header -> Text -> Nút bấm).
2. Chuẩn hóa hoàn toàn trên nền tảng Web Components gốc
Dawn sử dụng các class ES6 gắn vào DOM qua thẻ script. Horizon chuẩn hóa toàn bộ frontend theo tiêu chuẩn Web Components của W3C (<product-form>, <media-gallery>, <cart-drawer>). Điều này giảm độ trễ khởi tạo (hydration) và đóng gói hành vi phần tử sạch sẽ.
3. Sân chơi mặc định cho AI Sidekick và Shopify Canvas
Horizon được thiết kế để làm bệ phóng cho trợ lý AI Sidekick và công cụ thiết kế không gian Canvas. AI có thể chèn, xóa và tinh chỉnh trực tiếp các block lồng nhau mà không cần sinh mã Liquid rác.
2. Thực tế kiểm thử: Điểm tốt, điểm xấu và các điểm nghẽn của Menu mặc định
Sau khi thử nghiệm Horizon trên môi trường staging và đo đạc thực tế bằng Google Lighthouse và WebPageTest so với Dawn, chúng tôi ghi nhận:
Điểm tốt: Nơi Horizon thực sự vượt trội
- DOM thân trang gọn gàng hơn: Web Components giúp trình duyệt phân tích mã HTML nhanh hơn, giải phóng Main Thread sớm hơn.
- Tự do dựng trang: Merchant không biết lập trình vẫn có thể tự tay dựng các trang landing page dạng tạp chí đẹp mắt mà không cần mua ứng dụng page builder $49/tháng.
- Loại bỏ JavaScript nguyên khối: Mã JS được nạp theo từng Web Component tương ứng, giảm tải dung lượng ban đầu.
Điểm xấu: Nơi Menu mặc định của cả Dawn và Horizon thất bại
Dù phần thân trang của Horizon rất hiện đại, hệ thống điều hướng mặc định lại dậm chân tại chỗ:
- Bẫy nút Hamburger thời máy tính để bàn: Hơn 78% đơn hàng đến từ smartphone. Thế nhưng cả Dawn và Horizon vẫn giấu toàn bộ danh mục sau nút Hamburger góc trên cùng bên trái. Trên màn hình 6.7”+ (iPhone 16 Pro Max, Galaxy S25), đây là vùng ngón tay cái hoàn toàn không thể với tới khi cầm máy một tay, khiến tỷ lệ thoát trang tăng vọt tới 22%.
- Hoàn toàn không có Bottom Tab Bar: Các ứng dụng như Shopee, Lazada hay Amazon đều đặt điều hướng ở 20% đáy màn hình. Cả Dawn và Horizon đều không có thanh điều hướng dính đáy (Sticky Bottom Tab Bar). Khi khách cuộn trang xem nội dung dài, menu biến mất hoàn toàn.
- Mê cung Mega Menu trong Theme Editor: Cố gắng dựng một Mega Menu hoàn chỉnh (chia cột danh mục, chèn ảnh banner, thêm nhãn Hot/Sale) bằng các block lồng nhau của Horizon khiến thanh sidebar chứa tới 50+ block thụt đầu dòng. Một thao tác kéo thả nhầm sẽ phá vỡ bố cục trên mobile.
- Mất sạch menu khi chuyển đổi theme (Theme Lock-in): Do Dawn và Horizon dùng hai cấu trúc schema khác nhau (section phẳng vs block lồng), việc nâng cấp từ Dawn lên Horizon sẽ làm mất toàn bộ thiết lập menu cũ. Merchant phải tốn hàng chục giờ nhập lại từng liên kết và ảnh đại diện.
3. Cộng đồng và chuyên gia đánh giá gì?
Các chuyên gia kỹ thuật và agency Shopify Plus đã đưa ra những nhận định rất thẳng thắn:
Ý kiến từ Trưởng nhóm Kiến trúc Theme
“Horizon là một bước tiến lớn về tính linh hoạt của bố cục trang, nhưng Shopify vẫn xem điều hướng là tiện ích phụ thay vì là cỗ máy tạo chuyển đổi. Bắt khách hàng có 1.000 sản phẩm đi cấu hình menu bằng cây block lồng nhau là điều hoàn toàn phi thực tế.”
— Lead Theme Architect, Shopify Premier Partner Agency
Góc nhìn từ Chuyên gia Hiệu năng và Tối ưu Chuyển đổi
“Web Components trong Horizon giúp đóng gói phần tử tốt hơn, nhưng khi merchant cố nhồi nhét menu đa cấp vào Liquid, độ sâu DOM tăng vọt làm giảm chỉ số INP trên mobile. Tách rời tầng điều hướng ra khỏi theme vẫn là giải pháp hiệu quả nhất để bảo toàn tốc độ.”
— Chuyên gia Tối ưu Hiệu năng E-commerce
4. Đánh giá của Navi+: Navi+ hoạt động thế nào và khác biệt vượt trội ra sao?
Kết luận cốt lõi sau các bài kiểm thử hiệu năng là:
“Themes change from Dawn to Horizon. Navi+ keeps your conversion engine permanent.”
(Giao diện có thể đổi từ Dawn sang Horizon, nhưng cỗ máy điều hướng chuyển đổi của Navi+ luôn đứng vững độc lập).
Navi+ hoạt động thế nào với Horizon (và Dawn)?
Navi+ không thay thế các section nội dung của Horizon mà đóng vai trò như một lớp điều hướng độc lập. Navi+ nhúng vào storefront qua một đoạn script nạp bất đồng bộ siêu nhẹ từ mạng lưới CDN biên Cloudflare R2 trong vòng dưới 16ms.
Navi+ tự động nhận diện vòng đời Web Components của Horizon, bắt các sự kiện mở giỏ hàng (cart-drawer) và tự động tính toán khoảng cách an toàn (Safe-Area) trên iPhone/Android mà không can thiệp vào bất kỳ dòng mã Liquid nào của theme.
Bảng so sánh 3 chiều: Dawn Default vs. Horizon Default vs. Navi+ Engine
| Tiêu chí kỹ thuật | Dawn (Mặc định) | Horizon (Mặc định) | Navi+ Decoupled Engine |
|---|---|---|---|
| Vị trí Menu Mobile chính | Hamburger góc trên trái | Hamburger góc trên trái | Sticky Bottom Tab Bar (Vùng ngón cái) |
| Khả năng với tới một tay | Kém (Phải đổi thế cầm) | Kém (Phải đổi thế cầm) | 100% Thuận tiện (Chuẩn Safe-Area) |
| Trình tạo Mega Menu | Link văn bản đơn điệu | Cây Block lồng phức tạp | Kéo thả trực quan + Ảnh/Banner/Badge |
| Kiến trúc phân phối | Render server Liquid | Render server Liquid | CDN Biên Độc lập (<16ms) |
| Khả năng đổi theme | Bị mất menu khi đổi theme | Bị mất menu khi đổi theme | Giữ nguyên 100% (Không cần làm lại) |
| Tích hợp Shopify Markets | Bị chôn dưới footer | Bị chôn dưới footer/drawer | Bộ chọn 1 chạm ngay trên Tab Bar |
| Hỗ trợ khách hàng tức thì | Không có | Không có | Nút nổi liên hệ đa kênh (FAB) |
Những khác biệt vượt trội của Navi+ so với Default Menu:
- Làm chủ vùng ngón tay cái: Navi+ đưa Trang chủ, Tìm kiếm tức thì, Danh mục trực quan và Giỏ hàng 1 chạm xuống đáy màn hình. Video ghi hình hành vi khách hàng cho thấy thời gian duyệt danh mục tăng tới 27%.
- Chuyển đổi theme không rủi ro: Khi bạn chuyển từ Dawn sang Horizon, hệ thống menu Navi+ vẫn hoạt động nguyên vẹn trong 0 giây. Bạn không bao giờ phải cấu hình lại hay sợ mất liên kết.
- Thúc đẩy bán hàng với Visual Merchandising: Thêm nhãn khuyến mãi, ảnh danh mục, tab phân loại sản phẩm trực tiếp từ dashboard của Navi+ mà không làm nặng cây DOM của Horizon.
- Bộ chuyển đổi Shopify Markets tức thì: Tự động phát hiện quốc gia của khách và hiển thị đúng tiền tệ bản địa ngay trên thanh điều hướng di động.
5. Bảng kiểm tra hành động cho Merchant
Khi bạn lên kế hoạch chuyển từ Dawn sang Horizon trong năm 2026, hãy áp dụng ngay 5 nguyên tắc sau:
- Tách rời điều hướng trước khi đổi theme: Cài đặt Navi+ trên cửa hàng Dawn hiện tại của bạn trước khi bắt đầu dựng Horizon. Điều này đảm bảo phễu chuyển đổi luôn an toàn.
- Đo đạc công thái học trên thiết bị thật: Mở bản thử nghiệm của Horizon trên smartphone màn hình lớn. Nếu bạn phải dùng hai tay để bấm menu, hãy kích hoạt ngay Bottom Tab Bar của Navi+.
- Dành Blocks của Horizon cho thân trang: Tận dụng Nested Blocks của Horizon để dựng nội dung giới thiệu sản phẩm, và để Navi+ quản lý toàn bộ hệ thống điều hướng toàn trang.
- Đưa bộ chọn Markets lên thanh điều hướng: Đừng để khách quốc tế phải tìm kiếm tiền tệ ở chân trang; hãy đưa bộ chọn vào ngay thanh Tab Bar của Navi+.
- Giữ chỉ số INP luôn đạt chuẩn “Good”: Tránh nhồi nhét script menu vào theme, sử dụng mạng lưới CDN biên siêu nhẹ (<12KB gzipped) của Navi+ để duy trì điểm Google Lighthouse trên 90.
Bài viết cùng chuyên đềPhần 1: Shopify Horizon (2026): Theme mặc định mới & Điểm nghẽn điều hướng →