Configuring Checkout Styles

Happy Checkout will adopt the checkout styles your theme has enabled on your customized thank you page as well. If you want to do things like add a logo, change colors, or add a background, your theme's checkout settings are the place to do it!

You can access these settings in your Shopify dashboard by going to Settings > Checkout and clicking "Customize checkout":

Once you select this, you'll be taken to your theme customizer, where you can adjust your checkout and thank you page styles.

Style Options

Use a custom background (Banner): enable this to set a background image for the header / top section of your checkout and thank you pages
Background image: if you enable a background image, upload the banner image you want to use here.
Image: If you want to use a logo instead of a site title / tagline, enable a logo, such as your storefront logo, or upload a custom image
Position: Determine where your logo should be displayed in the page header
Logo size: Determine what size logo these pages should use

Use a custom background (Main Content Area): enable this to set a background image for the content area (left side) of your checkout and thank you pages
Background image: if you enable a background image, upload the image you want to use here.
Background color: If you'd rather set a color for your main content area background instead of an image, select that color here
Form fields: Determine whether your form fields should be transparent or white
Use a custom background (Order Summary): enable this to set a background image for the order summar (right side) of your checkout and thank you pages
Background image: if you enable a background image, upload the image you want to use here.
Background color: If you'd rather set a color for your order summary background instead of an image, select that color here

Headings: set the font for your heading text
Body: set the font for your body text
Accent Color: Set the color for hyperlinks, checkmarks, and highlighted text
Button Color: Set the color for call to action buttons
Error Color: Set the color of error messages and invalid fields

Want to see this in action? Here's a sample thank you page, which has a banner, logo, and some color changes set by these settings, and then uses Happy Checkout for further customization.