Cách tìm CSS selector của một section trên trang chủ làm đích cuộn cho tab bar (Shopify)

Câu trả lời nhanh

Mở trang chủ storefront đang hoạt động, nhấp chuột phải vào section cần cuộn và chọn Inspect. Tìm thẻ bao ngoài có id bắt đầu bằng shopify-section-, thêm dấu # vào phía trước, sau đó chạy lệnh $$('#id-do').length trong Console. Nếu kết quả trả về 1, selector đó là một đích cuộn hợp lệ.

Khi cấu hình thanh tab đáy hoặc menu điều hướng di động, chủ cửa hàng thường bắt gặp các trường liên kết yêu cầu nhập “CSS selector”. Do trình duyệt thực hiện thao tác cuộn bằng cách tìm kiếm các nút phần tử tương ứng trong cây DOM của giao diện, việc nhập sai hoặc dùng selector bị trùng lặp sẽ khiến tab cuộn sai chỗ hoặc không phản hồi. Kiểm tra kỹ selector bằng công cụ nhà phát triển trước khi lưu giúp hệ thống điều hướng luôn vận hành chính xác.

Selector, section ID và anchor: ô link tab thực sự cần gì

Trước khi sao chép mã vào phần cài đặt điều hướng, bạn cần phân biệt rõ ba khái niệm có mối liên hệ mật thiết: CSS selector, section ID và liên kết neo (anchor link). Mỗi ứng dụng và theme sử dụng các thuật ngữ này với mục đích khác nhau, và việc nhập sai định dạng sẽ làm thao tác cuộn trang bị lỗi.

CSS selector là biểu thức mẫu được CSS và mã lệnh JavaScript sử dụng để nhận diện một hoặc nhiều phần tử HTML. Các ví dụ thường gặp bao gồm #reviews (nhắm tới phần tử có thuộc tính ID chính xác là reviews) hoặc .featured-collection (nhắm tới bất kỳ phần tử nào mang class đó). Theo quy chuẩn thuộc tính id của MDN Web Docs, một id bắt buộc phải là duy nhất trên toàn bộ tài liệu HTML. Tài liệu hướng dẫn từ Section Store cũng khẳng định nguyên tắc này: một ID chỉ thuộc về một phần tử duy nhất, do đó luôn trỏ đúng đích đến mong muốn.

Ngược lại, liên kết neo (anchor link) là một URL hoàn chỉnh hoặc tương đối chứa phần định danh phân đoạn (fragment), ví dụ /#reviews. Trình duyệt web đọc dấu thăng # trên thanh địa chỉ và tự động cuộn màn hình tới phần tử có ID tương ứng. Nếu ứng dụng điều hướng cung cấp ô nhập liệu chuyên biệt cho “CSS selector”, trường này yêu cầu một biểu thức selector (như #reviews) chứ không nhận toàn bộ đường dẫn URL. Đối với cửa hàng cần thiết lập liên kết URL fragment thông thường, bạn có thể tham khảo bài viết hướng dẫn chuyên sâu về liên kết neo cho tab mobile.

Kết nối người mua sắm di động trực tiếp tới các vùng nội dung trọng tâm trên trang chủ là một phần không thể thiếu trong kiến trúc thanh tab bar di động. Bảng so sánh dưới đây phân định rõ các định dạng trong thực tế:

Bước 1: Kiểm tra section trên trang chủ thực tế

Để tìm được selector phù hợp, bạn cần xem storefront từ góc nhìn của khách hàng thay vì mở trình tùy biến giao diện (Shopify Theme Editor). Trang đang chạy thật là thứ khách hàng tải về, nên đó là nơi an toàn nhất để đọc mã HTML thực tế.

Mở một tab trình duyệt mới, truy cập trang chủ cửa hàng thực tế và cuộn tới section bạn muốn liên kết (ví dụ: khối đánh giá, câu hỏi thường gặp hoặc danh sách sản phẩm nổi bật). Nhấp chuột phải trực tiếp vào tiêu đề hoặc nền của section đó và chọn Inspect (Kiểm tra).

Bạn cũng có thể mở công cụ nhà phát triển bằng phím tắt:

• macOS: Nhấn tổ hợp Cmd + Option + C (Chrome DevTools Open)
• Windows: Nhấn tổ hợp Ctrl + Shift + C (Chrome DevTools Open)

