Compatibility:

WebSite X5 Pro

After setting up the online shop (see: How to create an online shop), you need to include the necessary information and tools on your website pages to allow potential customers to view the products you offer and proceed with their purchase.


To present your products, you can choose to manually create pages with all the necessary information, or, especially if you have many products, you can take use of the Search page: this is created automatically, offers filters and search tools, and provides a summary card for each product.


However, if your goal is to showcase only a selected group of products from your entire catalog, you can use the Product Catalog Object: with this Object, you can decide which Products to include and ensure they are described through cards that summarize the main information and allow for purchase.


Let’s make an example. Suppose you have a farm: in your online store, you sell both fruits and vegetables as well as dairy products. To sell them online, you will have added all the products to the catalog, possibly organizing them into categories and subcategories. Now, if you want to have a page dedicated exclusively to cheeses, you can achieve this very quickly by using the Product Catalog Object.


Let’s see how to proceed to achieve this result:



Set up the Product Catalog and the Page where products posts will be reported

There are some steps that have to be completed before you proceed:

  • First, you need to have a product catalog ready on Step 1 - Settings > Shopping Cart.  For the purposes of this guide, you can also complete the definition of how your e-commerce works later.
  • Then you need to have a Page ready on Step 3 - Sitemap where you are going to display the selected products (in our example: dairy products)

Define the products to be included in the Product Catalog Object

Now, you are ready to start. With a single Product Catalog Object, you can display a variable amount of products: you don't need to know the exact number already. A presentation card will be automatically created for every included product, and it will be displayed on the selected page. 

  • On Step 3 - Sitemap, select the Page in question and add a Product Catalog Object in the Cell you prefer of the page layout grid. 
  • Double click to open the Object you just added to access the settings window, and stay in the List section.
  • Choose if you want to select the articles manually or using categories and filters.
  • If you go for the Selection with filters, you can find the available filters in the Products to be displayed section: Category, Only display new products, Only display discounted products, Only display available products. Select the filters you want to activate. 
  • If, on the other hand, you go for the Manual Selection, you will find the full list of all products ordered by category on the Products to be displayed. Now you need to: 
    • click to select the products you want to include (so that a check mark is displayed).
    • click to select a category to add all the products it includes. In this way, if you update the category the Product Catalog Object automatically updates too.
  • If you want to limit the number of items to be included in the Product Catalog Object from the filtered items, enable the Maximum Number of products option and type the limit number in the appropriate field.
  • Now the sorted products are reported in the Displayed Products list. You can arrange them using the Layout button and choose the kind of layout you prefer: Custom (in this case you freely move the articles with the Move up / Move down buttons), Title, Category, Author, Date and Random (in this case the arrangement changes every time the page is loaded).  In any case, you can decide to apply an Ascending (A->Z) or Descending (Z->A) order.


Define the card graphic style and link

Each item included in the Product Catalog Object is presented through a card automatically created by the Program. Of course, you can completely customize it: you can intervene on the layout of the cards, their composition and even their graphic style. In this specific case, you find all the options to do so in the Product Catalog Object > Settings window.


#tip -  To better understand how to create and customize cards, see: What are Product Cards and how to customize them.