Recently viewed products settings
Recently Viewed Products is a section that automatically shows visitors the products they've recently viewed on the site (tracked in their browser via localStorage), displayed as a grid or carousel of product cards. Its purpose is to remind shoppers of items they showed interest in and make it easy to return to and purchase them without searching again.
| Setting | Description |
|---|---|
| Heading | The text shown above the recently-viewed row (e.g. "Recently viewed"). Supports basic inline formatting — bold, italic, links. If left blank and the carousel is disabled, the whole header row is hidden. |
| Heading size |
Controls how large the heading text renders. • Small • Medium • Large |
| Maximum products to show | The maximum number of recently viewed products to display, from 2 to 10. The section automatically pulls in the customer's most recently viewed products (tracked in their browser) up to this limit, excluding the product page they're currently on. |
| Number of columns on desktop | How many product cards are shown per row on desktop, from 1 to 5. When the carousel is enabled, this instead sets how many cards are visible at once in the slider. |
| Enable carousel | Turns the product grid into a horizontally scrollable slider with prev/next arrows on desktop, instead of a static grid. The arrows only become visible once there are more products than fit on screen. Enabled by default. |
| Color scheme | Sets the background and text colors for the section and its product cards. Choose from the theme's predefined color schemes (Theme settings → Colors). |
Product card
| Setting | Description |
|---|---|
| Image ratio |
Sets the aspect ratio of each product's image. • Adapt to image: keeps each image's natural proportions. (Default) • Portrait: a taller, narrower crop. • Square: equal width and height. • Landscape: a wider, shorter crop. |
| Show gallery preview | When enabled, hovering over a card (or swiping on mobile) reveals the product's second image, giving a quick preview of another angle. Disabled by default. |
| Show type | Displays the product type (from the product's "Type" field) on the card, under the title. Disabled by default. |
| Show vendor | Displays the product's vendor/brand name on the card. Disabled by default. |
| Show product rating | Displays a star rating on the card. Requires a product rating app to be installed — without one, no rating will show even if this is enabled. |
| Quick add |
Adds a button on each card that lets customers add the product to cart without opening the product page. • None: no quick-add button; the card just links to the product page. (Default) • Standard: shows an "Add to cart" button; for products with multiple variants, it opens a small popup to choose options first. |
| Show swatch | Displays color/variant swatches directly on the card so customers can preview and switch variants without opening the product page. Enabled by default. |
| Swatch variant name | The exact name of the product option the swatches represent (e.g. "Color", "Size"). Must match the option name set up on the product. Only shown when Show swatch is enabled. |
| Product description | The name of a "Single line text" metafield to pull a short custom description onto the card. Requires creating the metafield definition first. |
| Product info | The name of a "Single line text" metafield to pull an extra info line onto the card (e.g. shipping note, material). Requires creating the metafield definition first. |
Mobile layout
| Setting | Description |
|---|---|
| Number of columns on mobile |
How many product cards are shown per row on mobile screens. • 1 column • 2 columns (Default) |
Section padding
| Setting | Description |
|---|---|
| Top padding | The "Top padding" setting allows you to adjust the amount of space at the top of the section using a slider. |
| Bottom padding | The "Bottom padding" setting functions similarly to the "Top padding" setting, but controls the space at the bottom of the section. |
| Top padding mobile | The "Top padding mobile" setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider. |
| Bottom padding mobile | The "Bottom padding mobile" setting works similarly to the "Top padding mobile" setting but controls the space at the bottom of the section for mobile devices. |