+1-757-461-3022 x124

Creating Anchors for Internal Page Navigation

When preparing content for your xTupleCommerce web portal, you may find that anchors are a useful tool to guide users through the navigation of your site. Anchors are links that redirect users to a specific section of a page. Anchors can be used to point to a specific section on the same page or point to a section on another page.

There are multiple steps when creating anchors on your xTupleCommerce site.  

1. Define a structure for the site's anchor names

Make a conscious decision about how you will structure your anchor "class" names. Anchors can be used in a variety of ways, and if you begin using many anchors, you'll want to ensure you have a naming structure that is scalable.  An example structure is [pagenameElementtitle]. For example, if we were on a Support page of a website and that page included information about warranties, we could use an anchor at the top of the page to direct users directly to the warranty section. In this case, you'd create an anchor "supportWarranty".

When designing your anchor name structure, you simply want a structure that can be used over and over by all your team members. Something that is easy to remember. Using targets like "01", "02", "03" or "Support01", "Support02" confuses everyone. Also, you don't want to use special characters like dashes, slashes, astericks, etc. when creating anchor names. Special characters have the potential for breaking the anchor links.

Lastly, you should consider using the CamelCase methodology to separate the elements of the anchor name. CamelCase is the use of a capital letter at the first letter of each word or each element.

2. Set the target - this is setting the target which the link will point to

Setting the anchor is a simple three-step process.


  1. In the contents WYSIWYG, place the cursor in the desired anchor location.
  2. Click the Anchor icon.
  3. Enter your Anchor Name.
  4. And click SAVE.

Here is a sample screenshot of the process:

Once you save the anchor, you should see a small icon of an anchor in the body of content in the WYSIWYG.

3. Set the anchor - this is setting the link at the top of the page

Creating the anchor link is also a simple three-step process, as you can see in the following screenshot:

Setting the anchor is just like creating a link. Only, instead of linking to another page you are linking to an anchor reference. In the anchor reference #supportWarranty, notice that a "#" is added before the anchor name. This is how the system knows you are referencing an anchor and not another page.

Note: For anchor links, you can use any media you typically use for hyperlinks. Text, Images, CTA's on promos, etc.

To link to an anchor located on different page you simply use a path structure. Let's say you want to add an anchor link directly to the Warranty section of Support from the Home page. You would simply use the following path structure: [pagepath#anchorName]. Using our Warranty section of the Support page as an example, that link would point to support#supportWarranty. If you were linking to an anchor located on a different website, the URL would be http://www.domainexample.com/support#supportWarranty.

Imagine the ways in which this could be used. For instance, in an email marketing campaign you could direct your users to very specific sections of pages within your site. With this strategy, you'd be able to track exactly which links users are clicking within your email marketing campaign software. Anchors are a very useful tool for both your team and your customers.

11 users have voted.