recently-viewed-products

Shopify OS2.0 themes like Dawn include a native Recently Viewed section. Go to Online Store, then Themes, then Customize, open a product page template, click Add section, and select Recently viewed products. It uses localStorage automatically with no extra configuration.

Store only product IDs with timestamps in localStorage, capped at 12 entries with a 30-day TTL. On render, send the IDs to a batch API endpoint via POST and re-fetch live product data so prices and stock status are never stale.

Yes, WooCommerce includes a Recently Viewed Products widget out of the box. Place it via Appearance, then Widgets, or use the shortcode [woocommerce_recently_viewed_products per_page="4"] in templates or Gutenberg blocks. It stores IDs in the visitor session.

Hydration mismatches occur when localStorage is read during server-side rendering. Read storage only inside useEffect, initialize component state as an empty array, and never access browser APIs in the render body.

localStorage may throw errors in private or incognito mode. Wrap all storage reads and writes in try/catch blocks and fail silently, optionally falling back to an in-memory array or a server-side cookie-based implementation.

No, store only product IDs and timestamps. Prices, images, and availability change frequently, so always re-fetch product details from the server when rendering the widget and filter to published, in-stock items only.