Kalles 4.0
Search…
Product Recommendations
In Theme Customize, go to the Product page (Default product) > Product Recommendations option to configure the Recommendation Product in the Single Product page.
  • Show product recommendations checkbox: Tick on this checkbox to enable the product recommendations option below the Product Description.

1. Heading Options

  • Design heading: Choose a design for the product recommendations here. We have 14 designs for you to choose. View the video below to see some design of the product recommendations heading:
  • Heading align: Configure alignment for the Product Recommendations heading here. You can choose align Left, Right or Center.
Heading align: Center
Heading align: Left
  • Heading content: Enter the string that you wanna show on the product recommendations heading here. Example: You may also like. This option also supports configuring Metafield, so you can change the product recommendations heading for every single product by clicking the Connect Dynamic Source button.
  • Enter an icon name on heading: you can get an icon on Line awesome and paste the name of the icon here, it will show on the product recommendations heading. Click the Get name icon button to navigate to the The4 Line Awesome icons Library. This option also supports configuring Metafield, so you can change the product recommendations heading icon class for every single product by clicking the Connect Dynamic Source button. This option only work for Heading design 6.
  • Subheading: Enter the content that you wanna show on the product recommendations subheading (below the product recommendations heading) here.
  • Space bottom (px): Configure the space bottom for the product recommendations heading here.

2. General Options

  • Product item design: Choose a design for the product recommendations here. Please check the video below:
  • Show product vendors checkbox: Tick on this checkbox to enable product vendor on the Product option.
  • Show product countdown checkbox: Tick on this checkbox to show product countdown on loop.
  • Maximum products to show: Configure the maximum products that you wanna show on the product recommendations option here.
  • Select type to show: Choose a type to show products on the product recommendations section here. We have total of 5 types for you to choose.
With each type, the Product show on the Product recommendations option will be different.
Product recommendations sort by Collection
Product recommendations sort by Vendor

2.1. Options Image Products

  • Image ratio: You can choose the Image ratio for the Product recommendations image here. Change the image ratio to see the image layout change. Check the image below to see all ratio images.
  • Image size: This option allows you to choose to adjust the image size following the Image ratio. Image size Auto: The ratio will keep the height of the image and the Image size Full: the ratio will cut some parts of the image.
  • Image position: Configure the position of the product image here. The Kalles theme has 10 positions for you to choose, you can see in the image below:
  • Product content align: Configure alignment for the product content on the Product recommendations option here. You can choose to align Default or Center.
  • Items per row: Configure the number of products that you wanna show per row on the Product recommendations option here
  • Space horizontal/ vertical items (Desktop & Mobile): Configure the spacing horizontal/ vertical items on Desktop & Mobile here.
When you choose the Layout design is Carousel for the Product recommendations option, you should configure the style of the Product recommendations option in this part.
  • Enable loop: Tick on this checkbox to enable loop feature (auto play infinite scroll) for the Product recommendations option.
  • Autoplay speed in seconds: Configure the number of seconds that you wanna loop the Product recommendations here.
  • Pause autoplay on hover: Tick on this checkbox to enable the feature: Stop auto-play carousel when hovering over the Product recommendations products.
Please check the GIF image below:
2.2.1. Prev next button
  • Use prev next buttons checkbox: Tick on this checkbox to enable the prev next buttons on the Product recommendations option.
  • Visible: Configure the status of the prev next buttons here. You can choose always show or only when hover.
  • Button style: Choose a style for the prev next buttons here, we have 3 styles for you to choose.
  • Button shape: Choose button shape style for the prev next buttons here, the setting of this option will not apply for the button style: Simple.
  • Button color/ size: Configure the color and size for the prev next buttons here. We have 5 color styles and 3 sizes for you to choose.
  • Hidden buttons on mobile checkbox: Tick on this checkbox to hide the prev next buttons on mobile devices.
2.2.2. Page Dot
  • Use page dots checkbox: Tick on this checkbox to enable page dots on the Product recommendations option.
  • Dots style: Choose s style for the page dots on the Product recommendations option here.
  • Dots color: Configure the color for the page dots option here. We have 5 color styles for you to choose
  • Enable dots round checkbox: Tick on this checkbox to enable the page dots round style on the Product recommendations option.
  • Dot between horizontal: Configure the space between page dot horizontal here.
  • Hidden dots on mobile checkbox: Tick on this checkbox to hide the page dots on mobile devices.

3. Design Options

  • Layout: Choose a Layout for the Product recommendations option here. We have 3 layouts for you to choose: Container, Wrapped Container and Fullwwidth.
  • Background color: Configure Background color for the Product recommendations option here.
  • Background gradient color: Configure Background gradient color for the Product recommendations option here.
  • Background image: If you wanna use custom background image for the Product recommendations option, please upload an image here.
  • Margin/ Padding (Desktop & Mobile): Configure margin/ padding for the Product recommendations option here.