Câu trả lời ngắn gọn: có thể, bằng liên kết neo (anchor link)
Có thể. Bạn chỉ cần gán một ID cho section trên trang chủ (ví dụ reviews), sau đó đặt liên kết của tab thành /#reviews. Trình duyệt sẽ tự động cuộn tới phần tử có ID khớp với phần đứng sau #. Bạn nên dùng ID tự đặt, bởi vì ID do Shopify tự sinh cho các section trong template JSON có thể thay đổi.
Liên kết neo HTML cho phép tab đáy nhảy thẳng tới bất kỳ phần tử nào trên trang chủ. Khi chạm, trình duyệt tìm ID tương ứng trong DOM và cuộn nó vào tầm nhìn. Theo chuẩn web, thuộc tính ID phải là duy nhất trên toàn bộ trang. Do Shopify tự động sinh ID cho section trong template JSON, việc phụ thuộc vào mã tự sinh rất dễ gây hỏng liên kết khi thay đổi giao diện. Tự đặt một ID ổn định giúp đảm bảo độ tin cậy lâu dài.
Thanh tab mobile là một menu cố định luôn hiển thị ở đáy màn hình điện thoại. Việc xây dựng một kiến trúc thanh tab bar di động hiệu quả đòi hỏi các tab phải kết nối khách hàng trực tiếp tới các điểm đến quan trọng—cho dù là duyệt bộ sưu tập sản phẩm hay nhảy thẳng tới phần đánh giá ngay trên trang chủ.
Cách liên kết neo hoạt động trên trang chủ Shopify
Ý nghĩa thực sự của cú pháp /#reviews
Đường dẫn như /#reviews cung cấp ba chỉ thị: dấu gạch chéo / trỏ về trang chủ, # phân tách fragment, và reviews là ID HTML đích. Trình duyệt cuộn các vùng chứa để phần tử hiển thị rõ, tương tự cơ chế scrollIntoView(). Nếu chỉ nhập #reviews, liên kết chạy ở trang chủ nhưng thất bại trên trang sản phẩm. Dấu gạch chéo đảm bảo trình duyệt luôn về trang chủ trước.
Phân biệt ID section tự sinh và ID do bạn tự đặt
Mỗi section trên Shopify đều nằm trong một thẻ div có class="shopify-section" và id bắt đầu bằng shopify-section-. Với section tĩnh trong Liquid, ID chính là tên file bỏ đuôi .liquid. Với section trong template JSON, ID do Shopify tự động sinh (xem Liquid Objects: Section), dạng như shopify-section-template--123456__reviews. Sao chép mã này chỉ phù hợp để thử nhanh vì khi tạo lại section, ID có thể đổi và làm đứt link. Tự đặt ID riêng giúp liên kết không phụ thuộc vào bộ sinh ID của Shopify.
| Thuộc tính phân loại | ID Section do Shopify tự sinh | ID Tùy chỉnh do bạn kiểm soát |
|---|---|---|
| Ví dụ định dạng | shopify-section-template--123456__reviews |
reviews |
| Độ ổn định | Dễ đứt gãy (có thể đổi khi tạo lại section) | Ổn định (do bạn kiểm soát, miễn là khối đó còn) |
| Ai kiểm soát | Công cụ render giao diện của Shopify | Chủ cửa hàng hoặc lập trình viên |
| Khi nào nên dùng | Thử nghiệm tạm thời hoặc kiểm tra nhanh | Triển khai thực tế trên menu và tab bar mobile |
Bước 1: Gán cho section một ID ổn định
Để thiết lập một liên kết nhảy trang, trình duyệt di động cần một ID phần tử cụ thể làm đích đến. Bạn có hai cách tiếp cận: kiểm tra mã giao diện hiện tại để thử nghiệm tạm thời, hoặc chèn một khối neo riêng biệt để đảm bảo độ tin cậy khi vận hành thực tế.
Để thử nghiệm nhanh, bạn hãy kiểm tra cấu trúc DOM trên trình duyệt máy tính. Mỗi section đều nằm trong một thẻ div có class="shopify-section" và ID dạng shopify-section-template--123456__reviews (xem Section Rendering API). Dù sao chép chuỗi này giúp thử nghiệm ngay, nhưng chuỗi này có thể đổi và làm đứt link.
Phương pháp bền vững là tự tạo một ID do bạn kiểm soát. Nếu theme của bạn có khối hoặc section Custom Liquid hay Custom HTML, hãy đặt nó ngay phía trên section đích trong trình sửa giao diện và chèn một thẻ neo HTML gọn nhẹ:
<div id="reviews"></div>
Hãy đặt tên ID bằng chữ thường và dấu gạch nối. Tài liệu kỹ thuật MDN Web Docs id attribute quy định ID phải là duy nhất trên toàn bộ trang. Dùng trùng ID khiến việc cuộn không còn đáng tin cậy. Luôn nhân bản theme trước khi sửa code để đảm bảo an toàn.
Hình 1: Minh họa khái niệm — ID section tự sinh so với ID ổn định tự đặt thông qua khối Custom Liquid.
Bước 2: Gắn liên kết neo vào tab
Thanh tab tích hợp sẵn trong theme (khối liên kết tùy chỉnh)
Một số theme có sẵn thanh tab mobile ở đáy màn hình. Ví dụ, tài liệu theme Zest mô tả khối liên kết tùy chỉnh là “chuyển hướng khách hàng đến một trang liên kết đính kèm theo ý muốn”. Tài liệu này không đề cập liên kết neo, nên hãy thử rồi kiểm tra: trong trình sửa theme, mở thanh tab mobile và nhập /#reviews.
Thanh tab điều hướng từ ứng dụng chuyên dụng
Nếu bạn xây dựng thanh tab bằng một ứng dụng, hãy kiểm tra tài liệu của ứng dụng đó xem ô liên kết có nhận dấu thăng neo hay không. Một số ứng dụng có cú pháp riêng để cuộn tới một phần tử (ví dụ scroll:OnPage của Navi+, được đề cập ở phần sau).
Hãy luôn định dạng liên kết là /#reviews thay vì #reviews nếu thanh tab hiển thị toàn trang. Trên trang sản phẩm, bấm #reviews sẽ tìm trên trang đó, không thấy và không phản hồi. Dấu gạch chéo / ở đầu yêu cầu trình duyệt về trang chủ trước khi cuộn tới vị trí neo.
Để tìm hiểu thêm về kiến trúc điều hướng di động trên các theme Shopify hiện đại, bạn có thể tham khảo bài đánh giá theme Horizon của chúng tôi.
Bước 3: Kiểm tra trên điện thoại (cuộn mượt và khoảng cách bù header cố định)
Thử nghiệm điều hướng trên trình giả lập máy tính không thể phản ánh trọn vẹn trải nghiệm chạm thực tế. Bạn hãy kiểm tra tab neo trực tiếp trên điện thoại thật: nhấn tab khi đang ở trang chủ, và nhấn tab từ trang sản phẩm.
Mặc định, trình duyệt nhảy ngay lập tức tới vị trí neo. Để tạo hiệu ứng cuộn mượt, thêm thuộc tính CSS scroll-behavior: smooth; vào file CSS gốc. Theo chuẩn MDN Web Docs CSS scroll-behavior, thuộc tính này điều khiển khung nhìn khi điều hướng:
html {
scroll-behavior: smooth;
}
Kế tiếp, hãy xử lý lỗi bị header cố định che khuất. Do trình duyệt căn mép trên phần tử trùng với mép màn hình, header cố định sẽ đè lên tiêu đề section. Theo MDN Web Docs Element: scrollIntoView(), chỉnh lề cuộn là giải pháp chuẩn xác khi có header cố định. Thêm scroll-margin-top cho section đích:
#reviews {
scroll-margin-top: 80px; /* Adjust according to your sticky header height */
}
Lưu ý: Giá trị 80px chỉ là ví dụ—hãy đo chiều cao thực tế của header trên điện thoại và chỉnh số pixel cho khớp với theme. Bạn cũng cần kiểm tra xem thanh tab ở đáy có che mất các nút ở cuối section không.
Hình 2: Minh họa khái niệm — Tiêu đề section bị header cố định che khuất so với tiêu đề hiển thị trọn vẹn nhờ scroll-margin-top.
Khi liên kết neo không hoạt động
Nếu bạn chạm vào tab trên điện thoại mà màn hình không cuộn hoặc cuộn sai vị trí, hãy rà soát năm nguyên nhân phổ biến sau:
-
Section được tạo lại làm đổi ID: Nếu dùng ID tự sinh (
shopify-section-...), việc sắp xếp lại section sẽ sinh mã mới. Hãy chuyển sang dùng ID tự đặt bằng khối Custom Liquid. -
Trùng lặp ID trên trang: Nếu nhiều khối có cùng một ID, trình duyệt chỉ cuộn tới phần tử đầu tiên, vi phạm quy định tính duy nhất của HTML. Đảm bảo ID là duy nhất trong toàn trang.
-
Tiện ích từ app bên thứ ba: Các section do ứng dụng đánh giá tải lên có thể không cho phép sửa ID. Hãy chèn một khối
<div id="reviews"></div>rỗng ngay phía trên khối của app. -
Lệch vị trí do tải chậm: Các section nặng có hình ảnh tải chậm có thể làm dịch chuyển chiều cao khi tải trang. Hãy thử nhấn tab lần thứ hai để xem vị trí có được căn chỉnh chuẩn không.
-
Menu ngăn kéo đang mở: Nếu menu ngăn kéo di động vẫn mở khi nhấn tab, nó sẽ che khuất màn hình. Đảm bảo kịch bản tự động đóng ngăn kéo khi tab được kích hoạt.
| Định dạng liên kết | Nhấn khi đang ở Trang chủ | Nhấn khi đang ở Trang khác (ví dụ: Trang sản phẩm) |
|---|---|---|
#reviews |
Cuộn tới section đánh giá | Không phản hồi (ID không tồn tại trên trang) |
/#reviews |
Cuộn tới section đánh giá | Tải lại trang chủ, sau đó định vị khung nhìn tại section |
Liên kết neo so với trang hoặc bộ sưu tập riêng biệt
Dù việc gán tab ở đáy màn hình nhảy tới section trang chủ tạo ra lối tắt rất nhanh, nhưng không phải nội dung nào cũng phù hợp. Việc chọn giữa liên kết nhảy trên trang và một trang riêng đòi hỏi bạn phải cân nhắc giữa khả năng lập chỉ mục SEO và tính công thái học di động.
Liên kết neo phát huy hiệu quả tốt nhất khi nội dung vốn thuộc về trang chủ—như đánh giá của khách hàng, lookbook thương hiệu hoặc khối FAQ ngắn gọn. Khách hàng xem được các tín hiệu uy tín ngay lập tức mà không phải tải lại trang hay mất dấu vị trí duyệt hàng.
Tuy nhiên, nếu mục tiêu là khả năng hiển thị tìm kiếm tự nhiên, liên kết neo còn hạn chế. Google Search thường không hỗ trợ URL fragment để phục vụ nội dung trang riêng biệt (theo Google Search Central URL Structure). Đừng kỳ vọng /#reviews xuất hiện trên kết quả tìm kiếm như một trang riêng. Nếu muốn một kho đánh giá đầy đủ hay danh mục sản phẩm được xếp hạng riêng, hãy tạo các trang riêng biệt (như /pages/reviews hoặc /collections/all).
Thanh tab di động vốn được thiết kế để chuyển đổi các màn hình chính. Nhồi nhét quá nhiều tab neo vào thanh đáy sẽ gây rối mắt cho khách hàng. Bạn chỉ nên giới hạn một hoặc hai tab neo cho các mục tiêu thực sự quan trọng. Để hiểu thêm về kiến trúc tổng thể, hãy xem bài viết về điều hướng vượt ra ngoài hamburger menu của chúng tôi.
| Khung chiến lược | Phù hợp nhất cho | Ưu điểm cốt lõi | Hạn chế cần cân nhắc |
|---|---|---|---|
Liên kết nhảy neo (/#reviews) |
Đánh giá trang chủ, lookbook, FAQ ngắn | Cuộn tức thì không cần tải lại; giữ nguyên vị trí trong luồng mua | Google Search không lập chỉ mục fragment; quá nhiều tab gây rối giao diện |
Trang hoặc Bộ sưu tập riêng (/pages/reviews) |
Thư viện đánh giá chi tiết, bảng kích cỡ, danh mục sản phẩm | Được Google lập chỉ mục riêng biệt và tiềm năng nhận rich snippet | Bắt buộc tải lại trang; đưa khách hàng rời khỏi phễu trang chủ |
Giải pháp Navi+ mang lại giá trị gì
Nếu bạn xây dựng thanh điều hướng bằng Navi+ Tab Bar—thanh điều hướng đáy chuyên dụng cho Shopify—tính năng cuộn tới section được hỗ trợ sẵn có.
Trong bảng điều khiển của Navi+, mỗi mục tab có một ô Link To. Ở các gói Business và Elite, ô này nhận cú pháp scroll:OnPage(#reviews), giúp cuộn mượt mà trực tiếp tới bất kỳ phần tử nào khớp với bộ chọn CSS đó.
Ứng dụng Navi+ có các quy ước liên kết rất rõ ràng: để trống ô Link To sẽ trỏ về trang chủ. Các liên kết nội bộ chuẩn sẽ dùng đường dẫn ngắn không kèm tên miền, ví dụ /collections/all. Ký tự # đơn lẻ được dành riêng cho mục cha mở menu con mà không điều hướng—đừng nhầm lẫn dấu # mở menu này với cú pháp điều hướng neo như scroll:OnPage(#reviews).
Ngay cả khi dùng cú pháp của app, các nguyên tắc cơ bản vẫn bắt buộc: section cần có ID ổn định (Bước 1), và bạn phải bù khoảng cách header cố định bằng scroll-margin-top trên điện thoại (Bước 3). Vì scroll:OnPage cuộn tới phần tử trên trang hiện tại, hãy thử tab ở trang chủ lẫn các trang khác trước khi dùng chính thức.
Nếu bạn đang sử dụng Navi+ Tab Bar, hãy nhập scroll:OnPage(#reviews) vào ô Link To của tab và kiểm tra ngay trên điện thoại của mình — danh sách đầy đủ các kiểu liên kết hiện có tại trung tâm trợ giúp của Navi+. Bạn có thể xem tài liệu về các kiểu liên kết của Navi+ để biết thêm chi tiết.
Danh sách hành động cần làm
- Chọn section trang chủ cụ thể mà bạn muốn khách hàng nhảy tới.
- Thêm một khối Custom Liquid rỗng (
<div id="reviews"></div>) phía trên để tạo ID ổn định. - Gắn link tab thành
/#your-id(hoặc cú pháp riêng nhưscroll:OnPage(#your-id)). - Khai báo
html { scroll-behavior: smooth; }trong CSS để tạo hiệu ứng cuộn mượt. - Thêm
scroll-margin-toptrong CSS để ngăn header cố định che khuất tiêu đề. - Kiểm tra trên điện thoại thật ở cả hai trường hợp: từ trang chủ và từ trang sản phẩm.
- Ghi chép ID vào tài liệu nội bộ để các lần sửa theme sau không xóa nhầm khối.
Câu hỏi thường gặp
Làm thế nào để tìm ID của một section trên Shopify?
Mỗi section đều nằm trong một thẻ div bao ngoài có ID dạng shopify-section-.... Bạn có thể xem bằng cách nhấp chuột phải vào section trên trình duyệt và chọn Kiểm tra.
Tại sao liên kết neo của tôi đột nhiên ngừng hoạt động?
Shopify tự động sinh ID cho section trong template JSON. Nếu section được tạo lại, ID đó sẽ đổi. Tự đặt ID riêng qua khối Custom Liquid giúp đảm bảo ổn định lâu dài.
Tại sao tiêu đề của section lại bị che khuất dưới thanh header sau khi cuộn?
Trình duyệt căn mép trên phần tử trùng với mép màn hình, nên header cố định đè lên tiêu đề. Thêm scroll-margin-top trong CSS sẽ bù khoảng trống hiển thị.
Tôi có thể dùng một ID trùng lặp hai lần trên cùng một trang được không?
Không được. Quy chuẩn HTML bắt buộc thuộc tính id phải là duy nhất trên toàn bộ trang. Trùng lặp ID khiến trình duyệt điều hướng sai lệch.
Liệu Google có lập chỉ mục cho đường dẫn /#reviews như một trang riêng biệt không?
Không nên kỳ vọng điều đó. Google Search thường không hỗ trợ URL fragment để lập chỉ mục nội dung riêng. Nếu cần SEO, hãy tạo trang hoặc bộ sưu tập riêng.
Ứng dụng Navi+ có hỗ trợ liên kết một tab tới một section cụ thể không?
Có hỗ trợ. Với Navi+ Tab Bar, nhập cú pháp scroll:OnPage(#section-id) vào ô Link To để cuộn mượt tới bộ chọn CSS, áp dụng trên gói Business và Elite.
Nguồn tham khảo
- Shopify Developer Documentation: Liquid Objects: Section
- Shopify Developer Documentation: Section Rendering API
- MDN Web Docs: HTML id attribute
- MDN Web Docs: Element: scrollIntoView() method
- MDN Web Docs: CSS scroll-behavior
- Google Search Central: URL Structure Guidelines
- FoxEcom Zest Theme Documentation: Mobile Navigation Bar
- Navi+ Help Center: Menu Item Link Types
Khám phá các chủ đề
Bài này dẫn tới các bài chuyên sâu hơn — đào sâu từng phần.