Recently Viewed

​

What this section does

The Recently viewed section automatically tracks and displays products customers have recently browsed on your store, enabling easy return to previously viewed items. Features include:

• Automatic tracking: Browser localStorage records viewed products (no cookies)
• Personalized display: Each visitor sees their own browsing history
• Persistent across sessions: Tracked products persist even after browser close (until cleared)
• Minimal configuration: Only heading customizable—tracking is automatic
• Works on any template

Perfect for improving product discovery, reducing bounce rates, enabling easy product comparison, and recovering abandoned browsing sessions.

​

Getting started

​

Section settings

​

How it works

Automatic product tracking:

1. Customer views any product page (PDP)
2. JavaScript records product ID to browser’s localStorage
3. localStorage maintains list of recently viewed product IDs (typically 10-20 products)
4. Recently Viewed section reads localStorage and displays products from that list

Tracking method:

• localStorage (not cookies)—larger capacity, persists after browser close
• Client-side tracking—no server requests, instant updates
• Privacy-friendly—data stored locally in customer’s browser, not sent to servers

Persistence:

• Tracked products persist across browsing sessions
• Survives browser close/reopen
• Only clears when: customer clears browser data, localStorage quota exceeded, or manual script clearing

Display order:

• Most recently viewed product appears first
• Older products appear after
• Chronological reverse order (newest → oldest)

​

Best practices

​

Common use cases

PDP bottom placement — After product details, show “Recently viewed” to enable easy comparison with just-viewed product Homepage personalization — Returning visitors see recent browsing history immediately, creating personalized homepage experience Cart page browsing — On cart page, show recently viewed items so customers can reconsider alternatives before checkout Collection page discovery — Bottom of collection pages, help customers revisit individual products from browsing session Thank-you page continuation — Post-purchase, show “Continue browsing” with recently viewed items for next order Search page support — Bottom of search results, remind customers of products viewed before searching

​

Layout behavior

Desktop:

• Horizontal product grid (typically 4-5 products per row)
• Product cards: image, title, price, optional quick-view
• Section full-width or contained (theme-dependent)
• Heading centered or left-aligned
• Displays up to N products (theme defines limit, typically 8-12)

Mobile:

• Horizontal scrollable carousel OR 2-column grid (theme-dependent)
• Swipe to view more products
• Compact product cards
• Touch-optimized
• Typically shows 4-8 products

Empty state:

• Section hidden if no products in localStorage (no awkward empty display)
• Appears only after customer has viewed at least one product
• First-time visitors won’t see section at all

Product limit:

• Theme defines maximum products to display (e.g., 8, 10, 12)
• localStorage may track 20+ products, but section shows most recent N only
• Ensures section doesn’t become overwhelmingly long

​

Tracking behavior

What triggers tracking:

• Product page view: Simply visiting any /products/[handle] page adds product to localStorage
• Automatic: No click, no add-to-cart required—just page load

What’s NOT tracked:

• Collection page views (only individual product pages)
• Quick-view modal views (unless theme implements custom tracking)
• Product images clicked in other sections (unless they link to PDP)

Data stored:

• Product IDs (numerical Shopify product IDs)
• Possibly variant IDs (theme-specific)
• Timestamp (for ordering, theme-specific)

Storage limits:

• localStorage capacity: ~5-10MB per origin (plenty for product IDs)
• Typical storage: 10-20 product IDs = few KB
• If quota exceeded: oldest entries removed (FIFO - first in, first out)

​

Technical details

JavaScript implementation:

• Theme JavaScript listens for PDP page loads
• On load, extracts product ID from page or meta tags
• Writes product ID to localStorage array
• Recently Viewed section reads localStorage on page render
• Fetches product data via Shopify Ajax API
• Renders product cards dynamically

localStorage key:

• Typically theme.recentlyViewed or similar custom key
• Stores JSON array of product IDs: [12345, 67890, 24680]

Product data fetching:

• Section reads IDs from localStorage
• Makes Ajax API requests to /products/[id].js or GraphQL
• Retrieves product title, price, images, URLs
• Renders product cards client-side

