Compatibility:

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) and Agency, 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> General. Possible discount you set on Product Settings > Discount are taken into account.
  • The quantity field, the Wishlist button and the Buy button: these elements are automatically generated. 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.


#tip - You can decide whether to display one or more of these elements on the Product Pages by using the available options in the E-Commerce: Product Page window > General. Fore more information, see: How to define the graphic style of the Product Pages


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.


Reviews

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!


#tip - Discontinuing AddThis. WebSite X5 used to make AddThis available for creating a bar with sharing buttons. Since May 31st, 2023, however, Oracle decided to discontinue all AddThis services. If you have used AddThis on the pages of your Blog, we suggest you to remove it.  


There are many alternatives to AddThis, such as ShareThis. ShareThis is a free service that offers many solutions to create sharing tools. Let's now see how to use it to create a sidebar with sharing buttons which stays visible when scrolling down the page.

  • Access ShareThis.
  • Select the ShareThis tool you want to use: in our case, we will choose Sticky Share Buttons.
  • Now you can customize the buttons choosing the social media you want to suggest, as well as the button size and shape. 
  • Now click on Next and proceed with the account registration. 
  • The guided procedure offers many options: stay in the HTML section. 
  • Copy the custom code provided, which you will have to add in the HEAD section. 


Now that you have the necessary code, you can go back to WebSite X5:

  • Open your project, go to Step 3 - Sitemap, select E-Commerce: Product Sheet Page and click on theProperties button.
  • Go to the Expert section and select the Before closing the HEAD tag option. 
  • Paste (CTRL+V) the code you got from ShareThis in the appropriate field. 
#tip - ShareThis. ShareThis sharing buttons are free of charge, easy to customize and optimized for mobile. Apart from the ones mentioned here, you will also find other sharing tools: follow the guide to use them, connect your domain so to access the specific control panel. You will, among other things, be able to access usage statistics to find out which content is attracting the most interest from your audience.