How to Create Anchor Links on Shopify: An Easy Solution

Have you come to this article thinking that an anchor link should be a super easy thing to do, but finding it impossible or clunky on Shopify? I’ve been there and came up with an easy solution to share.

How to Add Anchor Links on Shopify

What is an Anchor link?

An anchor link is a URL that easily allows website visitors to jump to a specific spot on a webpage, getting them where they need to be faster. 

Imagine that you have a button or call to action on a page of your website, and when the user clicks it, you want them to jump down to lower on the page, or even to a different page but also lower down the page. This is when you'd need to use an anchor link.  

How to Create Anchor Links  

To create an anchor link, you need to give the section you’re jumping to an ID name in the code. That looks something like <section id="destination">. Then the button or link would link to that ID like <a href="#destination">Button Text</a>.

Together, it would look something like this:


Above shows how you would link to lower down on the same page. However, if you wanted to link to a different page, then the link would require the full page URL followed by the section ID like this: <a href="https://website.com/pages/about#destination">.

But on Shopify, there isn’t an easy way to add an ID to your sections without doing a clunky workaround in the code. Some suggest using the section ID number (found in the Inspector), but this results in a long URL link with a name that doesn’t represent the section being jumped to and makes the link confusing. The ID number also changes when you duplicate the theme so the anchor would stop working.

Free Anchor Link Solution for Shopify

We noticed this problem and came up with an easy (and free!) solution for this. We’ve made a simple, invisible section that allows you to place it wherever you want to jump to on a page, and add its unique anchor name. It works just like a regular anchor, just drag into position like any other Shopify section.

Get the Anchor Link Section for free at LunaTemplates.co.

Shopify Anchor link Section

Where to use anchor links

One of the most popular ways to use this anchor is with buttons on the homepage. When the button is clicked, the page scrolls down smoothly and stops at the section desired. Visitors get to where they want to go faster.

Another way to use an anchor link is in the navigation. You can add something in the navigation that you really want visitors to be aware of, but you might not have a full page for it yet, and want to direct them to just a section. In this case, the link should have the full URL since using only the # hash will only work if it’s on the same page. With a link in the navigation, visitors can be on any page, so you’ll want to be sure to use the full link like:
“https://mywebsite.com#destination"
or
“https://mywebsite.com/pages/about#destination”

Anchor Link Installation and Testing 

Our Anchor Link Section is very easy to install and use. Don’t worry if you’re not familiar with Shopify code or using anchor links because we have a tutorial video that explains exactly how to install the section, and how to use it. 

Once you've set up your anchor links, you'll want to test them. Click on the button and see if it goes to the correct spot. If not, you'll want to check if the correct link is being used. Put the URL into your browser and hit Enter. It should jump to the correct spot. Try from different pages of the website. If that is working as expected, then this exact link can be used with your buttons. Finally, test the links on different web browsers and mobile devices.

How to fix an anchor link that scrolls to the wrong spot

If your website has a sticky header, it’s common for an anchor link to appear to jump too far into the content. In reality, it is jumping to the top of the section, but the header is taking up space on the screen and covering the content. There’s an easy solution to fix this.

Add the following CSS to your website: #destination { scroll-margin-top: 100px; }
Adjust the “destination” to match the anchor text/section ID, and modify the pixel amount to be the height that you need, based on the height of your header.

How to optimize anchor links for SEO

In order to optimize your anchor links for search engine optimization (SEO), make sure that the anchor text uses descriptive keywords that accurately describe the section you're linking to.  This text will send a signal to Google as to what the content is about. 

Ready to try our free Anchor Link Section?

Anchor links FAQ

How do anchor links work?

An anchor link uses a special URL to move the user to a specific part of the page. Anchor links are written with the hash symbol # followed by the ID of the HTML element that should be jumped to. For example, “#pricing”. When jumping to a different page, the link should include the full website URL plus the anchor link. For example, https://website.com/plans#pricing. 

Why should I use anchor links?

Anchor links allow users to quickly jump to a specific place on a web page. This reduces user frustration as they are able to get where they need to be faster. Anchor links are especially useful for long web pages that have a lot of content, or when wanting to lead a user to a specific topic that does not have its own page.

How do I test anchor links?

To test an anchor link, type the URL into your browser and hit Enter. It should jump to the correct spot. If that is working as expected, use this link to add to a button on your website, and test again. Finally, test links on different web browsers and mobile devices.

Are anchor links accessible to screen readers?

Yes, anchor links are accessible to screen readers. To ensure that anchor links provide a good user experience to those using screen readers, be sure to use descriptive anchor text that's relevant to the content. This will have SEO benefits as well.


Enjoyed this post?

Watch our
Free Training

Watch now