Cách tạo menu đầu trang và chân trang cố định trong Shopify (Không cần sửa mã nguồn)

Câu trả lời nhanh: cách tạo menu đầu trang và chân trang cố định

Để tạo header cố định, mở Cài đặt theme > Header và chọn một tùy chọn Sticky header (Dawn cung cấp None, On scroll up, Always và Always, reduce logo size). Đa số theme không có sẵn menu chân trang cố định, vì vậy hãy thêm thanh tab bar ở đáy bằng Custom CSS hoặc ứng dụng menu, sau đó kiểm tra trên điện thoại thật.

Dưới đây là trình tự 3 bước để thiết lập điều hướng cố định ở hai đầu màn hình:

1. Bật cài đặt header: Trong trang quản trị Shopify, vào Online Store > Themes > Customize. Mở phần Header (hoặc Theme settings > Header), chọn hành vi Sticky header mong muốn và lưu thay đổi.
2. Thêm thanh tab bar ở đáy cho di động: Vì các theme Shopify tiêu chuẩn coi footer là khu vực kết thúc trang thay vì thanh điều hướng thường trực, hãy bổ sung menu đáy cố định bằng CSS tùy chỉnh hoặc ứng dụng menu.
3. Kiểm tra hiển thị trên thiết bị thật: Mở cửa hàng trên điện thoại thực tế để bảo đảm cả thanh trên và thanh đáy không che khuất tiêu đề trang, các nút bấm thao tác hoặc vùng an toàn phần cứng.

Sticky header và sticky footer menu: sự khác biệt và vai trò

Một sticky header (đầu trang cố định) luôn bám chặt vào mép trên cùng của khung nhìn trình duyệt khi khách hàng cuộn trang xuống. Yếu tố này giúp các tiện ích mua sắm cốt lõi—như logo nhận diện thương hiệu, danh mục sản phẩm chính, thanh tìm kiếm tức thì và biểu tượng giỏ hàng—luôn sẵn sàng mà người mua không cần mất công cuộn ngược lên đầu trang.

Ngược lại, sticky footer menu (menu chân trang cố định) hoàn toàn không phải là phần chân trang chứa thông tin bản quyền, chính sách đổi trả hay biểu tượng thanh toán. Trong thiết kế web hiện đại, khái niệm này dùng để chỉ thanh điều hướng đáy (bottom tab bar) luôn ghim ở cạnh dưới màn hình di động, cung cấp một số lối tắt quan trọng nhất như Trang chủ, Tìm kiếm, Danh mục, Yêu thích và Giỏ hàng ngay tầm với ngón tay cái.

Sự khác biệt giữa sticky và fixed trong CSS

Trong CSS, position: sticky giữ phần tử nằm trong luồng tài liệu tự nhiên cho đến khi trang được cuộn tới một ngưỡng xác định. Theo MDN Web Docs về CSS position, một phần tử dùng position: sticky bắt buộc phải có ít nhất một giá trị ngưỡng như top, bottom, left hoặc right để hoạt động đúng. Do vẫn giữ chỗ trong bố cục trước khi bám dính, nó không làm sụp đổ cấu trúc trang xung quanh.

Trái lại, position: fixed rút hoàn toàn phần tử ra khỏi luồng tài liệu thông thường. Theo tài liệu MDN, trình duyệt sẽ không chừa bất kỳ khoảng trống nào cho phần tử trong bố cục trang, khiến các khối nội dung phía sau bị đẩy lên trên và chui xuống dưới phần tử cố định. Ngoài ra, cả fixed lẫn sticky đều tạo ra một stacking context (bối cảnh xếp chồng) mới, làm thay đổi cách thức hoạt động của các lớp z-index.

Cách 1: Bật sticky header trong cài đặt theme

Nếu cửa hàng của bạn đang chạy theme Dawn chính thức của Shopify hoặc một theme Online Store 2.0 hiện đại, bạn không cần phải đụng đến mã nguồn hay viết CSS. Tính năng này đã được tích hợp sẵn ngay trong trình tùy biến giao diện.

