Links

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. Select type to show Product Recommendations

You can choose a type to show products on the Product Recommendations here. We have total of 5 types for you to choose.
With each type, the list products show on the Product recommendations will be different.

1.1. By Collection, By Product Vendor, By Product Type

The list of suggested products will be in the same Collection/Vendor/Type as the main product in the product page.
Note: By Collection only works when you go to the product page with the link of the collection in it and Enable 'product url has link collection' in Theme Settings.
Please see this gif to know when By Collection option works:

1.2. Dynamic recommendations

The products will be change and improve with time. You can refer this artical to know more.
This option allows you to select specific products to show. Please follow this guide to config it:
Step 1: Create a menu
  1. 1.
    From Shopify Dashboard > Navigation > Add menu.
  2. 2.
    Enter any Title and add some products which you want to show in Related Product block.
  3. 3.
    Then copy the handle of this menu for the next step.
Step 1: Create a menu
Step 2: Create Tag in your main product
  1. 1.
    From Shopify Dashboard > Products > choose your main product.
  2. 2.
    You need to add tag with permanent syntax: relatedt4_handle of menu. If you don't add a tag with this syntax, the function will not work.
Example: relatedt4_recommend-product-01
Note: With any menu will have different handle
Step 2: Create tag
Step 3: Select By Linklist option to show on Product page
The list products you choose in step 1 will show in Related Product block of Main Product
Step 3: Select By Linklist option

2. 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.

3. 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.

3.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:
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.
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.

4. 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.

[Private offer] Kalles Partner Plan

Don't have to be tech-savvy, you surely can create your powerful and eye-catching store with EComposer - Visual Page Builder app (Our free add-on for Kalles):
  • FREE 100% lifetime (save you $150 annually)
  • Build any essential Shopify pages & Landing page, Sales Funnel Page, Lead pages, etc. tailored for your marketing campaigns, ads.
  • Create advanced sections & add to Kalles with ease
  • Anyone can build pages with live drag-drop editor
  • Publish up to 15 pages
  • 24/7 livechat support
Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for FREE.
Cheers, The4.