Align "buy now" buttons within collections

Store Design
,
1

Hello,

I’m looking for a way to align the “buynow” buttons at the bottom of my collections, as they are currently not aligning. Currently they are positioned based on the length of the text above the buttons. I want to align them at the bottom of each product card so they line up. Any suggestions?

I appreciate all help, thanks in advance! :slightly_smiling_face:

My store: gryningens

2

Hello @spoyled

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_1-1669780164922.png
GemPages_1-1669780164922.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_2-1669780199235.png
GemPages_2-1669780199235.png1024×847 30.1 KB

​

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
3

Hi @Ivnvu

You can try my CSS, result as my screenshot

.product-item {
  display: flex;
  flex-flow: column;
}
.product-item .product-item__title,
.product-item .product-item__text {
  flex: 1;
}

James_FoxEcom_0-1669780750850.png
James_FoxEcom_0-1669780750850.png1495×603 301 KB

1 Like
4

Hi @Ivnvu ,

This is Victor from PageFly - Free Landing Page Builder.

Please follow my steps below:

Step 1: Online Stores > More action > edit code > search for your .css file ( could be theme.css

Step 2: paste the code at the end of the file

.product-item {

    display: flex !important;

    flex-direction: column !important;

    overflow: visible !important;

    justify-content: end !important;

}

PageFlyVictor_0-1669782155520.png
PageFlyVictor_0-1669782155520.png1547×602 140 KB

Hope this can help you solve the issue

Best regards,

Victor | PageFly

1 Like
5

Thanks for the amazing help guys!

1 Like
6

Hi @Ivnvu ,

You’re most welcome!

I’m glad I can help you :blush:

7

Hi! Does it matter where specifically I inject this code within the code that the Buy Button provides?