Create a Link to Scroll to a Specific Section on Your Page

Have you ever clicked on a hyperlink on a website and noticed the page smoothly links to a specific part of a page? That’s known as an anchor link. An anchor link enables you to guide visitors to a particular section on your site effortlessly, eliminating the need for manual scrolling and enhancing the overall user-friendliness of your online store for increased conversions.

With GemPages, you can easily create a link to scroll down to a specific spot using button, image-based, and text-based elements. This article will guide you through the process.

Before Linking: Find GemPages Section ID

Before we begin, it’s crucial to understand how to get a section ID to ensure your link scrolls down to the right spot.  Unlike in Editor version 6, Editor 7 allows you to find only the section’s ID, not the individual element’s ID. Therefore, you need to obtain the section’s ID that includes the element, not its ID. For example, as shown in the screenshot below, you can only obtain the section ID for Section 5, not the ID of the Product Images element within that section.

To find the section ID, just hover over the section you want, right-click it, and choose “Copy class.” Now, replace the “.” in the class with “#” to get your Section ID. For example, if the class you copied is “.gp0XsMH_MS,” your section ID would be “#gp0XsMH_MS”. You can use this section ID to create an anchor link in the next part of the article.

How to Make an Anchor Button

Please follow these steps to make a button or image that users can click to scroll down to a specific part of your page. These instructions apply to the Button element but can also be used for the Hero Banner and Image elements.

Step 1: Go to Shopify Admin > Apps and select GemPages Builder to access GemPages Dashboard. Navigate to the Pages section and choose your preferred template to access the Editor.

Step 2: Drag a Button element onto your page.

Step 3: Click the button element to reveal the configuration on the left sidebar. Select the Pick Link button; a Link picker window will pop up.

Step 4: In the new window, paste the Section ID of the destination into the “Custom URL” box.

Alternatively, you can select the “Scroll To” tab and choose the destination of the list underneath.

If you have difficulty locating the right destination section, please try to rename the section by clicking on the Pencil icon next to the section name.

After that, you can quickly find the preferred section on the list. 

Step 5: Hit the blue “Save” button. Next, hit Save and Publish to check the result on the live page.  

How to make a text to link to a specific part of a page

Step 1: In the GemPages Dashboard, open your template and enter the Editor.

Step 2: In the Editor, drag a text-based element onto your page, e.g., a Heading element.

Step 3: Select the text where you want to add an anchor link, triggering the inline text panel for further customization.

Step 4: Click the chain icon to reveal a Custom URL field.

Step 5: Paste the Section ID of the destination into the field and click on “Link to this URL.”

Step 6: Save and Publish the page to check for the result on your live page.

And that’s it! While creating a link to scroll down on your page might involve complex coding, GemPages simplifies the process with just a few easy clicks.