Shopify themes, liquid, logos, and UX
Hi there! How can i change my product grid from 4 per row (currently) to 3 per row on the dawn theme?
Any help would be greatly appreciated
store: https://the-ice-cream-bar-singapore.myshopify.com
password: biaces
@AndrewH94,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<style>
@media (min-width: 749px){
#main-collection-product-grid > .grid__item{
max-width: 33.3333% !important;
width: 100% !important;
}
}
</style>
Kind regards,
Diego
Hii, @AndrewH94
Do you want to like this if yes?
Then paste this code on top of the base.css file.
@media screen and (min-width: 990px){
.grid--4-col-desktop .grid__item {
width: calc(27% - 1rem * 3 / 4) !important;
}
}
Thank You.
Hi.... how do I change my "Collections" pages to show 3 products per row? Thank you
@kuehlapisbymom
Paste this code on top of the base.css file.
@media screen and (min-width: 990px){
.grid--4-col-desktop .grid__item {
width: 33% !important;
}
}
Thank You.
Nothing happened to my "collections" pages.
Only thing that changed is my "featured collection" on my homepage. Max products to show is in multiples of 2s. (2,4,6,8,10,12)
So 3 products in one rows, and the 4th became huge on the second row. So I just need the Collections Pages to show 3 per rows. No changes to the homepage will be fine with me.
hello @kuehlapisbymom
please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 990px){
.collection .grid--quarter-max.grid--4-col-desktop .grid__item {
max-width: 25%!important;
}
}
Hello @Kinjaldavra !
Would you be able to share a code that changes the DAWN product grid to 2 per row? I would massively appreciate it!
can you share your store url so i will check and guide
thanks for url but your store is password protect
Sorry!! The password is sawtwo 🙂
Hi! is there a solution for this? I am having the same issue. I have 4 products in the collection page. I managed to make them show 3 products per row; however, the 4th product took half space of the row in the second row instead of1/3 space.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi!
I am trying to change from 4 rows to 3 rows like above.
https://aquald.myshopify.com/collections/all
thanks!
yes, please give me store url
Hi!
I am trying to change from 4 rows to 3 rows like above.
https://aquald.myshopify.com/collections/all
thanks!
hello @AndrewH94
please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 789px){
#main-collection-product-grid .grid__item{
width: 100% !important;
max-width: 33.3333% !important;
}
}
Hello! Looking to change both my featured collection grid and shop grid to 3 columns. Help would be very much appreciated!
Home: https://elunioncoffee.myshopify.com/
Shop: https://elunioncoffee.myshopify.com/collections/all
Password: woowhi
Thanks!
Yes, please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 990px) {
#product-grid.grid--quarter-max.grid--4-col-desktop .grid__item {
max-width: calc(33.33% - 1rem * 2 / 3);
}
}
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