Skip to main content
The Recently Viewed Products section displays products that customers have previously viewed during their browsing session. Using browser local storage to track viewing history, it creates a personalized shopping experience that helps customers quickly return to items of interest.

​
What this section controls

This section controls product history displays with the following capabilities:
  • Browser-based automatic product view tracking
  • Display of 4-12 recently viewed products (configurable)
  • Two layout styles for visual presentation
  • Auto-hide when no product history exists
  • Local storage persistence across visits
  • Section heading with customizable size
  • Product columns control for desktop and mobile
  • Color scheme, width, and spacing controls
  • Display on any page template

​
Key Features

Browser Storage

Automatically tracks product views in browser local storage

Personalized History

Shows up to 12 recently viewed products per customer

Auto-Hide Empty

Section automatically hides when no products have been viewed

Two Layouts

Choose between two visual layout styles

​
How It Works

Product View Detection:
  • JavaScript automatically tracks when customers view product pages
  • Stores product IDs in browser’s local storage
  • Updates history in real-time as browsing continues
  • Persists across multiple visits (until browser data is cleared)
Tracking Behavior:
  • Only tracks products when customer visits product pages
  • Excludes currently viewed product from display
  • Stores up to configured maximum (4-12 products)
  • Newest views push out oldest when limit is reached
The tracking happens automatically via JavaScript - no manual configuration needed. Customers must have JavaScript enabled and browser local storage available.
When Section Appears:
  • Customer has viewed at least one product
  • Browser local storage contains product history
  • Section is added to a page template (product page, homepage, etc.)
When Section Hides:
  • No products have been viewed yet (first visit)
  • Browser local storage is empty or cleared
  • All recently viewed products are unavailable (if show unavailable is disabled)
Current Product Exclusion:
  • If viewing a product page, that product is excluded from the recently viewed list
  • This prevents showing the same product the customer is currently viewing
Place this section on product pages to encourage cross-selling, or on the homepage to help returning customers quickly find products they were interested in.
Maximum Products: 4-12 products (configurable)
  • Default: 8 products
  • Shows most recently viewed first
  • Older products removed as new ones are viewed
Display Order:
  • Newest viewed products appear first
  • Chronological order from most to least recent
  • Automatically updates as customer continues browsing
Grid Display:
  • Products arranged in responsive grid
  • Number of columns adapts to screen size
  • Uses theme’s standard product card component

​
Section Settings

Layout
  • Layout 1: Standard layout style
  • Layout 2: Alternative layout style
  • Default: Layout 1
Layout options control the visual arrangement and styling. Test both to see which fits your store’s design better.
Heading
  • Section title text
  • Supports inline rich text (bold, italic, links)
  • Default: “Recently Viewed Products”
Heading Size
  • H6 (XS), H5 (S), H4 (M), H3 (L), H2 (XL)
  • Default: H2 (XL)
Consider headings like “You Recently Viewed”, “Come Back To”, or “Still Interested In?” for more engaging copy.
Button Text
  • Optional button label
  • Leave empty to hide button
  • Default: “View all”
Button URL
  • Destination link for button
  • Use Shopify URL picker
  • Common links: /collections/all, /pages/shop
Button Style
  • Filled: Solid background button
  • Outlined: Border-only button
  • Link: Text-only link style
  • Default: Filled
Link the button to your main catalog or “New Arrivals” to encourage continued browsing when customers finish viewing their history.
Maximum Products
  • Range: 4-12 products
  • Default: 8 products
  • Controls how many products appear in the section
  • More products = more scrolling required
Show Unavailable Products
  • When enabled: Shows all recently viewed products (even if sold out)
  • When disabled: Hides products that are unavailable
  • Default: Disabled
If “Show Unavailable Products” is disabled and all recently viewed products are out of stock, the section will be hidden completely.
Section Width
  • Page: Standard page width with margins
  • Fluid: Minimal side margins, edge-to-edge
  • Default: Page
Color Scheme
  • Choose from available color schemes
  • Default: Scheme 1
Use the same color scheme as your product sections for visual consistency, or use a contrasting scheme to make recently viewed products stand out.
Spacing Top
  • Padding above section: None, S (1), M (2), L (4), XL (6)
  • Default: M (2)
Spacing Bottom
  • Padding below section: None, S (1), M (2), L (4), XL (6)
  • Default: M (2)
Section Border
  • None, Top, Bottom, or Both
  • Default: None
  • Adds thin border line to separate section

​
Setup & Placement

1

Add Section

In Theme Customizer, add the “Recently Viewed Products” section to your desired template (product page, homepage, etc.).
2

Configure Settings

Set maximum products, heading text, button label/URL, and layout preferences.
3

Test Tracking

View several product pages in your preview to populate the recently viewed list and see how it displays.
4

Adjust Display

Fine-tune the maximum products, spacing, and color scheme based on how it looks with actual product data.

​
Best Placement Locations

Product Pages

Perfect for cross-sellingShows other products customer has viewed, encouraging comparison shopping

Homepage

Great for returning visitorsHelps customers quickly find products they were interested in on previous visits

Cart Page

Suggests additional itemsReminds customers of other products they viewed while deciding what to buy

Collection Pages

Enhances navigationProvides quick access to previously viewed items while browsing categories

​
Technical Details

Local Storage Implementation:
  • Uses browser’s localStorage API
  • Stores product IDs as JSON array
  • Key typically: recentlyViewedProducts or similar
  • Data persists until browser cache is cleared
Storage Limits:
  • Most browsers allow ~5-10MB of local storage
  • Product IDs are small (a few bytes each)
  • Practically unlimited for product tracking purposes
