Online Store 2.0 Themes
import { Aside } from ‘@astrojs/starlight/components’;
On Online Store 2.0 themes, Notifly uses Shopify’s native app block system. No theme file editing required — everything is done through the theme editor.
Step 1 — Install Notifly from the Shopify App Store
Section titled “Step 1 — Install Notifly from the Shopify App Store”If you haven’t already, install Notifly from the Shopify App Store. During installation, Notifly automatically registers a metafield on your shop (notifly.app_url) that the widget uses to communicate with the app. No action needed on your part.
Step 2 — Open your theme editor
Section titled “Step 2 — Open your theme editor”- In your Shopify admin, go to Online Store → Themes
- Click Customize on your active theme
- Using the page selector at the top, switch from the home page to a product page — look for Products or Default product
Step 3 — Add the Notifly app block
Section titled “Step 3 — Add the Notifly app block”- In the left sidebar, find the Product information section (or whichever section contains your Add to Cart button)
- Click Add block
- Under Apps, select Notifly Notifications
- Drag the block to position it — typically just below the Add to Cart button
Step 4 — Configure the block settings
Section titled “Step 4 — Configure the block settings”With the Notifly block selected, you’ll see the following settings in the right panel:
| Setting | Description |
|---|---|
| Enable Back-in-Stock Alerts | Show the notify button when a variant is out of stock |
| Enable Price Drop Alerts | Show the alert button for in-stock products |
| Show icons on buttons | Adds a small icon to each button |
| Back-in-Stock Button Text | Customize the button label |
| Price Drop Button Text | Customize the button label |
| Button Style | Primary, Secondary, or Outline |
| Button Color | Choose a color to match your theme |
Adjust these to match your store’s style, then click Save.
Step 5 — Verify the widget
Section titled “Step 5 — Verify the widget”Visit a product page on your storefront:
- For a sold-out product (or a specific variant that’s out of stock), you should see the back-in-stock button
- For an in-stock product with price drop enabled, you should see the price drop button
- Clicking either button should open the Notifly subscription modal
How variant selection works
Section titled “How variant selection works”The widget automatically tracks which variant a customer is viewing. When a customer selects a specific size or color, the subscription is tied to that variant — not the product as a whole. Customers can also choose to subscribe to all variants from the modal’s scope selector.