How to remove border around buy button on product page?

Store Design

Topic summary

A user seeks to remove borders around the buy button, price, and other elements on their product page while keeping borders around the product image and description.

Store Details:

Proposed Solution:
A CSS code snippet was provided to target specific elements:

  • Navigate to Online Store > Edit Code > Theme.css
  • Add custom CSS at the end of the file to set border: 0 !important on various product card elements (shipping, trust, content blocks, and sticky cards)

Status: The solution has been offered but not yet confirmed as tested or working. The discussion appears to be awaiting user feedback on whether the CSS modification achieves the desired result.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi

Pls could u provide a solution to removing border round product buy button, price etc but keep the border round product image and description (attached example below.)

my store:

Theme: Warehouse

URL :addcolours.co.uk

Current:

Screenshot 2022-12-02 at 16.21.17.png
Screenshot 2022-12-02 at 16.21.17.png2879×1627 355 KB

Cheers

2

Hi @adam10910

I understand you will only want to keep the border of the product image and description, the rest will be removed.

If yes, please go to Online Store > Edit Code > Theme.css. Add the css at the end of the file

.product-block-list__item--content .card,
.product-block-list__item--trust .card,
.product-block-list__item--shipping .card,
.product-block-list__item--info .card--collapsed.card--sticky {
     border: 0 !important;
}

I hope that it will work for you.