How to align the "buy button" in products grid

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. 

If this is not something that 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 > Theme code > Custom CSS - screenshot - 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.