1. Trong trang quản trị Shopify, truy cập vào mục Online Store > Themes.
2. Tìm theme bạn muốn thiết lập rồi nhấn vào nút Customize.
3. Ở thanh công cụ bên trái, nhấp vào section Header (hoặc mở Theme settings > Header tùy phiên bản theme).
4. Tìm danh sách thả xuống Sticky header, chọn hành vi mong muốn và nhấn Save ở góc trên bên phải.

Bốn lựa chọn Sticky header trong theme Dawn

Trong theme Dawn tiêu chuẩn của Shopify, cấu hình header cung cấp 4 tùy chọn cố định được định nghĩa rõ trong mã nguồn theme:

Theo ghi nhận trong kho mã nguồn GitHub của theme Dawn, Dawn đặt giá trị mặc định của sticky_header_type là on-scroll-up và triển khai cấu trúc bằng position: sticky.

Nghiên cứu công thái học từ Nielsen Norman Group về sticky header củng cố cơ chế này: các header bán cố định (‘On scroll up’) vận hành dựa trên giả định rằng mọi thao tác cuộn ngược lên đều báo hiệu ý định điều hướng hoặc kiểm tra giỏ hàng của người dùng. Việc ẩn header khi cuộn xuống giúp mở rộng tối đa vùng xem hàng mà không làm mất đi khả năng tiếp cận menu.

Các theme Online Store 2.0 khác

Các theme Online Store 2.0 khác có thể có cài đặt header cố định tương tự, nhưng tên gọi và các tùy chọn có thể khác Dawn. Hãy luôn kiểm tra cài đặt Header của theme trước khi nghĩ đến việc viết CSS tùy chỉnh; nếu không có cài đặt như vậy, hãy chuyển sang cách dùng CSS bên dưới. Nếu bạn đang xây dựng cửa hàng trên nền Dawn, hãy xem thêm bài phân tích chuyên sâu về Navi+ trên theme Dawn.

Thích xem video hướng dẫn thao tác? Đoạn clip sau đây sẽ chỉ rõ vị trí cài đặt trong theme editor:

Cách 2: Tạo sticky header bằng Custom CSS

Trong trường hợp bạn sử dụng một theme tùy biến riêng hoặc một giao diện thiếu tùy chọn sticky header trong phần cài đặt, bạn hoàn toàn có thể dùng CSS tùy chỉnh mà không cần chạm vào tệp theme.liquid.

Tạo bản sao theme trước khi thực hiện

Trước khi thực hiện bất kỳ chỉnh sửa nào về mặt giao diện, hãy luôn bảo vệ cửa hàng đang hoạt động bằng cách tạo một bản sao dự phòng. Đúng như khuyến cáo của Trung tâm trợ giúp Shopify về nhân bản theme: “Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes.”

Để tạo bản sao, hãy vào Online Store > Themes, nhấp vào biểu tượng ba dấu chấm (...) cạnh theme đang dùng và chọn Duplicate. Mọi thao tác viết CSS và kiểm thử nên diễn ra trên bản sao này trước khi kích hoạt chính thức.

Vị trí dán mã CSS

Shopify cung cấp sẵn ô nhập Custom CSS trực tiếp trong trình biên tập giao diện trực quan. Vào Online Store > Themes > Customize, bấm biểu tượng bánh răng Theme settings ở thanh bên trái và mở mục Custom CSS.

Theo tài liệu của Shopify về tính năng Custom CSS, các quy tắc viết trong ô Custom CSS toàn theme sẽ áp dụng cho toàn bộ cửa hàng và giới hạn trong phạm vi 1.500 ký tự. Lưu ý rằng nếu bạn dán CSS vào ô của từng section riêng lẻ, Shopify sẽ cô lập phạm vi chỉ trong section đó và có thể khiến thanh điều hướng không bám dính ra ngoài toàn trang.

/* Ví dụ — điều chỉnh bộ chọn theo theme của bạn và kiểm thử trên theme bản sao */
.section-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

