How to Create Anchor Links on Shopify: An Easy Solution
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:
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.
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?
Hana Drdla
