> Shopify Plus:
> Checkout styling customizations are available only to [Shopify Plus](https://www.shopify.com/plus) merchants.
## How it works
The GraphQL Admin API includes types and their associated fields for applying styling to checkout, checkout queue, checkout UI extensions, and customer account pages. Styles are applied across these surfaces.
You can save styling changes to a draft checkout, which you can preview in the checkout editor, or to a production checkout on a live site. Review the following sections to familiarize yourself with API data structures and the role of checkout profiles in styling.
### Data structures
The branding API is comprised of the following objects:
- **`designSystem`**: Sets the design language for the entire experience. Its values are set to establish your design system, which encompasses design components such as spacing, colors, typography, and other visual elements that are used throughout the branding process. The `designSystem` object represents the standardized design principles for the brand. `designSystem` provides foundational tokens that are consumed in the `customizations` object.
- **`customizations`**: Styles specific parts of the UI, individual components, or groups of components. With some customizations, you can pull from design system values. Other customizations retrieve their values from a pre-defined array of tokens or a float range. These customizations can be made to adjust the interface to better align with a brand's identity or specific requirements.
The following example JSON object shows the separate objects and their inner contents:
```json
{
"data": {
"checkoutBrandingUpsert": {
"checkoutBranding": {
"designSystem": {
"colors": {
"global": {
"accent": "#d10088"
},
"schemes": {
"scheme1": {
"base": {
"background": "#fffafd",
"text": "#d10088"
},
"primaryButton": {
"background": "#ff9cdd",
"text": "#2e001e",
"accent": "#1773b0"
}
},
"scheme2": {
"base": {
"background": "#fff5fb",
"text": "#2e001e"
}
}
}
},
"typography": {
"size": {
"base": 16,
"ratio": 1.4
},
"primary": {
"base": {
"sources": null,
"weight": 400
}
},
"secondary": {
"base": {
"sources": "local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.shopifycdn.com/oswald/oswald_n4.a5ee385bde39969d807f7f1297bf51d73fbf3c1e.woff2?valid_until=MTY3NTEyMDcxMg&hmac=a4977887b7fe80efb9c9aa29c88d4abfd7fe0a627e24ca55ea23cb2bf8474c92) format('woff2'),url(https://fonts.shopifycdn.com/oswald/oswald_n4.8f3e284746fbc2d29e34993609c51fdc432b0b24.woff?valid_until=MTY3NTEyMDcxMg&hmac=2f43504b8a6cb1c6eac0037d16ff032aab1063a05d704f7b391ee84273936643) format('woff')",
"weight": 400
}
}
}
},
"customizations": {
"global": {
"cornerRadius": "NONE",
"typography": {
"letterCase": "NONE"
}
},
"header": {
"alignment": "CENTER",
"position": "START"
},
"headingLevel1": {
"typography": {
"weight": "BOLD",
"font": "SECONDARY",
"letterCase": "UPPER",
"size": "LARGE"
}
},
"headingLevel2": {
"typography": {
"weight": "BOLD",
"font": "SECONDARY",
"letterCase": "UPPER"
}
},
"primaryButton": {
"cornerRadius": "LARGE",
"typography": {
"letterCase": "UPPER",
"weight": "BASE",
"font": "SECONDARY",
"size": "MEDIUM"
},
"blockPadding": "TIGHT",
"inlinePadding": "BASE"
}
}
},
"userErrors": []
}
}
}
```
### Checkout profile
Checkout branding properties apply to a checkout profile ID. Profiles are useful to test branding against a draft profile before publishing any changes.
The following example uses the [`checkoutProfiles`](/docs/api/admin-graphql/latest/queries/checkoutProfiles) query to retrieve a list of available checkout profile IDs. The `is_published` parameter highlights which checkout profile applies to your store's current live checkout. You supply the `id` in checkout branding mutations to customize your checkout's branding properties.
```graphql
query checkoutProfiles {
checkoutProfiles(first: 1, query: "is_published:true") {
edges {
node {
id
name
}
}
}
}
```
```json
{
"data": {
"checkoutProfiles": {
"edges": [
{
"node": {
"id": "gid://shopify/CheckoutProfile/1",
"name": "Default checkout profile"
}
}
]
}
}
}
```
## Resetting styles
You can reset styles to their defaults by writing parent fields to `null` with the GraphQL Admin API. Refer to examples of resetting [some](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_color_schemes_to_the_defaults) and [all](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_all_styling_to_defaults) values to the defaults.
## Limitations
- You can't currently customize styling for individual pages. Styles are applied across checkout, checkout queue, checkout UI extensions, and customer account pages.
- SVG is not a supported image type for styling checkout.
## Developer tools and resources