All to cart align

Store Design

Topic summary

Main issue: Align “Add to Cart” buttons consistently across the shop. A CSS rule added in theme.liquid (.product-card .text-block { min-height: 50px !important; }) only affects the homepage; collection pages remain misaligned (image provided).

Proposed fix: Another member suggested adding CSS in Theme Editor > Custom CSS:

  • .buy-buttons-blocks { flex: 1; display: flex; padding-bottom: 12px; margin-top: -12px; }
  • product-form-component { display: block; margin-top: auto; }

Current status: The suggested CSS did not resolve the issue on the shared collection page (https://pickandmix.ae/collections/pick-mix). Buttons remain unaligned beyond the homepage.

Open points: Correct selectors/structure for collection templates may differ from the homepage, so the CSS may not be targeting the right elements or lacks specificity on collection pages. No final solution or next steps confirmed; discussion remains open.

Summarized with AI on December 28. AI used: gpt-5.
1

good day,

how can I How to align Add to Cart buttons on my shop?

i paste this in theme.liquid but just work on hime page other page not align:

.product-card .text-block { min-height: 50px *!important*; }

image
image1920Ă—1061 269 KB

2 Likes
2

Hi @AlexRatii , try pasting the following in the Custom CSS from the Theme Editor

.buy-buttons-blocks {
  flex: 1;
  display: flex;
  padding-bottom: 12px;
  margin-top: -12px;
}

product-form-component {
  display: block;
  margin-top: auto;
}
1 Like
3

thank you for your reply but not working

4

Did you add it from here?

image
image1920Ă—1052 196 KB

1 Like
5

Hey @AlexRatii

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.layout-panel-flex--column {
    justify-content: space-between !important;
}
</style>

RESULT:

image
image1896Ă—917 212 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

6

yes do same

image
image1920Ă—1140 314 KB

7

its work but change some other parts also

image
image1920Ă—1230 329 KB

8

its work now
just checked the class
thank you

how can i align name and price also ?

9

Hey @AlexRatii!

To properly align the product names and prices, all product cards need to use the same image container height.

Some themes let you do this without code:

  • Go to Online Store >> Themes >> Customize
  • Open Collection pages / Product grid
  • Look for options like image ratio, fixed height, or image cropping

Hope this helps! :grinning_face:

10

@AlexRatii

If your theme doesn’t offer this, then CSS would be the proper solution.

Try this code:

.product-media {
  height: 300px; /* adjust as needed */
}

.product-media img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}