Product Layout

  • Category
  • Last modified January 5, 2021

To change the layout how products are shown in your shop, the images and the description is really easy, follow the instructions below.

  1. Navigate through Laborator > Theme Options
  2. Click on Shop Settings
  3. Select Single Page from the tabs
  4. Choose any of the layouts by clicking on the layout thumbnail.

There are three main types of product page layouts, they are

  1. Main Image with Thumbnails Below
  2. Plain Images List and
  3. Sticky Description has the same options as the Plain Images List except the description that will stick to the top until the last image is visible while scrolling.

 

Product Details Options

  • Product Images Column Size — Select between the sizes, as illustrated below.
  • Product Images Alignment — Align your image left or right, which layout is better for your site.
  • Auto-Rotate Product Images* — Set the delay of image switcher in seconds. *This option is available for Main Image with Thumbnails Below layout only.
  • Stretch Images to Browser Edge* — Set Yes or No and the image will start from the edge of the window, depends if you have selected left or right. *This option is available for Plain Images List and Sticky Description layout only.
  • Rating Style — There are three types of ratings: stars, circles, rectangles.
  • Related/Up-sells Product Columns — If there is any related product, set how you want to split them between columns.
  • Related Products Count — Set the number of related products to show, if there is any.

 

  • Sidebar — If the setting is set to Hide Sidebar it won’t show, while you can choose if you want to show it on left or right.

 

  • Image zoom — Hovering on product image(s) will magnify the image, also supported on mobile devices.
  • Lightbox gallery — Each product image will contain a + icon to view all product images on lightbox.

 

Custom image size

From the version 3.3 of Kalium we offer an extra option for the users who want to set custom image size for the product layout page too. The options that we offer are:

  • Custom image size — Option to enable of disable this feature.
  • Image width — Set the image width.
  • Image Height — Set the image height.

 

Share Settings tab

Managing the sharing settings in the shop is the same as in  blog and portfolio, see how you can enable or disable sharing on products and how the social networks can be managed.

 

Other Settings tab

For more informations about the options on this area please read Enable the cart icon article.

 

Image Dimensions tab

For more informations about the options on this area please read Product Image Dimensions article.

 

Product Images Column Size examples

Was this article helpful?

Yes No