Adding Hyperlinks
SW

Sam Webster

Created Dec 22, 2022

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.

14
    r

Infigosoftware

11 Steps
1

Click on Configuration

Click on  Configuration
2

Click on Settings

Click on Settings
3

Click on General Settings

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.

Click on Storefront URL
5

Click on Save

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

Click on  Content Management
8

Click on Editable Content

Click on Editable Content
9

Click on Edit next to the Header block

Click on Edit next to the Header block
10

Click on Code Mirror Editor from Body text editor

Click on Code Mirror Editor from Body text editor
11

Switch to the Code Mirror Editor

Switch to the Code Mirror Editor
    r

Infigosoftware

3 Steps
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"

"%Store.URL%" Token
13

Navigate to your Content Pages area

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

Navigate to your Content Pages area
14

Click on Edit next to any Content Page

Click on Edit next to any Content Page
    r

Infigosoftware

19 Steps
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.

The URL will be displayed on this page
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.

Click on  Catalogue
17

Click on Products

Click on Products
18

Click on Product Management

Click on Product Management
19

Click on Edit next to your product of interest

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

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

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

Click on  Content Management
25

Click on Editable Content

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.

Click Edit on the Header row
27

Switch to the Content Template Editor

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.

Click on Add Content and click Header Item*
29

Enter a name for the link

This is the text that will appear on your storefront header.

Enter a name for the link
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.

Select a URL target then begin typing the name of your target page in the search box
31

Click on your target page

Click on your target page
32

The URL is automatically populated based on your selection

The URL is automatically populated based on your selection
33

Click on Save and Continue Edit

Click on Save and Continue Edit
    r

Infigosoftware

1 Step
34

This URL will now be available and active on your storefront

This URL will now be available and active on your storefront
Well done!
Create how-to guides like this in a snap. Get Tango now.