Help customers find their way back to the products they looked at earlier in their visit.
Overview
The Recently viewed products section shows the products a customer has viewed during their current visit, newest first, as a slider or a grid. Add it to product pages, the cart page or the home page so customers can compare products and pick up where they left off. The section is hidden until the customer has viewed at least one product, so new visitors never see an empty row.
Section settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Number of products to show | Range | 10 |
Between 1 and 10. |
| Color scheme | Color scheme | Default | Colors of the section. |
| Use thumbnail layout | Toggle | Off | Shows the products as compact thumbnail cards. |
Desktop, tablet and mobile layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Full width | Toggle | Off | Desktop. Spans the section across the full page width. |
| Display type (desktop) | Select | Slideshow | Options: Grid, Slideshow. Tablets use the desktop display type. |
| Products per row (desktop / tablet) | Range | 3 |
Between 2 and 5. |
| Display type (mobile) | Select | Slideshow | Options: Grid, Slideshow, Slideshow (Peeking items). |
| Products per row (mobile) | Range | 1 |
Products shown side by side on phones. |
| Grid gap (desktop / mobile) | Range | -1 |
Gap between the products. Set to -1 to use the Gutter from Theme settings. |
| Margin top and bottom (desktop / mobile) | Range |
40 px |
Space above and below the section. |
Section header block settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Subheading | Text | — | Small text above the heading. |
| Heading | Text | Recently viewed |
The section heading. |
| Subheading and Heading HTML tag | Select | H3 / H2 | HTML tags of the subheading and heading. Affect their base size. |
| Text | Rich text | — | Optional text below the heading. |
| Text alignment | Select | Center | Options: Left, Center, Right. |
| Size modifier (desktop / mobile) | Select | Default | Size of the header, set separately for desktop and mobile. |
Setup
Steps
- From your Shopify admin, go to Online Store → Themes.
- Click Customize next to your active theme.
- Open the template where you want the section, for example Products → Default product.
- Click Add section and select Recently viewed products.
- Set the heading in the Section Header block and choose the layout.
- Click Save.
Products are remembered for one visit
The list is kept in the customer's browser for the current visit, up to 10 products. It starts empty in a new browser session, and the product the customer is looking at isn't shown in the list. In the theme editor the section stays hidden until you've viewed a product in the preview.
Shorten the way back to a product
Customers often compare a few products before they buy. A Recently viewed row below the product details saves them from searching or pressing back, and keeps products they liked in sight. On the cart page, it reminds customers of products they considered but didn't add.
Advanced
This section is intended for developers customising the theme. No changes here are required for normal use.
Product history
Product pages store the handles of viewed products in sessionStorage under Woolman_Product_History (comma-separated, newest first, up to 10). The section script, section-recently-viewed-products.js, reads the list and renders the product cards.