Đoạn mã trên áp dụng thuộc tính position: sticky cho phần tử header. Theo nguyên lý của MDN Web Docs, phần tử sticky cần một ngưỡng định hướng—ở đây top: 0 xác định header sẽ bám dính ngay khi mép trên chạm vào đỉnh cửa sổ trình duyệt. Thuộc tính z-index: 3 bảo đảm header nằm nổi phía trên các văn bản và hình ảnh thông thường của trang.

Cần hết sức cẩn trọng với các bài viết cũ trên diễn đàn. Các hướng dẫn nổi tiếng trước đây trên Shopify Community dành cho theme Debut (Shopify Community) thường can thiệp sâu bằng thư viện jQuery và mã JavaScript thủ công. Chính bài viết đó nêu rõ đây là hướng dẫn nâng cao không được Shopify hỗ trợ, vì vậy đừng sao chép script của nó vào theme hiện tại; hướng dẫn này chỉ dùng cài đặt theme và CSS.

Khắc phục các sự cố thường gặp với sticky header

Hình 1: Minh họa khái niệm — Xử lý triệt để hiện tượng che khuất nội dung và xung đột lớp hiển thị bằng scroll-padding-top.

Việc cố định một thanh điều hướng tác động trực tiếp đến hình học trang, quá trình kết xuất khung nhìn và các lớp xếp chồng. Khi phát sinh trục trặc, nguyên nhân hầu như bắt nguồn từ bốn hiện tượng CSS phổ biến sau đây.

Nội dung bị che khuất dưới header

Phàn nàn phổ biến nhất của các chủ shop sau khi tự làm menu cố định là banner quảng cáo, tiêu đề danh mục hoặc hàng sản phẩm đầu tiên bị thụt vào dưới thanh menu khi trang vừa tải xong (thảo luận thực tế trên Shopify Community).

Lỗi này xảy ra khi đoạn code sử dụng position: fixed thay vì position: sticky. Vì fixed rút phần tử ra khỏi luồng tài liệu (MDN Web Docs), phần thân trang lập tức trượt lên chiếm chỗ trên cùng. Việc chuyển sang dùng position: sticky thường giải quyết ngay vấn đề do phần tử sticky vẫn bảo toàn không gian vật lý của mình trước khi cuộn.

