Recently viewed products

Copy-paste a Liquid snippet for product page - Remembers the products a visitor opened and shows them again - brings shoppers back to items they already considered.

Product pageTheme snippet Members sourceOS 2.0 themes

Live previewCustomize in playground

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Create snippets/recently-viewed.liquid, paste the complete file - styles and script are already inside it.
3Render it near the bottom of your product template (usage tag in the Usage tab).
4The list is stored in the visitor's browser only - nothing is sent to your server, which keeps it privacy-safe.

recently-viewed.liquid

1{%- comment -%}2  Works on product pages: remembers handles in localStorage, then loads the3  other products via Shopify's /products/{handle}.js endpoint. Renders4  nothing on non-product templates or for first-time visitors.5{%- endcomment -%}6<div class="gpl-recent" data-gpl-recent data-limit="4"7     data-current="{{ product.handle | default: '' }}" hidden>8  <p class="gpl-recent__head">{{ heading | default: 'Recently viewed' | escape }}</p>9  <div class="gpl-recent__grid" data-gpl-recent-grid></div>10</div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.

2Create snippets/recently-viewed.liquid, paste the complete file - styles and script are already inside it.

3Render it near the bottom of your product template (usage tag in the Usage tab).

4The list is stored in the visitor's browser only - nothing is sent to your server, which keeps it privacy-safe.

recently-viewed.liquid

1{%- comment -%}2  Works on product pages: remembers handles in localStorage, then loads the3  other products via Shopify's /products/{handle}.js endpoint. Renders4  nothing on non-product templates or for first-time visitors.5{%- endcomment -%}6<div class="gpl-recent" data-gpl-recent data-limit="4"7     data-current="{{ product.handle | default: '' }}" hidden>8  <p class="gpl-recent__head">{{ heading | default: 'Recently viewed' | escape }}</p>9  <div class="gpl-recent__grid" data-gpl-recent-grid></div>10</div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access