All Collections
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 week ago

If you have ever wanted to direct your users to a certain part of your page, anchors are a great way of doing this.

The HTML element is a great way to add custom anchors into your page. A good example is included below, which can be added into your page anywhere you would like an anchor. Be sure to change my-heading to a unique ID!

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

Once you have your anchors set up within the HTML element, it's time to link to this. There are a couple of ways that you can do this!

  • Open the page using the URL with the anchor attached

  • Add a Button element to your page for users to click on. For same-page anchors, you can simply insert "#my-heading" into the URL field of the button. For linking to an anchor on a different page, you will need to use the full URL.

  • Add a hyperlink to your Text element


Why are my anchors not working?

There are a couple of reasons why your anchors may not be working correctly on your page.

  • Your anchors are not unique - each anchor must have a unique ID

  • Your anchors will not work in our editor, or on page previews - these will work on the live page

  • Your anchors will not link to content inside of tabs that are not currently active

  • Your anchors may drop the user to a higher point in the page if the page contains a large amount of images - since lazy loading only loads images when they come into view, this means that the page height is not fully calculated until all images are loaded

  • In rare occasions, this may be a theme conflict - in which case, please get in touch with our support team who can investigate:

Did this answer your question?