How do I make the Check Out button into rectangular box? - Publisher Theme

Shopify Discussion

Topic summary

A user seeks help converting their checkout button from rounded to rectangular on a Shopify store using the Publisher theme.

Proposed Solution:

  • Navigate to Online Store → Theme → Edit code
  • Open the theme.liquid file
  • Add custom CSS code before the closing </body> tag
  • The CSS targets button#checkout with border-radius property to remove rounded corners

Status:
The response appears incomplete or corrupted (text contains reversed/garbled characters), making it difficult to verify the exact CSS code provided. The discussion seems to be awaiting confirmation whether the solution worked or requires clarification.

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

URL: https://jsdqft-gs.myshopify.com/cart

Screenshot 2024-12-22 at 3.43.43 PM.png
Screenshot 2024-12-22 at 3.43.43 PM.png2880×1448 156 KB

2

Hello @randytheasian

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#checkout { border-radius: unset !important; }

RESULT:

Tech_Coding_0-1734854630093.png
Tech_Coding_0-1734854630093.png1334×538 52.5 KB

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

1 Like