Jump Link: jump to a different location on the same page
In This Article
Create a Jump Link
There are two parts to creating jump links: Identifying the starting point & Identifying the destination.
Step 1: Identify the Starting point
To set this up, the piece of HTML you want the link to start from has to be wrapped in an anchor tag like this:
<a href="#jump">Click here to jump to a different part of the page</a>
In that example, the customer clicks 'Click here to jump to a different part of the page' and is taken somewhere else.
Step 2: Identify the destination
Where you want the customer to be taken to is defined by wrapping the corresponding HTML in anchor tags like this:
<a id="jump">Jump link destination</a>
Note the '#' in the starting anchor
Note the 'id' in the destination anchor
Example 1: Jump link on Home Page
Say we want a the Subheading in our 'Image with text overlay' section on our homepage to jump to the homepage's 'Featured collection' section.
First we need to find the code for subheading in the image-with-text-overlay.liquid (by going: Online Store > Themes > Actions > Edit HTML/CSS > Sections > image-with-text-overlay.liquid)
There we will wrap it in the anchor tags as described above. For example:
Next we set where the link goes to. In this case we want it to jump down to the Featured collections section.
So we find the corresponding template file: featured-collection.liquid, also in the Sections folder.
Wrap the beginning of the code for this template in our corresponding anchor tags, for example:
Example 2: Jump link within Custom Page
Let's say you are building a custom page by going to Online store > Pages > Add page.
Using the '[<>] Show HTML' button.
Here is very basic HTML example:
The top link above would take you to a lower spot on the page.
Jump link: different page
The above anchor link only works when you are jumping to a specified spot on the same webpage.
If you want a link to jump a specific location on a different page, you'll need to replace #jump with the full URL for the page, similar to:
<a href="https://shopify.ca">Click here to jump to Shopify's website</a>