Tutorials

Using the live preview

The live preview is the heart of Super Checkout: Brand Styler. It shows your draft the way customers will actually see it - across every surface, at both screen sizes - so you never publish a guess. This guide covers each of its tools.

Why it is accurate

The preview is not a rough mock-up. It is driven by a map of Shopify's real branding behaviour, built against a live store across every surface and hundreds of input paths. That means per-surface rendering, the sign-in surface's separate cascade, derived hover and selected states for controls the API leaves inert, and the same validation bounds Shopify enforces. In practice: what you see is what publishes.

Switch surfaces

Move between checkout, thank-you, customer accounts and sign-in, plus the component gallery. Always give sign-in its own look - it styles differently from the rest (see Checkout & account pages).

Desktop and mobile

Toggle between desktop and mobile widths. A logo or custom section that looks balanced on a wide screen can crowd a phone, and most checkouts happen on mobile - so check both before publishing.

Before and after

Before/after compare puts your draft next to what is currently live. Use it to confirm a change is actually an improvement, and to see at a glance everything a draft will alter when you publish.

Edit pins

Edit pins connect the preview to the controls. Click a pin on any element and the editor jumps straight to the setting that controls it - so you go from "this button is wrong" to the exact field in one click, without hunting through the navigator.

Selection highlighting

As you work in the navigator, the matching element is highlighted in the preview, so you always know which part of checkout a setting affects.

Dev mode

Turn on dev mode to reveal the raw schema path behind any control. It is there when you want to know exactly which branding field you are editing - useful for precise work or for matching settings against Shopify's documentation - and can stay off the rest of the time.

Next steps