Compatibility:

WebSite X5 Evo and Pro


After having set up your e-commerce cart (see: How to create an e-commerce), you need to report on your pages the necessary information and tools to enable your potential customers to check out the products you offer and to place an order.


Instead of manually create the pages to showcase your products, especially if you have many,  you can use the Product Catalog Object to create a real online catalog for your products in just a few clicks. Select the products you want to be displayed in the automatically created Product Sheets, which report the most important details and which enable the users to proceed with the purchase.


How to choose the products to include in a Product Catalog Object

You can present a variable number of products in a single Product Catalog Object. You don't have to establish this number before you start: a product card will be created for each product you add to the list, and each card will be added to the same page.

  • After you have created the Product Catalog in Step 1 - Shopping Cart, go back to Step 3 - Sitemap Creation, select the page to work on and insert a Product Catalog Object in a Cell in the page layout table.
  • Double-click on the inserted object to open the Product Catalog Object > List window.
  • The Category and Product List shows all the products in the e-commerce shopping cart, ordered by Category. Now you can:
    • Click (to tick) each product you want to include in the list.
    • Click on a category to automatically include all the Products in it. If you subsequently add new Products to the Category, these will be automatically added to the Product Catalog Object.


How to define the style of the Product Cards

Every product in a Product Catalog Object is presented on a card created automatically by the Program. You can define the style of these cards:

  • Open the Product Catalog Object > Settings window and choose the display type. For example, if you choose Cover on the left, title and contents on the right, the product's cover picture will be displayed on the left and the information on the product will be on the right in all the cards.
  • Use the options available for indicating how many cards must be shown per row, their height, the size of the cover picture and the margins.
  • Indicate which items in the cards must be displayed, and their graphic settings (font, color, borders and margins). The elements that can be displayed on cards are:
    • card background
    • cover
    • product name
    • description
    • details (such as category, quantity, availability, price, etc.)
    • "Add to cart" button
    • "Add to Wishlist" button
#tip - Many of these elements take on the information defined when setting up the product (see: How to create a product catalog).
  • If you are using the Pro edition, you can complete the product card with ribbons that highlight the new products or any special offers.


The cards created by the Product Catalog Object are a quick and efficient way of presenting the products in your catalog of the online store. Alternatively, you can create the product presentation pages manually, but don't forget to add the "Buy now" button.


How to define the visualization of the Product Cards

These cards are a sort of business card for the products: they report some essential details and the buttons to add the product to the wishlist as well as the one to place the order. Such details may be not enough to convince the Customer though: you can then link a more complete presentation of the product to the card.

  • Go to Step 1 > Settings > Shopping Cart > Products, select the product and click on Edit to access the Product Settings window.
  • Open the Details section
  • If you are using the Pro, please select the Product Page option: the program creates automatically a page reporting all the details of the product. 
  • Repeat these steps for all the products you want to create a Product Page for.


#tip - If you want to save some time, select more products using the CTRL+SHIFT keys and use the option 'Apply changes of this section to all the selected Products' you find on the Details section of the Product Settings window.


  • Go back to the Product Catalog Object > Settings and make sure the Enable ShowBox Link over Image option isn't active.
  • Click Ok and check out the local preview: if you now click on the title or on the image available on a card, you will be redirected to the relative Product Page.


In the Evo edition the Product Page option isn't available. You can still create some pages manually where you report some further details about the product and then, similarly to what we described ago, go to Product Settings > Details and select the Link entry, so to set the link to the page you created. 


A final tip before concluding. If you leave the  Enable ShowBox Link over Image option  on Catalog Object > Settings active, the link to the Product Page (or to the page you have created, if you are using the Evo) will be placed on the card title only. If you click on the image, you will display the images and videos you added for the product in a ShowBox window.