Styling Post-Purchase
⚠️ Color Customization Is Limited on Post-Purchase Offers
Styling the post-purchase widget from within Rebuy is restricted due to Shopify's limitations. Custom CSS cannot be added, and custom colors such as hex codes or RGB values are not supported. Shopify controls the available UI components and color options because post-purchase offers run inside a sandboxed environment that does not allow arbitrary style changes.
That said, some styling elements — including button colors, fonts, and page background — are inherited from your Shopify Checkout branding settings, so your store's branded appearance will partially carry over. This guide explains exactly which colors are available for each component.
Description (Rich Text)
The Description field is the only text field in the post-purchase offer editor that includes color options. This is because it uses a rich text editor (RTE), which gives you access to 5 predefined text colors via the toolbar.
Setting | Color | When to Use |
Default | Dark gray (near-black) | Standard body text. Use for most content. |
Subdued | Medium gray | Secondary or de-emphasized text (e.g., fine print, disclaimers). |
Success | Green | Positive messaging (e.g., "You saved 20%!"). |
Warning | Yellow / Amber | Attention-grabbing text (e.g., "Limited time offer"). |
Critical | Red | Urgent messaging (e.g., "Offer expires soon!"). |
These colors are fixed values defined by Shopify. Options like white, blue, purple, or any other custom text color are not available.
Timer
The Timer is a countdown component you can add to your post-purchase offer. It includes a Background Color setting in the Rebuy editor that lets you choose from 4 predefined styles. Each style sets both the background and border color together — they cannot be mixed or customized individually. There is no option to set a custom background color for the Timer.
Setting | Appearance | Best For |
Info | Light blue background | Neutral or informational timers |
Warning | Light yellow background | Creating a sense of urgency |
Success | Light green background | Positive reinforcement (e.g., special deal unlocked) |
Critical | Light red background | High urgency (e.g., offer about to expire) |
Title and Super Title
The Title and Super Title fields do not have any color settings in the Rebuy editor. Both fields always render in the default dark gray. You can adjust text size and apply bold formatting, but color cannot be changed.
Banner
The Banner component has no color customization options. It always appears with a fixed light gray background regardless of your settings. You can only adjust its text alignment and spacing.
Headings
Headings do not have color options in the post-purchase editor. They always render in dark gray. You can control the heading level, which affects the text size, but not the color.
Pay Button
The Pay button color cannot be changed through the Rebuy editor. Its appearance is inherited directly from your store's Shopify checkout branding settings. To update the Pay button color, you need to make that change in Shopify — not in Rebuy. Follow the steps in the Customizing via Shopify Checkout Settings section below.
Star Ratings
Star ratings are the one exception to the color limitations in post-purchase offers. They support full custom hex colors. You can choose any color for both the star fill and the star outline (stroke) using the color picker in the Rebuy editor.
Quick Reference
The table below summarizes color customization availability across all post-purchase offer components.
Component | Custom Colors? | Available Options |
Title / Super Title | No | Fixed dark gray |
Description (RTE) | Limited | Default (dark gray), Subdued (gray), Success (green), Warning (yellow), Critical (red) |
Timer | Limited | Info (blue), Warning (yellow), Success (green), Critical (red) |
Banner | No | Fixed light gray |
Headings | No | Fixed dark gray |
Pay Button | Shopify only | Update via Shopify checkout branding settings |
Star Ratings | Yes — full custom | Color picker for fill and outline (any hex color) |
Customizing via Shopify Checkout Settings
Some base styling for your post-purchase offer page — including the page background, fonts, and primary button color — is inherited from your store's Shopify Checkout branding settings. To adjust these:
Go to your Shopify Admin
Navigate to Settings > Checkout > Customize
Update your brand colors and fonts under the branding section
Note: Changes made in Shopify Checkout settings affect the overall page appearance but do not override the per-component color limitations described in this guide. For example, updating your primary brand color in Shopify will update the Pay button, but the Description text colors will still be limited to the 5 predefined options.
Common Issues and Tips for Styling
Widget Preview Discrepancies: Changes made in the Shopify Checkout Editor may not immediately reflect in the widget preview within your Rebuy dashboard. For accurate testing, we recommend completing a test order to verify the updates.
Inherited Shopify Settings: Ensure your Shopify Checkout settings match your intended branding, as they directly influence the widget's appearance.
FAQ
Why Can't I Use Custom Colors?
Custom colors are not supported in post-purchase offers because of how Shopify's post-purchase extensions work. These extensions run in a sandboxed environment that does not allow custom CSS or arbitrary color values. The available options are defined by Shopify to maintain a consistent checkout experience. This is a Shopify platform limitation, not a Rebuy limitation.
Related Articles
Looking to go further with your post-purchase setup? These articles cover related topics that are helpful when building and refining your post-purchase experience.
Creating a Post-Purchase Offer — Step-by-step guide to building your first post-purchase widget in Rebuy, including data source setup, product display options, discounting, and components.
Creating Post-Purchase Flows — Learn how to set up and prioritize post-purchase flows, activate them in Shopify, and test that the right offers are triggering for the right customers.
Shopify's Post-Purchase Offer Considerations & Limitations — A full breakdown of when post-purchase offers will and won't display, including payment method restrictions, currency limitations, and fulfillment hold behavior.
Post-Purchase and Pixel Tracking Considerations — Understand how adding a post-purchase step may affect pixel tracking analytics and how to address it using Shopify's Customer Events.
Post-Purchase Reporting & Analytics — How to access and interpret your post-purchase analytics, including KPI definitions for display rate, conversion rate, revenue per order, and more.
Post-Purchase Best Practices — Proven strategies for maximizing conversions with post-purchase offers, including accessories, subscriptions, mystery gifts, and social proof.