How to add a Nudgesmart widget to your store
Publish a widget, place it with the Shopify theme editor, pick it in the Widget setting, and show different widgets on different products.
Building a widget is half the job. This guide shows you how to put it on your store's pages and choose which products see it.
TL;DR
Publish your widget from the Status & publishing card. Click Add to store, then click the button for the page you want. The theme editor opens with the block already placed. If it's the general Nudgesmart widget block, or you have more than one widget of the same type, pick yours in the block's Widget setting. Then click Save there.
Before you begin
You'll need:
- An Online Store 2.0 theme. Store widgets need one. Every theme in the Shopify Theme Store is Online Store 2.0.
- A widget you've built in Nudgesmart. See the guides for FAQ, size guide, testimonials or shoppable video widgets.
- Permission to edit your theme.
Step 1 · Publish your widget
In the widget editor, find the Status & publishing card. Click Publish.
Status & publishing card in the widget editor with the Publish button
Screenshot coming soon
Shoppers see nothing until you publish. When you change a published widget later, the button reads Publish changes. Your edits stay hidden from shoppers until you click it.
If the button is greyed out, read the note under it. It tells you what's missing, such as an item with no text.
If your widget still has sample content, Nudgesmart asks you to confirm before it publishes. That's fine for checking how it looks on your store. Sample reviews, press logos and before-and-after images show with a "Sample" tag and go away on their own once you add your own. Replace any other sample content before you open your store.
Step 2 · Open the theme editor from Nudgesmart
Click Add to store. Tick the pages you want, then click the button next to each one, such as Add to product page.
Add to store window with page checkboxes and Add to product page buttons
Screenshot coming soon
Each button opens the Shopify theme editor on that page, with the block already placed. For a comparison table, product tabs or a countdown, that's the general Nudgesmart widget block. It stays empty until you choose your widget in Step 3. You can open the theme editor before you publish. It shows your draft so you can see where it goes.
Step 3 · Choose your widget and save
In the theme editor, click the widget block. Choose your widget in the Widget dropdown if it's the general Nudgesmart widget block, or if you have more than one widget of this type. Then click Save in the top-right corner.
Theme editor with a widget block selected and the Widget dropdown open
Screenshot coming soon
If you leave Widget empty:
- In a block for one type of widget, such as FAQ widget, the block works it out for you. On product pages, it checks your matching rules (see below). If nothing matches, it shows your main widget of that type, which is the first one you made.
- In the general Nudgesmart widget block, nothing shows on your store. The theme editor shows "Choose a widget in this block's Widget setting" until you pick one.
Step 4 · Check it's live
Back in Nudgesmart, click Check placement. Each page shows ✓ Added when the widget is on your live theme.
Check placement only looks at your published theme. If a page says Couldn't place, your theme may use a page builder there. Add the block by hand (see the next section).
Add a widget by hand
You can also place a widget without Nudgesmart opening the editor for you:
- In Shopify, go to Online Store → Themes → Customize.
- Open the page you want.
- Click Add block, then Apps.
- Pick a widget block, such as FAQ widget or Testimonials widget. The Nudgesmart widget block works on any page, but you must choose a widget in its Widget setting.
- Click Save.
Block settings in the theme editor
Each widget block has a few settings of its own:
- Heading. Leave it empty to use the heading you set in Nudgesmart, or your widget's name if you didn't set one.
- Heading size. Small, Medium or Large. Choose Hidden for no heading.
- Heading alignment.
- Spacing. The space above and below the widget. Choose Custom to set it yourself.
- Width. Full width, Medium or Narrow.
- Only items for this product. Turn it on to show only the items you linked to the product on the page.
- Widget code (advanced). Leave it empty. It's only for typing a widget's code instead of picking it in the Widget setting.
Show different widgets on different products
On product pages, one block can show a different widget for different products. For example, a "Shoes" size guide on shoes and a "Dresses" size guide on dresses.
In the widget editor, open the Settings tab. Under Show on products, add collections, tags, brands or product types. Then publish the widget.
Settings tab with the Show on products section: collections, tags, brands and product types
Screenshot coming soon
Brand is the field Shopify calls Vendor. When a shopper opens a product page, the block checks in this order and stops at the first match:
- A widget you chose in the block's Widget setting
- Collection
- Tag
- Brand
- Product type
- Your main widget of that type
Common pitfalls
- I edited my widget but the store looks the same. Click Publish changes. Edits are saved as a draft until you publish.
- The block shows the wrong widget. Check the block's Widget setting. A widget picked there always wins over matching rules.
- I deleted a widget and the block still shows something. In a block for one type of widget, the block falls back to your matching rules, then your main widget. The general Nudgesmart widget block shows nothing until you choose another widget.
- The Nudgesmart widget block is empty. It shows nothing until you choose a widget in its Widget setting. Choose one, then click Save.
Frequently asked questions
Do I need to edit theme code?
No. Everything is done with the theme editor. You never need to touch code.
How do I take a widget off a page?
Open the theme editor on that page, click the widget block and click Remove block. Then click Save. To hide it everywhere at once, click Unpublish in the Status & publishing card.
Does my theme need to be Online Store 2.0?
Yes. Store widgets are app blocks, and only Online Store 2.0 themes support app blocks.