Compatibility:

WebSite X5 Pro

As we have seen, the first thing to do to create an e-commerce is to prepare the catalog of the products that you want to sell (see: How do I set up the product catalog). But now that we have inserted all our products - or at least a part of them - how do we display them on the pages of the site? How do we present them to potential customers so that they can proceed with the purchase?


In this article we will answer this question and we will discover that, in reality, there is more than one way to do it: it is up to you to choose the best method based on the type of project you want to develop.


Alternative ways to present the products of your catalog

It all depends on what you want to achieve, but also on the time you want to invest: you can choose to do everything yourself to have maximum freedom or to rely on the program and save resources. Here are all the possible ways to present the products on your site:

  1. Creating the product pages manually
  2. Using the Product Catalog Object
  3. Using the Product Search Page


As we will see, the use of the Product Catalog Object and the Product Search Page leads to the display of cards and, if desired, of real in-depth pages with the Product Pages. We will therefore also talk about:


Creating the product pages manually

The first thing you can do, of course, is decide to manually create a page for each product in the catalog:

  • Go to Step 3 - Sitemap and enter a page for each product. Try to proceed in an logic way so as to facilitate navigation on the site: perhaps create a Products menu and use the Levels to reproduce the same structure of categories and sub-categories adopted in the catalog.
  • Select one of the new pages inserted and go to Step 4 to proceed with adding the contents. Use the Objects you have available to create the best possible presentation of your product: remember that you can insert text, images, videos, tables, etc. You must try to satisfy any doubts or curiosities that your customers may have.
  • Complete the page by adding the "Buy" button: you can set it through the Add to Cart link (see: How do I create a "Buy" button?). The advice is to put this button in a strategic position and perhaps in more than one point of the page: for example, immediately at the top and then at the bottom of the page. Your goal is to sell!
  • After the page of the first product is ready, take care of all the other pages dedicated to the other products. You should make sure that all the product pages have the same layout: your site will be more coherent and homogeneous.


#tip -Instead of first inserting all the blank pages in the Map and then proceeding to insert the contents of each, you can create a product page, complete it as far as its graphics and contents are concerned, and then duplicate it using the Copy and Paste commands. In this way you will only have to modify the contents that change from one product to another without having to recreate the whole structure from scratch.


The advantage of this solution is the freedom you have in deciding how to create the presentation pages of your products: starting from a blank sheet you can basically do what you want. On the other hand, it is clear that creating all the necessary pages one by one could be a long task, especially if there are many products.  It is then a suitable solution, as long as you don't have too many products.


Using the Product Catalog Object

An alternative that introduces a certain level of automation making work faster is to take advantage of the Product Catalog Object. This Object allows you, in fact, to insert cards in your pages that present the products that interest you in a synthetic but effective way. Here is an example of how you could proceed:

  • Go to Step 3 - Sitemap and add a new page for each product category.
  • Select one of the new pages inserted and go to Step 4 to proceed with inserting the contents. After entering a title and perhaps a short introductory text, insert the Product Catalog Object so that it takes up most of the page.
  • Access the Object settings window and stay in the List section. Use the Select with filters and use the Cateogry filter to select the wished one. Alternatively, use the Manual Selection option to indiviually select the products you want to include.
  • Now go to the Settings section and use the available options to set the graphic style of the cards.
  • Click OK and repeat these steps to create the pages for the other product categories. 


#tip - The Product Catalog Object is versatile: you can use it to create the card for a single specific product as well as for all the products of a category. For more information, see: How to work with the Product Catalog Object


The cards are designed to offer all the essential information about a product: at least name, image / description, price and buy button. In this case you don't have to worry about the number of products: the program automatically creates a card for each product you are interested in and you can quickly develop your project (see: What are Product Boxes and how to customize them).


Using the Product Search Page

In addition to the 2 solutions just seen, you have another very interesting alternative to evaluate: the possibility of inserting a search engine for the products on your site. If you have a lot of products to manage and you want to offer a top shopping experience, this is undoubtedly the path you need to take.

  • Go to Step 3 - Map: among the Special Pages you will also find the E-commerce Cart: Search one. This page is automatically generated by the program: it provides a search field and filters and is structured to display the cards of all the products that meet the set criteria.
  • Select it and click on Edit or double click on it.
  • In the settings window you access, stay in the Search section and activate all the tools you want to make available to your customers.
  • The search tools and filters you've set up form a sidebar that will be displayed on the Search Page. You can define the graphic style of this sidebar using the options in the Style section. All you need to do is select the element you want to modify (Background, Title, Contents) and make use of the settings available for each. 
  • Then access the Settings section and use the available options to set the style of the cards through which the products that meet the search criteria will be presented  (see: What are Product Boxes and how to customize them).
  • Click OK to confirm and go back to the Sitemap.
  • Now select the E-commerce Cart: Search page again and drag it in the Menu section.
  • A page Alias is created: rename it and, if necessary, move it so that it appears correctly on the navigation menu. The Alias automatically keeps the link to the Product Search page.


#tip - Puoi collegare la pagina di ricerca direttamente nel menu di navigazione o creare dei pulsanti per richiamarla. Ricorda che oltre ai filtri standard puoi impostare anche dei filtri personalizzati. Per maggiori informazioni vedi You can link the search page directly in the navigation menu or create buttons. Remember that in addition to the standard filters you can also set custom ones. For more information see: What's the product search page and how to use it and How to create custom filters for the Product Search Page


Another solution: the Product Pages

Both the Product Catalog Object and the Product Search page therefore lead to the automatic creation and display of cards. A card is a box reporting some basic details about a product ( which are entered through the Product Settings window) and where the purchase button is made available. They can be considered as business cards and one page can contain many.


Actually, WebSite X5 is not only able to generate cards but also real Product Pages, i. e. pages (one per product) on which all the information available for a product is reported, including comments left by other customers, insights with any technical details and a gallery of related products.


In order to activate the Product Pages, you need to follow these steps:

  • Go to Step 1 - Settings > Shopping Cart > Products, select the product you want to work on (or add a new one) and click on the Edit button (or double-click on it) so to access the Product Settings window.
  • If you have not already done so, enter all the details you want to provide: name, price, images, description, options, etc.
  • Open the Details section and activate the Product Page option.
  • Repeat these steps for all the Products you want to create a Product Page for. To proceed faster, make a multiple selection of the products using the CTRL or SHIFT keys, open the Product Settings window, set the link to the Product Page and click on the Apply the changes of this section to all selected products option.


The result is that now, when hovering over the product image displayed in a card, a button with an icon of a file is shown in overlay. By clicking on this button or on the card’s title, customers can access the Product Page. You can check it right away by clicking the Preview button and navigating locally through your site’s pages.


#tip - For more information see: What are Product Pages and how to use them


How to link specific Product Pages

The Product Pages are as complete as the pages that you can develop manually (the ones we mentioned exploring the first method) but they have the great advantage of being created automatically and therefore with no waste of time and energy.


This is a fourth option that can be followed as an alternative or in addition to the other three already seen - you can decide to create direct links to the Product Pages.

  • Follow the procedure mentioned in the previous paragraph to activate the wised Product Pages.
  • Select or open the settings window of the item you want to set the link to. It can be, for example:
    • a text → to create a text link;
    • an image → to create a button;
    • a level on the sitemap → to create a menu item.
  • Click on to open the Link window.
  • Select the Shopping Cart action, activate the Show the selected Product Page option and then select the wished Product.
  • Repeat, if necessary, these steps for all the wished links to the relative Product Page.


These are all the possible options:  you have all what you need to present your products in the best way and increase the possibility to close the sale and have success.