Shopify themes, liquid, logos, and UX
Hello everyone,
Almost all of my product images look very zoomed in before clicking on them, like this:
This is a bottle but it's hard to tell if you don't click on it.
How can I adjust my pictures to show the whole outlining?
Thank you so much!
Solved! Go to the solution
This is an accepted solution.
Hi @Dike,
You can change it to get the images you want. 🙂
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
This is an accepted solution.
Hi @Dike,
With width, please change code:
.card--product .media img{
right: 0 !important;
margin: auto;
width: 70% !important;
}
Hope it is clear to you.
Is this possible?
Hi @Dike,
Please go to Customize > Featured collection > PRODUCT CARD > Image ratio > Adapt to image. Refer https://i.imgur.com/Q0IL0bq.png
You can resize it here.
Hope it helps!
Thank you for your reply!
I've tried this but this makes the images look huge. Not all images are the same size so the row of images wont be linear either.
Example:
If you have any idea on how to fix this, I would greatly appreciate it!
Hi @Dike,
Because your images have different size, it will be difficult to display well for all, you can add the following code, it will help to display better now.
Go to Assets > base.css and paste this at the bottom of the file:
.card--product .media {
padding-bottom: 120% !important;
}
Hope it helps!
Thank you so much. This definitely helped portray the products more clearly!
But it also made the pictures too big, and too narrow. If this could be tweaked than I could maybe play with the numbers to get the perfect fitting.
This is an accepted solution.
Hi @Dike,
You can change it to get the images you want. 🙂
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Hey LitCommerce,
I accepted this as a solution, thank you!
But I was hoping if you could tell me the code to add padding to the width instead of the bottom, as my pictures are longer than the width. I think this would solve it?
Thank you so much.
This is an accepted solution.
Hi @Dike,
With width, please change code:
.card--product .media img{
right: 0 !important;
margin: auto;
width: 70% !important;
}
Hope it is clear to you.
Thank you once again. This helped tremendously!
Hi @Dike,
If you have any difficulty, you can contact me 🙂
Happy to help you.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024