Using an anchor link is an easy way to help your website visitors jump to a certain spot on the webpage. Normally to do this, you need to give the section you’re jumping to an ID name in the code. It looks something like this:
<a href=“#destination">Click here to jump down the page</a>
<section id=“destination”><p>This is where I wanted to jump to!</p></section> 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.
Free Anchor Link Solution
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 but it can be dragged to change the order like a regular section.
Get the Anchor Link Section for free at LunaTemplates.co.
Where to use the anchor link
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/#destination”
Section Installation
Our 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. We’ve also included a tutorial on how to include any section on a non-homepage. You can find that video tutorial when you get the anchor section, or a written article here.
You can get that our Anchor Link Section for free here at Luna Templates.
