Product card and cart drawer

Technical Q&A
,

Topic summary

A user is seeking help with multiple design adjustments for their Shopify store’s product grid and cart drawer.

Product Grid Issues:

  • The “Add to Cart” button needs reduced height and adjusted spacing (less margin above, more below)
  • Product images have unspecified display problems

Cart Drawer Issues:

  • Trash icon and quantity selector are misaligned and need to be on the same line
  • Desktop version: checkout button should span full drawer width
  • Desktop version: “Your Cart” and “Total Price” titles are oversized

Solution Provided:
A responder offered CSS code snippets addressing each issue:

  • Button height/margin adjustments via .product-card .quick-add
  • Image sizing fixes using object-fit: cover with consistent height
  • Flexbox alignment for cart item elements
  • Media query for desktop-specific styling (full-width checkout button, reduced title font sizes)

The responder advised backing up the theme before implementation and adjusting values as needed for desired appearance. The discussion remains open pending confirmation of whether the solution works.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone!

I am trying to change the aesthetic design of my product grid but I still need some support.
For what concert the “ADD TO CART” button I would like it to be smoother in height and with less margin with the product and more margin with the bottom line.

Moreover also the image has some setting problem if you can check.

Finally, the cart drawer if you see has the trash icon smaller than the quantity and I’d like them in line.
And also on the desktop version the check out bottom I’d like it to be large as the total cart drawer and on the desktop version the titles “Your chart” and “Total Price” are too big.

Sorry for asking so many things but I’d really appreciate some support for this.

Thank you!

mohwhi

2

Hi ,

For Adjusting the “Add to Cart” Button use following code in CSS-

.product-card .quick-add {
margin-top: 0;
margin-bottom: 20px; /* Adjust this value as needed /
padding: 10px 15px;
height: 45px; / Adjust height as desired */
}

For Fixing Product Image Display Issues use following code in CSS:

.product-card .product-card__image {
object-fit: cover;
width: 100%;
height: 300px; /* Set a consistent height */
}

For Aligning Trash Icon and Quantity in Cart Drawer use following code:

.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
}

.cart-item .cart-item__quantity,
.cart-item .cart-item__remove {
display: flex;
align-items: center;
}

For Styling the Checkout Button and Cart Drawer Titles on Desktop use following code:

@media (min-width: 1024px) {
.cart-drawer__footer .checkout-button {
width: 100%;
}

.cart-drawer__header h2,
.cart-drawer__footer h3 {
font-size: 1.5rem; /* Adjust font size as needed */
}
}

Please backup your theme before any changes and use height and font size according to appearance .

Let me know if youe need any further help or proccess of implementing this.