How to add an anchor link to a page on Shopify

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

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.

Hana Drdla

Hana Drdla

Hana is one of the co-founders of Luna and a Shopify pro. She loves helping entrepreneurs launch their businesses through her freelance web development business.

SHOPIFY TUTORIALS, STRAIGHT TO YOUR INBOX

Sign up to receive monthly emails packed full of tutorials, new products and special offers.

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments

ELEVATE YOUR SHOPIFY STORE

With sections that work with the most popular themes. For store owners and designers.

We’re making beautiful Shopify stores a breeze with customizable pre-built sections.

Related Posts