EG's Design page (Apps → EG → Design & Translations) is where you control how every EG storefront element looks — colors, fonts, spacing, wording, and (on the Unlimited plan) fully custom CSS. This article walks through each customizable surface, how to use the live preview, and which controls are available on your plan.
The four customizable surfaces
EG shows up on your storefront in up to four different ways. Each one has its own editor on the Design page:
Surface | What it is | When it appears |
|---|---|---|
Notification | A small toast/alert | Shown when an item is added automatically by an "Add automatically" rule, letting the customer know. |
Banner | A banner strip | Shown on the storefront when a rule with "Show a Banner" enabled is active, to highlight an ongoing offer. |
Popup | A modal window | Shown for "Show a popup" rules, letting the shopper pick which item to add to their cart. |
Reminder Banner | A small banner that reopens the popup | Shown after a customer closes the popup from a "Show a popup" rule without adding anything, giving them a second chance. Turned on per rule with the "Show the reminder banner for this rule" checkbox on that rule's edit page. |
Each surface is styled independently — for example, you can give your Popup rounded corners and a serif heading font while keeping your Notification square-edged and in your storefront's default font.
Opening an editor and using the live preview
From the Design page, find the card for the surface you want to change (Notification, Banner, Popup, or Reminder Banner) and click Customize.
This opens a full editor: your design controls on one side, and a live preview on the other. Every change you make updates the preview immediately — nothing goes live until you save.
On the Unlimited plan and above, the preview panel has two tabs:
Preview — a visual mock-up of the component with your current colors, fonts, and text.
HTML Markup — the actual HTML EG will render on your storefront, useful if you (or your theme developer) want to target specific elements with custom CSS.
On the Standard plan, only the visual Preview is shown.
When you're done, use the Save bar that appears at the top of the page to save your changes, or Discard to revert to what's currently live.
Basic design controls
These controls are available on every plan (Standard and above), though the exact set of fields varies slightly by surface:
Colors — a primary color (used for buttons, or for the heading/sub-heading on Notifications, Banners, and Reminder Banners) and, on the Popup, a separate secondary color for headings and a button text color. Each color field has a text input (hex or CSS color name) plus a color-picker swatch.
Position — Notifications, Banners, and Reminder Banners can be placed using a Horizontal Position (Left / Center / Right) and Vertical Position (Top / Center / Bottom) pair of dropdowns.
Button and label text — the Popup lets you set the exact wording for the "Add to cart" button, the "Dismiss" button, the "Out of stock" button, and the label shown next to subscription options. These are required fields.
Close behavior — a "Close popup when clicking outside it" checkbox controls whether clicking the page behind the Popup dismisses it.
Custom image — the Popup and Reminder Banner both accept a custom image URL (.jpg, .jpeg, .png, .webp, .avif, or .svg) instead of the default artwork.
Advanced design controls (Unlimited plan and above)
Merchants on the Unlimited plan or higher unlock a deeper set of controls for Notification, Banner, Popup, and Reminder Banner:
Background color for the component itself.
Fonts — a Font dropdown (Popup has separate Header Font and Body Font dropdowns). The available fonts are a fixed list of common web-safe options (the storefront's default font, Arial, Courier New, Georgia, System UI, Tahoma, Times New Roman, Trebuchet MS, and Verdana) — you can't upload a custom font file or link an external font.
Font sizes for headers, sub-headers, and (on the Popup) body text, in your choice of px, rem, or %.
Padding and Border radius, also in px, rem, or %.
Custom CSS — a raw CSS text field for each surface ("Customised Popup CSS", "Customised Notification CSS", "Customised Banner CSS", "Customised Reminder Banner CSS"). This field is read-only until you click its Edit CSS action, which unlocks it for editing. Custom CSS is applied on top of the design inputs above it, so a rule targeting the same property (background color, border radius, padding, font size, etc.) will override the matching input. There's no live validation of your CSS as you type or on save, so preview your changes carefully before they reach your live storefront.
Default CSS viewer — click Show next to "Default [Component] CSS" to see the base CSS EG currently applies, which is useful as a starting point or reference when writing your own overrides.
Price display
EG automatically decides whether to show a shopper the original price or the discounted price of an offered product in the Popup, based on how the rule's reward is configured — this isn't a manual toggle on the Design page.
Saving, discarding, and reaching your storefront
Changes you make in an editor are saved only when you click Save in the save bar at the top of the page. Clicking Discard (or navigating away and confirming) reverts your unsaved edits.
Once saved, your design settings are pushed to your storefront so the theme app extension can read them. This sync can take a short moment to reach your live store — if you don't see a change immediately, wait briefly and refresh the storefront page.
Design settings are shared across your whole store: a Popup's colors and fonts, for instance, apply to every "Show a popup" rule that uses a Popup, not just one rule.
How this relates to per-rule text and translations
The Design page also has a Translations section (on the same page, below the design cards) for stores that sell in multiple languages. It's a separate workflow from styling:
Design controls appearance — colors, fonts, spacing, custom CSS.
Translations lets you set the shared wording for Popups and Reminder Banners in each supported language.
Individual rules can further override specific text (like a Popup's headline) for that rule alone, from that rule's own edit page — this takes precedence over the shared Design/Translations wording for that rule.
Because Design and Translations are edited on the same page, EG only shows one save bar at a time: opening a component's design editor hides the Translations save bar (and vice versa), so you always know which set of changes you're about to save.
Plan availability summary
Feature | Standard | Unlimited |
|---|---|---|
Notification, Banner, Popup, Reminder Banner — basic colors, position, required text fields | Yes | Yes |
Background color, fonts, font sizes, padding, border radius | No (upgrade prompt shown) | Yes |
Custom CSS + "HTML Markup" preview tab | No (upgrade prompt shown) | Yes |
Common questions
I'm on the Standard plan and don't see a custom CSS field — is something broken? No — custom CSS, fonts, font sizes, padding, and border radius are Unlimited-plan features. You'll see an "Unlock custom CSS editing for popups, banners, and notifications" prompt with an upgrade link instead.
Why is my Custom CSS field grayed out? The custom CSS box is read-only by default so you don't accidentally edit it. Click its Edit CSS label action to unlock it.
I edited my custom CSS but it doesn't seem to change anything. Custom CSS is applied on top of your other design inputs, so it only overrides properties it explicitly targets. Check the HTML Markup tab (Unlimited plan) to confirm the class or ID names you're targeting, and use Show next to the "Default CSS" to see what's already being applied.
Can I use a custom font from Google Fonts or my theme? Not currently — the Font dropdowns offer a fixed list of common web-safe fonts. There's no option to upload or link an external font file.
I saved my changes but my storefront still looks the same. Give it a moment — saved design settings sync to your storefront shortly after saving. If it still hasn't updated after a few minutes, try a hard refresh of the storefront page, and confirm the EG app embed is still turned on in your theme editor.
Does changing a rule's own banner headline affect my Design settings? No. Text you set directly on a rule (like a Banner's headline/sub-line for that specific rule) only applies to that rule. The Design page's Banner editor controls the shared look (colors, fonts, position, CSS) used across all your banners.