Featured Product - Remove rectangular border

Store Design
, ,

Topic summary

A user added a Featured Product section to their homepage and wants to remove the rectangular border around the ‘buy now’ button. Initial CSS attempts using border: none !important; failed to resolve the issue.

Solution provided:

  • A PageFly representative shared working CSS code that targets the button element and its pseudo-elements (:before and :after)
  • The code successfully removed both the border and box-shadow properties

Current status:

  • The original border issue is resolved
  • The user now has a follow-up question about removing a similar rectangular border from the ‘Quantity Selector’ block

Note: Some text and image references in the thread appear corrupted or reversed, but the core technical solution and outcome are clear.

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

Hi there,

I added a ‘Featured Product’ section to my homepage and I would like to remove the rectangular border from the ‘buy now’ button.

I’ve tried using ‘border: none !important;’ but it didn’t work. I was also told to try the following code:

.button {
border: none;
}
but did not work either. It is very annoying as I would like to just show the rounded button without the rectangular border but I can’t seem to remove it. I’ve also read that shopify prevents users from editing checkout buttons unless you have the Plus Plan, is that why I can’t edit it?
I am also attaching an image of the custom code I have written so far for the button.
Thanks everybody

Anakin94_0-1677686277253.png
Anakin94_0-1677686277253.png507×152 2.42 KB

Anakin94_1-1677686297336.png
Anakin94_1-1677686297336.png225×195 3.23 KB

2

Hi @Anakin94 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
You can try below code:

button {
    border: none !important;
    box-shadow: none !important;
}
button:after,
button:before {
   display: none !important;
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like
3

Hey @PageFly-Richard , thank you so much for your help, it worked!

May I also ask you how can I remove the same rectangular border from the ‘Quantity Selector’ block?

Anakin94_0-1677687216450.png
Anakin94_0-1677687216450.png202×107 1.96 KB