The Guide To Using Componentized Pages

Navigation Anchors And Navigation Bar

Navigation anchors allow you to create a navigation bar with links that scroll down to component on the page when clicked on. They also allow you to create a button that scrolls down to a component of the page.

Navigation Anchor

Go to the component on the page you want the nav bar or button to scroll to, then add a navigation Anchor.

Title: This text will appear later on if you link to the anchor from a navigation bar

Button That Scrolls To Navigation Anchor

After creating your anchor, on the component you want to scroll to, you can create a button anywhere else on the page. Complete these steps

  1. Under Action select "Navigation Anchor".
  2. Under Target Navigation Anchor, select the one that you added to the component this button should scroll to.

Navigation Bar

Once you've created anchors, you can create a navigation bar that scrolls to the components.

If the navigation is at the top of the page, it will stick to the top bar immediately. If the navigation bar is lower on the page, as soon as the user scrolls down to the navigation bar, it will then stick to the top of the page.

Navigation Anchors: Assuming you have added navigation anchors to multiple components on the page, select them here.

Background Color: You'll generally want to match the color of the top navigation bar of the page (usually either white or the page category color).

CTA Button: You can add a cta button here.

Show Price: If the page has a product assigned, you can have it display the price next to the CTA button here.

Navigation Anchor 1

Navigation Anchor 2

Navigation Anchor 3

Navigation Anchor 4