Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
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;
}
}
Hello There,
Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.
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.
Page Link: https://apolloprosports.com/collections/genius-pro-stunt-trick-scooter-for-adults-and-kids
Mobile:
But in Tabs
Again in medium desktops, its okay
But in big devices It will cropped.
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;
}
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;
}
}
If helpful then please Like and Accept as Solution
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.
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
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