Sam Webster
Created Dec 22, 2022Adding Hyperlinks
In this tutorial, we will learn how to place hyperlinks onto our site. We will take a look at using both the Code Mirror Editor and the Content Templates, for which we have a slightly different method.
To begin, we will see how to set the default storefront URL, which drives the %Store.URL% token used throughout the site.
Click on Configuration

Click on Settings

Click on General Settings

Click on Storefront URL
Enter the URL of your storefront here. This could be the infigosoftware URL, or an alternate binding that you have set up for this storefront.
This is an important setting to utilise, as it will drive construction of hyperlinks throughout your site, whether you choose to use either HTML code editors or our content templates.

Click on Save

Next, we will see how to apply hyperlinks to our storefront content
Begin by navigating to an Editable Content block. In our example, we will choose the header.
Click on Content Management

Click on Editable Content

Click on Edit next to the Header block

Click on Code Mirror Editor from Body text editor

Switch to the Code Mirror Editor

"%Store.URL%" Token
This token links directly to the Storefront URL setting we set earlier, meaning we can create dynamic URL's in our HTML code.
You are able to hard-code URL's by simply typing the complete URL here, however any change in your storefront URL would mean changing each entry individually.
Navigating to specific areas of your site can be achieved by simply typing a suffix to this token.
For example, if our Storefront URL is set to "training.infigosoftware.com/storefront/", we could access a particular product by inputting similar to the following:
"%Store.URL%p/productID"

Navigate to your Content Pages area
We will take a look at where to find the URL's for your Content Pages.

Click on Edit next to any Content Page

The URL will be displayed on this page
For newly created Content Pages, the URL will not be generated until you save the page for the first time.

Click on Catalogue
Product or category URL's are best identified on the product landing page themselves. Next, we will navigate to a product of interest and identify it's URL.

Click on Products

Click on Product Management

Click on Edit next to your product of interest

Click on View product page
You will be taken straight to the product landing page on your storefront, where the URL can be directly taken from your browser's address bar

The Product ID which drives the URL can also be found at the very end of the edit product screen

Next, we will see how to build our URL's using the Content Template Editor
Click on Content Management

Click on Editable Content

Click Edit on the Header row
In this example, we will look at adding hyperlinks to our header, however the same methodology can be applied to any of the Editable Content blocks or Content Pages.

Switch to the Content Template Editor

Click on Add Content and click Header Item*
Content Templates operate as a series of nested blocks, allowing you to build up detailed site content without the need for direct input of any HTML.
Some of the available content blocks are designed to include URL search and input, such as buttons or header items.
They have a specific interface which makes identifying your required URL extremely easy.

Enter a name for the link
This is the text that will appear on your storefront header.

Select a URL target then begin typing the name of your target page in the search box
The drop down lets you select between different URL targets, such as a product search, category search or content page search.
Once an option is selected, a search box will appear, allowing you to perform a search of your selected content.

Click on your target page

The URL is automatically populated based on your selection

Click on Save and Continue Edit

This URL will now be available and active on your storefront
