Compatibility:

WebSite X5 Pro

Creating an online store, especially when managing a large number of products, can be quite challenging. To save you time while ensuring you get sales-optimized pages, WebSite X5 can automatically create both product presentation cards and full Product Pages complete with all the necessary information.


In this guide, we will focus on the cards: we’ll look at when they are used, how they are generated, and how you can customize their composition and graphic style.


What are product cards

A card is simply a box where basic information about a product is summarized, and in most cases, a purchase button is made available. They are the equivalent of a business card, and a web page can contain many of them.


 

They serve to briefly introduce products to customers, allowing them to get an idea of what might interest them and then decide which offers to focus their attention on.


When they are created

Article cards are automatically created by the software when using:

  • The Product Catalog Object, useful for presenting only a selected group of products from the catalog on a page;
  • The Product Search Page, useful for allowing customers to search through categories and filters within the entire product catalog;
  • The Wishlist Page, useful for allowing customers to add products to a wishlist to postpone their purchase for later.

In all these cases, the selected products are displayed through dedicated cards.


Come sono composte

The cards are composed of the following elements:

  • Background: A colored or transparent background to which a border can be applied.
  • Cover: The image set as the product cover.
  • Contents: The textual part of the card, which includes all the following elements
    • Title
    • Description
    • Details
    • Price
    • "Add to cart" button
    • "Add to wishlist" button


You can, of course, intervene on the composition of the cards and decide that one or more of these elements are not included:

  • Open the settings window (you can do this by selecting the inserted Product Catalog Object, the Product Search Page or the Wishlist page and clicking the Edit button) and, if necessary, go to the Settings section.
  • Use the dropdown menu in Card Style to select the element you want to modify.
  • Click to check or uncheck the Visible option to ensure that the specified element is present or not within the cards.
  • In the specific case of Details, you can decide which information to make available in the cards in a detailed manner.
#tip - Even though the cards are designed for e-commerce, you can ensure they don't include the price or the 'Buy' button. This way, you can still use the cards if you just want to showcase your products without offering them for sale.


What information they contain

To create the cards, WebSite X5 primarily uses the information entered through the Article Settings window accessed when adding a new article or modifying an existing one (Step 1 - Settings > Shopping Cart > Products).


Specifically, the cards report the following elements:

  • As Cover, the first image inserted in the Image section;
  • As Title, the name given to the product in the General section;
  • As Description, the brief description also inserted in the General section;
  • For Details: the category is the one in which the product is eventually included in the catalog; the variants are taken from the Options section; Availability reflects what is set in the Availability section;
  • As Price, the one indicated in the General section.


Of course, if a piece of information is not specified through the Product Settings window, it will not be included in the card.


How to customize them

As mentioned, the cards are automatically created by WebSite X5 using the information entered about the products. By default, the appearance of the cards is determined by the Template you have chosen for the site, but you can customize it.

  • Open the settings window (you can do this by selecting the Products Catalog Object, the Products Search page, or the Wishlist page, and in all cases, clicking on the Edit button) and go to the Settings section.
  • Start by defining how you want the cards to be arranged within the page. Use the Arrangement option to choose between:
    • Fixed Height: the cards are arranged in a grid. Since all cards have the same height, the grid appears regular and compact.
    • Variable Height: the cards are still arranged in a grid, but the height of each varies according to the proportions of the image used as the Cover. The cards may not completely occupy the grid cells in which they are placed, leaving empty space between them. This arrangement is particularly suitable when deciding to display a single card per row or when planning to display on a single row divided into multiple columns.
    • Masonry: in this case, the height of the cards varies according to the proportions of the Cover image. The difference from the previous arrangement is that the cards are not arranged in a regular grid but aligned in multiple rows and columns without leaving spaces to compensate for the smaller sizes of some of them.
    • SlideShow: (available only for the Products Catalog Object) the cards have equal height and are displayed in a single row within a slideshow, complete with navigation buttons.
  • At this point, you can decide how the different elements within the cards should be arranged. Use the Contentsoption to choose between:
    • Cover on the left, title and content on the right;
    • Title and content on the left, cover on the right;
    • Cover at the top, title and content below;
    • Title and content at the top, cover below;
    • Cover as background.
  • In general, you can also define the number of Cards per row and the maximum number of Rows per page. If the expected number of products exceeds this, pagination will be introduced.
  • If you wish, modify the Height of the cards. Keep in mind that based on this parameter, the images associated with the products will be resized. Regarding the texts, if they are too long, a scrollbar will be displayed.
  • To enhance the appearance of the page, you can also adjust the Margins between the cards.
  • Finally, you can address the elements that make up the cards: use the menu in Card Style to select the element you want to act on. Based on the selected element, you can use different options, such as color, font, margins, and effects.


How to apply ribbons

If you have new products or discounted products, you can highlight them by placing a badge on their cards.


First, you must have already defined which products are new or discounted:

  • In the catalog creation phase (at Step 1 - Settings > Shopping cart > Products), create a new product or modify an existing one to access the Product Settings window.
  • For a product to be considered "new": stay in the General section and activate the option Highlight the Product as 'New'.
  • For a product to be considered "discounted": go to the Discount section and apply a fixed or percentage discount (see: How to set a discount on a single product)


Once the products are set, you can return to work on the cards:

  • Open the settings window (you can do this by selecting the Products Catalog Object, the Products Search page, or the Wishlist page, and in all cases, clicking on the Edit button) and go to the Settings section.
  • In the Ribbons section, choose the Type of Ribbon you want to apply: New Product or Discounted Product. 
  • Choose the image you like best for the badge: you can use one of the proposed ones or import the Image File you prefer.
  • Finally, define the Alignment and the Width of the badge relative to the card.


How to manage the links

The cards are designed to provide essential information about the Products and facilitate customers' purchasing operations. Therefore, they can contain various links. Here’s how you can manage them:

  • 'Add to Cart' Button: this is one of the elements that make up the cards. As mentioned, you can select it from the list of elements and, through the available options, decide whether to keep it or not (through the Visible option) as well as customize it graphically. You can also ensure that on click, the Product is added directly to the ordered items without first going through the Cart page (through the Add without showing the Cart option).
  • 'Add to Wishlist' Button: similar to the 'Add to Cart' button. In this case, you can also decide whether to have it or not within the cards (again through the Visible option), set its color, and use the option Add without showing the Wishlist.
  • Link to Image Gallery: images are important for allowing Customers to evaluate a Product. When you add a Product (at Step 1 - Settings > Shopping cart > Product > Product Settings > Image), you can import as many images as you want: the first one is the one displayed directly on the card; all the others are used to create a gallery. If you activate the option Activate image display in ShowBox present in the Settings window, hovering over the image on the card will display a button with a magnifying glass icon: by clicking this button, Customers can view the gallery with all the images provided for the Product.
  • Link to Product Detail Page: the card can be an excellent way to entice Customers to learn more about the Products. If you set up the creation of Product Detail Pages (at Step 1 - Settings > Shopping cart > Product > Product Settings> Details), hovering over the image on the card will display a button with a tab icon: by clicking this button, Customers can view the in-depth Product Detail Page. In any case, the link to the Product Detail Page is also active on the Title of the Card.