Nếu theme của bạn bắt buộc phải dùng fixed, hoặc khi người dùng nhấp vào liên kết neo nội bộ (ví dụ #reviews hay #faq) mà tiêu đề mục bị che lấp, hãy khai báo scroll-padding-top cho phần tử HTML gốc. Theo MDN Web Docs, thuộc tính này thông báo cho trình duyệt trừ bớt một khoảng đệm ở đỉnh khung nhìn khi cuộn tới vị trí đích:

/* Ví dụ — điều chỉnh bộ chọn theo theme của bạn và kiểm thử trên theme bản sao */
html {
  scroll-padding-top: 80px; /* giá trị mẫu: thay bằng chiều cao header đã đo của chính cửa hàng bạn */
}

Hãy luôn dùng công cụ kiểm tra phần tử (DevTools) để đo chính xác chiều cao header của chính cửa hàng bạn; tuyệt đối không sao chép máy móc các con số pixel trên mạng vì kích thước logo và thanh thông báo ở mỗi cửa hàng là hoàn toàn khác nhau.

Thuộc tính sticky ngừng hoạt động do lỗi overflow

Một tình huống rất hay gặp là sticky header đang hoạt động bình thường bỗng dưng không chịu bám dính sau khi cửa hàng cài đặt thêm ứng dụng trình chiếu ảnh hoặc thanh banner từ bên thứ ba.

Cơ chế kỹ thuật đằng sau hiện tượng này đã được MDN Web Docs giải thích rõ: phần tử sticky sẽ bám dính vào tổ tiên gần nhất sở hữu cơ chế cuộn. Nếu bất kỳ phần tử cha nào—như html, body, thẻ <main> hoặc khối bao ngoài—bị gán thuộc tính overflow: hidden, overflow: auto, overflow: scroll hay overflow: overlay, phần tử sticky sẽ bám vào khung chứa đó thay vì khung nhìn trình duyệt. Nếu khung cha không cuộn, header sẽ đứng yên hoàn toàn. Cách xử lý là rà soát các thẻ cha và loại bỏ các quy tắc overflow ẩn không mong muốn.

Header bị trượt xuống dưới các thành phần khác (z-index)

Khi khách hàng cuộn qua video nhúng, slider hình ảnh hoặc widget đánh giá, header có thể bị trượt ra phía sau các khối này. Ngược lại, menu thả xuống hoặc ngăn kéo giỏ hàng có thể bị cắt cụt bởi chính khung chứa header.

Vì position: sticky và position: fixed luôn khởi tạo một bối cảnh xếp chồng (stacking context) mới (MDN Web Docs), mọi thứ bên trong header sẽ được tính toán dựa trên cấp độ của chính nó. Hãy bảo đảm header có giá trị z-index vừa đủ, đồng thời kiểm tra để các thành phần lớp phủ như menu phụ, khung tìm kiếm và ngăn kéo giỏ hàng giữ giá trị z-index cao hơn header.

Tắt tính năng cố định riêng trên thiết bị di động

Trên màn hình điện thoại với chiều cao giới hạn, một thanh header thường trực có thể chiếm dụng quá nhiều diện tích đọc hàng. Bạn có thể giới hạn thuộc tính cố định chỉ hoạt động trên máy tính để bàn bằng cách bọc quy tắc trong truy vấn @media:

/* Ví dụ — điều chỉnh bộ chọn và điểm ngắt (ở đây là 750px) theo theme của bạn và kiểm thử trên theme bản sao */
@media (min-width: 750px) {
  .section-header {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

Ô Custom CSS của Shopify hỗ trợ các truy vấn @media tiêu chuẩn (Tài liệu hướng dẫn Shopify). Với theme Dawn, bạn cũng có thể chọn cấu hình Sticky header thành None hoặc On scroll up để giải phóng diện tích. Tránh việc dùng JavaScript đổi class header sau khi tải trang vì điều này gây ra hiện tượng nhảy giật bố cục, ảnh hưởng tiêu cực tới chỉ số trải nghiệm người dùng. Theo khuyến nghị của Google web.dev về CLS, các trang web nên duy trì điểm số CLS từ 0.1 trở xuống.

Bảng tổng hợp dưới đây giúp bạn nhanh chóng tra cứu nguyên nhân và giải pháp cho các lỗi thường gặp:

Vì sao phần lớn theme Shopify không có menu chân trang cố định

Trong khi sticky header xuất hiện phổ biến trên hầu hết các theme hiện đại, nửa còn lại của nhu cầu tìm kiếm—menu chân trang cố định—lại bộc lộ một khoảng trống lớn trong kiến trúc theme chuẩn.

Trong các theme Shopify, khu vực ‘footer’ được xây dựng như một khối nội dung tĩnh đặt ở điểm kết thúc của tài liệu. Một chân trang thông thường chứa nhiều khối thông tin: giới thiệu thương hiệu, liên kết dịch vụ khách hàng, chính sách, bản quyền pháp lý và biểu tượng thanh toán. Nếu cố định một khối footer đầy đủ xuống đáy màn hình điện thoại, nó sẽ che kín gần như toàn bộ màn hình và khách hàng không thể duyệt sản phẩm.

Điều mà các chủ shop và người mua thực sự mong muốn khi nhắc tới ‘sticky footer menu’ chính là một thanh tab bar ở đáy trên mobile—một dải điều hướng nhỏ gọn bám chặt vào cạnh đáy màn hình điện thoại. Phần lớn các theme Shopify không có sẵn thanh tab bar này. Để triển khai, bạn có hai con đường: tự viết mã CSS kết hợp tạo section Liquid tùy chỉnh, hoặc sử dụng một ứng dụng chuyên biệt.

Dựng thanh điều hướng đáy bằng Custom CSS

Nếu bạn chọn giải pháp tự viết CSS, khung cấu trúc cơ bản đòi hỏi phải sử dụng thuộc tính fixed neo vào cạnh đáy của khung nhìn:

/* Ví dụ — điều chỉnh bộ chọn theo theme của bạn và kiểm thử trên theme bản sao */
.my-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  z-index: 10;
}

body {
  padding-bottom: 60px;
}

Vì position: fixed kéo thanh menu ra khỏi luồng tài liệu (MDN Web Docs), việc bổ sung khoảng đệm đáy tương ứng cho thẻ body là bắt buộc. Nếu thiếu khoảng đệm này, thanh tab bar sẽ che vĩnh viễn các liên kết chân trang thật, thông tin pháp lý và nút chat hỗ trợ của cửa hàng. Bạn cũng cần lưu ý rằng CSS chỉ lo phần kiểu dáng; bạn sẽ phải tự dựng mã HTML/Liquid để xuất liên kết, biểu tượng và tự bảo trì mỗi khi cập nhật theme.

Xử lý vùng an toàn (Safe area) trên iPhone

Các dòng điện thoại thông minh hiện đại—đặc biệt là iPhone không còn nút Home vật lý—có một thanh gạt điều hướng hệ thống nằm sát mép dưới màn hình. Nếu thanh menu đáy đặt sát mép mà không chừa khoảng trống phần cứng, các nút điều hướng sẽ bị thanh gạt che mất và gây khó khăn khi thao tác.

Theo tài liệu kỹ thuật của MDN Web Docs về CSS env(), khoảng đệm an toàn phần cứng có thể được bù đắp chuẩn xác thông qua các biến môi trường chuẩn:

/* Ví dụ — điều chỉnh bộ chọn theo theme của bạn và kiểm thử trên theme bản sao */
.my-bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

Việc sử dụng env(safe-area-inset-bottom) bảo đảm các biểu tượng trên thanh đáy luôn nằm phía trên thanh gạt hệ thống và dễ dàng chạm bấm. Để tìm hiểu sâu hơn về công thái học ngón tay cái và kiến trúc điều hướng di động, hãy xem bài phân tích về thiết kế thanh điều hướng tab bar trên Shopify.

Kết hợp đồng thời header và thanh tab bar đáy trên di động

Hình 2: Minh họa khái niệm — Cân bằng hai thanh điều hướng cố định trên di động để tránh che lấp nút mua hàng.

Việc duy trì song song cả sticky header ở trên và thanh tab bar ở đáy mang lại sự tiện lợi vượt trội, nhưng cũng đặt ra một bài toán công thái học: sự cạnh tranh về chiều cao hiển thị.

Trên màn hình máy tính thường còn nhiều chiều cao cho header. Tuy nhiên trên điện thoại, không gian hiển thị là vô cùng quý giá. Báo cáo của Nielsen Norman Group nhấn mạnh rằng yếu tố tiết kiệm diện tích màn hình càng trở nên sống còn trên các thiết bị di động do kích thước màn hình hạn chế.

Nếu cả thanh trên và thanh đáy đều có kích thước lớn và cố định liên tục, khách hàng sẽ chỉ còn lại một khe nhìn hẹp để xem sản phẩm. Để bảo đảm trải nghiệm mua sắm thông thoáng, hãy áp dụng các nguyên tắc sau:

1. Giữ header thật tinh gọn: Dùng chế độ On scroll up của Dawn (header ẩn đi khi cuộn xuống) hoặc Always, reduce logo size để giữ header ghim ở kích thước nhỏ hơn.
2. Không để thanh đáy che nút Mua hàng: Trên trang chi tiết sản phẩm, một số theme có thêm nút ‘Thêm vào giỏ hàng’ cố định ở đáy. Nếu thanh tab bar của bạn đặt tại bottom: 0, nó có thể đè kín nút mua hàng của theme. Hãy luôn kiểm tra trang sản phẩm để bảo đảm nút bấm thanh toán không bao giờ bị che khuất.
3. Bảo toàn khả năng hiển thị tiêu điểm bàn phím (WCAG 2.4.11): Tiêu chuẩn trợ năng W3C WCAG 2.4.11 (Focus Not Obscured - Minimum) quy định rằng phần tử nhận tiêu điểm bàn phím không được bị che khuất hoàn toàn bởi nội dung cố định do trang tạo ra. Sticky header và sticky footer là hai thủ phạm hàng đầu gây che tiêu điểm. Việc khai báo cả scroll-padding-top và scroll-padding-bottom (MDN Web Docs) giúp trình duyệt cuộn phần tử được chọn vào đúng vùng nhìn thấy.
4. Kích thước vùng chạm thân thiện (WCAG 2.5.8): Theo tiêu chuẩn W3C WCAG 2.5.8 (Target Size - Minimum), vùng chạm cho các thao tác trỏ trên di động phải đạt tối thiểu 24 x 24 pixel CSS. Hãy bảo đảm các biểu tượng và nhãn chữ trên thanh tab bar có đủ khoảng đệm để tránh hiện tượng bấm nhầm.

Để khám phá thêm các chiến lược điều hướng đa màn hình, bạn có thể tham khảo bài viết về điều hướng di động vượt ra ngoài menu hamburger và bài hướng dẫn toàn diện về khả năng tiếp cận trong điều hướng.

Đánh giá đánh đổi: khi nào không nên dùng menu cố định

Các thanh điều hướng cố định mang lại giá trị tương tác cao, nhưng không phải mô hình nào hay trang web nào cũng phù hợp. Như chuyên gia Page Laubheimer nhận định trong nghiên cứu của Nielsen Norman Group: “Sticky headers can be a positive addition to a site, but only if they truly serve a purpose for your users.”

Hãy cân nhắc kỹ các yếu tố đánh đổi trước khi triển khai:

• Cửa hàng một sản phẩm hoặc danh mục ít: Nếu cửa hàng của bạn chỉ kinh doanh vài mặt hàng với các trang đích dạng kể chuyện ngắn, khách mua hàng không có nhu cầu liên tục chuyển đổi danh mục. Một thanh cố định lúc này chỉ làm chật chội màn hình mà không gia tăng giá trị.
• Giao diện đã có quá nhiều thành phần cố định: Nếu theme của bạn đã tích hợp sẵn thanh Thêm vào giỏ hàng dính ở đáy, thanh thông báo khuyến mãi hoặc biểu tượng chat hỗ trợ trôi nổi, việc ghim thêm một thanh điều hướng đáy sẽ tạo ra sự lộn xộn thị giác nghiêm trọng.
• Gánh nặng bảo trì khi cập nhật theme: Mỗi dòng mã CSS tùy biến bạn đưa vào là một phần mã bạn phải tự chịu trách nhiệm bảo trì. Đúng như tài liệu của Shopify về Custom CSS đã lưu ý, các phiên bản cập nhật theme trong tương lai có thể thay đổi tên class hoặc tái cấu trúc thẻ Liquid, đòi hỏi bạn phải kiểm tra và căn chỉnh lại thủ công.

Để xác định mô hình điều hướng nào tương thích nhất với quy mô catalog của mình, hãy đọc bài viết về cách chọn loại menu phù hợp cho cửa hàng.

Vai trò của Navi+: giải pháp thanh tab bar đáy không cần code

Cần khẳng định rõ ràng rằng: Navi+ không tạo ra hay can thiệp vào sticky header. Trình tùy biến có sẵn của theme (Cách 1) hoặc Custom CSS (Cách 2) vẫn là giải pháp chuẩn xác và tối ưu nhất để quản lý phần đầu trang.

Vị trí của Navi+ là lấp đầy nửa còn lại của bức tranh—chính là menu chân trang cố định mà hầu hết các theme Shopify để trống. Thay vì phải tự viết mã section Liquid phức tạp, tạo khung định vị fixed và tự tính toán safe-area trong CSS, Navi+ cung cấp Tab Bar: một thanh menu cố định ở đáy màn hình, bạn dựng từ các mẫu ngay trong app.

Tab Bar làm được những gì:

• Hiện diện thường trực trên mọi trang: Navi+ Tab Bar luôn hiển thị trên toàn bộ các trang của cửa hàng (Tài liệu Navi+), và cấu trúc menu hỗ trợ tối đa 3 cấp.
• Kích hoạt hoàn toàn không cần đụng mã: Tab Bar được tích hợp chuẩn xác qua tính năng App embeds của Shopify. Theo hướng dẫn xuất bản của Navi+, bạn chỉ cần dựng menu từ mẫu trong app, mở Online Store > Themes > Customize > App embeds, bật mục Store Connector và nhấn Save.
• Quy tắc hiển thị: Menu có thể đặt hiện hoặc ẩn theo thiết bị (di động hoặc máy tính), theo loại trang (như trang chủ, sản phẩm hoặc bộ sưu tập) hoặc theo từ khóa URL (Tài liệu Navi+). Ví dụ, bạn có thể chỉ hiện Tab Bar trên di động.

Cũng như mọi thay đổi về giao diện, hãy luôn áp dụng quy trình an toàn bằng cách kiểm thử trên theme bản sao trước khi xuất bản cho khách xem (Hướng dẫn nhân bản theme của Shopify).

If you’d rather not maintain custom CSS for the bottom bar, Navi+ Tab Bar gives you a sticky bottom menu you can set up from templates and limit to mobile — try it on a duplicate theme first. Để xem các bước kích hoạt chính thức, hãy tham khảo tài liệu xuất bản Tab Bar trên Shopify.

Checklist hành động

• Nhân bản theme dự phòng: Tạo bản sao lưu trong Online Store > Themes trước khi đổi cài đặt hoặc chèn thêm mã CSS.
• Chọn chế độ sticky header: Chọn tùy chọn phù hợp trong cài đặt theme (như ‘On scroll up’ hoặc ‘Always’).
• Kiểm tra độ mượt khi cuộn: Cuộn lên và cuộn xuống trên các trang bộ sưu tập và trang sản phẩm để bảo đảm header chuyển động mượt mà.
• Kiểm tra độ bù trừ liên kết neo: Thử nghiệm các liên kết nhảy trong trang (#reviews, #details) để chắc chắn tiêu đề không bị lẹm vào sau header; bổ sung scroll-padding-top nếu cần.
• Kiểm tra thứ tự hiển thị lớp phủ: Mở thử menu thả xuống, bảng mega menu và ngăn kéo giỏ hàng để bảo đảm chúng hiển thị nổi bật phía trên header.
• Thiết lập thanh điều hướng đáy: Thêm thanh tab bar di động bằng CSS tùy chỉnh hoặc ứng dụng menu, bảo đảm đã cấu hình env(safe-area-inset-bottom) và khoảng đệm đáy cho body.
• Rà soát trang sản phẩm: Kiểm tra giao diện sản phẩm trên mobile để chắc chắn thanh đáy không đè lên nút Thêm vào giỏ hàng hoặc nút thanh toán nhanh.
• Kiểm thử khả năng tiếp cận và thiết bị thật: Dùng phím Tab để rà soát tiêu điểm bàn phím không bị che lấp, đồng thời mở trang trên điện thoại iPhone và Android thật.

FAQ

Làm thế nào để tạo menu đầu trang và chân trang cố định trong Shopify?

Với header, hãy chọn cài đặt Sticky header có sẵn trong theme, ví dụ như tùy chọn ‘On scroll up’ hoặc ‘Always’ của Dawn. Vì đa số theme không có sẵn menu chân trang cố định, hãy bổ sung thanh tab bar ở đáy bằng Custom CSS dùng position: fixed hoặc cài đặt ứng dụng menu chuyên dụng.

Tại sao nội dung trên trang của tôi bị che khuất đằng sau sticky header?

Hiện tượng này thường xảy ra khi header sử dụng thuộc tính position: fixed, khiến phần tử bị rút khỏi luồng tài liệu tự nhiên mà không chừa khoảng trống cho nội dung phía dưới. Việc chuyển sang position: sticky hoặc thêm scroll-padding-top vào thẻ HTML sẽ giải quyết triệt để vấn đề.

Tại sao sticky header của tôi đột nhiên ngừng hoạt động?

Sticky header sẽ không thể bám dính nếu có bất kỳ phần tử cha nào trong bố cục chứa thuộc tính overflow: hidden, overflow: scroll hoặc overflow: auto. Trong CSS, phần tử sticky sẽ bị giữ chặt vào tổ tiên có cơ chế cuộn gần nhất thay vì khung nhìn trình duyệt.

Tôi có thể giữ header cố định trên máy tính nhưng tắt trên điện thoại được không?

Hoàn toàn được. Nếu bạn dùng Custom CSS, hãy bọc quy tắc trong truy vấn @media dành riêng cho desktop như truy vấn min-width khớp với điểm ngắt của theme. Nếu dùng ứng dụng như Navi+ cho thanh tab bar, hãy đặt quy tắc hiển thị theo thiết bị để chỉ hiện trên màn hình di động.

Thanh điều hướng đáy có bị che mất thanh gạt Home của iPhone không?

Một thanh cố định ở đáy có thể che lấp hoặc xung đột với thao tác vuốt của iPhone nếu thiếu khoảng đệm an toàn. Việc bổ sung biến env(safe-area-inset-bottom) vào padding đáy của thanh menu sẽ bảo đảm các biểu tượng luôn nằm an toàn phía trên thanh gạt hệ thống.

Sticky header có gây ảnh hưởng tiêu cực tới trải nghiệm người dùng không?

Nghiên cứu của Nielsen Norman Group chỉ ra rằng sticky header mang lại lợi ích rõ rệt khi phục vụ đúng nhu cầu thiết thực của khách hàng như giữ giỏ hàng hoặc danh mục luôn sẵn sàng. Tuy nhiên trên điện thoại, header phải được thiết kế thật tinh gọn hoặc ẩn đi khi cuộn xuống để không chiếm dụng diện tích xem hàng.

Nguồn tham khảo

1. Lược đồ ngôn ngữ mặc định của theme Dawn (Shopify): locales/en.default.schema.json
2. Mã nguồn section Header theme Dawn (Shopify): sections/header.liquid
3. MDN Web Docs — Thuộc tính CSS position: developer.mozilla.org/en-US/docs/Web/CSS/position
4. MDN Web Docs — Thuộc tính CSS scroll-padding-top: developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
5. MDN Web Docs — Hàm CSS env(): developer.mozilla.org/en-US/docs/Web/CSS/env
6. Tổ chức W3C — Tiêu chuẩn WCAG 2.4.11 Focus Not Obscured (Minimum): w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html
7. Tổ chức W3C — Tiêu chuẩn WCAG 2.5.8 Target Size (Minimum): w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
8. Nielsen Norman Group — Nghiên cứu về Sticky Headers (Page Laubheimer): nngroup.com/articles/sticky-headers/
9. Google web.dev — Tối ưu chỉ số Cumulative Layout Shift (CLS): web.dev/articles/cls
10. Trung tâm trợ giúp Shopify — Hướng dẫn thêm Custom CSS vào theme: help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
11. Trung tâm trợ giúp Shopify — Hướng dẫn tạo bản sao theme (Duplicating themes): help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes
12. Cộng đồng Shopify — Thảo luận về Sticky/Fixed Header Menu: community.shopify.com/t/sticky-fixed-header-menu/308093
13. Cộng đồng Shopify — Hướng dẫn Sticky/Fixed Header cho Debut: community.shopify.com/t/sticky-fixed-header-and-navigation-for-debut-theme/3640
14. Trung tâm trợ giúp Navi+ — Hướng dẫn xuất bản Tab Bar trên Shopify: help.naviplus.io/docs/usage/tabbar-bottom-navigation/publishing-on-shopify/
15. Trung tâm trợ giúp Navi+ — Thiết lập hiển thị và nhắm mục tiêu Tab Bar: help.naviplus.io/docs/usage/tabbar-bottom-navigation/how-to-use/