How would we align 'add to cart' button to bottom in collections (prestige theme)?

Store Design
1

Hi there. On this site (removed) we added the code for an ‘add to cart’ button to display on the ‘collections’ pages, however we need to make it align to the bottom of the section so the buttons line up. Is this possible? Thanks in advance friends. B. :slightly_smiling_face:

2

@bxdm

Hi,

To make the collection items aligned bottom line, please add the code below to the assets/theme.css file.

@media screen and (min-width: 1140px) {
  .ProductItem,
  .ProductItem__Wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 24rem;
  }
  h2.ProductItem__Title.Heading {
    height: 60px;
    overflow: hidden;
  }
  .ProductItem__PriceList.Heading {
    margin-bottom: 6px;
  }
}
@media screen and (min-width: 740px) and (max-width: 1139px) {
  .ProductItem,
  .ProductItem__Wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 24rem;
  }
  h2.ProductItem__Title.Heading {
    height: 60px;
    overflow: hidden;
  }
  .ProductItem__PriceList.Heading {
    margin-bottom: 6px;
  }
}

That’s for PC only.

If you resolve the issues, please click “Like” and “Accept solution”.

Please let me know if you still have issues or have any questions.

Hope it helps.

Thanks.

1 Like
3

@DavidEKim Thanks very much for your help. Your solution did exactly what was needed in aligning the ‘add to cart’ buttons. Cheers. :slightly_smiling_face: :+1:

4

One other question. On a product page, how would we duplicate the ‘add to cart’ button, currently at the bottom of the product page, to the top of the page below the product description? https://caffetech.com/products/rocket-appartamento-black-copper Thanks. B.

5

Hi,

You will need to edit the product-template.liquid (or some other file names) for the product page.

20220811_104027.png
20220811_104027.png874×431 25.8 KB

The image shows the DOM structure only. You have to copy the entire DOM (3 div div parts) and paste the code to after ProductMeta div.

Hope it helps.

Thanks.