Storefront
Theme Extension & Store Blocks
The push opt-in, the lead-magnet popup and the event-subscription block, switched on from your Shopify theme.
The theme extension is what puts xUpsell on your storefront. It adds a notification-subscription form, a discount popup, and push notification prompts that your customers see when they visit your store. Without it, your customers have no way to sign up for your marketing — so enabling it is the very first thing to do.
Good to know: Nothing is switched on for you. Each of the three pieces is enabled separately in your Shopify theme, and none of them changes your storefront until you turn it on.
What Is the Theme Extension?
The theme extension is a small piece of xUpsell that lives inside your Shopify theme. It comes in three separate pieces, and each one powers a different customer-facing feature:
| Feature | What It Does | How it’s added |
|---|---|---|
| Notification subscription form | Lets customers on a product page enter their email (and optionally phone) and choose which product events to be notified about | An app block you place on your product template |
| Discount popup (“Lead magnet”) | A floating button customers click to open a popup and enter their email in exchange for a discount | An app embed — turn it on and it works store-wide |
| Push notification prompts | The browser popup asking “Allow notifications?” | An app embed — turn it on and it works store-wide |
Think of it as the bridge between xUpsell and your customers. Your workflows, campaigns, and automations all run inside xUpsell — but the theme extension is what your customers actually see and interact with.
Good to know: These are three independent pieces. You can enable any combination of them — turning one on does not require the others.
The difference matters. The two app embeds take effect as soon as you enable and save them: the discount popup’s floating button appears right away, and the push prompt starts asking visitors for permission. The app block is different — you have to place it on your product template yourself before anyone can see it.
Enabling the Theme Extension
The Setup Guide’s first task, Turn on browser notifications, walks you through the push embed specifically. The other two pieces below are enabled the same way, and this is the most important step after installing.
Option 1: From Settings (Easiest)
- Go to Settings from the sidebar
- Click the Theme management tab
- You’ll see three cards, each with a status badge and an Enable button:
- Enable push notifications — the browser notification permission prompt
- Lead magnet — the discount popup
- Enable custom events subscription — the product-page notification form
- Click Enable — this opens the Shopify theme editor in a new tab
- Finish the job in the theme editor, then click Save
What “finish the job” means depends on which one you clicked:
| Card | What the button opens | What you do there |
|---|---|---|
| Enable push notifications | The theme editor’s App embeds panel with the xUpsell embed already selected | Just click Save |
| Lead magnet | The theme editor’s App embeds panel with the xUpsell embed already selected | Customize it if you like, then click Save |
| Enable custom events subscription | The theme editor on your product template, with the Notification Subscription block already added to the main section | Check you’re happy with where it sits, drag it if you want it elsewhere, then click Save |
Tip: Each piece is independent, and enabling one does not affect the other two. Once one is enabled its button changes to Disable — that reopens the theme editor at the same place, where you toggle the app embed off (or remove the block from your product template) and save.
Lead Magnet note: the popup collects an email and hands the shopper a discount code. The code itself is created and emailed by an xUpsell workflow — see Discount Popup below. It never changes a product’s price in Shopify.
Option 2: From Shopify Admin
- Open your Shopify Admin (admin.shopify.com)
- Go to Online Store → Themes
- Click Customize on your current theme
- For the push prompt and the discount popup: open App embeds in the left sidebar (bottom of the panel), find Enable-Notifications and Discount Popup, and toggle on the ones you want
- For the product-page form: switch the editor to your product template, click Add block in the section where you want it, and choose Notification Subscription
- Click Save in the top right corner
Important: This is the first thing you should do after installing xUpsell. Until you enable them, none of the storefront features work — subscribe forms won’t appear, the popup won’t show, and customers can’t opt into push notifications.
What It Adds to Your Store
1. Notification Subscription Form
The notification subscription form appears inline on product pages. Customers tick a checkbox to open the form, enter their contact details, and choose which product events they want to be notified about.
| Setting | Details |
|---|---|
| Where it appears | Product pages only — you place the block on your product template |
| Fields | Email (required) and phone number (optional) |
| Event choices | Out of Stock, Low Stock, Price Raise, Price Drop, Product Discount — customers tick which ones to follow (at least one is required) |
| Style | Colours, text, spacing and font sizes are all set in the theme editor |
Example: A customer viewing a sold-out item ticks “Notify me about this product,” enters their email, and selects “Out of Stock” — they’ll be alerted the moment it’s back.
You still need a workflow. The form only records who wants to hear about what. The actual message is sent by the xUpsell workflow you build on the matching trigger — Out of stock, Low stock or Product discount.
Price Raise and Price Drop are ahead of themselves. Customers can tick them, but there’s no matching workflow trigger in xUpsell yet, so nothing goes out for those choices today. If you don’t want to offer them, rename or repurpose those two labels in the theme editor.
2. Discount Popup
The discount popup is a floating button that sits in a corner of your store. When a customer clicks it, a popup opens and walks them through claiming a discount code in exchange for their email.
| Setting | Details |
|---|---|
| How it opens | The customer clicks the floating button — the popup only appears on click, there is no automatic trigger or frequency limit |
| Button position | Bottom right, bottom left, top right, or top left (plus a size setting) |
| Steps | A short “want a deal?” teaser, then an email (required) and phone (optional) opt-in, then a success screen with the code |
| On the success screen | A Save my contact for a faster opt-in checkbox, ticked by default. You can reword it in the theme editor |
| Offer | Set the discount percentage the popup advertises — a slider from 1% to 50%. The code the shopper receives is created with this exact value |
| Content | Custom headlines, button text, emoji icon, colours, and disclaimer text at every step |
How the code reaches them: submitting the form creates a real, single-use Shopify discount code immediately and shows it on the success screen, valid for 24 hours. It also saves the shopper as a subscriber and fires the Discount subscription trigger. If the code can’t be created for any reason, the success screen hides the code box rather than showing a fake one, and the message tells the shopper to check their email instead.
You don’t need a workflow for the shopper to get a code — the popup creates one by itself. Build a workflow on the Discount subscription trigger when you also want the code emailed, which most stores want: a code shown once on screen is easy to lose. Use a Discount step followed by an Email step containing
{{discount_code}}.
Tip: The best-performing offers give something in return — “Get 15% off your first order” converts much better than “Subscribe to our newsletter.”
3. Push Notification Permission Prompts
When a customer visits your store, xUpsell can trigger the browser’s built-in “Allow notifications?” prompt. If the customer clicks Allow, they become a push subscriber — you can send them notifications even when they’re not on your site.
| Detail | Info |
|---|---|
| How it works | The browser shows its own native permission prompt as the page loads |
| Not every visitor sees it | Firefox and Safari, and Chrome when it’s in quiet mode, can suppress a prompt that appears without the visitor clicking something first. Those visitors are never asked, so they don’t become push subscribers |
| If they Allow | They’re instantly added as a push subscriber and appear on your Subscribers page |
| If they Block | You can’t ask again (browser restriction) |
| If they Dismiss | You can ask again later |
| Customization | None — this is the browser’s own prompt, so there’s nothing to style |
Good to know: Push notifications are unlimited on every plan — they never count toward your plan’s send allowance, and they keep working even if your email/SMS sends are paused.
Customizing Blocks
The notification subscription form and the discount popup are both customized in the Shopify theme editor. (The push permission prompt has no settings — it’s the browser’s own dialog.)
How to Customize
- Go to Online Store → Themes → Customize
- For the discount popup, open App embeds and click Discount Popup. For the notification form, switch to your product template and click the Notification Subscription block
- Adjust the settings in the panel that opens
- Click Save
What You Can Customize
| Element | What You Can Change |
|---|---|
| Colors | Background, text, border, button, input and checkbox colours, plus success and error message colours |
| Text | Headlines, labels, button text, placeholder text, disclaimers, event labels, success and error messages |
| Layout | Padding, spacing between elements, border radius and input sizing |
| Type size | Label, input and button font sizes, and button font weight (fonts themselves follow your theme) |
| Discount button | Its text, emoji icon, position (any corner), size, and the discount percentage it advertises (1–50%) |
Tip: The notification form asks only for email (required) and an optional phone number — keep the rest simple so more people complete it.
Theme Compatibility
The theme extension works with all Shopify themes that support app embeds and app blocks — which includes:
- All themes in the Shopify Theme Store (free and paid)
- Online Store 2.0 themes
- Most custom-built themes
Note: If your theme was built before 2021 (pre-Online Store 2.0), app embeds and app blocks might not be available. In that case, contact your theme developer or switch to a modern theme.
Frequently Asked Questions
Do I have to enable the theme extension?
Yes — if you want any customer-facing features to work (subscribe forms, popup, push notifications). Without it, xUpsell can still send campaigns and workflows to subscribers you already have, but you can’t grow your list through your storefront.
Post-purchase offers are the exception: they’re a Shopify checkout feature and don’t need any of these theme pieces.
Will it slow down my store?
No. The theme extension is lightweight and loads asynchronously — meaning your store pages load first, then xUpsell’s elements load in the background. Customers won’t notice any speed difference.
Can I customize how everything looks?
The notification subscription form and the discount popup are fully customizable in the theme editor — colours, text, spacing and font sizes. The push permission prompt is the browser’s own dialog, so it has no settings.
What happens if I switch themes?
You’ll need to set the extension up again in your new theme: open the new theme’s editor, turn the xUpsell app embeds back on, and re-add the Notification Subscription block to your product template. Your styling choices don’t carry over between themes.
Does it work with all Shopify themes?
It works with all Online Store 2.0 themes and all themes from the Shopify Theme Store. If you’re using an older or heavily customized theme, some features may not work. Try enabling it — if the App embeds panel or the Add block option doesn’t appear, your theme may need updating.
Can I turn the pieces on and off individually?
Yes. All three are independent. Enable just the ones you want, and use the Disable button in Settings → Theme management to reopen the theme editor and switch one back off. The notification subscription form lives on product pages, while the discount popup and push prompt work across your whole store.
I enabled it but I don’t see anything on my store?
- Notification form: it only exists where you placed it. Check a product page, and confirm the Notification Subscription block was added to the product template and saved.
- Discount popup: look for the floating button in the corner you chose. If it’s missing, confirm the Discount Popup app embed is on and saved.
- Push prompt: you’ll only see it once per browser. If you already answered it, the browser won’t ask again — test in a fresh browser profile.
Customers submit the discount popup but never get a code?
The popup collects the email; the code comes from a workflow. Build a workflow on the Discount subscription trigger with a Discount step and an Email step that includes {{discount_code}}, then turn it on.