What Are Anchor Links and How to Add Them to Your Website

• What is an Anchor Link?
• Why Anchor Links Matter
• Step-By-Step Guide To Anchor Links
• WordPress Anchor Links
• Showit Anchor Links
• Shopify Anchor Links
• Magento Anchor Links
• Common Anchor Link Mistakes
• Anchor Link FAQS

An anchor link is a hyperlink that jumps to a specific section of a page — not a different page, the same page. They’re what power “jump to” menus, table of contents blocks, and those “back to top” buttons. You’ve used them. Your visitors need them.

What Is an Anchor Link?

An anchor link (sometimes called a jump link) has two parts: the link itself and the target it points to. The target is an HTML element with a unique ID: a named spot on the page. When someone clicks the link, the browser scrolls directly to that spot.

In HTML, it looks like this:

The link: <a href="#section-name">Jump to this section</a>

The target: <h2 id="section-name">This Section</h2>

That’s it. Simple in concept. Incredibly useful in practice.

Why Anchor Links Matter

Most websites treat these little guys as a nice-to-have. But we think they’re a must have.

They Matter For User Experience

The average blog post runs 1,500–2,000 words. Product pages on ecommerce sites can run even longer. When someone lands on a page looking for one specific thing — the installation guide, the FAQ, the pricing section — and they have to scroll through everything else to find it, they leave. Jump links let them skip straight there.

They Matter for SEO

Google uses anchor links to understand page structure. When your page has clear, named sections, search engines can parse the content more accurately — and they’re more likely to surface individual sections as “jump to” links in search results (those indented blue links you sometimes see below a result). That’s free real estate in the SERP.

They Matter for AI Search Visibility

This is the newer reason to care. AI engines like ChatGPT, Perplexity, and Google’s AI Overviews parse page structure to pull direct answers. When your page has clearly labeled, anchor-linked sections, you’re far more likely to get cited. Structured content gets pulled. But walls of text don’t.

Real Examples of Anchor Links In Action

Ecommerce Product Page Fix

We work with a DTC ecommerce client who just launched a new Magento website in October of last year (and saw a really significant conversion rate increase which is exactl what you want to happen!) Their product pages are genuinely well-built — overview, specs, fit guide, installation notes, reviews, FAQ. But, they sell a custom product that requires the buyer to precisely match their car make, model and year to the product before purchasing. So, it’s imperative that they help people answer “does this fit my car?” quickly and easily to avoid people giving up in frustration. The guide was buried below the fold, and customers couldn’t find it fast enough.

We added a simple jump link menu at the top of each page. The fit guide went from “somewhere on this page” to “second click.” Time on page went up. Bounce rate went down. Meanwhile, conversion rate went up yet again. Nothing about the product changed. In fact, it was just the navigation.

WordPress Lead Generation Website Fix

Same lesson comes up on the blog side. We’ve had clients whose WordPress navigation literally broke — URLs got hardcoded to original paths, pages moved, links pointed nowhere — and it wasn’t discovered until they hired us and we pointed it out. Jump links that break are just as bad as internal links that break. But that doesn’t happen if you build them right the first time. So let’s teach you how to do that.

Step By Step Guide to Add Anchor Links on Your Website

Before you touch any platform, here’s the logic. To get started, you need two things:

1. The target — an ID assigned to the section you want to link to
2. The link — an href that starts with # followed by that ID

IDs should be lowercase, no spaces (use hyphens), and descriptive.

• Target: <h2 id="fit-guide">Fit Guide</h2>
• Link: <a href="#fit-guide">Jump to Fit Guide</a>

That’s the foundation. Now here’s how to do it on each platform.

How to Add Anchor Links in WordPress

Anchor Links in Block Editor (Gutenberg)

1. Click the heading or block you want to target
2. In the right sidebar, find Advanced at the bottom of the block settings
3. In the HTML anchor field, type your ID — no #, no spaces, hyphens only
4. Save
5. To create the link: highlight your link text, click the link icon, and type #your-anchor-id

Anchor Links in Elementor

1. Click the section or widget you want to target
2. Next, in the left panel, go to the Advanced tab
3. Then, enter your anchor name in the CSS ID field
4. Lastly, link to it from a button or text editor using #your-css-id

Using Anchor Links Using Manual HTML

In the HTML editor, add the id attribute directly to any heading: <h2 id="section-name">Your Heading</h2>

