Product display

This section will describe how to customize every single product container. What we consider to be a product container is showed in the image below:

Container setup

The first few settings are mentioned to “design” your product container.

  • Product container: With this setting you can set a background color for the container.
  • Product border: Setting this to active will add a small border around your container
  • Product border color: If choosen yes above then you can set the color for the border here.
  • Product info background: This will set a very light background to your product info. So the part under your product image, with title, prices etc.
  • Product shadow on hover: Setting this to yes will add a shadow behind the container when you hover over the container. As seen below:

Products per row

Choose how many products per row you want to show in your shop. Choose between 3 or 4 products.

Product images

This section will setup the images used in the product container.

  • Product images: You have two options here, fill them and with space around. Which you choose depends on what kind of images you use in the setting below (Product images orientation). When you choose rectangle images then choose fill them. Using square images then use with space around them.

Below are two images in different sizes. The left one is rectangle, the right one is square

Below image shows the difference between space around and fill them. Left is a filled image and right has the red space around.

  • Grey product images: With this setting you can give your images a grey background. This will override the default background of your image. The below image had a white background. Activate this setting and your image will turn from a white background to a grey background.

Product labels

In this theme you can set some labels which will be shown in your product containers.

  • Product label color: This is a custom created label in which you can set your own text. This setting will set the color for this label.

How to setup a custom label: To activate this custom label you”ll need to activate “extra data fields”. When you have done that you need to go to a product  in your backoffice. When you scroll all the way down you’ll see three new fields called “data_01, data_02 and data_03”. When you type a text inside data_01 then that will be shown as label.

  • Sale label color: The sale label is a label that will be showed when a product has a discounted price. This is done automatically.
  • Hide custom product labels: Hide/show the custom label
  • Hide discount label: Hide/show the sale label.

Other settings

This section describes all different settings that are not mentioned in previous settings.

The above image will show you what setting will add/remove which numbered item.

  • (1.) Show second image: This setting will load the second image from each product and show that when you hover over the product.
  • (7.) Show stock message: This setting will show a on stock/out of stock message.
  • (5.) Show quantity box: This will add a quantity box where people can add a quatity to be added to the cart
  • (6.) Show add to cart button: This will add a small add to cart button.

Note: You can show the quantity boxwithout anadd to cart button but that will obviously don’t do anything good. The quantity box will be useless then. However showing the cart button without the quantity box will work. Mostly shops who sell large quantites (or B2B) will use this function.

  • (below product image) Quick shop: This function will show a button which will open up a popup. In this popup the full product data will be shown and people can add the product from the same screen they are on right now.
  • (8.) Compare/wishlist buttons: This will add/hide the compare and wishlist buttons.
  • (2.) Brand name: This setting will add/remove the brandname in front off the (3.) product title
Updated on december 23, 2021

Was this article helpful?

Related Articles