Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
- Recently Viewed Products Settings
- Recently Viewed Products on Collection and Product Pages
- Troubleshooting
- Examples
- Video Guide
- Mobile Layout
Using the Recently Viewed Products Section
The Turbo theme includes a 'Recently Viewed Products' homepage section which is quite unique as it will contain different products based on each individual customer's site experience and which products their checking out! The 'Recently Viewed Products' section is the perfect way to remind your customers items that they've previously taken a look at as they navigate through your shop.
In order to test out the 'Recently Viewed Products' section, you're going to want to open up a live version of your site (outside of the theme editor) in a separate tab. This section gets populated based on built-up history of navigating through products. So in the separate tab of your live site, visit multiple product pages in order for this section to show up!
The 'Recently Viewed Products' section allows you to choose between a traditional 'grid-based layout' or a more modern 'slider layout' to display the products. You can choose to have the product title and price visible below the product thumbnail image, or you can choose to have it only display when the customer hovers over the product thumbnail image (Theme Settings > Product Grid > 'Show product information on hover').
In order to set up Recently Viewed Products, click into Customize (your Theme Editor) > Sections > Add Section > Recently Viewed Products.
Recently Viewed Products Settings
The section settings determine the look and layout of this section!
Heading
You can choose to add a 'Heading' to the top of this section.
Layout
In the 'Layout' setting, you can either choose to display your 'Recently Viewed Products' as a grid, or slider.
Products Limit
Here you can limit the number of products you'd like to show. You can choose between 3 to 12.
Products per Row
Here you can choose how many products you'd like to show per row. You can choose between 3 to 5.
Recently Viewed Products on Collection and Product Pages
Recently Viewed Products can get added to the Collection and Product pages as well within the sidebar or as a section on the Product page!
Collection Page
Recently viewed products can be enabled in the sidebar of the Collection page! To set it up, head into your Theme Editor (customize), navigate to the Collection page, under Sections > Collection > Scroll down to the Sidebar area and click Add content. Here, you can select recently viewed products as an option.
Product Page
Recently viewed products can appear as a section at the bottom of the Product page or within a Product page Sidebar (similar to the Collection page). To enable it as a section, head into your Theme Editor (customize), navigate to the Product page. Under Sections > Product > Scroll down to the Recently Viewed Products area and enable the "Show recently viewed products" setting.
Troubleshooting
If you want the Recently viewed products option enabled for your product pages, it will need to be enabled for each product template type: product, product.description-bottom, product.full-width-images and product.details, where you can follow the same steps outlined above for Product page.
If you don't see recently viewed products on one of your product pages, but you see it on others, check that this feature is enabled in the section settings.
Examples
Section Settings
Heading - added
Layout - slider
Products limit - 6
Products per row - 4
Video Guide
Mobile layout
When viewed on a mobile device, if the 'layout' is set to 'slider', it will still remain a slider! You can swipe through the images or click the left/right arrows:
If the 'layout' is set to 'grid', it will remain as a grid layout on mobile as well. You can select to either have 1 or 2 products per row by adjusting the 'Products per row on mobile' setting found in Customize > Theme Settings > Product Grid:
