How to Create Page Anchors in Shopify

How to Create Page Anchors in Shopify

Objective:

This article will show you how to create anchor links to any section of your Shopify site. Allowing you to utilise this for buttons, links, or any other elements that require direct linking.

Video Guide:

Key Steps

  1. Open the webpage where you want to create an anchor.
  2. Right-click on the element you want to link to and select "Inspect" to open the inspect element tool.
  3. Locate the ID of the element by clicking on the div ID (not the class or style).
  4. Copy the ID.
  5. Edit the URL of the webpage by adding a "#" at the end of the URL followed by the copied ID at the end.
  6. Then copy the edited URL 

This link should now send people directly to the sections of your page you copied the ID from.

Example:

Your links should look like this: 

(Page URL)#(Content ID

https://www.kozler.com.au/#shopify-section-template--22392514937136__multicolumn_BHrnRwhttps://

Notes

  • Ensure to only use the ID of the element for creating anchors.

  • Double-check the copied ID to avoid errors in linking.

  • Test the anchor link to confirm it redirects to the intended content.

 

 

Leave a comment

by Zachary Kohler – May 28, 2024