Skip to main content
All CollectionsFAQAdvanced
How do I make an Anchor in Shogun?
How do I make an Anchor in Shogun?

Using the HTML element to jump to content on your Shogun page.

Updated over a month ago

How to Use Anchors on Your Page

Using anchors is an effective solution for guiding users to a specific section of your page.

Step 1: Create Your Anchor

You can create an anchor using an HTML element. Here’s how:

  1. Add this code where you want the anchor to be placed:

    <div id="my-heading"></div>

    Make sure to replace “my-heading” with a unique ID for each anchor.

Step 2: Link to Your Anchor

Now that you have your anchors set up, you can link to them in different ways:

  1. Direct URL: Use the following format to link directly to your anchor:

    https://www.example.com/pages/example#my-heading

  2. Button Element:

    • For same-page anchors, just add #my-heading in the URL field of your button.

    • For anchors on different pages, use the full URL.

  3. Text Element Hyperlink: You can also create a hyperlink in a text element

Why Aren't My Anchors Working?

If your anchors aren't functioning as expected, here are a few things to check:

  1. Unique IDs: Ensure each anchor ID is unique.

  2. Editing Limitations: Anchors won’t work in the editor or page previews, only on the live site.

  3. Active Tabs: Anchors won’t link to content inside inactive tabs.

  4. Page Load Issues: If your page has many images, it may drop users to a higher point because images load as they come into view.

  5. Theme Conflicts: In rare cases, conflicts with your theme may cause issues. If you suspect this, please reach out to our support team at support@getshogun.com.

Did this answer your question?