Overview
Builder Preview Styling lets you customize how your post-purchase offers appear inside the One Click Upsell builder so the preview more closely reflects your Shopify Checkout.
This feature is designed to help you confidently design post-purchase offers by reducing visual differences between what you see in the builder and what customers see on your live store.
You can find this feature by going to Settings > Post-Purchase, then scrolling to the Builder Preview Styling section:
👉 Important: Preview-only behavior
Builder Preview Styling affects only the in-app builder preview and preview URLs.
✅ Builder preview: Uses the styles you configure here
🔒 Live checkout: Always uses your Shopify checkout branding
Your live post-purchase offers automatically inherit styling from Shopify’s Checkout Editor and are not modified by these settings.
Why Builder Preview Styling exists (and why it’s Preview-only)
Shopify controls the checkout experience on your live store. When a customer sees a live post-purchase offer, Shopify automatically applies your store’s checkout branding from the Checkout Editor.
On Shopify Basic, Shopify, and Advanced plans, apps aren’t allowed to automatically access this branding data. Because of that limitation:
The builder preview may appear generic by default
Colors, buttons, and logos may not match your actual checkout
Builder Preview Styling exists to bridge this visual gap. It lets you manually match your logo, colors, and field styling in the builder so the preview more accurately reflects what customers will see during checkout, without changing anything on your live store.
Changing these settings will never affect your live checkout appearance. They exist solely to improve accuracy while designing offers in the builder and preview.
📝 If you’re on Shopify Plus, your checkout branding is automatically synced via Shopify’s API. As a result, Builder Preview Styling is not available or required on Plus stores.
Configuring your Preview
Open your Shopify Checkout Editor in another tab so you can match the exact colors and logo placement.
Upload your Logo
You can add a logo to your builder preview to match your checkout.
Click Choose Image
Upload a PNG, JPG, or SVG file
Save your changes
To remove a logo, click the delete icon next to the uploaded image and save.
Set your preview colors
Match these values to your Shopify Checkout Editor for the most accurate preview.
Background 1
The primary background color of the offer preview.
Background 2
The color used for page elements such as the banner and countdown timer.
Color
Accent color: Highlighted elements
Buttons color: Action buttons
Error color: Validation and error messages
You can enter hex values (for example, #FFFFFF) or use the color picker.
Fields and cards styling
Choose how form fields and cards appear in the preview. Select the option that best matches your checkout layout:
Transparent: Fields blend into the background
White: Fields use a solid white background
Previewing your changes
As changes are saved, the post-purchase offer builder preview updates automatically. These styles are also reflected when using Preview on Store in the builder, helping you visualize your offers more accurately while building them:
👉 Remember: Even if the preview changes, your live checkout and post-purchase pages will always use Shopify’s native branding.
Beta notice and feedback
Builder Preview Styling is currently in beta. We’d love your feedback as we continue improving this feature. Click the feedback link next to the Beta label in the Builder Preview Styling section to share your thoughts:
