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 in Figure 7.1.

If selector is chosen, 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, 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 (Figure 7.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 7.2 View more text modified - List view, general settings

Using the hovering settings (Figure 7.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 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 7.3 Hover settings for the list view

The Grid view settings (Figure 8.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 8.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 8.2 Change number of columns for the Grid view

You can show/hide the (Figure 8.3):

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

You can enable static variants by clicking on the textbox as shown on below (Figure 9.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 9.1 Static variants, grid view settings

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

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

You can customize the "View more" text (Figure 10.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 10.2 View more text, grid view

Using the hovering settings (Figure 10.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 10.3 Hovering settings, grid view

The Details view settings (Figure 11.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 11.1). 

Figure 11.1 Details view settings

You can show/hide the (Figure 11.2):

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

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

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

You can enable static variants by clicking on the textbox as shown in Figure 12.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 12.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 12.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 12.3 View more text modified - Details view, general settings

Using the hovering settings (Figure 13.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 13.1 Hover settings for the list view

With the Left side facets style settings (Figure 14.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 14.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 14.3).

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

Figure 14.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 15.1). You can specify the:

  • Font family, weight, color, and size
  • Line height
  • Casing (relevant for currency)
  • Background color
  • Border color
Figure 15.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 15.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 15.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 16.1. 

Figure 16.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 17.1.

Figure 17.1 Only text design

Text and image looks like Figure 17.2.

Figure 17.2 Text and image design

Banner looks like Figure 17.3.

Figure 17.3 Banner design