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

Solved

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

bxdm
Shopify Partner
6 0 0

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. 🙂

Accepted Solution (1)

DavidEKim
Shopify Partner
392 131 193

This is an accepted solution.

@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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

View solution in original post

Replies 4 (4)

DavidEKim
Shopify Partner
392 131 193

This is an accepted solution.

@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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
bxdm
Shopify Partner
6 0 0

@DavidEKim Thanks very much for your help.  Your solution did exactly what was needed in aligning the 'add to cart' buttons.  Cheers. 🙂 👍

bxdm
Shopify Partner
6 0 0

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. 

DavidEKim
Shopify Partner
392 131 193

Hi,

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

20220811_104027.png

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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner