How to align the "buy button" in products grid - Local theme

By default, in our Local theme design the "buy now" buttons from the products grid are flexible and can be moved anywhere inside the "product card". Because of that, when using longer product titles, the buttons will end up misaligned. 


Starting with theme version 2.0 we've added this option to align the buy now buttons to the bottom: https://share.getcloudapp.com/Bluz7rE4 .

If you are using an older theme version (1.x) and you like and want to always have the "buy now" buttons aligned like this: screenshot - then please follow these 2 steps: 

1. Edit the snippets/product-item.liquid file and insert this code as indicated in the screenshot:

</div><div

class="product-item__text gutter--regular spacing--xlarge remove-empty-space text-align--{{ settings.product_card_text_alignment }}"

style="padding-top: 0;"

>


2. Open Theme Settings >  Custom CSS and paste this CSS code:

.product-item {

display: flex;

flex-direction: column;

}

.product-item__text:first-of-type {

flex-grow: 1;

}


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.