Shopify themes, liquid, logos, and UX
I'm sure I'm not the first to ask, but I'll be darned if I can find this answer.
The Debut theme displays the product image cards with the product title at variable heights (depending on the image) which LooKS reALly wOnKy.
How can I fix the product image height so that the product titles will be vertically aligned like nice.. little.. ducks.. in.. a.. row...?
Solved! Go to the solution
This is an accepted solution.
Thanks for store URL
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css.liquid->paste below code at the bottom of the file.
.product-card__image-with-placeholder-wrapper {height: 280px;}
.grid-view-item__image-wrapper {max-width: 100% !important;}
.grid-view-item__image-wrapper div {padding-top: 100% !important;}
.grid-view-item__image-wrapper .grid-view-item__image {max-width: 100% !important; max-height: 100% !important; object-fit: contain;}
Hi,
Please share your store URL , So I will give you proper solution here !
xxxxx
This is an accepted solution.
Thanks for store URL
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css.liquid->paste below code at the bottom of the file.
.product-card__image-with-placeholder-wrapper {height: 280px;}
.grid-view-item__image-wrapper {max-width: 100% !important;}
.grid-view-item__image-wrapper div {padding-top: 100% !important;}
.grid-view-item__image-wrapper .grid-view-item__image {max-width: 100% !important; max-height: 100% !important; object-fit: contain;}
@KetanKumar Well, you just made my day. That works perfectly! Thank you so much; I'll reach out by email if we have any other tweaks we need.
Thanks for update and support.
Hi,
I'm also using debut theme. My website: www.obtaind.com
Is there any fix to get my product title / size / price aligned to the left of my product image? Everything i've tried has failed unfortunately.
Right now it shows as below:
Ideally I'd like to get it to show as:
Thank you,
KW
sorry for this issue but issue was image
https://cdn.shopify.com/s/files/1/0061/7653/8724/products/AA-COKE1_300x300.jpg?v=1571259717
left and right white blank spacing in image.
Hi @KetanKumar
Thanks for the reply! I was only speaking about the images mentioned above.
They're the first 2 products here: https://obtaind.com/collections/new-arrivals
They align correctly on a laptop or smaller screen but when I view them on my large monitor they show up as pictured below:
i have collection its proper
Hi,
Yes it shows proper on a laptop or small screen but on a bigger monitor it shows as this the below:
Any fix would be greatly appreciated.
sorry for late reply
please use container width to bigger screen
Hi,
Thank you for the response - do you have the code and where to place this code for it to work properly?
Sorry for the questions in advance.
Thanks
i mean same look all screen
Hello! @KetanKumar
i really want my pictures bigger on the collection page how can i do that? + if i check my webshopp on my phone it looks like this, its not even next to each other if you know what i mean. How can i fix this? Hope you can help me!
And if i add the code you put here the price and name comes really good next to each other on my laptop but not on the phone view than this happens ->
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 I tried this code on my shop too with the Debut theme. But it only fixes the problem on the mobile site. Did something change in the meantime?
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 I messaged you.
in my theme template have only one theme.css I don't see theme.css.liquid.
what to do?
Hello, @Sharron2
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
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