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

Store Design
, , ,
1

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?

layout i want.jpg
layout i want.jpg2089×1800 333 KB

Thank you!

2

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 tag

Thanks,

Futuremerce

3

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:

BSSCommerceB2B_0-1722218860100.png
BSSCommerceB2B_0-1722218860100.png400×195 26.3 KB

Step 2: Search for the file theme.liquid. And add this code snippet before tag or :

Step 3: Save and reload page:

The result will be:

BSSCommerceB2B_1-1722219023876.png
BSSCommerceB2B_1-1722219023876.png1865×936 328 KB

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!

4

I hope it resolves your issue

5

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 tag ( refer screenshot)

EBOOST_0-1722222628794.png
EBOOST_0-1722222628794.png1158×876 49.1 KB

After Code above has been applied.

Untitled-1.jpg
Untitled-1.jpg1920×10991 2.18 MB

6

thanks for sharing…

7

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;
}
8

This worked. Thanks so much!

9

Thank you so much!

10

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.

11

Thank you!