Anchor links, also called jump links, take readers to a specific section of a web page. They let shoppers jump to a size chart, shipping details, or a product comparison without scrolling.
Long product pages and buying guides can bury purchase details beneath several screens of content. Anchor links put details like product dimensions and delivery information one click away.
Ahead, learn how anchor links work, how to create them in HTML, how to add and test them in your Shopify store, and how they affect SEO.
What is an anchor link?
Anchor links point to a specific location within a page. Same-page anchor links are a type of internal link, a link that points to a spot on your website, while an external link points to a different website.
Internal links can also connect separate pages within your website. The difference is the destination: an internal link opens a page, while an anchor link lands on a specific section of a page.
Use anchor links to point to product comparisons in a buying guide, specs on a product page, shipping details in an FAQ, or the sign-up form on a landing page.
List your anchor links in a table of contents at the top of the page, and add a “Back to top” link to long pages so readers can return to the top.
How to create anchor links
Anchor links rely on HTML, the code that tells a browser how to structure a page’s headings, paragraphs, and links. Every anchor link needs two pieces of HTML: an ID on the destination, such as a section heading, and a link that points to that ID. To skip the code, use an app or hire a Shopify Partner.
1. Add an ID to the destination
Find the heading or other element where readers will land. Add an id attribute to its opening tag. For example, a product’s size-chart heading could look like this: <h2 id="size-chart">Size chart</h2>.
Each ID must be unique within the page and contain no spaces. Use descriptive lowercase words separated by hyphens, such as size-chart, to keep IDs readable and easy to reuse. Start each ID with a letter.
If the element already has an ID, use that existing value.
2. Create the anchor link
Add an <a> element where you want the clickable text to appear. Set its href attribute to # followed by the destination’s ID, matching its spelling and capitalization: <a href="#size-chart">View size chart</a>.
To link to that section from another page, place the destination page’s URL before #size-chart. For pages in your own store, use the short URL that starts with a slash: <a href="/products/linen-shirt#size-chart">View the linen shirt size chart</a>.
For a back-to-top link, place this link farther down the page. Browsers treat #top as the top of the page, so you don’t need to add an ID: <a href="#top">Back to top</a>.
These links use a URL fragment, the portion beginning with #, to identify the destination.
How to add an anchor link to your Shopify store
- Use the rich text editor
- Edit your theme code
- Use an app
- Hire a Shopify Partner
- Test your anchor links
You can add anchor links to your store in four ways: use the rich text editor, edit your theme code, use an app, or hire a Shopify Partner. The first two self-serve methods require you to open the HTML. Here’s where to find it:
| Content | Where to edit its HTML in the Shopify admin |
|---|---|
| Product description | Products → select a product → Description → Show HTML (</>) |
| Collection description | Products → Collections → select a collection → Description → Show HTML (</>) |
| Page content | Online Store → Pages → select a page → Content → Show HTML (</>) |
| Blog post | Content → Blog posts → select a post → Content → Show HTML (</>) |
| Theme code | Online Store → three-dot menu (…) next to your theme → Edit code → select a theme file |
Use the rich text editor
Open the product, collection, page, or blog post you want to edit, and click Show HTML (</>) in the rich text editor. Add the ID and link you created, then save your changes. The editor automatically corrects some HTML, so confirm the ID and link still appear after you save.
Edit your theme code
Use the code editor when the link or its destination sits in a theme section, such as a header or footer, rather than in editable content. Most theme files use Liquid, Shopify’s templating language, alongside HTML and CSS (Cascading Style Sheets, the language that controls how a page looks).
Shopify recommends editing theme code only if you know HTML and CSS and understand the basics of Liquid. Duplicate your theme to create a backup copy, edit the copy, and preview every affected template before publishing.
Use an app
Apps from the Shopify App Store, such as RuffRuff Table of Contents, build a linked table of contents from your existing headings without code. Choose which heading levels to include and customize the design in the app.
RuffRuff’s free plan adds a table of contents to blog posts. To add one to a product, collection, or other pages, you’ll need its Regular Plan.
Hire a Shopify Partner
For custom navigation or theme changes, find a developer through the Shopify Partner Directory. List the pages, link labels, and destination sections you want, and ask the developer to test each link on desktop and mobile before accepting their work.
Test your anchor link
Save your changes and open the published page. Click each link and confirm that the intended heading is visible. Open the full section URL in a new tab to test direct arrivals from other pages.
Repeat these checks on phones, tablets, and desktop computers, using browsers such as Chrome, Safari, and Firefox. Use the Tab and Enter keys to check keyboard navigation, too.
Check for these common issues:
- Missing IDs. Confirm that the destination element has its ID in the published HTML.
- Mismatched or duplicate IDs. Match the link’s fragment to the destination exactly, and give each destination its own ID.
-
Sticky headers. A header that stays onscreen can cover the destination heading. Add CSS spacing with
scroll-margin-top, allowing enough room for the header at each screen size. In your Shopify admin, go to Online Store, click Edit theme, and open Theme settings > Custom CSS. Add a rule such ash2[id] { scroll-margin-top: 100px; }, then adjust the number to match your header’s height.
How do anchor links impact SEO?
For SEO, anchor links can change how your page appears in Google search results. Google sometimes adds a “Read more” link under a result that takes searchers straight to a section of your page. Anchor links also make long pages easier for shoppers to navigate.
Google’s link guidance recommends concise, descriptive anchor text that explains the destination. Apply that principle to jump links: for example, use “View size chart” to tell shoppers what to expect. Use relevant keywords when they accurately describe the section.
For usability testing, ask someone unfamiliar with the page to find its size chart or shipping information using the jump links.
For navigation:
- Organize content under descriptive headings as part of on-page SEO, and link to sections that answer shoppers’ questions.
- Keep links visually identifiable and easy to tap on smaller screens.
- Check anchor-link destinations during a site audit and after content or theme changes.
For links between pages, use standard HTML links with real destination URLs so Google can discover the linked pages. Add a fragment such as #size-chart to direct shoppers to a specific section of the destination page.
Anchor link FAQ
What is the difference between a hyperlink and an anchor link?
A hyperlink takes readers to another page, a file, or a location within a page. An anchor link is a type of hyperlink that targets a section on a page, such as a product’s size chart. It can lead to a section on the current page or another page.
What is the difference between anchor links and jump links?
Anchor links and jump links are two names for the same navigation feature. Both terms describe shortcuts such as a “Shipping and returns” link that takes shoppers to that section of a product page.
What is the difference between <a> and <link>?
The <a> element with an href attribute creates a clickable hyperlink, such as a jump link or a link to another page. The <link> element identifies a page’s relationship to another resource, such as a stylesheet or site icon, and usually appears in the document’s <head>.
Can anchor links be used with images and videos?
Yes. Add a unique ID to an image, video, or surrounding section, then link to that ID. For example, href="#product-demo". An image can also be a clickable link when placed inside an <a> element, with alt text describing the destination.
Are there any accessibility considerations when using anchor links?
Yes. Web accessibility practices include descriptive link text and visible keyboard focus. Test links with a keyboard and screen reader, confirm navigation continues from the destination section, and check that sticky headers leave the target heading visible.
