FLOW theme -- how to align "add to cart" buttons when item names are different lengths?

[tmaciejewski]

I am using the FLOW theme. Here is my store page --

https://4ptmke4sp8sa669y-8268827.shopifypreview.com/collections/all-products

Some product names are long enough that they wrap to two lines. I'm not allowed to change product 

I want all "Add to Cart" buttons to be aligned, even if some product titles take two lines. I want the space needed to align the buttons to be between the price and the button.

I DON'T want to create more space between the product title and the price.

How can I get all buttons to align along the bottom?

Thank you!

[Futuremerce · Accepted solution]

Hi @tmaciejewski 

Please follow these steps:

1) Go to Online Store
2) Click edit code
3) Find your theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
product-card.grid-view-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

product-card.grid-view-item .quick-add-wrapper {
    margin-top: auto;
}
</style>

Thanks,

Futuremerce

[Ohara54]

thanks for sharing...

[tmaciejewski]

This worked. Thanks so much!

[BSSCommerce-B2B]

Hi @tmaciejewski , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.liquid. And add this code snippet before tag </head> or </body>: 

<style>
  .grid-view-item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  .grid-view-item .quick-add-wrapper {
    margin-top: auto !important;
  }
</style>

Step 3: Save and reload page:

The result will be: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[tmaciejewski]

Thank you so much!

[BSSCommerce-B2B]

Hi @tmaciejewski   

We're happy to see that our suggestion helped you solve the issue.

Can you kindly give us likes and mark solution for us? This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Thanks in advance.

[BSSCommerce-B2B]

I hope it resolves your issue

[EBOOST]

Hi @tmaciejewski ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid
3. Add code below to end of file and before </body> tag ( refer screenshot)

<style>
        .product-grid--wrapper .grid-view-item {
          height: 100%;
          display: flex;
          flex-flow: column;
        }
        .product-grid--wrapper  .grid-view-item .product-grid--title + .product-grid--price {
          margin-bottom: auto;
        }
      </style>

After Code above has been applied.

[tmaciejewski]

Thank you!

[tim]

I'd start by pasting this into "Custom CSS"

product-card.grid-view-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-view-item .quick-add-wrapper {
  margin-top: auto;
}