Step 3 - Map > The 'E-commerce: Product Sheet Page' window

By working with the WebSite X5, a Product Sheet Page is automatically generated for every product of the online store, where the potential customer can find additional details. Using the options available in this windows, which you can open by selecting the "E-Commerce: Product Sheet Page" entry on the Map and clicking on the Edit button, you can define the structure of the Product Sheet pages, decide if you want to display the related products and possibly activate the buttons to share the page and leave comments.

The window then reports the following sections:

▪

General;

▪

Comments.

Use the option in the Display section in order to define how the Product Sheet Pages need to be structured. You can choose among:

	Gallery on the left, details on the right.
	Details on the left, gallery on the right.

Now you can move on to the Style option, so to define some settings for the different elements:

▪	Thumbnail Height: you can define the height for the thumbnails of the Image Gallery, expressed in pixels.

▪	Width: you can define the Gallery width with a percentage in relation to the Page width.

▪	Height: you can define the Image Gallery height, expressed in pixels.

Now you can decide the Elements that should be displayed:

•	Title: the Product name;

•	Description;

•	Details: namely the Category, the Product Options, the Availability, the Quantity field;

•	Prezzo: it reports the information about the Price, possibly displaying VAT and discounts.

•	Button: to add the Product to the cart so to proceed with the purchase.

•	Wishlist: to add a product to the Wishlist, namely the list of products that can be purchased later.

When you select the Element you want to work on, you will access the available options:

▪	Visible: to decide whether the element should be displayed or not. This options is available for the Title, the Description, the Button and the Wishlist.

▪

Font Type: to specify the text font, size and Style. The menu shows the command for applying the Default Font (defined by the style of the Page Text item in the Text Style window), the list of safe fonts (those which are present on all devices and do not need to be published, and all the Google fonts and web fonts added in the Add web fonts window, which is opened by the Other font types command.

▪	Text Color: to specify the text color.

▪	Show Category: to display the Category the Product is part of, according to what you defined on the Shopping Cart \| Product List window.

▪	Show Quantity Field: to display the Quantity Field which enabled Customers to set the amount of Product they want to add to thecart.

▪	Show Product Options: to display the available Options you defined for the Product on the Shopping Cart \| Product List window.

▪	Show Availability: to display the Approximate quantity icon as well as the number that specify its Available quantity.

If you activate the Show Availability option and at least one Product for which the visualization of this kind of availability is present, the .php extension needs to be set for the page that reports the Product Catalog Object: this can be done with the File Name Format option available in the Page Properties | Expert window.

▪	Show Price: to display the Product price, with or without VAT.

▪	End Price / Discounted Price: to define the colors to be used for the end and discounted price

▪	Type: to define whether a Text or an Image has to be used as Button. In the former case, you can use the available options to define the textual link style, in the latter you need to import an Image File using the appropriate field.

▪	Margins: to set the value in pixel for the margin between the Button label and border.

▪	Add the Product without showing the Cart: this option is available for the Button element and you can use it to give Customers the possibility to order a product without displaying the Cart first.

▪	Color: to specify the color for the heart-shaped icon used to add a Product to the Wishlist.

▪	Add the Product without showing the Wishlist: available for the element Wishlist only, with this option Customers can add the Product to the Wishlist without displaying it first.

The Options box contains options to display or hide the Side Bars:

▪	Display products of the same category: if this option is active, a gallery reporting the Products of the same category is displayed.

You can use the commands in this section to organize comments made by visitors as feedback for the Online shop products.

First of all, you have to select the Let customers add Comments for the Products of your Online Shop.

Then you have to specify the Comment management system that you are going to use, choosing from:

	WebSite X5: this is WebSite X5's built-in system and offers a specific online Control Panel.
	Facebook: this uses Facebook's Social Plug-in to organize discussions and comments.
	Disqus: this is the system offered by Disqus.

According to the chosen Comment management system, you will find different options you can work with.

If you use WebSite X5's built-in Comment management system, you must define the Content Type that website visitors can leave, choosing from:

	Comment and Vote: visitors can write a comment and vote the website.
	Comment: visitors can write a comment, but they can't vote.
	Vote: visitors can vote, but they can't write a comment.

When you select Content Type, you will see the following options in the Comments Settings section:

▪	Vote Style: select this option to define the style of the element that visitors can vote (for example, 5 stars). This is the only option available if you select Vote as Content Type.

▪

Font Type: specifies the font family, size and style of the text. The menu shows the command for applying the Default Font (defined by the style of the Page Text item in the Text Style window), the list of safe fonts (those which are present on all devices and do not need to be published, and all the Google fonts and web fonts added in the Add web fonts window, which is opened by the Other font types command.

▪	Text Color / Button Background / Button Text: define, respectively, the colors to be used for text and graphic elements.

▪	Borders: sets the color and the rounding factor for the borders of the section.

▪	View Order: you can define the chronological order to the published comments, from the most recent to the earliest, or vice versa.

▪	Comments per Page: this defines how many posts are to be displayed in the comments box.

▪	Arrange comments in multiple columns: this option reports the comments on different flanked columns instead of a single one.

At this point, you can proceed with Data Management:

▪	View Mode: you can decide whether comments made by visitors are to be published immediately online, or whether they are to be approved first, using the commands in the online Control Panel.

▪	Enable 'Captcha' anti-spam filter: you can add the Captcha anti-spam filter to the end of the comment form.

Use the command in the Privacy and Security | Security window to choose the captcha system that is to be used.

▪	Show 'Abuse' button: select this option if you want an "Abuse" button added, so that visitors can report objectionable conduct.

Providers usually give write access to all folders on the server: if this is the case, you don't need to give the pathname of the public folder. In all other cases, contact your webspace provider for the complete public folder pathname.

You can check in the WebSite Test section of the online Control Panel whether the folder with write access, and any sub-folders inside i, actually exist and, if so, if you have write access to them (so that you can save the data).

If you aren't going to use the WebSite X5 Hosting, you will need to use the dedicated options available in the Server Settings window to configure the Database connected to the Project

Again if you use the Comment management system in WebSite X5, you can access the online Control Panel to enable notifications to be sent to the Website Administrator every time a Product of your online store gets a new comment.

If you decide to use Facebook as the Comment management system you must define the following settings:

▪	Color: to set up light or dark colors for items in the foreground, in order to have a correct contrast with the background.

▪	Visible Posts: to define the number of posts to be displayed in the comments box.

For more information on how Facebook's social plug-ins work, see https://developers.facebook.com/docs/plugins/

If you decide to use Disqus as Comment management system, you can define the following settings:

▪	Disqus Short Name: this is the short name used to identify the website during the Disqus service setup. All comments received on a website will be automatically associated with the short name and can consequently be correctly loaded and displayed.

For more information on the comment management service offered by Disqus, see http://disqus.com/websites/

Read the guides:

-	What's the Product Sheet Page and how to use it?
-	How to set up the graphic style of the Product Sheet Pages?

The E-commerce Cart: Product Sheet Page window

The E-commerce Cart: Product Sheet Page window