How can i add round corners for "Add item to cart" button

Store Design
, , , ,

Topic summary

A user seeks help adding rounded corners to their Shopify store’s “Add item to cart” button.

Initial Solution Attempt:

  • A helper (niraj_patel) provides CSS code to be added to the theme.liquid file before the </body> tag
  • The code targets button.product-form__submit::before and button.product-form__submit::after with a 15px border-radius
  • This first attempt doesn’t work for the user’s specific store

Successful Resolution:

  • After reviewing the user’s store URL, niraj_patel provides updated CSS code
  • The revised solution increases the border-radius to 25px and uses !important to ensure the styling applies
  • The user confirms this second solution works successfully

Key Technical Details:

  • Solution involves adding custom CSS to the theme.liquid file
  • Uses CSS pseudo-elements (::before and ::after) to style the button
  • The !important flag ensures the custom styling overrides existing theme styles
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

button.product-form__submit::before, button.product-form__submit::after { border-radius: 25px !important; } .product-form__submit { border-radius: 25px !important; }

niraj_patel_0-1725200572643.png
niraj_patel_0-1725200572643.png630×326 3.5 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like