Product Recently Viewed

In Theme Customize, go to the Product page (Default product) > Product Recently Viewed option to configure the Recently Viewed Product in the Single Product page.
Show product recently viewed checkbox: Tick on this checkbox to enable the product recently viewed option below the Product Description.
1. Heading Options
Design heading: Choose a design for the product recently viewed here. We have 14 designs for you to choose. The designs title of the product recently viewed option and other heading options is the same, so you can view the video below (Product recommendation option) to see some designs of the heading:
Heading align: Configure alignment for the Product recently viewed heading here. You can choose to align Left, Right or Center.
Heading align: Left 
Heading content: Enter the string that you wanna show on the product recently viewed heading here. Example: Recently Viewed Products. This option also supports configuring Metafield, so you can change the product recently viewed 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 recently viewed 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 recently viewed heading icon class for every single product by clicking the Connect Dynamic Source button. This option only works for Heading design 6.
Subheading: Enter the content that you wanna show on the product recently viewed subheading (below the product recently viewed heading) here. 
Space bottom (px): Configure the space bottom for the product recently viewed heading here.
2. General Options
Product item design: Choose a design for the product recently viewed here. Please check the video below (layout product items same as the Product Recommendation option) the product items design of products recently viewed:
Show product vendors checkbox: Tick on this checkbox to enable product vendors on the Product option.
Show product countdown checkbox: Tick on this checkbox to show the product countdown on loop.
Maximum products to show: Configure the maximum products that you wanna show on the product recently viewed option here.
Sort By: Choose to sort by Recently viewed products by logic status here. We have total of 8 logic statuses for you to choose. With each logic status, the products on the Recently viewed option will show different.
Unavailable products: Choose to Show or Hide Unavailable products (Out of stock products) here. 
2.1. Options Image Products 
Image ratio: You can choose the Image ratio for the Product recently viewed 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 recently viewed 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 recently viewed option here
Space horizontal/ vertical items (Desktop & Mobile): Configure the spacing horizontal/ vertical items on Desktop & Mobile here.
2.2. Options For Carousel layout
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 recently viewed option.
Dots style: Choose s style for the page dots on the Product recently viewed 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 recently viewed 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 recently viewed option here. We have 3 layouts for you to choose: Container, Wrapped Container and Fullwwidth.
Background color: Configure the background color for the Product recently viewed option here. This option also supports configuring Metafield, so you can change the background color for the recently viewed products for every single product by clicking the Connect Dynamic Source button. 
Background gradient color: Configure the Background gradient color for the Product recently viewed option here.
Background image: If you wanna use a custom background image for the Product recently viewed option, please upload an image here. This option also supports configuring Metafield, so you can change the background image for the recently viewed products option for every single product by clicking the Connect Dynamic Source button. 
Margin/ Padding (Desktop & Mobile): Configure margin/ padding for the Product recently viewed option here.
​

PRODUCT PAGE - Previous

Product Recommendations

Next - PRODUCT PAGE

Product Pre-order

Last modified 8d ago

Copy link

Contents

1. Heading Options

2. General Options

3. Design Options