Re: How To Reduce Size Of Product Image On Home And Collection Page

Solved

How To Reduce Size Of Product Image On Home And Collection Page

Emiway
Trailblazer
263 0 50

I Want This Product Image Small.

Please Help Me TO achieve this

URL:- https://plugmydrip.com/

Screenshot_2024-04-06-15-22-35-02_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

Accepted Solutions (2)

Hardik29418
Shopify Partner
2913 418 1083

This is an accepted solution.

1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>



<style>
@media only screen and (max-width: 600px) {
product-item .product-item__aspect-ratio img {
max-width: 85% !important;
}
}
</style>

 

If my solution works, then please like and accept it as a solution.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Hardik29418
Shopify Partner
2913 418 1083

This is an accepted solution.

Please Go to

1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>


<style>
@media screen and (max-width: 999px) {
.product-list__inner--scroller {
    grid-auto-columns: 35vw;
}
}
</style>

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 4 (4)

Hardik29418
Shopify Partner
2913 418 1083

This is an accepted solution.

1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>



<style>
@media only screen and (max-width: 600px) {
product-item .product-item__aspect-ratio img {
max-width: 85% !important;
}
}
</style>

 

If my solution works, then please like and accept it as a solution.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Emiway
Trailblazer
263 0 50

Thanks For This but also want to reduce width here

This Is My Website 

IMG_20240407_165845.jpg

 

I want like this

IMG_20240407_165828.jpg

Here We Can See More Than 2 Products 

Hardik29418
Shopify Partner
2913 418 1083

This is an accepted solution.

Please Go to

1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>


<style>
@media screen and (max-width: 999px) {
.product-list__inner--scroller {
    grid-auto-columns: 35vw;
}
}
</style>

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Emiway
Trailblazer
263 0 50

Also Bro One Last 

Screenshot_2024-04-07-17-18-13-02_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

Want this Titles in 2 Lines

IMG_20240407_165828.jpg

Like This