Phím tắt mở chế độ kiểm tra phần tử:
macOS:   Cmd + Option + C
Windows: Ctrl + Shift + C

Đọc thẻ bao ngoài shopify-section

Khi bảng Elements xuất hiện, trình kiểm tra sẽ làm nổi bật dòng văn bản hoặc thẻ ảnh cụ thể mà bạn vừa nhấp chuột. Để làm đích cuộn chuẩn xác, bạn cần nhìn lên phía trên trong cây DOM để tìm thẻ bao quanh toàn bộ section.

1. Trong bảng Elements, di chuyển con trỏ chuột ngược lên các thẻ cha phía trên.
2. Tìm thẻ bao ngoài cùng—thông thường là một thẻ <div>—bọc trọn toàn bộ section.
3. Xác định thuộc tính id của thẻ này. Trên giao diện Shopify, ID của thẻ bao ngoài thường bắt đầu bằng tiền tố shopify-section-.

Theo tài liệu chính thức về đối tượng Section của Shopify, ID cho các section được đưa vào thông qua template JSON do Shopify sinh ra một cách động. Một ID có thể trông như shopify-section-template--18492048593__featured_collection, nhưng ID của bạn sẽ khác, vì vậy hãy sao chép từ chính trang của bạn.

<!-- Ví dụ về thẻ bao ngoài section trên Shopify -->
<div id="shopify-section-template--18492048593__reviews" class="shopify-section">
  <!-- Nội dung section hiển thị tại đây -->
</div>

