Shopify themes, liquid, logos, and UX
I'm using my Shopify site to both sell prints of my cartoons but also as means for people to browse and view the cartoons.
https://earthtoplanet.com/collections/cartoons
Currently, the number of products (i.e., cartoons) per a row is dictated by the screen width. Is there an easy code tweak I can make to set the max number of products in the row to three? (I know it's possible with Featured Collections, but I'm specifically looking to do this on a Collections page).
Really appreciate the help!
Solved! Go to the solution
This is an accepted solution.
@earthtoplanet- add !important after clear:none, so all code becomes
@media screen and (min-width:750px){
.grid-uniform .grid__item{width: 33.33%; clear:none !important;}
.grid-link__title {text-align: center;}
.grid-link__meta {text-align: center;}
}
you can replace old code with this
@earthtoplanet- please add this css to the very end of your timber.css file and check, it is for tablet/desktop view only
@media screen and (min-width:750px){
.grid-uniform .grid__item{width: 33.33%; clear:none;}
.grid-link__title {text-align: center;}
.grid-link__meta {text-align: center;}
}
@suyash1 Thank you! That almost solved the problem though it introduced a new spacing problem where the lines alternate between:
3 products
2 products
3 products
2 products
I zoomed out for a screenshot (https://earthtoplanet.com/collections/cartoons😞
I leave it as is to see if you're able to help me troubleshoot further. I appreciate your time!
This is an accepted solution.
@earthtoplanet- add !important after clear:none, so all code becomes
@media screen and (min-width:750px){
.grid-uniform .grid__item{width: 33.33%; clear:none !important;}
.grid-link__title {text-align: center;}
.grid-link__meta {text-align: center;}
}
you can replace old code with this
@earthtoplanet- welcome, if you need any update then you can contact me on email given below.
Hi @suyash1, I'm planning on switching my site's theme to Dawn. Would you be willing to share with me the relevant code update for Dawn to limit the number of products shown per row to three?
Really appreciate your help!
Thanks for the quick response! I actually just found the answer elsewhere:
Step 1: Go to Online store > Themes > Actions > Edit code
Step 2: Go to Assets > base.css and paste this at the bottom of the file.
@media screen and (min-width: 990px){ .collection .grid--quarter-max.grid--4-col-desktop .grid__item {max-width: 33% !important;} .collection .grid--4-col-desktop .grid__item { width: calc(33% - 1rem * 3 / 3) !important;} }
In the future, I'll email you for a quick response.
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