Articles on: Widgets

Widget Editor

To access this page, go to Super Subscriptions > Widgets and select a design.


Use the widget editor to control how subscription purchase options appear on your product pages. Pick a widget style, adjust colors and layout, and change the text shown to customers. Settings are saved per widget type, so you can preview multiple designs before publishing one to your store.


Table of contents



Simple customization


Simple mode offers quick controls for matching the widget to your theme.


  1. Choose Simple from the tabs at the top of the settings panel.
  2. Adjust basic options like Color scheme, Animation, Border roundness, and Thickness.
  3. Use the color pickers to match your brand. Selecting Theme colors inherits styles directly from your current theme.
  4. Click Save to update the preview on the right.


Color scheme


The Color scheme dropdown controls how colors are applied to the widget.


  • Default — Inherits colors from your theme if the theme supports color schemes. The preview shows a black and white widget, but on your product page the widget matches your theme colors.
  • Color scheme options — Pick from one of your theme's color schemes. The widget preview will update to show you the selected scheme colors.
  • Custom — Manually pick the background, text, and accent colors.


Click Save after adjusting colors to refresh the preview.


Advanced customization


Switch to Advanced for full control over fonts, spacing, and additional styling options.


  • Open each section (e.g., Base, Widget label, One-time purchase) to reveal more settings.
  • Options include custom font sizes, background colors, button styles, and layout spacing.
  • Toggling settings on or off immediately updates the live preview. Use the collapsible headers to keep things organized.


Editing labels


  1. Click the Labels tab next to Design.
  2. Update text such as Widget label, One-time purchase, and the various Discount tag formats.
  3. Changes save automatically and appear in the preview. Use placeholders like {{ percentage_discount }} or {{ fixed_price }} where needed.


Localize labels


Click the Localize button in the top-right corner of the page to translate widget text for your other store languages. A modal opens where you can enter translations for each label. Saved translations automatically display when a customer views your store in that language.


Preview and publish


  • Use Preview in store to open a test product with your current settings applied.
  • When satisfied, click Publish to set this widget type as the active design. Only one widget can be active at a time, but settings for other types are preserved.


Example settings


  • Animation — Choose between delightful animations to engage customers and inspire them to subscribe.
  • Roundness — Control the roundness of the widget to match your theme design.
  • Thickness — Set the border widths of widget sections to match your theme design.




AI Training Notes (Hidden)

[AI-TAG]
- Feature: Widget editor route
- Key Fields: use_simple, widgetSettings, label text
- UI Terms to reinforce: "Preview in store", "Publish", "Simple", "Advanced", "Labels"
- Related Guides: Removing one-time purchases, Translation settings
[/AI-TAG]

Updated on: 07/12/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!