Skip to main content

Customize sections

Sections logically organize groups of content at checkout. Section styling highlights or contours the look of a page, creating high visual impact and expressiveness in structured content.

With section styles, you can define and add visual emphasis to sections by defining elements like color schemes, padding, border styles, and more. Well-styled sections make it unequivocally clear to customers where they are in the checkout process and where they can find essential information.

This guide explains how to style common checkout sections, including the header, footer, main section, and order summary.

You'll learn some sample customizations, but you can use what you've learned to make other sections customizations.

Note

Borders around the sections in the following example represent the one-page checkout experience. In three-page checkout, each step has a single section, with the exception of express checkout options such as Shop Pay, Google Pay, and Apple Pay.

Tip

You can reset styles to their defaults by writing parent fields to null with the GraphQL Admin API. Refer to examples of resetting some and all values to the defaults.

Anchor to What you'll learnWhat you'll learn

In this tutorial, you'll learn how to do the following tasks:

  • Retrieve the store's checkout profile ID.
  • Style checkout's main sections.
  • Define a custom color scheme, and apply this scheme to checkout sections.
  • Style the order summary section.

Anchor to RequirementsRequirements

Anchor to Step 1: Retrieve the store's published checkout profile IDStep 1: Retrieve the store's published checkout profile ID

Anchor to Step 2: Style checkout's main sectionsStep 2: Style checkout's main sections

In this step, you'll apply one of the default color schemes to checkout's main sections. You'll also set the corner radius so that the sections have square corners, and add some padding and a border around them. For all of these customizations, you'll use the checkoutBrandingUpsert mutation's customizations object and the CheckoutBrandingInput input object.

Tip

Altering this section helps to distinguish it from other sections, so that customers can consume related information in smaller, more manageable segments.

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL mutation

mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {
checkoutBranding {
customizations {
main {
section {
colorScheme
cornerRadius
padding
border
}
}
}
}
userErrors {
field
message
}
}
}

Query variables

{
"checkoutProfileId": "gid://shopify/CheckoutProfile/YOUR_CHECKOUT_PROFILE_ID_HERE",
"checkoutBrandingInput": {
"customizations": {
"main": {
"section": {
"colorScheme": "COLOR_SCHEME2",
"cornerRadius": "NONE",
"padding": "LARGE_200",
"border": "FULL"
}
}
}
}
}

JSON response

{
"data": {
"checkoutBrandingUpsert": {
"checkoutBranding": {
"customizations": {
"main": {
"section": {
"colorScheme": "COLOR_SCHEME2",
"cornerRadius": "NONE",
"padding": "LARGE_200",
"border": "FULL"
}
}
}
},
"userErrors": []
}
}
}
The main sections at checkout displaying colors, square corners, padding, and a border

Anchor to Step 3: Style sections with a custom color schemeStep 3: Style sections with a custom color scheme

In this step, you'll define a third color scheme that you'll apply to some more checkout sections.

Because you're defining a color scheme, you'll use the checkoutBrandingUpsert mutation's designSystem object and the CheckoutBrandingInput input object. When you apply that color scheme to sections, you'll do so with the customizations object.

Tip

Consistent styling across these sections amplifies the merchant's brand presence.

  1. Define the color scheme:

    POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

    GraphQL mutation

    mutation ChangeColorScheme1($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
    checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {
    checkoutBranding {
    designSystem {
    colors {
    schemes {
    scheme3 {
    base {
    background
    text
    border
    icon
    accent
    decorative
    },
    control {
    background
    }
    }
    }
    }
    }
    }
    }
    }

    Query variables

    {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/1",
    "checkoutBrandingInput": {
    "designSystem": {
    "colors": {
    "schemes": {
    "scheme3": {
    "base": {
    "background": "#F7FAF5",
    "text": "#44691E",
    "border": "#DCE9D3",
    "icon": "#44691E",
    "accent": "#44691E",
    "decorative": "#44691E"
    },
    "control": {
    "background": "#F7FAF5"
    }
    }
    }
    }
    }
    }
    }

    JSON response

    {
    "data": {
    "checkoutBrandingUpsert": {
    "checkoutBranding": {
    "designSystem": {
    "colors": {
    "schemes": {
    "scheme3": {
    "base": {
    "background": "#f7faf5",
    "text": "#44691e",
    "border": "#dce9d3",
    "icon": "#44691e",
    "accent": "#44691e",
    "decorative": "#44691e"
    },
    "control": {
    "background": "#f7faf5"
    }
    }
    }
    }
    }
    }
    }
    }
    }

  2. Assign the custom color scheme to the sections.

    POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

    GraphQL mutation

    mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
    checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {
    checkoutBranding {
    customizations {
    header {
    colorScheme
    }
    main {
    section {
    colorScheme
    }
    }
    footer {
    position
    colorScheme
    }
    }
    }
    }
    }

    Query variables

    {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/YOUR_CHECKOUT_PROFILE_ID_HERE",
    "checkoutBrandingInput": {
    "customizations": {
    "header": {
    "colorScheme": "COLOR_SCHEME3"
    },
    "main": {
    "section": {
    "colorScheme": "COLOR_SCHEME3"
    }
    },
    "footer": {
    "position": "END",
    "colorScheme": "COLOR_SCHEME3"
    }
    }
    }
    }

    JSON response

    {
    "data": {
    "checkoutBrandingUpsert": {
    "checkoutBranding": {
    "customizations": {
    "header": {
    "colorScheme": "COLOR_SCHEME3"
    },
    "main": {
    "section": {
    "colorScheme": "COLOR_SCHEME3"
    }
    },
    "footer": {
    "position": "END",
    "colorScheme": "COLOR_SCHEME3"
    }
    }
    }
    }
    }
    }
The color scheme applied to the header, footer, and main sections of checkout.

Anchor to Next stepsNext steps

  • Explore the GraphQL Admin API to learn more about customizing checkout's styling sections.
Was this page helpful?