Link to it from anywhere on the page: <a href="#section-name">Link text</a>

Anchor Links in Showit (for Showit/WordPress hybrid sites)

In Showit, use the “Scroll to Block” link type in button settings for page sections. But, for blog posts, which live in WordPress, use the standard Gutenberg method above.

This YouTube tutorial explains how to do WordPress Anchor Links in a really easy way.

---

---

How to Add Anchor Links in Shopify

Shopify’s built-in editor doesn’t have a native anchor link button, but adding them manually is straightforward.

How To Add Anchor Links In the Theme Editor

1. Open the page or product description
2. Click the <> (HTML/source code) icon in the text editor
3. Next, find the heading you want to target and add the id attribute: <h2 id="fit-guide">Fit Guide</h2>
4. Then, add your link wherever you want it to appear: <a href="#fit-guide">Jump to Fit Guide</a>
5. Lastly, save

How to Add Anchor Links On long product pages

If you’re selling something with specs, sizing, installation instructions, and a care guide all on the same page — and you should be — a simple anchor menu at the top makes a real difference. Especially on mobile, where scrolling a detailed product description is genuinely painful. A few minutes of work for a much better experience.

Note on themes: Some premium Shopify themes (Dawn, Prestige, and others) support anchor navigation out of the box. So, check your theme documentation before going manual.

How to Add Anchor Links in Magento

Magento’s CMS editor is more complex, but the logic is identical.

How to Add Anchor Links In the WYSIWYG Editor:

1. First, navigate to Content → Pages (or Products for PDPs)
2. Open the page in Edit mode
3. Click Show/Hide Editor to switch to HTML view
4. Next, add your id to the target heading: <h2 id="technical-specs">Technical Specifications</h2>
5. Then, add the jump link where you want it: <a href="#technical-specs">Jump to Specs</a>
6. Finally, save and flush the cache

How to Add Anchor Links For product detail pages

If you’re managing long product descriptions with multiple sections — which is common for industrial, manufacturing, or specialty DTC products — anchor links make an immediate UX difference. Customers shouldn’t have to hunt for the information that closes the sale.

Common Mistakes to Avoid with Anchor Links

Using spaces in your ID. id="fit guide" doesn’t work. So, use hyphens: id="fit-guide".

Forgetting the # in your link. href="fit-guide" tries to find a page named “fit-guide.” You want href="#fit-guide" to stay on the current page.

Using duplicate IDs. Every ID on a page needs to be unique. Two elements with id="faq" will confuse the browser — it’ll only target the first one, every time.

Not testing on mobile. The jump target often lands behind a sticky header on mobile. If your header is 60px tall, your content starts 60px too low. This is fixable with a CSS scroll-margin-top offset on the target element.

Skipping the table of contents. Jump links with no visible trigger are wasted. Make the links visible. Label them clearly. Basically, give readers a reason to use them.

Frequently Asked Questions About Anchor Links

What is an anchor link on a website? It’s a hyperlink that navigates to a specific section of the current page rather than to a different URL. It uses a # followed by a unique ID to identify where on the page to scroll.

What’s the difference between an anchor link and an internal link? An internal link navigates to a different page on your website. An anchor link jumps to a specific section within the page you’re already on. Both matter for SEO and user experience, but they serve different purposes.

Do anchor links help with SEO? Yes. They help search engines parse your page structure, which improves how it’s indexed. In fact, Google sometimes uses jump links to create “jump to” shortcuts in search results, which can increase your click-through rate directly.

Can I use anchor links in Shopify? Yes. There’s no native button for it, but you can add them manually through the HTML source editor in any page or product description. It takes about five minutes.

Do anchor links work in WordPress? Yes. The block editor (Gutenberg) has a built-in “HTML anchor” field in the block settings. You can also add them directly in HTML. Page builders like Elementor use a “CSS ID” field to do the same thing.

What is a jump link in a blog post? Jump link is another name for an anchor link. In blog posts, they’re most commonly used to create a clickable table of contents at the top, so readers can skip to the section most relevant to them — which also helps AI engines identify and pull specific answers from your content.

With all this in mind, if you’re publishing content that runs longer than a scroll or two, jump links are one of the lowest-effort, highest-impact additions you can make. They help readers find what they need, help search engines understand what you’ve written, and help AI engines pull your content as a direct answer.

To sum up, all three matter.

If this is starting to feel like a longer list than you expected — that’s what we’re here for. Let’s Chat.