Chuyển đổi dòng mã thành selector (# cho id, . cho class)

Sau khi định vị được dòng thẻ bao ngoài, hãy chuyển đổi giá trị thuộc tính HTML thành cú pháp CSS hợp lệ:

• Nếu sử dụng giá trị id, hãy thêm dấu # ở phía trước: #shopify-section-template--18492048593__reviews
• Nếu sử dụng giá trị class, hãy thêm dấu chấm . ở phía trước: .featured-reviews-grid
• Nếu phần tử có nhiều class cách nhau bởi khoảng trắng, hãy nối chúng bằng các dấu chấm: div.shopify-section.reviews-container

Chrome DevTools cũng hỗ trợ sao chép nhanh đường dẫn truy vấn. Nhấp chuột phải vào nút thẻ bao ngoài đang được làm nổi bật trong cây Elements, chọn Copy, sau đó nhấp vào Copy JS Path (Chrome DevTools DOM). Trình duyệt sẽ lưu một biểu thức vào bộ nhớ tạm:

document.querySelector("#shopify-section-template--18492048593__reviews")

Hãy trích xuất chuỗi ký tự nằm giữa hai dấu ngoặc kép. Chuỗi này chính là selector ứng viên của bạn. Tuy nhiên, trước khi dán vào thanh tab, bạn bắt buộc phải kiểm tra tính duy nhất của nó.

Bước 2: Kiểm tra selector khớp đúng một phần tử duy nhất

Một sai lầm phổ biến của nhiều chủ cửa hàng là mặc định rằng mọi selector sao chép từ DevTools đều hoạt động ổn thỏa. Thực tế, nếu selector đó khớp với nhiều section khác nhau hoặc trả về 0 kết quả trên màn hình di động, thanh tab sẽ hoạt động sai lệch.

Tài liệu từ UpCharge khuyên người dùng nên chủ động tìm các class hoặc ID duy nhất khi thiết lập mục tiêu trên trang. Việc kiểm tra tính duy nhất bằng công cụ DevTools có sẵn rất nhanh gọn.

Tìm kiếm trực tiếp trong bảng Elements (Ctrl/Cmd+F)

Cách kiểm tra ban đầu nhanh nhất là tìm kiếm ngay trên cây DOM. Theo tài liệu Chrome DevTools DOM, bạn hoàn toàn có thể tìm kiếm cây DOM theo chuỗi văn bản, CSS selector hoặc biểu thức XPath.

1. Nhấp chuột vào bên trong bảng Elements.
2. Nhấn Ctrl + F (Windows) hoặc Cmd + F (macOS) để làm xuất hiện thanh tìm kiếm ở đáy bảng.
3. Dán selector ứng viên của bạn vào ô, bao gồm cả dấu # ở đầu (ví dụ: #shopify-section-template--18492048593__reviews).
4. Quan sát bộ đếm kết quả ở phía bên phải thanh tìm kiếm (ví dụ: 1 of 1).

Kiểm tra tìm kiếm trên bảng Elements:
Biểu thức: #shopify-section-template--18492048593__reviews
Kết quả mục tiêu: 1 of 1

Nếu bộ đếm hiển thị 1 of 1, selector của bạn đang trỏ tới đúng một phần tử duy nhất trong cấu trúc trang.

Đếm số lượng kết quả khớp trong Console

Để có kết quả kiểm tra chuẩn xác nhất theo góc độ mã xử lý, hãy chuyển sang tab Console trong DevTools.

Theo tài liệu Console Utilities API của Chrome, hàm tiện ích $$(selector) trả về một mảng chứa mọi phần tử khớp với selector CSS đã cho. Bạn cũng có thể dùng cú pháp JavaScript chuẩn document.querySelectorAll(selector) (MDN querySelectorAll).

Nhập một trong hai lệnh sau vào dấu nhắc Console và nhấn Enter:

$$('#shopify-section-template--18492048593__reviews').length

document.querySelectorAll('#shopify-section-template--18492048593__reviews').length

Đọc giá trị số nguyên được Console hiển thị:

Hãy luôn lặp lại phép kiểm tra Console này ở chế độ giả lập màn hình di động. Nhấp vào biểu tượng Toggle device toolbar trên DevTools. Một số theme Shopify tải các section desktop và mobile tách biệt nhau, có thể làm selector biến mất hoặc nhân đôi trên màn hình điện thoại.

Minh họa khái niệm (Concept illustration): Kiểm tra số lượng kết quả khớp trong Console để đảm bảo selector trả về đúng một phần tử duy nhất trước khi đưa vào cấu hình tab bar.

Bước 3: Chọn selector bền vững qua các lần cập nhật theme

Mặc dù việc sử dụng ID bao ngoài tự sinh bắt đầu bằng shopify-section- giúp bạn thử nghiệm nhanh, việc dựa vào chuỗi mã này lâu dài tiềm ẩn nhiều rủi ro vận hành.

Trong kiến trúc giao diện Online Store của Shopify, các ID của section đưa vào qua JSON template đều do Shopify tạo ra một cách động (Shopify Section Object). Nhà phát triển theme Fluorescent đã đưa ra lưu ý trực tiếp về vấn đề này: “Shopify dynamically generates ids for sections but these ids are not stable.” (Shopify tự động tạo ID cho các section nhưng những ID này không ổn định). Vì các ID này không ổn định, liên kết tab dựa trên chúng có thể ngừng hoạt động sau khi chỉnh bố cục, nên hãy kiểm tra lại sau mỗi thay đổi.

Bạn cũng cần tránh dùng các chuỗi selector nhiều tầng phức tạp như div:nth-child(4) > div.grid > div:first-child. Chỉ cần một thay đổi nhỏ về bố cục, chuỗi selector này có thể mất tác dụng.

Phương pháp bền vững: thêm khối ID bằng Custom Liquid

Để tạo một selector cố định không bao giờ bị đổi khi chỉnh sửa theme, hãy tự gán một ID độc lập ngay trong trình tùy biến giao diện:

1. Trong trang quản trị Shopify Admin, truy cập vào Online Store > Themes.
2. Nhân bản giao diện hiện tại để tạo bản sao lưu an toàn trước khi chỉnh sửa.
3. Nhấp vào Customize trên giao diện bạn đang làm việc.
4. Tại sơ đồ trang chủ, nhấp vào Add section hoặc Add block ngay phía trên section đích.
5. Chọn Custom Liquid (hoặc Custom HTML tùy theo theme).
6. Nhập một thẻ HTML gọn nhẹ với ID do bạn tự đặt:

<div id="reviews"></div>

Hãy đặt tên ID bằng các chữ cái thường và dấu gạch nối (ví dụ: customer-reviews, faq-section, hoặc best-sellers). Theo chuẩn MDN Web Docs id attribute, thuộc tính ID phải là duy nhất trên toàn bộ trang.

Video hướng dẫn dưới đây từ EcomGraduates minh họa trực quan các thao tác mở Inspect và thiết lập ID tùy chỉnh trên giao diện cửa hàng Shopify:

Các trường hợp phức tạp: không có ID rõ ràng, section lồng nhau, ký tự đặc biệt

Một số cấu trúc cửa hàng đặc biệt có thể tạo ra các tình huống khiến việc xác định selector trở nên phức tạp. Việc xử lý bài bản từng trường hợp sẽ ngăn ngừa sự cố điều hướng.

Section không có ID rõ ràng

Một số section tùy biến riêng hoặc section tạo bằng ứng dụng page builder không xuất ra thuộc tính ID tiêu chuẩn ở thẻ ngoài. Thay vì cố gắng xâu chuỗi nhiều tên class—vốn rất dễ đứt gãy khi cập nhật CSS—hãy áp dụng giải pháp Custom Liquid ở Bước 3. Việc chèn thẻ <div id="your-id"></div> ngay phía trên section cho phép bạn tạo ra một selector rõ ràng mà không cần can thiệp vào các file template liquid phức tạp.

Section lồng nhau và app block

Khi cần cuộn tới một app block nằm bên trong section có sẵn (chẳng hạn như tiện ích đánh giá nhúng trong khối sản phẩm), việc nhắm trực tiếp vào thẻ của app có thể không cuộn đúng vị trí mong muốn, nên hãy luôn kiểm tra lại. Hãy nhắm tới thẻ bao ngoài shopify-section của khối chính, hoặc đặt khối thẻ neo riêng ngay phía trên.

Section chỉ hiển thị trên di động hoặc máy tính

Nhiều cửa hàng dựng hai banner riêng biệt cho máy tính và điện thoại. Nếu section trên máy tính có gắn ID nhưng section trên điện thoại dùng khối khác, tab bar sẽ không hoạt động trên thiết bị di động. Hãy luôn kiểm tra storefront trong chế độ mobile của DevTools. Nếu section hiển thị theo cỡ màn hình, bạn cần nhắm selector vào phần tử thực sự xuất hiện trên giao diện mobile.

Ký tự đặc biệt và quy tắc escape trong CSS

Theo tài liệu kỹ thuật MDN querySelector, nếu giá trị của class hoặc ID không phải là một định danh CSS hợp lệ (chẳng hạn như bắt đầu bằng số hoặc chứa dấu hai chấm, dấu chấm, dấu hỏi), biểu thức đó phải được xử lý bằng hàm CSS.escape(). Ví dụ, một ID như 123-reviews sẽ gây lỗi nếu không được escape đúng quy chuẩn.

Để tránh lỗi cú pháp trong ô nhập của ứng dụng điều hướng, tốt nhất bạn không nên sử dụng các ký tự lạ. Hãy giữ cho ID chỉ gồm chữ cái thông thường và dấu gạch nối, đồng thời tránh dùng dấu ngoặc đơn hoặc dấu nháy kép trong trường nhập liên kết.

Gắn selector làm đích cuộn cho tab

Khi đã xác nhận selector khớp đúng một phần tử duy nhất, bạn có thể đưa giá trị này vào cấu hình thanh tab di động.

Đầu tiên, hãy kiểm tra tài liệu hướng dẫn của ứng dụng điều hướng hoặc theme bạn đang sử dụng để biết ô liên kết nhận đường dẫn URL có dấu thăng (như /#reviews) hay nhận trực tiếp một biểu thức CSS selector (như #reviews).

Nếu ứng dụng có ô chuyên biệt dành cho CSS selector:

1. Dán selector đã kiểm tra ở Bước 2 vào trường liên kết (ví dụ: #reviews hoặc #shopify-section-template--custom).
2. Đảm bảo cú pháp tuân thủ đúng định dạng mà ứng dụng yêu cầu.
3. Lưu lại cấu hình menu.

Cần lưu ý rằng các hàm cuộn trang trên trình duyệt hoạt động trực tiếp trên tài liệu DOM đang mở. Nếu khách hàng bấm vào một tab có selector nội bộ khi đang xem trang sản phẩm hoặc trang bộ sưu tập, truy vấn selector sẽ trả về giá trị null (MDN querySelector) và trang sẽ không thực hiện cuộn. Hãy luôn thử nghiệm tab trực tiếp từ trang chủ.

Ngoài ra, hãy lưu lại tên các ID tùy chỉnh trong tài liệu kỹ thuật nội bộ của cửa hàng. Điều này giúp các nhân viên khác không vô tình xóa mất khối Custom Liquid khi dọn dẹp giao diện.

Xử lý sự cố: tab không cuộn, bị header che khuất hoặc cuộn sai vị trí

Nếu tab điều hướng không hoạt động như kỳ vọng trên điện thoại, hãy rà soát các nguyên nhân phổ biến sau:

Tab hoàn toàn không cuộn

Mở Console trên trang chủ live và chạy lại lệnh $$('#your-selector').length. Nếu kết quả trả về 0, phần tử không tồn tại trên trang, section ID đã bị thay đổi do vừa xuất bản theme mới, hoặc selector bị sai chính tả. Theo tài liệu của MDN, selector không khớp sẽ trả về null và chặn đứng lệnh cuộn (MDN querySelector).

Tab cuộn sai vị trí mong muốn

Nếu việc bấm vào tab làm màn hình nhảy lên đầu hoặc xuống cuối trang thay vì tới section mục tiêu, selector của bạn đang bị trùng lặp nhiều phần tử. Khi có nhiều nút cùng khớp, querySelector sẽ mặc định lấy phần tử đầu tiên trong DOM (MDN querySelector). Dùng Console để kiểm tra các phần tử trùng và thay thế bằng ID riêng biệt.

Tiêu đề section bị che khuất dưới header cố định

Theo cơ chế mặc định, các lệnh cuộn của trình duyệt sẽ căn mép trên cùng của phần tử đích sát với cạnh trên của khung nhìn màn hình. Nếu cửa hàng của bạn có thanh header dạng dính (sticky) hoặc cố định (fixed), thanh này sẽ đè lên trên tiêu đề của section.

Tài liệu MDN scrollIntoView chỉ ra giải pháp tạo khoảng cách thông qua thuộc tính CSS scroll-margin-top: “To define a custom spacing, use scroll-margin-top or scroll-margin-bottom. This is often useful when there’s a fixed header on the page.” (Để xác định khoảng cách tùy chỉnh, hãy sử dụng scroll-margin-top hoặc scroll-margin-bottom. Điều này rất hữu ích khi trang có header cố định).

Để tạo khoảng cách bù, hãy đo chiều cao thực tế của header trên DevTools, sau đó bổ sung thuộc tính scroll-margin-top vào CSS tùy chỉnh của theme:

/* Tạo khoảng cách bù dưới header cố định trên mobile */
#reviews {
  /* Replace 80px with your own header height */
  scroll-margin-top: 80px;
}

Bảng menu ngăn kéo (drawer) che khuất màn hình

Nếu thanh tab đáy hiển thị song song với menu ngăn kéo trượt, việc bấm vào một tab trong khi drawer vẫn mở có thể gây xung đột hiển thị. Áp dụng các nguyên tắc tối ưu cho mobile drawer menu sẽ đảm bảo bảng trượt tự động đóng lại khi liên kết điều hướng ngoài được kích hoạt.

Ảnh tải chậm (lazy-load) làm xê dịch vị trí đích

Nếu trang chủ có nhiều ảnh banner lớn phía trên section đích, việc ảnh tải chậm có thể làm thay đổi chiều cao trang sau khi thao tác cuộn đã dừng lại, khiến section bị lệch nhẹ lên hoặc xuống. Hãy thử nghiệm lại tab sau khi toàn bộ tài nguyên trang đã tải xong hoàn toàn.

Minh họa khái niệm (Concept illustration): Xử lý tiêu đề section bị che khuất dưới thanh header cố định bằng cách thiết lập thuộc tính CSS scroll-margin-top.

Đánh đổi: khi nào selector không phải là giải pháp phù hợp

Mặc dù thao tác cuộn tới section nội bộ mang lại trải nghiệm mượt mà trên trang đơn, đây không phải lúc nào cũng là giải pháp điều hướng tối ưu cho mọi cửa hàng thương mại điện tử.

Nội dung chuyên sâu cần trang riêng

Nếu nội dung bạn muốn liên kết là một danh mục sản phẩm lớn, chính sách thương hiệu chi tiết hoặc câu trả lời hỗ trợ chuyên sâu, việc dồn tất cả vào một section trên trang chủ khiến nội dung khó tìm và khó chia sẻ hơn. Mỗi trang bộ sưu tập hoặc trang chính sách riêng có URL riêng, và tab có thể liên kết thẳng tới đó thay vì dựa vào cuộn trên trang.

Nguy cơ quá tải thanh điều hướng tab bar

Thanh tab mobile được thiết kế để ngón tay cái dễ dàng chuyển đổi qua lại giữa các khu vực chính của cửa hàng. Việc gán quá nhiều tab đáy chỉ để cuộn tới các section nội bộ trên trang chủ sẽ gây rối mắt và làm giảm tính hữu dụng khi khách duyệt sâu vào danh mục. Theo nguyên tắc trong bài viết điều hướng vượt ra ngoài hamburger menu, các tab đáy chỉ nên dành cho những mục tiêu quan trọng nhất.

Phụ thuộc vào theme và gánh nặng bảo trì

Mọi selector gắn liền với mã theme tự sinh đều đòi hỏi phải kiểm tra lại mỗi khi bạn đổi hoặc nâng cấp giao diện. Khi các tùy chỉnh menu mặc định của theme bắt đầu bộc lộ nhiều điểm nghẽn khó bảo trì, chủ shop nên đánh giá lại các giới hạn của menu giao diện gốc để cân nhắc sử dụng một hệ thống menu chuyên nghiệp.

Vị trí phù hợp của Navi+

Navi+ mang đến các giải pháp điều hướng chuyên sâu cho chủ cửa hàng Shopify thông qua các thành phần Tab Bar và Mobile Menu. Mỗi mục menu đều được trang bị ô Link To chuyên dụng, hỗ trợ cả đường dẫn web tiêu chuẩn lẫn các cú pháp tương tác chức năng.

Với các cửa hàng cần cuộn mượt tới section cụ thể, Navi+ hỗ trợ cú pháp scroll:OnPage(#section-id), được ghi nhận chính thức trong trung tâm trợ giúp là “Scroll to a section by CSS selector” (các loại liên kết trong Navi+). Tính năng này khả dụng trên các gói Business và Elite.

Khi sử dụng tính năng này, bạn chỉ cần nhập đúng selector khớp một phần tử duy nhất đã được kiểm tra ở Bước 2. Vì cơ chế cuộn nội bộ xử lý dựa trên DOM của tài liệu đang hiển thị, section đích bắt buộc phải có mặt trên trang khách hàng đang xem. Hãy luôn kiểm tra tính năng trực tiếp trên điện thoại thật bắt đầu từ trang chủ.

Nếu bạn đang dùng Navi+ Tab Bar, hãy dán selector bạn vừa kiểm tra vào ô Link To của tab theo định dạng scroll:OnPage(#id-cua-ban), sau đó chạm thử trên điện thoại từ trang chủ. Danh sách đầy đủ các loại liên kết có tại trung tâm trợ giúp Navi+.

Danh sách kiểm tra hành động

Thực hiện theo 7 bước kiểm tra dưới đây để cài đặt selector cho section của bạn một cách chuẩn xác:

• Mở trang chủ cửa hàng thực tế trên trình duyệt máy tính (bên ngoài trình sửa theme).
• Nhấp chuột phải vào section đích, chọn Inspect và xác định thẻ bao ngoài có id bắt đầu bằng shopify-section-.
• Ghi lại ID của thẻ bao ngoài và chuyển thành selector ứng viên với dấu # ở đầu.
• Chạy lệnh $$('#selector-cua-ban').length trong Console của DevTools để xác nhận kết quả trả về đúng 1.
• Bật chế độ giả lập thiết bị trong DevTools để xác nhận selector vẫn tồn tại và duy nhất trên màn hình di động.
• Nếu cần độ bền vững lâu dài, hãy thêm một khối Custom Liquid chứa thẻ <div id="id-cua-ban"></div> ngay phía trên section.
• Dán selector đã kiểm tra vào cấu hình tab bar, bổ sung scroll-margin-top nếu header cố định che khuất tiêu đề, và thử nghiệm trên điện thoại thật.

Câu hỏi thường gặp

Xem ID của một section trên Shopify ở đâu?

ID của section không hiển thị trong trang quản trị Shopify Admin. Để xem ID, hãy mở trang chủ thực tế trên trình duyệt, nhấp chuột phải vào section, chọn Inspect và đọc giá trị thuộc tính id trên thẻ bao ngoài mang class shopify-section (Shopify Section Object, MDN querySelectorAll).

Tại sao selector của section đột nhiên ngừng hoạt động?

Shopify tự động sinh ID cho các section trong template JSON và những ID này có thể thay đổi khi section được sửa đổi hoặc tạo lại (Shopify Section Object, Fluorescent). Để tạo đích đến ổn định lâu dài, hãy chèn một khối Custom Liquid chứa thuộc tính ID cố định ngay phía trên section.

Làm thế nào để biết selector chỉ khớp đúng một phần tử?

Hãy mở tab Console trong công cụ nhà phát triển và chạy lệnh $$(selector).length hoặc document.querySelectorAll(selector).length (Chrome DevTools Console Utilities, Chrome DevTools DOM). Kết quả trả về là 1 sẽ chứng minh selector đó chỉ khớp duy nhất một phần tử trên toàn trang.

Có nên dùng tính năng “Copy selector” từ DevTools không?

Bạn có thể dùng tính năng “Copy selector” hoặc “Copy JS Path” của Chrome để kiểm tra ban đầu, nhưng chuỗi selector đa tầng này rất dễ bị đứt khi cấu trúc giao diện thay đổi. Giải pháp an toàn nhất là rút gọn biểu thức về thuộc tính ID duy nhất của section.

Điều gì xảy ra nếu selector khớp với nhiều section khác nhau?

Khi một selector khớp với nhiều phần tử, các hàm JavaScript như querySelector sẽ chỉ chọn phần tử đầu tiên xuất hiện trong cây tài liệu (MDN querySelector). Do đó, việc bấm vào tab có thể khiến màn hình cuộn sai tới một section khác ở phía trên.

Tại sao tiêu đề section bị ẩn dưới header sau khi cuộn?

Trình duyệt luôn căn mép trên của phần tử đích sát với đỉnh khung nhìn màn hình. Nếu cửa hàng dùng header cố định, phần header này sẽ che khuất phần tiêu đề. Bổ sung thuộc tính CSS scroll-margin-top cho section đích sẽ tạo ra khoảng trống bù cần thiết để hiển thị trọn vẹn (MDN scrollIntoView).

Nguồn tham khảo

• Shopify Developer Documentation: Section Liquid Object — Chi tiết về cơ chế sinh ID động cho các section trong template JSON.
• Fluorescent Documentation: Custom Liquid Developer Guide — Phân tích về tính không ổn định của section ID và giải pháp đặt ID neo tùy chỉnh.
• MDN Web Docs: HTML id global attribute — Tiêu chuẩn kỹ thuật quy định tính duy nhất của thuộc tính ID trên toàn trang.
• MDN Web Docs: Document.querySelector() — Cơ chế trả về phần tử đầu tiên khớp, giá trị null khi không khớp và quy tắc escape selector.
• MDN Web Docs: Document.querySelectorAll() — Cơ chế trả về danh sách NodeList tĩnh khi kiểm tra selector.
• MDN Web Docs: Element.scrollIntoView() — Hành vi căn chỉnh khung nhìn và tiêu chuẩn khoảng cách bù với scroll-margin-top.
• Chrome for Developers: Chrome DevTools DOM Inspection — Tính năng tìm kiếm cây DOM và sao chép biểu thức truy vấn phần tử.
• Chrome for Developers: Console Utilities API — Hướng dẫn sử dụng hàm tiện ích truy vấn selector ($$).
• Chrome for Developers: Open Chrome DevTools — Bảng phím tắt mở công cụ kiểm tra trên các hệ điều hành.
• Section Store Help: Custom Placement: Finding a CSS Selector — Hướng dẫn kỹ thuật về tính duy nhất của ID và cách xác định vị trí.
• UpCharge Help Center: Selector Settings Guide — Lời khuyên thực tế cho chủ shop về việc tìm kiếm class và ID duy nhất.
• Navi+ Help Center: Navigation Item Link Types — Tài liệu chính thức về cú pháp scroll:OnPage(#section-id) trên gói Business và Elite.