Align add to cart button Retina Theme

[Mentorpublish]

Hi,

Is it possible to align the add to cart button from different products to the same height?

Here is my website: https://1cabe3-26.myshopify.com/

Thank you.

[niraj_patel]

Hello @Mentorpublish

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.product-thumbnail__header { height: 3.5rem; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[tim_1]

In theme customizer, go to Theme Settings, find “Custom CSS” and add the following code:

.product-thumbnail, .product-thumbnail__info {
  display: flex;
  flex-direction: column;
  flex-grow:1;
}

.product__form {
  margin-top: auto;
}

Or, can use “Custom CSS” in product grid sections settings

[Mentorpublish]

Hi @tim_1 ,

Thx for the solution, it worked perfectly.

[Mentorpublish]

Hi @tim_1 ,

Sorry to bother again, just found out if I change the product card from “Grid” to “Slideshow”, then the alignment of add to cart will be gone, do you know how to solve this issue?

Thank you very much.

[tim_1]

Try adding

.product-thumbnail {
  height: 100%;
}

[Mentorpublish]

Hi @tim_1 ,

Try it, show like this:

[tim_1]

Yeah, sometimes it happens when you have no access to the source code…

Try this instead:

.product-thumbnail {
  min-height: 100%;
}

[Mentorpublish]

Hi @tim_1 ,

Oh this code worked, thank you very much.