Kalles 4.0
Search…
Product Main

1. Configure Product Main option

In Theme Customize, go to Product page (Default product) > Product Main option to configure the product summary settings on the Single Product page.

1.1. Product Layout

  • Product Layout option: You can choose a layout for the Product page here. We have 3 layouts for you to choose: Width 1600px (Default layout) and Fullwidth layout.
  • Enable sticky product information on large screens checkbox: Tick on this checkbox to enable sticky product information on large screens.
You can view some images below to check the product page layouts:
Layout: Default
Layout: Width 1600px
Layout: Fullwidth

1.2. Media

  • Media layout: Please choose a layout for the Product page here. We have total 7 layouts for you to choose.
You can check the product layout in the video below:
  • Media size: Choose a size for the Product featured image here. We have 3 sizes for you to choose: Large, Medium and Small.
Media (Main image size): Small
Media (Main image size): Medium
Media (Main image size): Large
  • Thumbnail left/right size: Choose a size for the Product thumbnail images here. We have 3 sizes for you to choose: Large, Medium and Small.
Thumbnail image size: Small
Thumbnail image size: Medium
Thumbnail image size: Large
  • Media ratio: Choose a ratio for the Product featured image here. We have total of 14 ratios for you to choose.
  • Media ratio size: Choose a ratio size for the product's main image here, we have total of 2 sizes for you to choose. This setting applies only if the media ratio is not set to 'Adapt to media'.
  • Media position: Choose a position for the product's main image here, we have total 10 positions for you to choose.
  • Image click action: Choose an action for the image when you click on it here, we have 2 actions for you to choose: PhotoSwipe popup and Zoom. You can choose None if you don't wanna use action.
  • Zoom type: Choose a zoom type for the product main image (when you choose action Zoom) here. We have 3 types for you to choose.
  • Enable 'zoom image' icon: Tick on this checkbox to enable the Zoom icon.
  • Enable click image show zoom popup: Tick on this checkbox to enable show a popup when clicking on the image.
  • Enable video looping: Tick on this checkbox to enable video looping (when your product media has a video).

1.3. Product Slider

Configure the styles for Product slider in the options below:
  • Use prev/next button checkbox: Tick on this checkbox to show the pre/ next buttons on the product image.
  • Visible: Choose to show the pre/ next buttons always or only when hovering here.
  • Button style: choose a style for the pre/ next buttons here. We have 3 styles for you to choose.
  • Button shape: configure the shape for the pre/ next buttons here. We have 3 shape styles for you to choose.
  • Button color: configure the color for the pre/ next buttons here.
  • Button size: Choose a size for the pre/ next buttons here.
  • Hidden buttons on mobile checkbox: Tick on this checkbox to hide the pre/ next buttons on the image on mobile device.

1.4. Product Tabs

  • Product tabs design: Choose a design for the product tabs here. We have 2 designs for you to choose: Tab and Accordion.
Tab design
Accordion
  • Product tabs design mobile: Choose a design for the product tabs on mobile devices here.
  • Choose a position for the product tabs here.
  • Enable auto-open first tab checkbox: Tick on this checkbox to enable auto-open first product tabs.
  • Product tabs layout: Choose a layout for the product tabs here.
  • Background Color: configure the background color for the product tabs here. This option also supports configuring Metafield, so you can change the background color of Description option for every single product title.
  • Background Color (mobile): configure the background color for the product tabs on mobile devices here. This option also supports configuring Metafield, so you can change the background color of Description on Mobile devices for every single product title.
  • (Frequently Bought Together) Products: Choose products for the Frequently Bought Together option here. You can read more in this article.

1.5. Sticky Add To Cart

  • Sticky mode: You can choose a mode for the Sticky Add To Cart button here. We have 3 modes: Visible on desktop, mobile, Only visible on desktop and Disable.
  • Show sticky add to cart after: We have 2 types for you to choose: Show when scrolls outside the scope of the form and Always show. If you choose Always show, the Add to Cart button will always show at the bottom of the page.
  • Button animation: Choose an animation styles for the Add to Cart button here. We have total of 7 animation styles for you to choose here.
  • Loop time (seconds): Configure the time that you wanna loop the animation here.

2. Blocks in the Product Main option

The Product Main option has total of 24 blocks for you to add to the sidebar:
  • Product Title
  • Product Price, review
  • Description
  • Live view
  • Product Form
  • Size chart, Delivery, Ask
  • Product meta
  • Tab Description
  • Tab Additional Infor
  • Tab Custom HTML
  • Tab Review
  • Pickup availability
  • Product social
  • Trust Badge
  • Brand Image
  • Inventory Quantity
  • Trust Badge
  • Total Sold Flash
  • Delivery Time
  • Text
  • Custom HTML
  • Custom Liquid
  • Tab Custom HTML
  • Tab Custom Liquid
With Image, Custom HTML and Text block, you guys can add more than 1 time to the Product Main option.
When you add each block to the Product main option, the right settings sidebar (of that block) will show, and allow you to configure those blocks to follow what you want. You can see some example images below:
Product Form block
Description block