How to Create Shopify Anchor Links? (Troubleshooting & Tips)

Creating Shopify anchor links can significantly enhance the user experience by allowing visitors to navigate long pages effortlessly. This guide will discuss how to make anchor links, possible problems that might arise, and the best ways to use them.

What Is An Anchor Link?

Anchor links, sometimes called "jump links," are text links on a web page that take you to another place on the same page. Anchor links are internal because they take visitors back to the same page. In contrast, users who click on external links are taken to a different page.

Anchor links make moving around in blogs, email messages, and other long-form content easier by giving you quick access to important pages.

You can add links to the page's source code with anchor tags. In HTML code, an anchor tag is <a> shown to identify the anchor element. It is paired with a href property, shown as href=, to show where the link will go.

How To Create Anchor Links On Your Shopify Page?

This method involves inspecting your webpage's HTML code to create anchor links. It's recommended for users who are comfortable with basic coding concepts.

Step 1: Open the Webpage & Inspect The Element:

First, go to the page where you want to make the link to a specific part of the page.

Next, locate the section you want to link to. Then, right-click on it and choose "Inspect" (or "Inspect Element"). This will open a developer tool window on the right side.

Step 2: Find & Copy A Unique Anchor ID

Now, look for the element's code within the developer window. Then, pick out the part of your page you want to link to. This could be a title, an image, or something element.

Next, you're looking for a section with an "id" attribute. It will likely be labeled with "div" followed by a specific code (don't worry about copying this code).

Important: Ensure you copy the ID, not the "class" or "style" attributes.

Once you locate the line with the "id" attribute, copy the unique code next to it. This is the key to creating your link.

In the image below, we will copy the ID of the "Subscribe to our emails" footer at the bottom of the page to make the Shopify anchor link.

Step 3: Build The Anchor Link

After step 2, add a "#" symbol to the end of the original webpage URL. Then, paste the unique ID you copied in step 2 directly after the hashtag.

The Anchor Link format is :

For example www.myshopystore#shopify-section-sections

Finally, copy the entire edited URL you just created. When someone clicks this link, they will automatically be directed to the specific section on the webpage.

However, creating Shopify anchor links is just the first step; if you don't know how to use them, read our guide in the next section.

How To Add The Anchor Links On Your Shopify Page?

This guide looks at two main ways to add anchor links to Shopify:

Let's take a look at each choice one at a time and see what it has to give:

Option 1: Manually Insert Shopify Anchor Links

Many website builders and text editors come with tools that make adding anchor links to your text easy. However, you can also learn how to use the HTML anchor tag code to create anchor links.

You can also use this method in Shopify code editors such as Atom, Visual Studio Code, or Sublime Text.

Here's a step-by-step guide:

Step 1: Now open the page to which you want to add an anchor link in your Shopify admin.

Step 2: Look for the "Show HTML" or "Edit code" button in the text editor toolbar. Let's say we want to add anchor links to our Shopify blog page.

Step 3: Use the a (anchor) tag to create a link to the specified section. The href attribute points to the id of the target section.

For example:

NOTE:

• Replace "#your-unique-anchor-id" with the unique ID we found in the part above.
• Replace "Go to Contact Us" with your call-to-action.

Step 4: Copy the HTML code from Step 3 and paste it where you want to show your anchor link. Typically, it is placed at the beginning of your content or in a navigation menu.

Finally, you can run your code in a new browser tab after clicking "Save" on your HTML file. Your anchor link should look like text with a working link that takes you to the part marked as an anchor element.

To give you an idea, we will insert the anchor link we just created into the first line of our blog.

When we click on the "Go to Contact Us" header at the top of the blog, it automatically scrolls down to the "Subscribe to our emails" footer.

Option 2: Using Free Anchor Link Template (Without Code)

If you're unfamiliar with the code or don't want to waste your time, use the Anchor Link Section by LunaTemplates.co. They created an essential, invisible part you can position and name anywhere on a page. It works like a standard anchor; simply drag it into place like any other Shopify section.

Shopify Anchor Link template.

Common Mistakes & Solutions When Using Anchor Links On Shopify

Anchor links are a great way to improve navigation, but they can sometimes act strangely. Here is a breakdown of a usual problem and how to fix it:

Issue 1: An Anchor Link That Scrolls To The Wrong Spot

This error happens when you've placed anchor links to go to certain parts of a page. When clicking links within the same page, everything works as expected. But linking to an anchor from another page or directly using the anchor link in the URL takes you to a seemingly incorrect location, often lower down the page.

Explanation:

