Solved

What's the fix for image cropping issues on Shopify's Konversion theme?

ECC1
Excursionist
29 0 13

Hello
I have Konversion theme installed in my shopify site.
But the problem is with the collection page. The collection image is not seems okay. I have tried many devices but the image is cropped or sometimes very small.
I know about the column and row functionality of the theme.
I mean,
On Mobile Its okay, Slightly bigger screen on tab Its cropped, Again in mini laptops its okay, But in big screens its again cropped.
Whats the problem. Which part of setting or code we need to change to fix it.

We need a urgent solution.
Thank you

Accepted Solutions (2)
Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @ECC1 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-collection .grid .grid__item  .product-card .product-card__image {
    height: 100% !important;
}

 

View solution in original post

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 1024px){
.product-card .product-card__image {
height: 45vw !important;
}
}
@media screen and (max-width: 575px){
.product-card .product-card__image {
height: 50vw !important;
}
}
@media screen and (max-width: 480px){
.product-card .product-card__image {
height: 55vw !important;
}
}
@media screen and (max-width: 400px){
.product-card .product-card__image {
height: 62vw !important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 8 (8)

ZestardTech
Shopify Expert
5393 970 1291

Hello There,

Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Kinjaldavra
Shopify Partner
2302 570 1422

hello @ECC1 

Please share your store URL and Screenshot of the section. So that I will check and let you know the exact solution here. 

ECC1
Excursionist
29 0 13

Page Link:  https://apolloprosports.com/collections/genius-pro-stunt-trick-scooter-for-adults-and-kids

 

Mobile: 

ECC1_0-1625730295107.png

 

But in Tabs

ECC1_1-1625730326034.png

Again in medium desktops, its okay

ECC1_2-1625730381906.png

 

But in big devices It will cropped.

 

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @ECC1 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-collection .grid .grid__item  .product-card .product-card__image {
    height: 100% !important;
}

 

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 1024px){
.product-card .product-card__image {
height: 45vw !important;
}
}
@media screen and (max-width: 575px){
.product-card .product-card__image {
height: 50vw !important;
}
}
@media screen and (max-width: 480px){
.product-card .product-card__image {
height: 55vw !important;
}
}
@media screen and (max-width: 400px){
.product-card .product-card__image {
height: 62vw !important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Kinjaldavra
Shopify Partner
2302 570 1422

If helpful then please Like and Accept as Solution

ZestardTech
Shopify Expert
5393 970 1291

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Don
Shopify Staff
2762 199 388

Hey there @ECC1!

Don here from Shopify.

Thanks for sharing your query with us here in the Shopify Community and it's great to see our fellow Community members have been able to chip in here already with suggestions!

It's always a good idea to make a duplicate copy of your theme before trying out any coding changes, just so you have a safe version to revert to.

How you'd be able to get support for a given theme will depend on from who this theme was acquired.

For the free Shopify themes in our theme store, we'd be able to provide support for these ourselves at Shopify, whereas paid themes are supported by their developers.

Are you still working towards launching your store or are you selling already?

Could you tell us a bit more about how you're looking to market your store and who you're looking to reach out to?

Check out this example of a skate store in Ottawa that found success using Shopify for their business.

 

Regards,

Don

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog