WebSite X5 Pro

Product Pages are automatically created by the program by reporting the details you add on the Product Settings window and by organizing them according to a precise way in order to optimize the chances to close the sale.

Here you can find and example of a typical Product Page:

The pages take on most of the template settings,but you can customize some aspects (see: How to set up the graphic style of Product Pages). It is also important to notice that they are already optimized for mobile devices.

Let's go a bit further into details by seeing how a Product Page is structured: if you know where the single piece of information is taken from, it will be easier for you to understand how to prepare and add the necessary contents.

Image Gallery 

The image gallery is composed using the images you enter in Product Settings > Image.

Here, through the Add button, you can import all the necessary images and videos to display the product from different angles, in details or in different settings.

Don't forget that the first image in the list is displayed as a "hero image", in the foreground and large: all the other images, if present, are instead presented as thumbnails and can be seen lager simply by selecting them.

Title and details

The name of the product specified through the appropriate option in the Product Settings > General window is used as the title of the page. Be careful, therefore, not to use only an abbreviation or an identification code: it is better to create a short but meaningful title.

Under the title, the category of the product shown (according to the structure set for the product catalog). Then, depending on whether they have been specified, you will then find:

  • A brief description: the one you add on  Product settings > General. If you want to, you can click on thebutton so that MagicText, the Artificial Intelligence-based text generation assistant available with WebSite X5 Pro (starting from version 2023.2), can write it for you.
  • The availability: this information is taken on according to what you have reported on Product Settings > Availability.
  • The options and sub-options: the list of the available options and sub-options for the products. They can be used for instance to specify the size or the color for the product the customer want to purchase. You can set them on Product Settings > Options.
  • The price: the price you set on Product Settings> GeneralPossible discount you set on Product Settings > Discount are taken into account.
  • The quantity field and the Buy button : these elements are automatically generated, as they serve to the correct functioning of the shopping cart. In case of a minimum order quantity (see option in Product Settings > General), the quantity field already reports the minimum requested amount and a tip explains that it is necessary to comply with this requirement for the order to be accepted and processed.

Further Details

The details seen so far are generally displayed in the upper part of the page, the one visible without needing to scroll. If the customers decide to continue reading the page, it means that they are interested and that they need more or more specific information.

The details section serves precisely to provide all those insights that can be used by the customer to be sure that the product meets his needs.

You create the text using the text editor you can find on Product Settings > Details.

Writing complete descriptions for all the products you have in your catalog can be a pretty long task. Also in this case, MagicText can help you. Click again on the  button available in the editor, describe the text you want to get and it will be generated before your eyes.

#tip - Use tabs. Remember that you can organize the texts in different tabs: you could, for example, propose a long description in the first tab, a technical sheet in the second and a series of FAQs in the third one. For more information, see: How to display text in tabs

Other Products

Since you have the customer's attention, why not taking advantage of it? By the end of the page, your customers should know all about the product they are looking at and may be interested in discovering other similar products.

If you want to display a roundup of other products in the same category as, you must proceed as follows:

  • On Step 3 - Map, select the Special Page "E-commerce: Product Page" and click on the Edit button (or double-click on the page itself).
  • Stay in the General section and activate the Show products of the same category option.

Please note that:

  • You can show up to 50 related products.
  • Only the products of the same category as the selected products for which a Product Page is active are displayed here.
  • You can open a different Product Page by clicking on one of the related products images.


It has been proven that the opinions of other customers have a great influence on purchasing decisions because, after all, we all tend to trust those who have had an experience similar to ours.

In order for your customers to report a review which could convince others to place an order, you need to:

  • On Step 3 - Map, select the Special Page "E-commerce: Product Page" and click on the Edit button (or double-click on the page itself).
  • Go to the Comments section and activate the wished comments management system: the internal WebSite X5 one, Facebook or Disquss.

#tip - Comment management. The way comments are managed is the same as the system used for the Blog and the Comments and Rating Object. For more information see: How to enable / disable comments for blog post

Social Buttons

A customer visiting your Product page could be so impressed to be willing to share it with his or her contact. Take advantage of this spontaneous word of mouth, you should actually use it for your own success: it's free advertising after all!

That's why you should report some social sharing buttons on your Product Page. Follow these steps to use the AddThis service:

  • On Step 3 - Map, select the Special Page "E-commerce: Product Page" and click on the Edit button (or double-click on the page itself).
  • Stay in the General section and activate the Show 'AddThis' button option
  • Use the Button type option to choose the wished graphic style for your buttons among the possible options.
  • Add your AddThis Account in the relative field, so to access the statistics related to this service. 

In this way, you will automatically get the "AddThis" button on each Product Page. By clicking on this button, the customers will see a sub-menu with a list of the most famous Social Networks: if they have an account on one of these social media, thee can select it and share the link to the page with their contacts. 

#tip - AddThis. Click on  to find out more about AddThis. Create an account now: it's free!