Check out box color

Store Design

Topic summary

A user wants to change their checkout button color from white to blue-violet (#8A2B2E hex code).

Solutions provided:

  • Official method: Access Shopify’s theme customization settings through the admin panel to modify the checkout button color. A screenshot demonstrates the location of this setting in the Shopify interface.

  • Custom code approach: Add CSS code to the theme.liquid file before the </head> tag for more direct control over button styling.

Both methods offer ways to customize the checkout button appearance, with the official Shopify settings being the simpler approach and custom code providing more flexibility. The discussion includes visual references and links to Shopify’s help documentation for additional guidance.

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

How do I change the color of this check out button? It’s currently white but I want to change it to blue violet (hex code: #8A2BE2)

url:ausomeapparelco.com

IMG_2719.png
IMG_2719.png1284×2778 244 KB

2

Hello there @bnbrown88 this is from the official Shopify help centre

IMG_1379.jpeg
IMG_1379.jpeg1125×1216 116 KB

If you want to do this on your phone or just want extra information, you can check it all here https://help.shopify.com/en/manual/online-store/dynamic-checkout/customize-button

3

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Result:

AnneLuo_0-1730948148285.png
AnneLuo_0-1730948148285.png530×423 11.5 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!