Making Buy Buttons Same Size as Add to Cart

Shopify Discussion
, , , ,

Topic summary

Goal: align the “Buy” button size with “Add to cart” and add an “Add to cart” button next to “Quick view” on collection pages. Example screenshots were provided via Gyazo links for context.

Latest guidance:

  • CSS fix suggested to equalize button height:
    .product-form__buy-buttons .shopify-payment-button__button–unbranded { min-height: 52px !important; }
  • Implementation: paste the code at the end of theme.css or base.css.

Additional request (collection page button):

  • Adding an “Add to cart” button beside “Quick view” is possible but more complex and may require hiring a developer; unlikely to be done quickly or for free.

Other notes:

  • A contributor asked for the store URL to inspect, but the store owner prefers to share it privately.

Status:

  • Partial solution provided (CSS) with placement instructions. No confirmation yet that it resolved the issue.
  • The collection-page enhancement remains open, pending custom development.
Summarized with AI on December 25. AI used: gpt-5.
3

Hello,

One way to make the two buttons the same size would be to use the below CSS code:

.product-form__buy-buttons .shopify-payment-button__button--unbranded {
  min-height: 52px !important;
}

The other task is possible, but may not be as quick as the other one. If this modification is mandatory, I’d suggest to get in touch with a web developer - it can be challenging to find someone to do it for free.

Cheers!

1 Like