Adding products to your website

Once you have created your products, you then need to add them to a webpage.

You can do this by adding them individually, or by using a product selection list.

You can use a product selection list to only present products of a specific type e.g. only awards categories, or you can add multiple product types e.g. awards categories and table booking products.

In this article


Adding a single product to a webpage

To add a single product to a webpage, go to Website > Pages, and select the page you want your product to appear on.

Select the location you wish your list to appear, and click on +Add Content.

In the window, go to Products, open the menu for the product type you wish to include, and tick the box(es) beside the product(s) you want to add.

When you are done, click Add Selected.


Product Selection List styles

There are three different options when designing your Product Selection List- List, Tiles or Grid.

You can toggle between these styles and choose the one that best suits your preference for the layout of your webpage.   


    • List

Choosing List style means your products will be displayed in a vertical list, with one product per row.

You can choose if the list will be expanded (open) or collapsed (closed) by default.

    • Tiles

Choosing Tiles means your products will be displayed in rows, with multiple products per row.

When you choose this style, you will also choose how many columns are displayed per row, i.e. 3 columns will display 3 tiles per line.

You can choose if the tiles will be expanded (open) or collapsed (closed) by default.

    • Grid

Choosing Grid means your products will be displayed in an even grid, with multiple products per row.

When you choose this style, you will also choose how many columns are displayed per row, i.e. 3 columns will display 3 tiles per line.


Creating a Product Selection List

To begin creating your Product Selection List, go to Website > Pages, and select the page or template you want your list to appear on.

Select the location you wish your list to appear, and click on +Add Content.

In the window, go to Content > Common > Products > +Add Product Selection List.


Add a title, and choose if this title will be displayed on your website above your product selection list.

If you are displaying the title, be sure to align it based on your site configuration.

If you like, provide an optional description.

Then, choose how you would like the products to be displayed, in a List, Tiles or Grid.

If you choose List or Tiles, you can further control if it's possible to expand (open) each product item.

If you choose to allow these controls, you can further determine:

  • If each line item/tile will be expanded (open) or collapsed (closed) by default
  • Whether to close other items when expanding a new item

Next, choose what style of button you would like.

Note 🗒️

Regardless of button choice, product selection lists will include a checkbox as standard, allowing users to select and add multiple products to their basket at once.

There are four options of buttons:

 Product buttons are visible but disabled once checkboxes are selected.

When using the checkboxes, product buttons remain clickable, even if users check several items.

If a user clicks a product button, only that item will be added to the basket.

Any other checked items will be disregarded.

Allows users to select how many items of the product can be added to their basket.

When using the checkboxes, product buttons remain clickable, even if users check several items.

If a user clicks a product button, only that item will be added to the basket.

Any other checked items will be disregarded.

Product buttons are not displayed at all.

The only method of selection is via checkboxes.

Finally, add your chosen products to your Product Selection List.

You can use the Product Selection List to create a list for any of the following products:


You can optionally add a title for each product type to appear on the list.

This is a good option if you are using the list for multiple product types.

Then, add your individual products.

Click on the section Re-use other… under your chosen product type.

Then, select the items you wish to add by using the checkboxes, and click Link selected.

Alternatively, using the link ⛓️button to add products one at a time.


When you are finished configuring your list, click Save.


Adding your Product Selection List to your website

To add your Product Selection List to your website, go to the page you wish for it to appear on.

Choose where you want the menu to appear, and click +Add Content.

In the content window, select Content > Common > Products > Product Selection List, and then open the folder containing your list.

Tick the box beside your chosen item, then click +Add Selected.

Remember to click Save at the end of your page.

Related Articles