Solved

Debut - Collection Grid - Fixed Product Image Height/Vertically Align Product Title

Sharron2
Tourist
4 0 4

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...?

 

Sharron2_1-1606410942789.png

 

 

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Sharron2 

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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 20 (20)

oscprofessional
Shopify Partner
15830 2369 3071

Hi,
Please share your store URL , So I will give you proper solution here !

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Sharron2
Tourist
4 0 4

xxxxx

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Sharron2 

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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Sharron2
Tourist
4 0 4

@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.

thank you.jpg

 

KetanKumar
Shopify Partner
36839 3635 11972

@Sharron2 

Thanks for update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KJWAGNER
Tourist
5 0 2

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:

Screen Shot 2021-05-12 at 5.08.28 PM.png

Ideally I'd like to get it to show as:

 

Screen Shot 2021-05-12 at 5.10.42 PM.png

Thank you,

KW

KetanKumar
Shopify Partner
36839 3635 11972

@KJWAGNER 

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.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KJWAGNER
Tourist
5 0 2

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:

 

Screen Shot 2021-05-12 at 5.08.28 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@KJWAGNER 

i have collection its proper 

KetanKumar_0-1620922532192.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KJWAGNER
Tourist
5 0 2

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.

 

Screen Shot 2021-05-13 at 2.11.03 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@KJWAGNER 

sorry for late reply

please use container width to bigger screen  

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KJWAGNER
Tourist
5 0 2

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

KetanKumar
Shopify Partner
36839 3635 11972

@KJWAGNER 

i mean same look all screen

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Laura98
Excursionist
42 0 8

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!

9E4FE376-1403-43F6-B02B-E8E54A169474.jpeg

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 ->

CD5050AD-51C2-409F-AD54-9DBE7CB1AB22.jpeg

KetanKumar
Shopify Partner
36839 3635 11972

@Laura98 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lauyen
Excursionist
34 0 12

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? 

KetanKumar
Shopify Partner
36839 3635 11972

@lauyen 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lauyen
Excursionist
34 0 12

Hi I messaged you. 

sherlin
Visitor
1 0 0

in my theme template have only one theme.css I don't see theme.css.liquid.

 

what to do?

KetanKumar
Shopify Partner
36839 3635 11972

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing