Adding 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.

Infigosoftware

1. Click on Configuration
2. Click on Settings
3. Click on General Settings
4. 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.
5. Click on Save
6. 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.
7. Click on Content Management
8. Click on Editable Content
9. Click on Edit next to the Header block
10. Click on Code Mirror Editor from Body text editor
11. Switch to the Code Mirror Editor

Infigosoftware

12. "%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"
13. Navigate to your Content Pages area
We will take a look at where to find the URL's for your Content Pages.
14. Click on Edit next to any Content Page

Infigosoftware

15. 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.
16. 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.
17. Click on Products
18. Click on Product Management
19. Click on Edit next to your product of interest
20. Click on View product page
21. 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
22. The Product ID which drives the URL can also be found at the very end of the edit product screen
23. Next, we will see how to build our URL's using the Content Template Editor
24. Click on Content Management
25. Click on Editable Content
26. 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.
27. Switch to the Content Template Editor
28. 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.
29. Enter a name for the link
This is the text that will appear on your storefront header.
30. 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.
31. Click on your target page
32. The URL is automatically populated based on your selection
33. Click on Save and Continue Edit