> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Recently Viewed Products

> Browser-based product history display helping customers quickly return to previously viewed items

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

<CardGroup cols={2}>
  <Card title="Browser Storage" icon="hard-drive">
    Automatically tracks product views in browser local storage
  </Card>

  <Card title="Personalized History" icon="clock-rotate-left">
    Shows up to 12 recently viewed products per customer
  </Card>

  <Card title="Auto-Hide Empty" icon="eye-slash">
    Section automatically hides when no products have been viewed
  </Card>

  <Card title="Two Layouts" icon="table-layout">
    Choose between two visual layout styles
  </Card>
</CardGroup>

## How It Works

<AccordionGroup>
  <Accordion title="Automatic Tracking">
    **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

    <Note>
      The tracking happens automatically via JavaScript - no manual configuration needed. Customers must have JavaScript enabled and browser local storage available.
    </Note>
  </Accordion>

  <Accordion title="Display Logic">
    **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

    <Tip>
      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.
    </Tip>
  </Accordion>

  <Accordion title="Product Limit & Ordering">
    **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
  </Accordion>
</AccordionGroup>

## Section Settings

<AccordionGroup>
  <Accordion title="Layout Style">
    **Layout**

    * **Layout 1**: Standard layout style
    * **Layout 2**: Alternative layout style
    * Default: Layout 1

    <Note>
      Layout options control the visual arrangement and styling. Test both to see which fits your store's design better.
    </Note>
  </Accordion>

  <Accordion title="Section Header">
    **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)

    <Tip>
      Consider headings like "You Recently Viewed", "Come Back To", or "Still Interested In?" for more engaging copy.
    </Tip>
  </Accordion>

  <Accordion title="Section Button">
    **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

    <Tip>
      Link the button to your main catalog or "New Arrivals" to encourage continued browsing when customers finish viewing their history.
    </Tip>
  </Accordion>

  <Accordion title="Product Display">
    **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

    <Warning>
      If "Show Unavailable Products" is disabled and all recently viewed products are out of stock, the section will be hidden completely.
    </Warning>
  </Accordion>

  <Accordion title="Section Width & Color">
    **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

    <Tip>
      Use the same color scheme as your product sections for visual consistency, or use a contrasting scheme to make recently viewed products stand out.
    </Tip>
  </Accordion>

  <Accordion title="Spacing & Borders">
    **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
  </Accordion>
</AccordionGroup>

## Setup & Placement

<Steps>
  <Step title="Add Section">
    In Theme Customizer, add the "Recently Viewed Products" section to your desired template (product page, homepage, etc.).
  </Step>

  <Step title="Configure Settings">
    Set maximum products, heading text, button label/URL, and layout preferences.
  </Step>

  <Step title="Test Tracking">
    View several product pages in your preview to populate the recently viewed list and see how it displays.
  </Step>

  <Step title="Adjust Display">
    Fine-tune the maximum products, spacing, and color scheme based on how it looks with actual product data.
  </Step>
</Steps>

## Best Placement Locations

<CardGroup cols={2}>
  <Card title="Product Pages" icon="box">
    **Perfect for cross-selling**

    Shows other products customer has viewed, encouraging comparison shopping
  </Card>

  <Card title="Homepage" icon="house">
    **Great for returning visitors**

    Helps customers quickly find products they were interested in on previous visits
  </Card>

  <Card title="Cart Page" icon="cart-shopping">
    **Suggests additional items**

    Reminds customers of other products they viewed while deciding what to buy
  </Card>

  <Card title="Collection Pages" icon="grid">
    **Enhances navigation**

    Provides quick access to previously viewed items while browsing categories
  </Card>
</CardGroup>

## Technical Details

<AccordionGroup>
  <Accordion title="Browser Storage">
    **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

    <Note>
      Local storage is domain-specific. If customer switches between `www.yourstore.com` and `yourstore.com`, they may see different recently viewed products.
    </Note>
  </Accordion>

  <Accordion title="JavaScript Requirements">
    **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)
  </Accordion>

  <Accordion title="Product Card Integration">
    **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
  </Accordion>
</AccordionGroup>

## Best practices

<CardGroup cols={2}>
  <Card title="Optimal product limits" icon="list-ol">
    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.
  </Card>

  <Card title="Heading copy suggestions" icon="heading">
    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.
  </Card>

  <Card title="Button strategy" icon="hand-pointer">
    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.
  </Card>

  <Card title="Storage considerations" icon="database">
    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.
  </Card>

  <Card title="Testing requirements" icon="flask">
    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.
  </Card>

  <Card title="Common troubleshooting" icon="triangle-exclamation">
    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.
  </Card>
</CardGroup>

## Common Questions

<AccordionGroup>
  <Accordion title="How long does viewing history persist?">
    **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.
  </Accordion>

  <Accordion title="Can I show more than 12 products?">
    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.
  </Accordion>

  <Accordion title="Does this work for guest visitors?">
    **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.
  </Accordion>

  <Accordion title="Why don't I see recently viewed products on my own store?">
    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.
  </Accordion>

  <Accordion title="Can I customize which products are tracked?">
    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.
  </Accordion>

  <Accordion title="Does this slow down my store?">
    **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.
  </Accordion>
</AccordionGroup>

## Privacy & Data

<AccordionGroup>
  <Accordion title="GDPR & Privacy Compliance">
    **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
  </Accordion>

  <Accordion title="Cross-Device Synchronization">
    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.
  </Accordion>
</AccordionGroup>

## Related Sections & Features

* **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

<AccordionGroup>
  <Accordion title="JavaScript API">
    The section typically uses a JavaScript function like:

    ```javascript theme={null}
    // Track product view
    addToRecentlyViewed(productId);

    // Get recently viewed products
    getRecentlyViewedProducts(maxProducts);

    // Clear viewing history
    clearRecentlyViewed();
    ```

    Check theme's JavaScript files for exact implementation details.
  </Accordion>

  <Accordion title="Local Storage Key">
    Products are typically stored under a key like:

    ```
    localStorage.getItem('recentlyViewedProducts')
    ```

    Returns JSON array of product IDs: `["123456", "234567", "345678"]`
  </Accordion>
</AccordionGroup>