Hello,
Does anyone know how to add a recently reviewed section to our store. I need it for the product page, collection page and also the home page. Can someone please assist me with this?
Motion theme already have the Recently Viewed section that can easily able to add on the product page.
You need to follow these steps to add the Recently viewed section on the product page.
Go to Shopify Admin —> Online Store —> Edit theme —> Product Page template —> Scroll down and click on add section —> Search for the section name by Recently Viewed
You will see the desire section that you are looking for. You just need to add section.
Note that if you have multiple product templates then you need to add this section for each product template.
Refer to this article for more information.
I have motion 11.0 downloaded and that section is not listed at all. Please see screenshot
Is there a css code I can add to have a recently reviewed section added?
No. Unfortunately, no single css code is going to be able to do that for you. The theme needs to have cookies and javascript to capture, store, and display recently viewed products.. Alternative would be search the Shopify App Store.
Hold on a second – people seem to be answering wrong question:
Do you really need
- “recently viewed products” (the products which current visitor has recently visited) or
- “recently reviewed product” – products which has recently received customer reviews?
If former, you can try to “generate” this kind of a section with AI, or premium themes like your msy already have it.
As for the latter – I doubt any theme has this built-in – reviews are collected by the review apps and showing this kind of a page section would require close interaction with the review app. Some of them may have a widget for this.
So it’s an App-dependent function.
I think she means viewed from her screenshot. Motion Theme - Cart Inventory - #34 by yonicque
You seem to be more involved 
need to speak propa lingo 
Thank you, I appreciate your help.
I’m just surprised that premium theme doesn’t have a section like that. Seems like it’d be a no-brainer 
It has it but its not working at all.
Please see the homepage: https://www.yonicque.com/
Its just blank
Yes, the theme seem to not have this function.
Looks like you’ve generated the section with AI.
However, it’s a section added to the homepage template which means its code does not run on product pages, so it has no chance to learn what products you’ve seen.
The code needs to run on the product pages to store these visited products.
Try moving this section into “Footer group”, or add this same section to the product page.
In my store I’ve asked AI to generate recently viewed in “Footer group” and it works:
I thought this same thing. I generated it 3 times. One for the product pg, collection pg, and also the home page. Each time it only generated for home page and even then it still did not work. I also requested it to generate a quick view function on mobile, it created the code but it did not work either. I just submitted the feedback.
Note that when you generate a new section/block, it tends to use unique ID to store its data. That is why you may not see results if you’ve generated 3 times in different places – one stores, another shows, but they use different storage areas …
After the section/block is generated, you need to add it (the same one!) manually to all the pages where you need to show you recents and of course product page to learn them.
So, I was able to move my section which was initially in the Footer to the template area for collection page and product page and it works the way I want it.
Or, if its in footer, it will run on every page type (as footer is shared between all(most) pages). You may ask AI to generate a footer block to only show on some page types, but not others.
Since you already have several generated “Recent products sections” add them all to the footer group and see which one works. Then you can remove the others and add the good one to template areas of the templates you want them to show on.
Tim,
Placing it in the footer is truly genius, but getting it to work is another thing. I sent you a screenshot of what the AI was told to do, I’m not sure why its not working. Can you compare it to what you have. Our url is https://www.yonicque.com
Well, yes, AI may generate different code
My prompt was:
need a row of up to 4 recently viewed products.
product cards should resemble default Dawn theme product cards
(since it was for Dawn theme).
the code generated is this. Not the best, but “kinda” works.
I, myself would’ve written it differently, but.
{% doc %}
@prompt
need a row of up to 4 recently viewed products.
product cards should resemble default Dawn theme product cards
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}
{% style %}
.ai-recently-viewed-{{ ai_gen_id }} {
display: block;
width: 100%;
padding: 40px 0;
}
.ai-recently-viewed-container-{{ ai_gen_id }} {
max-width: {{ settings.page_width }}px;
margin: 0 auto;
padding: 0 {{ settings.spacing_grid_horizontal }}px;
}
.ai-recently-viewed-heading-{{ ai_gen_id }} {
margin: 0 0 24px;
font-size: {{ block.settings.heading_size }}px;
text-align: {{ block.settings.heading_alignment }};
color: rgb(var(--color-foreground));
}
.ai-recently-viewed-grid-{{ ai_gen_id }} {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: {{ settings.spacing_grid_horizontal }}px {{ settings.spacing_grid_vertical }}px;
list-style: none;
margin: 0;
padding: 0;
}
.ai-recently-viewed-card-{{ ai_gen_id }} {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.ai-recently-viewed-card-wrapper-{{ ai_gen_id }} {
position: relative;
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.ai-recently-viewed-media-{{ ai_gen_id }} {
position: relative;
overflow: hidden;
background-color: rgb(var(--color-background));
margin-bottom: 12px;
{% if settings.card_style == 'card' %}
border-radius: {{ settings.card_corner_radius }}px;
border: {{ settings.card_border_thickness }}px solid rgba(var(--color-foreground), {{ settings.card_border_opacity | divided_by: 100.0 }});
{% endif %}
}
.ai-recently-viewed-media-{{ ai_gen_id }}::before {
content: '';
display: block;
padding-bottom: 100%;
}
.ai-recently-viewed-image-{{ ai_gen_id }} {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
{% if settings.card_image_padding > 0 %}
padding: {{ settings.card_image_padding }}px;
{% endif %}
}
.ai-recently-viewed-placeholder-{{ ai_gen_id }} {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(var(--color-foreground), 0.04);
}
.ai-recently-viewed-placeholder-{{ ai_gen_id }} svg {
width: 60%;
height: 60%;
opacity: 0.3;
}
.ai-recently-viewed-info-{{ ai_gen_id }} {
display: flex;
flex-direction: column;
gap: 4px;
text-align: {{ settings.card_text_alignment }};
flex-grow: 1;
}
.ai-recently-viewed-vendor-{{ ai_gen_id }} {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.7;
margin: 0;
}
.ai-recently-viewed-title-{{ ai_gen_id }} {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.3;
word-break: break-word;
}
.ai-recently-viewed-price-{{ ai_gen_id }} {
margin-top: 4px;
font-size: 14px;
}
.ai-recently-viewed-price-{{ ai_gen_id }} .price-item {
display: inline-block;
}
.ai-recently-viewed-price-{{ ai_gen_id }} .price-item--sale {
color: rgb(var(--color-foreground));
}
.ai-recently-viewed-price-{{ ai_gen_id }} .price-item--regular {
opacity: 0.7;
text-decoration: line-through;
margin-left: 8px;
}
.ai-recently-viewed-badge-{{ ai_gen_id }} {
position: absolute;
{{ settings.badge_position }}: 12px;
z-index: 1;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
border-radius: {{ settings.badge_corner_radius }}px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ai-recently-viewed-badge-{{ ai_gen_id }}--sale {
background-color: rgb(var(--color-badge-sale-background));
color: rgb(var(--color-badge-sale-text));
}
.ai-recently-viewed-badge-{{ ai_gen_id }}--sold-out {
background-color: rgb(var(--color-badge-sold-out-background));
color: rgb(var(--color-badge-sold-out-text));
}
.ai-recently-viewed-empty-{{ ai_gen_id }} {
text-align: center;
padding: 40px 20px;
color: rgba(var(--color-foreground), 0.6);
font-size: 14px;
}
@media screen and (max-width: 749px) {
.ai-recently-viewed-grid-{{ ai_gen_id }} {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 750px) and (max-width: 989px) {
.ai-recently-viewed-grid-{{ ai_gen_id }} {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 990px) {
.ai-recently-viewed-grid-{{ ai_gen_id }} {
grid-template-columns: repeat(4, 1fr);
}
}
{% endstyle %}
<recently-viewed-products-{{ ai_gen_id }}
class="ai-recently-viewed-{{ ai_gen_id }}"
data-max-products="{{ block.settings.max_products }}"
data-show-vendor="{{ block.settings.show_vendor }}"
data-show-price="{{ block.settings.show_price }}"
{{ block.shopify_attributes }}
>
<div class="ai-recently-viewed-container-{{ ai_gen_id }}">
{% if block.settings.heading != blank %}
<h2 class="ai-recently-viewed-heading-{{ ai_gen_id }}">{{ block.settings.heading }}</h2>
{% endif %}
<ul class="ai-recently-viewed-grid-{{ ai_gen_id }}" data-products-container></ul>
<div class="ai-recently-viewed-empty-{{ ai_gen_id }}" data-empty-state style="display: none;">
{{ block.settings.empty_message }}
</div>
</div>
</recently-viewed-products-{{ ai_gen_id }}>
<script>
(function() {
class RecentlyViewedProducts{{ ai_gen_id }} extends HTMLElement {
constructor() {
super();
this.storageKey = 'recentlyViewedProducts';
this.maxProducts = parseInt(this.dataset.maxProducts) || 4;
this.showVendor = this.dataset.showVendor === 'true';
this.showPrice = this.dataset.showPrice === 'true';
this.productsContainer = this.querySelector('[data-products-container]');
this.emptyState = this.querySelector('[data-empty-state]');
}
connectedCallback() {
this.trackCurrentProduct();
this.loadRecentlyViewed();
}
trackCurrentProduct() {
if (window.location.pathname.includes('/products/')) {
const productHandle = window.location.pathname.split('/products/')[1].split('?')[0];
this.saveProduct(productHandle);
}
}
saveProduct(handle) {
let products = this.getStoredProducts();
products = products.filter(h => h !== handle);
products.unshift(handle);
products = products.slice(0, 20);
localStorage.setItem(this.storageKey, JSON.stringify(products));
}
getStoredProducts() {
try {
const stored = localStorage.getItem(this.storageKey);
return stored ? JSON.parse(stored) : [];
} catch (e) {
return [];
}
}
async loadRecentlyViewed() {
let handles = this.getStoredProducts();
if (window.location.pathname.includes('/products/')) {
const currentHandle = window.location.pathname.split('/products/')[1].split('?')[0];
handles = handles.filter(h => h !== currentHandle);
}
handles = handles.slice(0, this.maxProducts);
if (handles.length === 0) {
this.showEmptyState();
return;
}
try {
const products = await this.fetchProducts(handles);
this.renderProducts(products);
} catch (error) {
console.error('Error loading recently viewed products:', error);
this.showEmptyState();
}
}
async fetchProducts(handles) {
const promises = handles.map(handle =>
fetch(`/products/${handle}.js`)
.then(res => res.ok ? res.json() : null)
.catch(() => null)
);
const results = await Promise.all(promises);
return results.filter(product => product !== null);
}
renderProducts(products) {
if (products.length === 0) {
this.showEmptyState();
return;
}
this.productsContainer.innerHTML = products.map(product => this.createProductCard(product)).join('');
this.emptyState.style.display = 'none';
}
createProductCard(product) {
const variant = product.variants[0];
const isOnSale = variant.compare_at_price && variant.compare_at_price > variant.price;
const isSoldOut = !product.available;
const imageUrl = product.featured_image || '';
const imageSrc = imageUrl ? imageUrl.replace(/\.(jpg|jpeg|png|gif|webp)/i, '_300x300.$1') : '';
let badge = '';
if (isSoldOut) {
badge = `<span class="ai-recently-viewed-badge-{{ ai_gen_id }} ai-recently-viewed-badge-{{ ai_gen_id }}--sold-out">Sold out</span>`;
} else if (isOnSale) {
badge = `<span class="ai-recently-viewed-badge-{{ ai_gen_id }} ai-recently-viewed-badge-{{ ai_gen_id }}--sale">Sale</span>`;
}
let priceHtml = '';
if (this.showPrice) {
if (isOnSale) {
priceHtml = `
<div class="ai-recently-viewed-price-{{ ai_gen_id }}">
<span class="price-item price-item--sale">${this.formatMoney(variant.price)}</span>
<span class="price-item price-item--regular">${this.formatMoney(variant.compare_at_price)}</span>
</div>
`;
} else {
priceHtml = `<div class="ai-recently-viewed-price-{{ ai_gen_id }}"><span class="price-item">${this.formatMoney(variant.price)}</span></div>`;
}
}
const vendorHtml = this.showVendor && product.vendor ? `<p class="ai-recently-viewed-vendor-{{ ai_gen_id }}">${this.escapeHtml(product.vendor)}</p>` : '';
return `
<li class="ai-recently-viewed-card-{{ ai_gen_id }}">
<a href="${product.url}" class="ai-recently-viewed-card-wrapper-{{ ai_gen_id }}">
<div class="ai-recently-viewed-media-{{ ai_gen_id }}">
${badge}
${imageSrc ?
`<img src="${imageSrc}" alt="${this.escapeHtml(product.title)}" class="ai-recently-viewed-image-{{ ai_gen_id }}" loading="lazy" width="300" height="300">` :
`<div class="ai-recently-viewed-placeholder-{{ ai_gen_id }}">${'{{ "product-1" | placeholder_svg_tag }}'}</div>`
}
</div>
<div class="ai-recently-viewed-info-{{ ai_gen_id }}">
${vendorHtml}
<h3 class="ai-recently-viewed-title-{{ ai_gen_id }}">${this.escapeHtml(product.title)}</h3>
${priceHtml}
</div>
</a>
</li>
`;
}
formatMoney(cents) {
const amount = (cents / 100).toFixed(2);
return `$${amount}`;
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
showEmptyState() {
this.productsContainer.innerHTML = '';
this.emptyState.style.display = 'block';
}
}
customElements.define('recently-viewed-products-{{ ai_gen_id }}', RecentlyViewedProducts{{ ai_gen_id }});
})();
</script>
{% schema %}
{
"name": "AI Recents from tim",
"tag": null,
"settings": [
{
"type": "header",
"content": "Content"
},
{
"type": "inline_richtext",
"id": "heading",
"label": "Heading",
"default": "Recently viewed"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Heading alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "range",
"id": "heading_size",
"min": 16,
"max": 48,
"step": 2,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "range",
"id": "max_products",
"min": 2,
"max": 4,
"step": 1,
"label": "Maximum products",
"default": 4
},
{
"type": "inline_richtext",
"id": "empty_message",
"label": "Empty state message",
"default": "No recently viewed products"
},
{
"type": "header",
"content": "Product card"
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "show_price",
"label": "Show price",
"default": true
}
],
"presets": [
{
"name": "AI Recents from tim"
}
]
}
{% endschema %}