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?

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Choose Products from the dropdown window.

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

Setting	Type	Description	Visibility
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

Setting	Type	Description	Visibility
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

Setting	Type	Description	Visibility
Number of columns on mobile	select	Mobile column count (1-2)	Always visible

Section Layout Settings

Setting	Type	Description	Visibility
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

Setting	Type	Description	Visibility
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