Shopify themes, liquid, logos, and UX
Hi,
I try to keep the subject as clear as possible.
Right now in Mimimal theme, no matter if it's in Wide or Grid layout, the Recommended Products section on Product Detail page is always 4 items. Is there anyone to increase it up to 5?
I think it's nice to have as many recommended products as possible like AMZ.
--
I also did try to increase the layout by changing half-quarter to half-fifth, thinking it would reveal the next one. Usually it would work on Collection page but it appears the Recommended Products section is something else. So the 4 of them just shrink to a 4-column grid without appearing the 5th item, unfortunately.
Thank you in advance.
Solved! Go to the solution
This is an accepted solution.
Hi all,
I've found the solution for your future reference (Yeah me!)
For Minimal theme, you won't be able to find it in related-products.liquid or recommended-products.liquid...but rather, in theme.js!!
--
I don't encourage any change if it doesn't suit your need, because theme.js is not any liquid file and its language is tricky to me.
But I did find these lines of code:
function ProductRecommendations(container) {
this.$container = $(container);
var baseUrl = this.$container.data('baseUrl');
var productId = this.$container.data('productId');
var recommendationsSectionUrl =
baseUrl +
'?section_id=product-recommendations&product_id=' +
productId +
'&limit=4';
In there, you can change 4 into 5. You're welcome 🙂
So now I'm using Grid layout in Minimal theme for Books, because of their small thumbnails, in each of my product page I have 5 small recommended books underneath.
This is an accepted solution.
Hi all,
I've found the solution for your future reference (Yeah me!)
For Minimal theme, you won't be able to find it in related-products.liquid or recommended-products.liquid...but rather, in theme.js!!
--
I don't encourage any change if it doesn't suit your need, because theme.js is not any liquid file and its language is tricky to me.
But I did find these lines of code:
function ProductRecommendations(container) {
this.$container = $(container);
var baseUrl = this.$container.data('baseUrl');
var productId = this.$container.data('productId');
var recommendationsSectionUrl =
baseUrl +
'?section_id=product-recommendations&product_id=' +
productId +
'&limit=4';
In there, you can change 4 into 5. You're welcome 🙂
So now I'm using Grid layout in Minimal theme for Books, because of their small thumbnails, in each of my product page I have 5 small recommended books underneath.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024