Accessing Checkout Branding
You can access the Checkout branding settings by clicking on "Edit Branding" at the top of your Checkout Editor:
OR
You can also access the checkout branding by going to:
Apps → Aftersell by Rokt → Settings → Checkout branding
From here, you’ll see the live checkout branding configuration that applies to your post-purchase experiences.
These Checkout branding settings are only accessible to Shopify Plus merchants at this time. If you do not have access to Shopify Plus, please refer to this article instead.
Reset and Preview
In the top-right corner of the Checkout Branding editor, you’ll find tools to help you review or undo changes before saving.
Reset
The Reset option allows you to reset all checkout branding settings.
You can choose to:
Reset to previous state, which reverts any unsaved changes and restores the last saved configuration
Reset to null, which clears all branding settings and removes all customizations
Resetting affects all branding settings, including global colours, typography, buttons, form fields, dividers, headers, footers, content areas, main areas, and the order summary.
Preview
The Preview button lets you see how your checkout branding changes will look . Consider using preview to review visual updates across the checkout.
Design System
Global colours
Global colours define your brand and system colours across checkout components. If a colour isn’t explicitly set elsewhere, Aftersell will fall back to these values.
Brand colours
Brand colours are used for your primary brand identity and interactive elements.
Brand – The primary colour used for core branding elements
Accent – Used for highlights, links, and interactive states
Decorative – Used for secondary or decorative elements
Status and system colours
Status colours are used for system messages and state-based UI elements.
Success – Used for confirmation and success states
Warning – Used for cautionary messages
Critical – Used for error states
Info – Used for informational messages
Shopify may take a short time to reflect changes due to caching. If you don't see your changes reflecting in the editor, we recommend placing a test order.
Typography
Typography settings control how text appears across checkout experiences.
You can configure:
Base font size – The default size used for body text
Scale ratio – Determines how text sizes scale up or down from the base size
Primary font
The primary font is used for most components, including body text, buttons, and form controls. You can select a font family and define base and bold font weights
Secondary font
The secondary font is used for headings and emphasis elements. Like the primary font, you can choose the font family and weights.
Only fonts available through Shopify’s checkout branding system can be used. You can preview available fonts in Shopify’s documentation.
Corner radius
Corner radius controls the rounding applied to buttons, form fields, containers, and other UI components.
You can set three radius sizes:
Small – Adds subtle rounding to smaller components
Medium – Adds noticeable rounding to standard components
Large – Adds extra rounding to prominent components
These radius values apply globally across checkout and post-purchase experiences.
Note: You can override the radius scale for individual components in the Customizations section if needed.
Customizations
The Customizations section lets you fine-tune individual components used across checkout. These settings override the global Design System defaults for specific UI elements.
Buttons
Button settings control the appearance of primary and secondary actions.
You can customize:
Corner radius – Which radius scale the button uses
Background style – Solid or transparent backgrounds
Vertical and horizontal padding – Controls button height and width
Borders – Optionally show a button border
Primary buttons are used for main actions, while secondary buttons are used for supporting actions.
Form fields
Form field settings apply to all supported input types across checkout experiences.
You can control:
Corner radius
Label position (for example, inside the field)
Borders
Field-specific overrides allow you to further customize text fields, dropdowns, choice lists, and checkboxes.
Product thumbnails
Product thumbnail settings control how product images appear.
You can adjust:
Borders and border radius
Image fit within the container
Badge background colour, which applies to quantity indicators
Header
Header settings control how the header is displayed and positioned.
You can configure:
Placement and alignment
Padding inside the header container
Colour scheme
Optional dividers between the header and content
Content area
Content area settings control the divider between the main content and the order summary.
You can customize divider visibility, style, and weight.
Main area
Main area settings control the layout and styling of the primary content sections.
You can adjust:
Section containers, including background and borders
Section dividers between content sections
Order summary
Order summary settings control the appearance of the order summary container.
You can customize:
Container background and borders
Dividers between sections
Padding, corner radius, and shadow
Colour scheme
Footer
Footer settings control how the footer is displayed at the bottom of the page.
You can configure:
Placement and alignment
Padding and colour scheme
Optional dividers between the content area and footer
Advanced settings
Advanced settings allow you to define colour schemes. Colour schemes control surface-level colours for key UI elements and let you go beyond the global defaults when needed.
Colour schemes
Colour schemes control surface colours for the main checkout UI, including Checkout and Thank You pages. If a colour isn’t set in a scheme, Aftersell falls back to your Global colours.
You can configure multiple schemes, such as:
Scheme 1 – Main area, used for primary content areas
Scheme 2 – Supporting areas, used for secondary or supporting sections
Buttons
Button colour schemes apply to the main payment button and secondary actions.
For both primary and secondary buttons, you can define colours for:
Default state (background, text, border, accent, decorative, icon)
Hover state (background, text, border, accent, decorative, icon)
Form controls
Form control schemes apply to text fields, drop downs, and choice lists.
You can customize colours for:
Default state
Selected state
Each state supports background, text, border, accent, decorative, and icon colours
Base surfaces
Base surface colours define foundational UI elements such as:
Surface backgrounds
Body text
Borders
Accents used for links and focus states
Decorative and icon colours
These settings help ensure consistency across large areas of the checkout experience.
Post-purchase experiences commonly rely on Global colours. If something looks off, make sure your colour schemes align with your Global colour settings.