Shopify themes, liquid, logos, and UX
I would like to decrease the size of images in the collection pages.
Also, I have a collection with only one item and the image is huge (much bigger images than the other collection pages that have 20+ items). I am not talking about the image size on the actual product pages (I have dealt with that) .
Please see pics - see how massive the image is for the gift card (the gift card is a normal product not the Shopify built in gift card)
Also the actual size of the image that has been uploaded on the gift card page is only about 200px x 200px so it has been stretched substantially (I zoomed out of the page to 50% so you could see how big it is in relation to the whole page)
Solved! Go to the solution
This is an accepted solution.
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__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
}
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 Ketan,
the URL is:
https://tmsmaldon.myshopify.com/
password: iafish
The main issue it the 'gift voucher' picture on the gift voucher page, but I would also like the pictures on the 'take away' page which is all the other products to be made a bit smaller.
Thanks for your help.
can you pleas confirm this look fine?
Hi,
Yes that would be better, how do you do it?
Thanks
Kind regards
This is an accepted solution.
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__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
}
Thank you
its my pleasure to help us
Your solution is great, Sir, thank you.
However if there is only 1 product in the collection or if 1 product is not in the same row as the other products, the isolated picture will look huge
I was searching for a solution to this and your response finally helped. However, i am currently only selling one product and when i implemented this code it took it off center. Can you help me add something to center it?? Thank you!
@Kani any help would be greatly appreciated. https://sobaker.com/collections/all
Hi, how can I make it for collection list? If i will have only one collection on page, the image is huge. I have to insert minimum two collections so it would look normal. Thanks.
For anyone having this issue for list of collection when there is one collection on the page in the DAWN theme, change this part of code in section-collection-list.css like this:
line 27
.collection-list__item:only-child {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
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