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:

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

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.

Shopify Anchor link Section

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/about#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. 

You can get that our Anchor Link Section for free here at Luna Templates.


Enjoyed this post?

Watch our
Free Training

Watch now