Making Buy Buttons Same Size as Add to Cart

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.

You can paste it at the end of your theme.css or base.css file. Let me know if you encounter any issues.

1 Like