Tutorials

Branding basics - colors, type, corners and logos

Your whole checkout is built from a small set of design tokens - color, typography, corner radius and spacing - plus the logos and images you add. Set these once and they cascade across every surface. This guide covers each one and how it shows up for customers.

How branding cascades

Super Checkout: Brand Styler follows Shopify's branding model: design tokens feed components (buttons, fields, headings), which render on surfaces (checkout, thank-you, accounts, sign-in). Change a token and every component that uses it updates at once, so you rarely need to style things individually.

Colors

Set your primary brand color first - it drives buttons, links and accents. From there you can refine:

  • Backgrounds and surfaces - the page and the panels on it.
  • Text colors - headings and body copy, kept readable against your backgrounds.
  • Interactive states - the preview derives sensible hover and selected shades so buttons and fields feel right even where the API leaves those states inert.

Contrast matters at checkout. Keep text and buttons clearly legible - the preview is the fastest way to catch a color pairing that looks good in theory but fails on screen.

Typography

Choose the typefaces for headings and body text, and control weight and size where the schema allows. Type is one of the fastest ways to make checkout feel like the rest of your brand.

Plan note: brand colors, logos and full typography control are all included in the Pro plan. Shopify Plus is required - see Plans and usage.

Corner radius

Corner radius sets how sharp or rounded buttons, fields and cards feel. A few degrees of rounding reads as friendly; sharp corners read as precise. Pick the one that matches your storefront and it applies consistently everywhere.

Logos and images

Add your logo and any background or brand images. Files upload straight to your Shopify Files - nothing is hot-linked from elsewhere - and you choose which surface each one appears on. Use a crisp, appropriately sized image; the preview shows exactly how it sits at both desktop and mobile widths.

Finding any setting

The navigator exposes every field of Shopify's branding schema. When you need something specific, use it in whichever view suits you:

  • Columns, tree or list - browse the schema from tokens down to individual fields.
  • Search - jump straight to a setting by name.
  • Favourites and recents - keep the settings you touch often within reach.

Next steps