Performance:

• Initial load: Section may be empty, filled after JS executes (async)
• Cache-friendly: Product data cached by browser for repeat views
• No server rendering: Products loaded client-side after page render

​

Privacy & data considerations

GDPR/privacy compliance:

• localStorage is not a cookie—different regulations
• No personal data: Only product IDs stored, no customer identifiable information
• Local only: Data never transmitted to servers (unless deliberately implemented)
• User control: Users can clear localStorage via browser settings

Privacy policy:

• Disclose use of localStorage for product tracking
• Explain purpose: improve browsing experience, personalize content
• Provide instructions for clearing (standard browser methods)

Opt-out options:

• Some themes provide “Clear recently viewed” button
• Users can manually clear via browser: Developer Tools → Application → Local Storage → Clear

​

Customization tips

For PDP (product comparison):

• Place at bottom of product page
• Heading: “Recently viewed”
• Allows quick return to previous products for comparison

For homepage (returning visitors):

• Place mid-page or bottom
• Heading: “Continue where you left off”, “Your recent browsing”
• Creates personalized homepage experience

For cart page (decision support):

• Place below cart items or after recommendations
• Heading: “Still deciding?”, “Compare these items”
• Helps indecisive customers revisit alternatives

For thank-you page (re-engagement):

• Place at bottom of post-purchase page
• Heading: “Continue browsing”, “Shop more items”
• Encourages next purchase or wishlist building

​

Related sections

• Product Recommendations — AI-powered product suggestions (algorithmic vs browsing history)
• Recommended Products — Manual or API-driven recommendations (curated vs personalized)
• Featured Products — Static curated product showcases (universal vs personalized)
• Collection Products — Collection-based product displays (category vs history)

​

Comparison: Recently Viewed vs Recommendations

When to use both:

• Stack Recently Viewed + Product Recommendations on PDP
• Recently Viewed: Helps comparison
• Recommendations: Encourages discovery
• Together: Maximum product exposure and engagement

​

Troubleshooting

Section not appearing:

• No products viewed yet: Browse some products first
• JavaScript disabled: Tracking requires JavaScript enabled
• localStorage disabled: Browser may block localStorage (privacy settings)
• Theme compatibility: Ensure theme includes recently-viewed JavaScript

Wrong products showing:

• Cache issue: Clear browser cache and localStorage
• Multiple stores: localStorage shared per domain—test on unique domain
• Product availability: Out-of-stock or deleted products may still appear (until localStorage cleared)

Order incorrect (not most recent first):

• Theme implementation: Check theme’s JS sorting logic
• Timestamp missing: Some themes don’t store timestamps, affecting order
• localStorage corruption: Clear and rebuild data

Products not updating:

• Cache aggressive: Browser caching product data too long
• JS errors: Check browser console for JavaScript errors preventing updates
• Conflicting apps: Third-party apps may interfere with localStorage

Empty after browser close/reopen:

• localStorage being cleared: Check browser settings (incognito mode clears on close)
• Theme using sessionStorage: sessionStorage clears on close (not localStorage)
• Privacy extensions: Browser extensions may auto-clear storage

​

Advanced implementation notes

Custom tracking:

• Developers can extend tracking to capture variants, timestamps, scroll depth
• Custom events: Track clicks on recently viewed items for analytics
• External storage: Save to customer metafields for cross-device persistence (requires Shopify API)

Product limit configuration:

• Theme may expose setting for max products (typically theme settings, not section settings)
• Check theme settings > Product > Recently viewed limit
• If not exposed, requires theme code modification

Styling customization:

• CSS targets: .recently-viewed, .recently-viewed__product-card (class names vary)
• Adjust grid layout, card styling, hover effects via CSS
• Responsive breakpoints for mobile optimization

JavaScript hooks:

• Listen for theme:recentlyviewed:updated custom events (theme-specific)
• Track analytics when recently viewed products are clicked
• Implement “Remove from recently viewed” functionality