Anchor Links Overview

Anchor links (or jump links) are hyperlinks that navigate to specific sections within the same webpage. They enhance user experience by enabling quick navigation across long content.

An anchor link includes:

• Anchor: A unique id assigned to an HTML element.

• Link: A URL fragment using #id to jump to the anchored section.

Example:

Common uses:

• Table of contents

• Scroll-to-top buttons

• Call-to-action targets

• Landing page navigation

Anchor links also support accessibility and improve content structure for SEO. They are supported across all major browsers as a core HTML feature.

Using Anchor Links In Your Storefront

Implementing anchor links in your storefront is accomplished using the Link element, assigning the element ID to the URL.

In this example, we are adding a link to the item description that goes to the “Care Instruction” headline element further down the page.

Steps

So, we first edit the storefront into the Visual Builder, then scroll down and highlight the “Care Instructions” headline element, then click the settings (“sprocket”) icon.

Then, in the settings panel, we triple click on the headline ID to highlight it then use the keyboard shortcut CNTL+C to copy it:

Open

After copying the element ID, we close the settings panel and then scroll up to the item description and click the “Pencil” icon to open the text element editor.

Next, we add our hyperlink, and in the link editor we paste the HEADLINE ID into the URL field, then click the INSERT button, then save the text block to close the editor:

Open

Finally, we save the changes to close the Visual Builder:

Open

After Saving, click the EXIT button to exit the Visual Builder.

Open