Anchor Link

Create an in-page jump target so buttons and menu links can scroll straight to a specific section.

Long pages lose people. An anchor lets a button, a menu item or a link in your text jump straight to the part of the page that matters — "See sizing", "Jump to reviews", "Book a fitting". Anchor link is the invisible marker that makes those jumps possible, and setting one up takes about twenty seconds.

At a glance

Where to find it	Add section → Layout
Renders	Nothing on the live page — an editor marker only
Allowed on	Page templates only, not the header or footer groups
Settings	One — the anchor's name

---

How to add

1

Place the marker

Click Add section, pick Anchor link from the Layout category, and drag it immediately above the section you want people to land on.

2

Name the anchor

Type a name into the Anchor link field — reviews, sizing, about. Lowercase letters, digits and hyphens only.

3

Point something at it

Set any button, menu item or text link to #reviews. The leading # goes in the link, not in the field.

4

Test it on a phone

With a sticky header, the header can sit over the first line of the target section. Check the jump on mobile before you call it done.

The field starts at anchor-link — change it. Two sections left on the default name means the browser only ever finds the first one, and the second jump silently goes to the wrong place.

Good to know

• The section renders nothing on the live storefront. You'll see a marker inside the theme editor and nothing at all on the published page — that's expected, not a broken section.
• Because it's invisible it adds no height, which is why it has no spacing or color settings.
• Use lowercase letters, digits and hyphens. Spaces and punctuation make links unreliable.
• The link you write elsewhere needs the leading #; the name in this field does not.
• Anchors work across pages too. A menu item pointing at /pages/faq#shipping opens the FAQ page already scrolled to that spot.

Customization ideas

A mini table of contents

At the top of a long landing page, add a Custom HTML section holding a list of #anchor links. Visitors pick their own entry point instead of scrolling past everything.

Link the size chart from the description

Put an anchor above your size chart and link to it from the product description. Shoppers stop hunting for it — and stop emailing you about it.

Send a menu item deep into a page

Point a navigation item at /pages/about#team to land people on one part of a long page rather than the top of it.

One form, several buttons

On a campaign page, anchor the sign-up form and place "Get the code" buttons at several points down the page, all targeting it.

---

Settings reference

Settings

Setting	What it does
Anchor link	The anchor's name. Starts at anchor-link. Link to it elsewhere as #name.

Best practices

• Name anchors after the content, not the position. #reviews keeps working after you reorder the page; #section-3 doesn't.
• Place the anchor just above the target section rather than inside it, so the heading isn't cut off at the top of the viewport after the jump.
• Keep a list of the anchors you've used. They're invisible on the page, so the only way to spot a duplicate is to go looking.

Related

• Empty Space & Line
• Custom HTML & Custom Liquid