Hi I am trying to increase the vertical distance/space between the rows of product in the collection grids to make it clearer which product the “add to cart” and “choose options” buttons relate to. Anyone figure out how to do that? Also want to decrease the width of the “add to cart” and “choose options” buttons so that they are only half of the width of the column.
@Frankfurt_1 - it will need css, can you please share your website link?
thanks @suyash1 website is:
Evwn if I could just change the width of the buttons and on collection grid move them up
under the product title so that it is clear which product they relate to
@Frankfurt_1 - please add this css to the very end of your base.css file and check, adjust numbers as per the need
@media screen and (min-width:750px){
#product-grid .grid__item{margin-bottom: 40px;}
#product-grid .quick-add{max-width: 70%; margin: 0 auto; width: 100%;}
}
Hi @suyash1 unfortunately it didn’t work. I could change the width of the button but not the margin/padding between rows?
@Frankfurt_1 - where did you add the code? not able to see it
Sorry. I just didn’t use big enough numbers. It works fine. Thank you so much.
@suyash1 is there a way to change the order of the information under the product image on the collection grid so that the add to cart button is first below the image, then the price and then the product title. Basically to reverse the current order.
What I am trying to do is get the prices in a line with each other like in the picture. I don’t know if I can anchor them so they sit directly above the add to cart button somehow?
Hi @Frankfurt_1
This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css
.product-card-wrapper .card__content .card__information .card__heading {
min-height: 77px;
}
Hope you find my answer helpful!
Best regards,
Richard | PageFly