Product list

The Product list tab contains websites settings for the layout of the product list. This includes product list views, facets layout and the promotion block design.

Rapido ships with three product list views:

  • List view
  • Grid view
  • Details view

All of these views are enabled by default, allowing the customer to change between product list views as they'd like. You can choose a default list view for your product list, and you can also remove some of the options by unchecking their specific checkboxes with the product list view settings (Figure 2.1).

Figure 2.1 The product list view settings

Each product list view has a group of design settings and hovering settings. Read more about these below.

You can see an example of each product list view here.

You can enable sorting (Figure 3.1). The product list can be sorted by Newest, Price ascending, and Price descending.

Figure 3.1 Enable sorting

The facets view mode setting gives you access to two view modes – vertical facets and horizontal facets. Both vertical and horizontal facets render the selected facets as tags above the product list, from which they can be cleared individually or reset completely.

Vertical facets are rendered as in Figure 4.1.

Figure 4.1 Vertical facets

Horizontal facets are rendered as in Figure 4.2.

Figure 4.2 Horizontal facets

With the open facet groups settings, you can choose how many facet groups you want to have expanded by default in your Filtering section (Figure 4.3).

Figure 4.3 The open facet groups settings

To change the layout of the left side facets, use the Facet settings further down in the Product list tab settings.

The List view settings controls the list and button layout for the List product list view.

You can customize the background and border color (you can choose from a default greyscale) (Figure 6.1).

Figure 6.1 List view settings

For buttons (Figure 6.2), you can show/hide:

  • The Add to cart button
  • The Add to download button
  • The View button
  • The stock and shipping
  • The product number 
  • The favorite button
Figure 6.2 Show/hide buttons for the List view

You can change the border mode (Figure 6.3):

  • Frame lines
  • Around
  • Line
  • None
Figure 6.3 Change border mode for the List view

You can choose between the following two options in the variants dropdown: 

  • Static
  • Selector

The dropdown is found under your general settings for your chosen view as shown on (Figure 7.1).

If selector is chosen as the option, you will be able to click on the different variants e.g. blue, red, green, and then get an updated product image, depending on the chosen variant.

If static is chosen as the setting, it will just display the options available, as a non-clickable feature. The selector option is only available for products shown in list view. 

Figure 7.1 Product list - list view general settings

You can customize the '' View more '' text, by editing the text in the textbox as shown on (Figure 8.1).

  • View more will be enabled by default.
  • If you want to change that, the settings are found under the general settings for your selected view. 
Figure 8.1 View more text modified - List view, general settings

Using the hovering settings (Figure 9.1), you can change the layout for a product in the product list, when you mouse-over the product in frontend. You have the following options when mousing-over:

  • Show outer border with a border color (the hover border is shown independently of what the general border settings are configured to and is placed on top of it)
  • Zoom in on the product image
  • Change product image to alternative image (the next one of the product's images)
Figure 9.1 Hover settings for the list view

The Grid view settings (Figure 10.1) controls the list and button layout for the Grid product list view.

You can:

  • Change the number of columns
  • Hide/show various buttons
  • Hide/show static variants
  • Select the alignment - left, center, right
  • Change background and border color (you can choose from a default greyscale shown below)
  • Change background/border color
  • Change border mode
  • Edit the '' View more '' text 
Figure 10.1 Grid view, general settings

You can change the number of columns shown in the list (Figure 10.2). Choose between two, three, four, or six columns.

Figure 10.2 Change number of columns for the Grid view

You can show/hide the (Figure 10.3):

  • Add to cart button
  • View button
  • Product number
  • Stock and shipping
  • Image
  • Favorite button
Figure 10.3 Show/hide buttons for the grid view

You can enable static variants by clicking on the textbox as shown on below (Figure 11.1).

  • If the option is enabled, the various sizes/colors will appear beneath the price, and display the different variants of the product
  • Since the feature is static, it will just display the options available, as a non-clickable feature
Figure 11.1 Static variants, grid view settings

You can change the border mode (Figure 11.3). Choose between:

  • Frame lines
  • Around
  • Line
  • None
Figure 11.3 change border mode for grid view

You can customize the '' View more '' text, by editing the text in the textbox as shown on (Figure 12.2).

  • View more will be enabled by default.
  • If you want to change that, the settings are found under the general settings for your selected view. 
Figure 12.2 View more text, grid view

Using the hovering settings (Figure 12.3), you can change the layout for a product in the product list, when you mouse-over the product in frontend. You have the following options when mousing-over:

  • Show outer border with a border color (the hover border is shown independently of what the general settings are configured to and is placed on top of it)
  • Zoom in on the product image
  • Change product image to alternative image (configured in the product's settings)
Figure 12.3 Hovering settings, grid view

The Details view settings (Figure 13.1) control the list and button layout for the Details product list view.

You can customize the background and border color as shown on (Figure 13.1). 

Figure 13.1 Details view settings

You can show/hide the (Figure 13.2):

  • Add to cart button
  • View button
  • Product number
  • Stock and shipping
  • Image
  • Favorite button
Figure 13.2 Show/hide buttons for the Details view

Using the hovering settings (Figure 14.1), you can change the layout for a product in the product list, when you mouse-over the product in frontend. You have the following options when mousing-over:

  • Show outer border with a border color (the hover border is shown independently of what the general settings are configured to and is placed on top of it)
Figure 14.1 Hover settings for the list view

You can change the border mode (Figure 15.1). Choose between:

  • Around
  • Line
  • None
Figure 15.1 Border modes, details view

You can enable static variants by clicking on the textbox as shown on below (Figure 15.2).

  • If the option is enabled, the various sizes/colors will appear beneath the price, and display the different variants of the product.
  • Since the feature is static, it will just display the options available, as a non-clickable feature.
Figure 15.2 Static variants - Details view, general settings

You can customize the '' View more '' text, by editing the text in the textbox as shown on (Figure 15.3).

  • View more will be enabled by default.
  • If you want to change that, the settings are found under the general settings for your selected view. 
Figure 15.3 View more text modified - Details view, general settings

With the Left side facets style settings (Figure 16.1), you can customize the design of vertical facets. You can:

  • Add a border to each of the facet group boxes
  • Customize the header font familyweight (dropdown) colorsizeline height, and casing
  • Change the header background color
  • Change the height and background color for each facet group box
Figure 16.1 Vertical facets

To change between vertical and horizontal facets, use the facets view mode setting which is located in the General section in this tab

You can customize the layout of the facet group boxes in the vertical facets (Figure 16.3).

You can add a border with a border mode (1) and color. You can also adjust the box height (2).

Figure 16.3 Configure the border and height of the vertical facets

The price font design, background color and border color can be customized for the product list (Figure 17.1). You can specify the:

  • Font family, weight, color, and size
  • Line height
  • Casing (relevant for currency)
  • Background color
  • Border color
Figure 17.1 Price design settings

Below, you can check Show both price with/without VAT to show a grey label with the price incl./excl. VAT underneath the original price (Figure 17.2). This opposes to the Prices with VAT setting in Ecommerce website settings (in the ribbon bar). So if your prices already have VAT included, the label will show the price without VAT and vice versa.

Figure 17.2 Either shows price with VAT or price without VAT regarding your Ecommerce setting

You can change this setting seperately for the product list and product page.

You can choose to hide the price of your products by enabling the ''Hide price'' checkbox. Your products will then be rendered as shown on Figure 18.1. 

Figure 18.1 Hide price - Product list, price design

You can set the design for the promotion block as well.

The promotion block acts as a display for the individual product group descriptions. Therefore, the content of this block is set up on the Edit group page for each product group (Ecommerce > Product Catalog > "Your shop" > "Your product group").

You can show the information in three different ways:

  • As text only
  • As text and image
  • As a banner

Only text looks like Figure 19.1.

Figure 19.1 Only text design

Text and image looks like Figure 19.2.

Figure 19.2 Text and image design

Banner looks like Figure 19.3.

Figure 19.3 Banner design