Align add to cart and price on collection page

Solved
Stubbitinis
Tourist
7 0 4

Hello,

I have managed to put an add to cart button in my collection pages however they are not all aligned and I feel it looks a little messy. Can anyone help me please with how to align everything including the price, description and add to cart button?

I am fairly new to coding! 

my website is www.stubbitinis.co.uk

Thank you

Mick

KetanKumar
Shopify Partner
23454 2357 8631

@Stubbitinis 

sorry for that issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product-grid-image + p {
    min-height: 130px;
}

 

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
0 Likes
Stubbitinis
Tourist
7 0 4

Thanks that has worked for the most part...its now only not aligned when there is a review on the product, please see picture. 

If you can solve this it would be amazing. Thank you.

Align.PNG

 

KetanKumar
Shopify Partner
23454 2357 8631

This is an accepted solution.

@Stubbitinis 

oh sorry for that please add this code also

.jdgm-widget.jdgm-widget {
    display: block !important;
    height: 20px;
}
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
Natztech
Shopify Partner
2125 546 1300

hello @Stubbitinis 

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 .product-grid-image > p {
    min-height: 90px !important;
}
.template-collection .jdgm-widget.jdgm-widget {
    display: block !important;
    height: 20px;
}

 

 

Stubbitinis
Tourist
7 0 4

Thank you, this has worked perfectly. 

KetanKumar
Shopify Partner
23454 2357 8631

@Stubbitinis 

it's my pleasure to help us

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
0 Likes
hasanbigali
Tourist
4 0 2

Hi there, I am trying to do it by also aligning the "Add to cart" button to the centre below the product. Does someone have a solution for this please?

Screenshot 2021-09-23 165016.jpg

0 Likes
Natztech
Shopify Partner
2125 546 1300

hello @hasanbigali 

can you please share your shop url and password so i fix issue

0 Likes
KetanKumar
Shopify Partner
23454 2357 8631

@hasanbigali 

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,

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