Commands in the Settings section

Step 4 - Pages > Product Catalog Object >

Commands in the Settings section

Previous pageReturn to chapter overviewNext page

The commands in this section allow you to define the style of the product cards that describe the products in the list.


A product card is made up of a number of elements, all of which are set up according to the parameters indicated in the Shopping Cart | Product Settings window:

Cover: the first picture of the product in the Image section of the Product Settings window is used here.
Name of the product,
Details: this includes the category, product models, availability, price, VAT display and the quantity field,
Button: this contains the link to add the product to the shopping cart.

If elements such as the cover or product models are not specified, the information is not included in the card.

If you are working with the Pro edition, both the icon for the Approximate quantity and the number indicating the Available quantity are displayed in the product card.

First of all, you have to indicate the product cards' layout, choosing the display options in the Cards Settings section:

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

Whichever type you choose, the name and/or image that may be included in the product card will be automatically associated with the link, created with the Link (ie Product Page) option in the Product Settings | General window.

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.
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.
Cover size (%): this defines the width of the cover picture with respect to the contents (if it is on the left or the right), or with respect to the card's height (if it is at the top, above or below the product name).
Cover margin / Content margin: these options indicate how much space (in pixels) is to left between the cover picture / contents (name and description) and the card's borders.

When you have defined the above options, you can then set the graphics for the various elements in the cards. Select the Element you want to work on in order to see the available options:

Visible: the element can be visible or invisible. This is not available for the Background or Cover. If the Details element is selected, you can specify whether information such as the Category, Availability and Price is to be shown, or not.
Font Type: this specifies the font, size and style of the text for the Name of the product, the Description, the Details 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 product's Name name, 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.
Background Color: this specifies the color of the Background of the card and Button.
Thickness: this specifies the width of the borders of the Background of the card and Button.
Color: this specifies the color of the borders of the Background of the card and Button.
Rounded Corners: this gives the bevel value for the corners of the Background of the card and Button.
Drop Shadow: this applies a shadow to the Background of the card, setting the color, position, diffusion and size of it.
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.
Show Category: this shows the category that the product was assigned to in the Shopping Cart | Product List window.
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.
Type: specify whether you want to use a Text or an Image as the Button. If you choose Text, you can use the available options to define the style of the link on it; if you choose Image, the program automatically uses the image that you set in the Images section of the Shopping Cart | Options window.
Margins: this sets the value (in pixels) of the margin between the writing and borders of the Button.

In the Pro edition, 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 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:

Add the Product without showing the Cart: when a customer clicks on the Buy button, the product is added to the order, without being automatically redirected to the shopping cart.
Enable Link over the image: this options enables a link to an enlarged version of the various pictures in the product card. These zoomed pictures are shown in the Showbox. If you have created a link in the Product Settings | General window, it will replace this link.

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.


Best practices:


How to work on the Product Catalog Object


How to create an e-commerce shopping cart