Customizing the Product Page Widget
Layouts, behavior, texts, and styling of the subscription options — step by step.
Step 1 — Choose a layout
Go to Widgets. Three layouts are available, each fully customizable:
- Default Layout — purchase options stacked in a vertical list. The safest choice; works with virtually every theme.
- Divider Layout — options side by side in equal-width columns. Good when you have exactly two options (one-time vs. subscribe).
- Grid Layout — options arranged in a grid. Good for several frequency plans.
At least one layout must stay active. Click Customize on your chosen layout to open the editor with a live preview.
Step 2 — Style it
The editor has three tabs:
- Widget — the container: borders, divider color and thickness, background, icons, and the selected vs. unselected option states.
- Options — each purchase option's label, price, compare-at price, and description: font, size, weight, and color, plus margins and the discount badge.
- Delivery Frequency — the frequency selector's look.
Element sizes scale from 1x to 3x. Every change updates the preview instantly; nothing goes live until you save.
Step 3 — Set the behavior
Widget-wide behavior settings, with our recommendations:
| Setting | What it does |
|---|---|
| Default purchase option | Which option is preselected: One-time purchase, Pay as you go, or Auto-renew prepaid. Preselecting the subscription lifts subscriber conversion — test it. |
| Show subscription option before one-time | Puts the subscription on top of the list. |
| Show subscription widget on product pages | The master visibility switch — keep on. |
| Show information tooltip icon | Adds a "Subscription details" tooltip; write its title and description yourself (how billing works, how to cancel — reduces hesitation). |
| Show widget on sold out variants | Whether the widget renders when the variant is out of stock. |
| Auto-update price on quantity change | Recalculates the shown price when the customer changes quantity. |
| Add to cart button text | Customize the CTA text. |
Advanced: Custom CSS & JS
If the widget needs pixel-perfect matching with your theme, the settings accept Custom CSS and Custom JS — no theme code edits required. If you're not comfortable writing CSS, message us via the in-app chat: our team adjusts the widget to your theme for free.
Texts, languages, and branding
All customer-facing strings — "Purchase Options", "One-time Purchase", "Subscribe & save", "Delivery frequency", the discount badge, tooltips — are editable and translatable per language on the Translations page (see Translating Widget & Portal Text).
New stores show a small Ego branding line under the widget. Contact our team via in-app chat to verify your store and we remove it for free.
Still need help?
Our support team is available 24/7. Contact support →