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.

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:

Background;
Cover: the first picture of the product in the Image section of the Product Settings window is used here;
Name of the product;
Description;
Details: this includes the category, product models, availability, price, VAT display and the quantity field;
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.

Both the icon for the Approximate quantity and the number indicating the Available quantity are displayed in the product card.

The first thing you can do to define the Card style is to choose the layout you prefer among the ones reported in the <%S4_OBJPRODUCTLIST_IMTCARDLAYOUT%:

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.

The Card Style can also be defined using the following options:

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 Product Options: show the Product options in the card.
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 in the product card.
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.
Margins: this sets the value (in pixels) of the margin between the writing and borders of the Button.
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.

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 (.JPG, .GIF, .PNG.) to be used for the rosette. Clicking triangular button will take you to a library of predefined rosettes. Alternatively, you can click on the button  to choose a file saved locally or on the button to search through the resources provided by the Online Libraries.
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 ShowBox Link over 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 Details section of theProduct 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.

 


Read the guides:

-

How to create a e-commerce

-

How to work with the Product Catalog Object