Adding Buttons and Anchor Links to Shopify Pages

Anchor links let customers jump directly to a specific section on the same Shopify page or to a specific section on another Shopify page. They are useful for long pages such as FAQs, size guides, landing pages, shipping pages, return policy pages, and product information pages.

In Shopify, you can create an anchor link by adding an id to the section you want to link to, then creating a link that points to that ID using the #section-name format. You can also style the link as a button using your theme’s available button styling or custom CSS.

Before you begin

Anchor links require small HTML edits to your Shopify page content or theme files. Before making changes, we recommend duplicating your theme or saving a copy of the page content so you can revert if needed.

To duplicate your theme:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit.
3. Select Actions > Duplicate.

Use simple anchor ID names with lowercase letters, numbers, and hyphens.

Recommended:

shipping-info
faq
size-guide

Avoid:

Shipping Info
FAQ!
size guide section

 Spaces, special characters, and capitalization can cause anchor links to behave unexpectedly.

Add an anchor ID to a Shopify page section

1. From your Shopify admin, go to Online Store > Pages.
2. Open the page you want to edit.
3. In the content editor, select Show HTML or the <> HTML button.
4. Find the heading or section you want customers to jump to.
5. Add an id to the heading.

Example:

<h2 id="faq">Frequently Asked Questions</h2>

6. Select Save.

This creates the destination section for the anchor link.

Create an anchor link on the same Shopify page

After adding the destination ID, create a link that points to it.

In the same page content editor, add:

<a href="#faq">Go to FAQ</a>

When customers select the link, the page will jump to the heading with:

<h2 id="faq">Frequently Asked Questions</h2>

For same-page anchor links, use only the # followed by the ID.

Example:

<a href="#size-guide">View Size Guide</a>

This will jump to:

<h2 id="size-guide">Size Guide</h2>

Add a button-style anchor link

You can make an anchor link appear like a button by adding a button class to the link.

Example:

<a href="#faq" class="button">Go to FAQ</a>

This creates a clickable link that points to the section with id="faq".

Button classes can vary by Shopify theme. Depending on your theme, the button class may be different, such as:

<a href="#faq" class="btn">Go to FAQ</a>

or 

<a href="#faq" class="button button--primary">Go to FAQ</a>

If the button does not display with the expected styling, check your theme’s existing button classes or use the theme editor’s built-in button settings where available.

Link to an anchor on another Shopify page

You can also link customers to a specific section on another Shopify page.

Use the Shopify page URL followed by the anchor ID.

Example:

<a href="/pages/shipping#returns">View return policy</a>

This sends customers to the Returns section on the Shipping page, as long as that section has the matching ID:

<h2 id="returns">Returns</h2>

For links from another page, use this format:

/pages/page-handle#section-id

Examples:

<a href="/pages/faq#shipping-info">Shipping Information</a>
<a href="/pages/size-guide#mens-sizing">Men's Sizing</a>
<a href="/pages/contact#store-location">Store Location</a>

Add anchor links to a Shopify navigation menu

You can also add anchor links to your Shopify menu.

1. From your Shopify admin, go to Content > Menus.
2. Open the menu you want to edit.
3. Select Add menu item.
4. Enter the menu item name.
5. In the link field, add the page path and anchor ID.

Example:

/pages/faq#shipping-info

6. . Select Add.
7. Select Save menu.

This allows customers to select a menu item and jump directly to a specific page section.

Add anchor links to a list of page sections

For longer Shopify pages, you can create a simple list of links at the top of the page.

Example:

<ul>
 <li><a href="#shipping-info">Shipping Information</a></li>
 <li><a href="#returns">Returns</a></li>
 <li><a href="#faq">Frequently Asked Questions</a></li>
</ul>
<h2 id="shipping-info">Shipping Information</h2>
<p>Add your shipping information here.</p>
<h2 id="returns">Returns</h2>
<p>Add your return policy details here.</p>
<h2 id="faq">Frequently Asked Questions</h2>
<p>Add your FAQ content here.</p>

This creates a simple table of contents customers can use to move through the page.

Anchor links let customers jump directly to a specific section on the same Shopify page or another Shopify page. To create one, add a unique id to the destination section, then create a link using # followed by that ID.

For same-page links, use:

#section-id

For links to another Shopify page, use:

/pages/page-handle#section-id

To make the link look like a button, apply your theme’s button styling or use a button setting available in the theme editor.

After saving your changes, preview the page on desktop and mobile to confirm the link jumps to the correct section and displays properly with your Shopify theme’s header.