Product Listing

Layout

Each line from the layout table defines how many products per row will be shown for a specified maximum width of the products container.

Example
Container width Items per row Spacing Description
800px 4 30px If products container is 601-800px wide (and above), you will have 4 products per row and 30px spacing between adjacent products.
600px 3 20px If products container is 401-600px wide, you will have 3 products per row and 20px spacing between adjacent products.
400px 2 10px If products container is up to 400px wide, you will have 2 products per row and 10px spacing between adjacent products.
Item style

Choose between different visual styles.

Plain No visual separation between different products.
Bordered Products are separated by a subtle border.
Separate Each product is an individual box with background color.
Inner padding Product innner padding. Not available for plain style products.
Exclude padding Product thumbnail goes over product inner padding.
Item hover

Set a different action on product hover.

No action No action on product hover. Default and hover visibility states for all elements are combined. List products have always their item hover set to no action.
Append to visible Append hover to visible elements.
Overlay visible Hover elements overlay visible. The overlay block can have a custom background color and is limited in height to the product’s height.
Flip visible Visible elements rotate to show hover ones. The overlay block can have a custom background color and is limited in height to the product’s height.
Thumbnail hover Set a different action on thumbnail hover. If ‘change’ option is selected, the first image of the additional product images is taken for overlay/flip.
Cart button type Choose between a text link and button. Products in list view mode have their cart button set to button style automatically.
Cart button size Cart button size. This option affects only the size of the button. If you want to modify text style, use font options (global or these of the content block).
Cart button icon Choose your cart icon. Can be left empty, if you don’t want an icon displayed.
Cart button icon size Size of the cart button icon.
Compare button type Choose between a text link and button. Products in list view mode have their compare button set to text style automatically.
Compare button size Compare button size. This option affects only the size of the button. If you want to modify text style, use font options (global or these of the content block).
Compare button icon Choose your compare icon. Can be left empty, if you don’t want an icon displayed.
Compare button icon size Size of the compare button icon.
Wishlist button type Choose between a text link and button. Products in list view mode have their wishlist button set to text style automatically.
Wishlist button size Wishlist button size. This option affects only the size of the button. If you want to modify text style, use font options (global or these of the content block).
Wishlist button icon Choose your wishlist icon. Can be left empty, if you don’t want an icon displayed.
Wishlist button icon size Size of the wishlist button icon.
Elements visibility Choose which element to be shown by default or on hover only. If item hover action is set to ‘no action’, default and hover states are combined. This means that if one of the states is selected the element will be visible. If no state is selected for an element, it will not be shown at all. Products with a ‘list’ list type don’t have a hover state.