This problem usually occurs when your website's banner is set or sticky. The browser calculates the anchor link's position based on the visible content on the page, not accounting for the hidden area behind the fixed header.

So, the link might technically jump to the correct section, but the header obscures it.

The solution is temporarily disabling your website's sticky or fixed header feature. If the links now work correctly, the header is likely the culprit.

However, some themes with fixed headers offer built-in solutions to this issue. So, you should contact the theme's developer for more help. They might have an option that works well with your theme.

Issue 2: Mobile Menu Not Closing When Using Anchor Links

When a visitor clicks on an anchor link while the mobile menu is open on a Shopify store, the menu remains open instead of closing automatically. This creates a poor user experience, leaving users with an open menu while navigating to a different page section.

Solution:

You can insert this code into your online store by going to Themes > Edit code > Add the code before adding it to the theme.liquid file and see if it works.

When a link is clicked, the code simulates two clicks:

• The first click targets an element with the ID Details-menu-drawer-container, likely the container for the entire mobile menu. This action typically closes the menu.
• The second click targets an element with the class header__icon within the Details-menu-drawer-container. This step is often necessary to fully close the menu and return to the standard view.

NOTE: The class names used in the code (.menu-drawer__menu-item, #Details-menu-drawer-container, and .header__icon) are placeholders and might need to be adjusted to match your specific Shopify theme.

Issue 3: Broken Or Inaccurate Links

Sometimes, your anchor links might not function as expected, leading to broken links or redirecting to the wrong section of the page.

Causes:

• Incorrect or duplicated ID.
• Code errors in the HTML code affect the anchor link functionality.
• Shopify theme updates can sometimes interfere with custom code, including anchor links.

Solutions:

• Double-check anchor IDs, each anchor has a unique ID, and the link references the correct ID.
• Carefully review the HTML code for errors or inconsistencies in the anchor link implementation.
• Test your anchor links on different devices and browsers to identify any issues.
• Update anchor links after theme updates.

If you follow these steps, you should be able to fix problems with broken or incorrect anchor links on your Shopify store.

Tips For Using Anchor Links In Shopify

Adding code to your page isn't the only way to make anchor links work. To really improve the user experience and maybe even help your SEO, think about these best practices:

Strategic Placement Anchor Links

Because these are jump links, we generally recommend placing your Shopify anchor links in the following locations:

For example, if your pages are more extended, consider adding anchor links within sub-navigation menus to provide additional navigation options.

Create The Shopify Anchor Links Button

According to Copyblogger's blog, CTAs in the form of buttons can attract clicks, as they saw a 45% rise in the number of clicks they received. That's why we recommend add custom HTML code to make anchor links that look like buttons in the visual editor. You can put the following code into place for the liquid code:

NOTE:

• Replace YOUR ANCHOR LINK HERE with the anchor link you want to insert.
• btn btn--add-to-cart btn--secondary-accent means button as the "add to cart" button. You can be creative with how you style your button.

Learn: How to add a "Contact Us" button to Shopify.

If you're uncomfortable with coding or want more professional, quick design options, install EComposer Page Builder. This Shopify drag-and-drop editor lets you easily customize buttons in various sizes, colors, and display positions.

Using Table Of Contents (TOC) Anchor Links

For long-form content, such as lengthy articles or blog posts, we recommend using Table of Contents (TOC) anchor links. A TOC is a live table of contents that lets people quickly go to certain parts of a page.

The guide to adding a Table of Contents to a Shopify Blog is in another of our blogs.

FAQs

How Do Anchor Links Impact SEO?

While anchor links don't directly affect rankings, they improve a website's health, positively impacting results. They can also help search engines understand a page's topic by reinforcing it.

For example, these links can help lower bounce rates by making users quickly find what they're looking for.

Are There Any Limitations To Using Anchor Links On Shopify?

Yes, there are some things you should keep in mind:

• Ensuring anchor links function correctly on different screen sizes and orientations can be challenging.
• Managing anchor links can become intricate for highly complex pages with multiple layers of navigation.
• Users might not discover or utilize anchor links if they are not prominently displayed or explained.

If you know these limits, you can deal with problems more effectively and get the most out of affiliate links on your Shopify store.

Can I Use Anchor Links On Any Shopify Theme?

Anchor links are generally allowed on most Shopify themes. However, the specific implementation might vary depending on the theme's structure and coding.

Key Takeaway

By using anchor links correctly, you can greatly improve the user experience and browsing of your Shopify store. Even though there may be some problems, knowing the basic rules and how to fix typical problems will help you make customer trips go smoothly.

Want to know more about increasing the sales of your Shopify store? Check out our blog for tips and information.