Hello,
Hoping someone can help. I need to drastically reduce the size of my product listings to smaller icons but I have no idea how to do this. They take up almost all of the screen on all devices. (Dawn)
Thanks
Lauren
Hello,
Hoping someone can help. I need to drastically reduce the size of my product listings to smaller icons but I have no idea how to do this. They take up almost all of the screen on all devices. (Dawn)
Thanks
Lauren
Hey @LaurenB91
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hi @LaurenB91 ,
Step 1: Go to Shopify Admin β Online Store ->Theme β Edit code
Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file β Save
.collection ul#product-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 30px;
}
.collection ul#product-grid li {
width: 20%;
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
Hey @LaurenB91
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, donβt forget to Like it and Mark it as Solution!
Best Regards,
Moeed
#product-grid {
display: grid !important;
grid-template-columns: auto auto auto !important;
}
#product-grid li {
width: 95% !important;
}
#product-grid {
display: grid !important;
grid-template-columns: auto auto auto auto !important;
}
#product-grid li {
width: 95% !important;
}
Thanks all! Much better!