> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.upsellplus.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 customize the design of your checkout


### Overview
Establishing a cohesive design system ensures consistency across your **Shopify Plus** store's checkout experience. UpsellPlus provides tools to customize various elements of the checkout page, allowing you to align it with your brand identity.

UpsellPlus allows you to edit the design of the checkout.

###### Step-by-Step Guide

1. Log in to **Shopify Admin**

2. Open the UpsellPlus App
* Go to **Apps** in the lefthand menu
* Click **UpsellPlus** from the list of installed apps

3. In the navigation on the left, choose 'Settings' * *
* Click **Go to Checkout branding**
* Select the checkout profile you want to customize

4. Make the changes you want
* Save the changes


![](https://storage.crisp.chat/users/helpdesk/website/-/a/b/f/a/abfa0cd47f75e80/screenshot-2025-05-02-at-15424_3c1g5s.png)


Let's begin identifying each section of the checkout page.

###### Checkout Page Structure:

Understanding the structure of the checkout page is crucial for effective customization. The primary sections include:

1. **Main Checkout Form**: Where customers input their information.
2. **Order Summary**: Displays the products being purchased and their details.

![Checkout Page](https://storage.crisp.chat/users/helpdesk/website/abfa0cd47f75e80/screenshot-2024-08-08-at-23955_12rd1cj.png)

### Customizable Elements

With UpsellPlus, you can modify the following components to enhance the checkout experience:

###### Colors

**Main Checkout Form (Color 1)**

![Colors 1](https://storage.crisp.chat/users/helpdesk/website/abfa0cd47f75e80/screenshot-2024-08-08-at-24651_58bruz.png)

**Order Summary (Color 2)**

![Order Summary](https://storage.crisp.chat/users/helpdesk/website/abfa0cd47f75e80/screenshot-2024-08-08-at-25156_vsnezx.png)

###### Primary Button
![Primary Button](https://storage.crisp.chat/users/helpdesk/website/abfa0cd47f75e80/screenshot-2024-08-08-at-25641_1oinb77.png)

###### Interactive (Links and interactive elements)

![Interactive](https://storage.crisp.chat/users/helpdesk/website/abfa0cd47f75e80/screenshot-2024-08-08-at-30101_14435h6.png)

###### Critical (Errors and other critical information)

![Critical](https://storage.crisp.chat/users/helpdesk/website/abfa0cd47f75e80/screenshot-2024-08-08-at-30430_fkf19h.png)

### Forms
###### Corner Radius - Base

![Base](https://storage.crisp.chat/users/helpdesk/website/abfa0cd47f75e80/screenshot-2024-08-08-at-32519_18u6iiw.png)

###### Corner Radius - Large

![Large](https://storage.crisp.chat/users/helpdesk/website/abfa0cd47f75e80/screenshot-2024-08-08-at-32738_1avahms.png)

**Key Considerations**
* **Brand Consistency**: Maintain uniformity with your overall brand aesthetics to provide a seamless customer experience.
* **User Experience**: Prioritize readability and ease of navigation to reduce cart abandonment rates.
* **Testing**: Regularly test customizations across different devices and browsers to ensure compatibility and responsiveness.


**Related Articles**
* [How to Add Links and Markdown in Text Customizations](https://help.upsellplus.com/en/article/how-to-add-links-and-markdown-in-text-customizations-1xoxxi/)
* [How to Add Images to the App](https://help.upsellplus.com/en/article/how-do-i-add-images-to-the-app-16k2hjr/)