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. From Shopify Dashboard > Navigation > Add menu.

  2. Enter any Title and add some products which you want to show in Recommendations block.

  3. Then copy the handle of this menu for the next step.

Step 2: Create Tag in your main product

  1. From Shopify Dashboard > Products > choose your main product.

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

2. Heading Options

  • Design heading, Heading align, Heading content: enter and choose a design for the heading here. View the video below to see some designs of the heading:

  • Enter an icon name on heading: Click the Get name icon button to navigate to the The4 Line Awesome icons Library. This option only works for Heading design 6.

  • Subheading: Enter the content that you wanna show on the subheading (below the product recommendations heading).

  • 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, Show product countdown: Tick on this checkbox to enable vendors, countdown.

  • 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, Image size, Image position: config the ratio, size, position for product images.

  • Product content align: choose to align Default or Center for product items.

  • 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: choose to show/hide and config the style for the button

  • Page Dot: choose to show/hide and config the style for the dots

4. Design Options

  • Layout: Choose a Layout for the section here. We have 3 layouts for you to choose: Container, Wrapped Container and Fullwidth.

  • Background color: Configure the background color. In addition, you can adjust Background gradient, Background image

  • Margin/ Padding: Configure margin/ padding on desktop and mobile.

[Private Offer] EComposer Partner Plan

Exclusively for Kalles users, you can get EComposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)

  • Build ANY Shopify pages: Landing page, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.

  • Create advanced sections & add to Kalles with ease

  • Save up to 50 pages/sections

  • 100+ professional, stunning pre-designed templates

  • Anyone can build pages with live drag-drop editor

How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for free

Cheers, The4.

Last updated