Recently Viewed Products
The Recently Viewed Products section displays products that customers have previously visited using localStorage to track browsing history.
It provides a personalized shopping experience by showing relevant products the customer has already shown interest in, supporting both grid and carousel layouts with extensive customization options.
How to add the Recently Viewed Products section?
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Products from the dropdown window.
In the Templates -> Add section -> choose Recently Viewed Products.
Recently Viewed Products - Settings Guide
This guide explains all available settings for the Recently Viewed Products in order from top to bottom as they appear in the Theme Editor.
Layout Settings
Layout style
select
Choose between grid or carousel layout
Always visible
Carousel on mobile
checkbox
Enable carousel behavior on mobile for grid layout
layout_type == 'grid'
Maximum products to show
range
Number of products to display (2-25)
Always visible
Number of columns on desktop
range
Desktop column count (1-5)
Always visible
Horizontal gap
range
Spacing between columns (0-100px)
Always visible
Vertical gap
range
Spacing between rows (0-100px)
layout_type == 'grid'
Carousel Settings
Loop
checkbox
Enable infinite loop for carousel
layout_type == 'carousel'
Full width
checkbox
Extend carousel beyond page margins
section_width == 'page-width' AND layout_type == 'carousel'
Navigation
select
Navigation type (none/arrows/pagination/both)
layout_type == 'carousel'
Arrows position
select
Position of navigation arrows (inside/bottom)
layout_type == 'carousel' AND navigation contains 'arrows'
Pagination type
select
Style of pagination (bullets/dynamic/progressbar/fraction)
layout_type == 'carousel' AND navigation contains 'pagination'
Dots top offset
range
Spacing above pagination dots (20-100px)
pagination_type == 'bullets' AND navigation contains 'pagination'
Progress top offset
range
Spacing above progress bar (20-100px)
pagination_type == 'progressbar' AND navigation contains 'pagination'
Mobile Layout Settings
Number of columns on mobile
select
Mobile column count (1-2)
Always visible
Section Layout Settings
Width
select
Section width constraint (page-width/full-width/custom)
Always visible
Custom page width
range
Custom section width (1000-2000px)
section_width == 'custom'
Color scheme
color_scheme
Section color scheme
Always visible
Spacing Settings
Padding top
range
Top padding for section (0-100px)
Always visible
Padding bottom
range
Bottom padding for section (0-100px)
Always visible
Padding left
range
Left padding for section (0-100px)
Always visible
Padding right
range
Right padding for section (0-100px)
Always visible
Last updated