> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.upsell.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to change button color, style, and typography on Upsell.com | Shopify

${youtube}[Customize Button Colors and Styles on Shopify Checkout and Post-Purchase Pages](l3mz0uPNVt4)

This guide will help you easily adjust the color and style of your checkout and post-purchase areas in Upsell.com to match your store's theme.

> **Important**
> In the latest version of Upsell.com, checkout and post-purchase button styles are applied automatically based on your Shopify checkout settings.  
> If you want to customize these styles further, or if you are using the legacy version of Upsell.com, you can still use the manual method shown in this article.  
> This guide remains correct for both legacy users and anyone who wants deeper styling control.


|| Note:- due to Shopify limitations, you will not be able to change button colors on checkout pages in Upsell.com itself, because Shopify limits such changes to keep checkout branding cohesive.

| Upsell.com's post-purchase app will automatically take your colors and typography from your Shopify checkout settings. This article will show how to change these settings. Once those changes have been made, Upsell.com will automatically display these changes in the Upsell.com editor.

## Steps to customize button color and typography

1. **Click** **Settings**

   ![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/onboarding123213-themes-shopif_bc57su.png)

2. **Click** **Checkout**, then **Customize**

   ![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/onboarding123213-checkout-shop_17yt4bf.png)

3. **Click** the **Gear** icon

   ![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/onboarding123213-checkout-edit_1phrsql.png)

4. **Scroll down** to **Color**. Here you can:
* Change the button color to match your store's theme or any preferred color
* Change the color of error messages and accentuated colors

5. **Adjust typography**:
* Change the font for headings and body text to align with your store's theme

6. **Live preview**:
* See your changes in the live preview on the right-hand side

   ![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/jun-06-2024-18-16-37_1pw14nu.gif)

7. **Save changes**:
   
* Click **Save** in the top right-hand corner

   ![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/onboarding123213-checkout-edit_121umjs.png)

8. **Confirm changes are visible**:
   
* Go to your store's page
   
* Refresh the browser (you may need to clear the cache)
   
* Check that the changes are applied across all areas: checkout page, post-purchase page(s), thank you page, and order status page

You now have a fully-branded flow! More conversions here we come!

---

### Well, that's a wrap!

If this article did not solve your issue, our support team is available for you 24/7. Just click the live chat button at the bottom-right corner of this page.

| 📢 Did you know we have a YouTube channel? Don't forget to [subscribe to the channel](https://www.youtube.com/channel/UCyhFu9538WtMSUcdFERO4JA) to keep in touch with us and our news and updates
| 🙏 If you find our app useful, help other merchants find it by [leaving us an honest review on the Shopify App Store](https://apps.shopify.com/reconvert-upsell-cross-sell#modal-show=ReviewListingModal)! It means the world to us
| 📧 Please let us know if you spot any typos, mistakes, or omissions via: care@upsell.com