Privacy Considerations:
  • Data stored locally on customer’s device only
  • Not sent to servers or shared
  • Customers can clear via browser settings
  • Respects private/incognito browsing limits
Local storage is domain-specific. If customer switches between www.yourstore.com and yourstore.com, they may see different recently viewed products.
Dependencies:
  • JavaScript must be enabled in browser
  • Local storage must be available (not disabled)
  • Modern browser (supports localStorage API)
Fallback Behavior:
  • If JavaScript disabled: Section doesn’t appear
  • If localStorage full: Oldest products removed first
  • If localStorage blocked: Section hides gracefully
Performance:
  • Lightweight tracking code (~2-5KB)
  • No server requests for tracking
  • Fast rendering (products loaded from cache)
Uses Standard Product Cards:
  • Same card component as product grids
  • Inherits theme’s product card settings
  • Respects card layout configuration
  • Includes images, titles, prices, variants
Unavailable Products:
  • Marked as “Sold Out” if setting is enabled
  • Filtered out if setting is disabled
  • Quick add/cart actions may be disabled

​
Best practices

Optimal product limits

Display 6-8 products on product pages to encourage exploration without overwhelming visitors. Show 8-12 products on homepage where more space is available and returning visitors appreciate more options. Limit cart page to 4-6 products as a subtle reminder without distracting from checkout.

Heading copy suggestions

For B2C stores use “You Recently Viewed”, “Come Back To These”, or “Still Interested?”. Fashion stores work best with “Your Style History” or “Products You Loved”. Tech stores benefit from “Your Recent Searches” or “Items You Compared”. Use “Recently Viewed Products” as a clear, straightforward default for general stores.

Button strategy

Link to main catalog with “View All Products”, link to new arrivals with “See What’s New”, or link to sale collection with “Browse Sale Items”. Leave button empty for product pages to avoid navigation distraction and keep focus on the current product.

Storage considerations

Customer viewing history persists indefinitely until browser cache or cookies are cleared. Each browser and device maintains separate storage. No automatic expiration exists, so history remains across all visits until manually cleared or storage limits are reached.

Testing requirements

Use incognito or private browsing to test fresh visitor experience. Clear local storage to reset recently viewed products and view products in different orders to test chronological sorting. Check displays on both desktop and mobile devices and test with sold-out products to verify unavailable product handling.

Common troubleshooting

If section never appears, verify customers have JavaScript enabled and viewed at least one product. Products disappearing means customer cleared browser cache or cookies. Unavailable products showing requires enabling the “Show Unavailable Products” setting. Differences between mobile and desktop indicate separate browsers or cleared cache on one device.

​
Common Questions

Indefinitely, until:
  • Customer clears browser cache/cookies
  • Customer uses browser’s “Clear browsing data” function
  • Browser storage limit is reached and older data is removed
  • Customer uses a different browser or device (each has separate storage)
There’s no automatic expiration - viewing history persists across all visits until manually cleared.
Not via theme settings. The maximum is limited to 12 to prevent:
  • Overwhelming customers with too many options
  • Performance issues with large product grids
  • Excessive scrolling on mobile devices
To increase beyond 12, you would need to edit the section’s schema file and modify the max_products range, though this is not recommended for UX reasons.
Yes! Recently viewed products work for all visitors:
  • Guest (not logged in)
  • Logged-in customers
  • First-time visitors (after viewing first product)
Viewing history is stored in the browser, not tied to customer accounts. Each browser/device has its own independent history.
Common reasons:
  1. You haven’t viewed any products yet in that browser session
  2. You cleared your browser cache recently
  3. You’re using incognito/private browsing mode (limited storage)
  4. JavaScript is disabled or blocked
  5. The section isn’t added to the current page template
Test by viewing 2-3 products, then navigate to a page with the section added.
No, the tracking is automatic and includes all product page views. There’s no way to:
  • Exclude specific products from tracking
  • Manually add products to viewing history
  • Filter by collection or product type
  • Prioritize certain products over others
The JavaScript tracks every product page view automatically and chronologically.
No. Recently Viewed Products is very lightweight:
  • Tracking happens client-side (in browser)
  • No server requests for tracking
  • Minimal JavaScript (~2-5KB)
  • Products loaded from browser cache
  • No API calls required
It has negligible impact on page load speed or server performance.

​
Privacy & Data

Data Storage:
  • Stored locally on customer’s device only
  • Not transmitted to servers
  • Not shared with third parties
  • Not used for tracking across sites
Customer Control:
  • Customers can clear data via browser settings
  • Private/incognito browsing limits storage
  • No customer account required
Compliance Notes:
  • Generally considered functional storage (required for feature)
  • May not require explicit cookie consent in most jurisdictions
  • Consult legal advisor for specific compliance requirements
Recently viewed products do not sync across devices or browsers:
  • Each browser has independent storage
  • Switching from mobile to desktop shows different histories
  • Logging in doesn’t sync viewing history
  • Clearing cache on one device doesn’t affect others
This is by design - viewing history is browser-local, not account-based.
  • Product Recommendations: Shopify’s AI-powered recommendations (alternative approach)
  • Featured Products: Manually curated product selections
  • Product Grids: Standard product collection displays
  • Card Product Component: The component used to display products in this section

​
Developer Notes

The section typically uses a JavaScript function like:
// Track product view
addToRecentlyViewed(productId);

// Get recently viewed products
getRecentlyViewedProducts(maxProducts);

// Clear viewing history
clearRecentlyViewed();
Check theme’s JavaScript files for exact implementation details.
Products are typically stored under a key like:
localStorage.getItem('recentlyViewedProducts')
Returns JSON array of product IDs: ["123456", "234567", "345678"]