Widget Customization

Notifly’s widget is designed to blend into your existing product page. The trigger buttons inherit your theme’s font stack, and the modal uses a clean neutral base.

OS 2.0 themes — block settings

If you’re using an OS 2.0 theme with the app block, visual settings are available directly in the theme editor. Select the Notifly block and adjust the following in the right panel:

Setting	Description
Back-in-Stock Button Text	The label on the button shown for out-of-stock variants
Price Drop Button Text	The label on the button shown for in-stock variants
Button Style	Primary renders a filled button, Secondary renders a lightly shaded button, Outline renders a bordered transparent button
Button Color	Sets the button color — applies to the border, fill, and text depending on style
Show icons on buttons	Adds a small bell icon (back-in-stock) or tag icon (price drop) to the button

Changes take effect immediately on save — no code changes needed.

Legacy themes — editing snippets

On legacy themes, button text is set directly in the snippet file. Open Snippets → notifly-widget.liquid in the theme code editor and find these two lines:

<button type="button" class="notifly-trigger" data-trigger-type="back_in_stock" style="display:none;">
  Notify Me When Back in Stock
</button>
<button type="button" class="notifly-trigger" data-trigger-type="price_drop" style="display:none;">
  Alert Me to Price Drops
</button>

Edit the button text between the tags and save.

Button color

The widget uses a single CSS custom property to control button color across both the trigger buttons and the modal’s submit button:

--button-color: #0ea5e9;

On OS 2.0 themes this is set automatically from the Button Color block setting. On legacy themes the default is applied from the stylesheet. To override it on a legacy theme, add the following to your theme’s stylesheet after the Notifly stylesheet loads:

.notifly-widget {
  --button-color: #your-color-here;
}

This scopes the override to the widget only and won’t affect other elements on the page.

The modal’s layout, spacing, and typography are defined in notifly-widget.css. The modal uses standard CSS classes you can target if you need deeper customization. The main elements:

Class	What it controls
`.notifly-modal__content`	The modal panel — background, border radius, shadow
`.notifly-modal__title`	The modal heading
`.notifly-modal__subtitle`	The subheading below the title
`.notifly-form__input`	Form input fields
`.notifly-form__submit`	The submit button

To override any of these, add your rules to your theme’s stylesheet after the Notifly stylesheet loads:

.notifly-modal__content {
  border-radius: 0.5rem; /* tighter corners to match your theme */
}

Button placement

The widget button renders where you placed the app block (OS 2.0) or the {% render 'notifly-widget' %} tag (legacy). To move it, reposition the block in the theme editor or move the render tag in your template file respectively.

A common placement is directly below the Add to Cart button, inside the product form section.