Creating anchor points

On some component configurations, you can set anchors so your customers can jump from 1 point to another on a page.

Every Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. has an anchor ID in the General settings section of the component editor panel, for example:

You can use this ID in another Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. to then be able to link to it.

🚧

If you don't have a link within your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. configuration, or you don't want to use Markdown, this won't work.

So how do you do it? Firstly, navigate to the page version you want to add your anchor point to and click the edit icon, then follow the steps below:

  1. Select the component that you want to jump to, expand the General settings section, highlight the anchor ID, and copy it (use CMD+C, CTRL+C, or the edit menu in your browser)
  1. Click the component that you want to jump from, select the type as Link, then paste in the Anchor ID from step 1

In our example, we're using a tile component. In the Call to Action section, you can see how we'd add the anchor ID there:

Then you can preview your page to make sure it's all working correctly. Once all your checks are done, click Save.

If you want to add the Anchor point to some text within a Markdown component, you can use the Anchor ID like you would a hyperlink, for example, [This is your Markdown copy](this is your Anchor ID)


Did this page help you?