With the options available on this window, which is opened when selecting the "E-Commerce Wishlist" Special Page on the Sitemap and clicking on the Edit button, you can define how the Products should be displayed within the Wishlist.
The Wishlist page reports all the Products that Customers added to their Wishlist while browsing your online shop by clicking on the Wishlist button. The Page reports a brief introduction (which you can customize on the Language Content Management window) and a list where each Product is represented by a Card.
 |
| Example for a Product Card on the Search Page |
Product Cards include different elements: a part from the merely graphic ones, others take on the details you defined when setting up the Products using the Shopping Cart |Product Settings window. The elements you can find on the Cards are:
| • | Cover: the first picture of the product in the Image section of the Product Settings window is used here; |
| • | Title: it takes on the Product name; |
| • | Details: this includes the category, product models, availability and the quantity field; |
| • | Price: it reports the information about the Price, possibly displaying VAT and discounts. |
| • | Button: to add a Product to the cart so to buy it; |
| • | Wishlist: to add a product to the Wishlist, namely the list of products customers may be interested in buying later. |
If elements such as the cover or product models are not specified, the information is not included in the card.
As far as the availability goes, both the icon for the Approximate quantity and the number indicating the Available quantity are displayed in the product card.
With the options of the Cards Settings section, you can define the Cards contents and arrangement. Start with the Card Arrangement on the Page, you can choose:
|
Fixed Height: Cards are arranged in a grid. Since all share the same height, the gird looks regular and compact.
|
|
Variable Height: Cards are again arranged in a grid, but the height of each Card varies according to the size of the cover image. Cards, therefore, may not completely occupy the grid cells in which they are inserted: that is why there may be some empty space left between the Cards. This solution is ideal if you want to show one Card per row, or if you want to display cards on single row divided in several columns.
|
|
Masonry: also ion this case, the Card height varies according to the size of the cover image. Still, Cards are not framed in a regular grid but aligned on multiple rows and columns without leaving spaces to compensate for the smaller size of some of them.
|
Once you defined the Card Arrangement, you can configure the way Contents are displayed in the Card. You can choose among:
|
Cover on the left, title and contents on the right
|
|
Title and contents on the left, cover on the right
|
|
Cover at the top, title and contents at the bottom
|
|
Title and contents at the top, cover at the bottom
|
|
Cover as background
|
When you have decided on the display type, you can work on the following options:
| ▪ | Cards per row: how many product cards there are in a single row. |
| ▪ | Rows per page: to set the maximum number of rows to be displayed in the Search Page. |
| ▪ | Card height: the height in pixels of the product cards. The pictures of the products will be resized automatically according to the given height. If the product descriptions are too long to be displayed completely, a scroll bar is added. |
| ▪ | Cards Margin: sets the pixel value of the distance that must be maintained between the cards. |
Once you defined these settings, you can move on to the graphic style of the elements of the Product Cards. According to the Element you select, you will find different options:
| ▪ | Background Color: to define the Card Background and Button. color. With the Color window you can also define the opacity, therefore how transparent or opaque the chosen color should be. This is particularly useful if you choose the "Cover as background" option. In this case, in fact, contents overlap the cover image, and will result more easily readable if you place them is a box which you can set color and opacity for. |
| ▪ | Border: to define the thickness, color, bevel and possible shadow for borders of the Card Background and Button. |
| ▪ | Margins: to set the distance in pixel between the Cover image or the Content and the Card borders, or between the label and the Button border. |
| ▪ | Fit to card: if selected, the cover picture will occupy the entire area of the card, in width and height, If the proportions do not correspond, the picture is centered and cropped. If this option is not selected, the cover picture is adapted to either the width or the height of the available space. |
| ▪ | Effect on mouseover: to be applied to the Cover image. |
| ▪ | Width (%)/Height: they define the space taken up by the Contents with respect to the Card. In case the Contents are positioned to the left or right of the Card, you can define the width in percent of the area dedicated to them. On the other hand, if the Contents are positioned at the top or bottom, or if the Cover is used as a background, you can set the height in pixels of the area they occupy. |
| ▪ | Alignment: to define if the Contents must be aligned left, center or right. |
| ▪ | Visible: the element can be visible or invisible. This option is available for the Title, the Description, the Button and the Wishlist. |
| ▪ | Font Type: this specifies the font, size and style of the text for the Title, the Description, the Details, the Price and the Button. 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: this specifies the color to used for the text of the Title, the Description, the Details and the Button. If you select the Details element, the text color is also used for the line under the Description. |
| ▪ | Show Quantity Field this displays a quantity field in the product card so that the customer can indicate how many items of a product he wants to add to the shopping cart. |
| ▪ | Show Availability: this displays both an icon for the Approximate quantity and the number indicating the Available quantity in the product card. |
|
If you enable the Show Availability option, and there is at least one product which has this type of availability displayed, then the page that contains the Product Catalog Object must have a .PHP extension: use the File Name Format option in the Page Properties | Expert window to do this.
|
| ▪ | Show Price: this displays the product's price, with or without VAT, in the product card. |
| ▪ | End Price / Discounted Price: to define the colors to be used for the end and discounted price. |
| ▪ | Type: specify whether you want to use a Text or an Image as the Button. In the first case, you can use the options to define the text link’s style. In the second case, you need to use the appropriate field to import the Image File to be used. |
| ▪ | 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. |
To hightlight some products more than others, you can add Ribbons to the product card, specifying:
| ▪ | Ribbon Type: you can define rosettes to add to product cards of a "New Product" or a "Discounted Product". |
| ▪ | Image File: you can specify the image to be used for the rosette. Click on the arrow in the field to select an image from the library, or click on the  button (Local File) to import a graphic file (in .JPG, .GIF or .PNG format) of the image you want to use. |
| ▪ | Alignment: you can specify how the rosette is aligned in the product card. |
| ▪ | Width (%): you can specify the width of the rosette as a percentage of the product card's size. |
Finally, you can use the options in the Options section to define:
| ▪ | Enable ShowBox Link over Image: to set on the different images on the Card the link to the corresponding enlarged images. If active, when the mouse hovers over the image in the Card, a button with a magnifying glass icon is displayed in overlay: clicking on this button will allow users to view the enlarged images through the ShowBox window. If a Product Page or a different page has been linked in the Details section of the Product Settings | General window, the the magnifying glass button is flanked by another button with a details card icon: by clicking on this second button, then, users will be able to access the Product Page or the linked resource. |
|
You can customize the style of the Showbox: using the options in Step 2, in the Pop-up window Showbox window, you can define colors, shadows, opacity, entry effects, etc.
|
Read the guides:
