Re: Align add to cart button Retina Theme

Solved

Align add to cart button Retina Theme

Mentorpublish
Explorer
63 0 14

Hi,

 

Mentorpublish_1-1722496215050.png

 

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.

Accepted Solutions (2)

tim
Shopify Partner
3856 379 1410

This is an accepted solution.

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]

View solution in original post

tim
Shopify Partner
3856 379 1410

This is an accepted solution.

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

Try this instead:

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

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]

View solution in original post

Replies 8 (8)

niraj_patel
Shopify Partner
2378 514 506

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 </body> on theme.liquid
<style>
 .product-thumbnail__header {
      height: 3.5rem;
  }
</style>

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- [email protected]

tim
Shopify Partner
3856 379 1410

This is an accepted solution.

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]
Mentorpublish
Explorer
63 0 14

Hi @tim ,

 

Thx for the solution, it worked perfectly.

Mentorpublish
Explorer
63 0 14

Hi @tim ,

 

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?

 

Mentorpublish_0-1722751441224.png

 

 

Thank you very much.

tim
Shopify Partner
3856 379 1410

Try adding 

.product-thumbnail {
  height: 100%;
}
If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]
Mentorpublish
Explorer
63 0 14

Hi @tim ,

 

Try it, show like this:

Mentorpublish_0-1722828889346.png

 

tim
Shopify Partner
3856 379 1410

This is an accepted solution.

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

Try this instead:

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

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]
Mentorpublish
Explorer
63 0 14

Hi @tim ,

 

Oh this code worked, thank you very much.