Tutorials

Getting started with Super Checkout: Brand Styler

Super Checkout: Brand Styler lets you design your checkout, thank-you, customer-account and sign-in pages visually, with a live preview, and publish straight to your store - no code and no theme edits. This guide takes you from install to your first published change in a few minutes.

Before you start

  • You need a store on Shopify Plus - Super Checkout: Brand Styler is built exclusively for Shopify Plus stores.
  • Have your brand colors, a logo file and your preferred typeface in mind. You can change all of them later.
  • Nothing you do in the editor touches your live checkout until you press Publish.

Install the app

Add Super Checkout: Brand Styler from the Shopify App Store. On install, Shopify asks you to approve the permissions the app needs:

  • Manage checkout and accounts branding - so the app can publish your design.
  • Manage files - so logos and images you add upload to your Shopify Files.
  • Read products - so the preview can build an accurate live-checkout link from one real product.

The app is embedded in your Shopify admin, so there is no separate login.

Open the editor

From Apps → Super Checkout: Brand Styler, the editor opens with three areas:

  • A navigator on the left for finding any setting - browsable as columns, a tree or a list, with search.
  • A live preview in the middle showing your checkout as customers will see it.
  • A top bar with your draft name, undo/redo, and the Publish button.

Import your current branding

Start from what your store already has rather than a blank slate. Use Import to pull your live branding into a draft:

  • Fetch from store - reads your current checkout branding directly.
  • Paste JSON or upload a file - if you are moving settings between stores or restoring a backup.

New store with no branding yet? The setup wizard walks you through the essentials - brand color, logo and typeface - and gives you a solid starting point.

Make your first change

  1. In the navigator, open Design tokens → Color and set your primary brand color. The preview updates instantly.
  2. Add your logo - it uploads to Shopify Files and appears on the surfaces you choose.
  3. Toggle the preview between desktop and mobile to check both.

See Branding basics for the full set of design tokens.

Publish

When the preview looks right, press Publish. The app builds the branding input from your draft and runs the update on Shopify's servers using your store session - no tokens are ever pasted. Within moments your live checkout reflects the change.

Not ready to go live? Keep working in the draft. Your changes are saved per shop and never reach customers until you publish.

Next steps