How to create a size guide widget
Build a size chart for your product pages, add a fit note and measuring picture, publish it, and show the right chart on the right products.
A clear size chart helps shoppers pick the right size the first time.
TL;DR
Go to Store Widgets, click Create Widget and pick the size guide widget. Start from a template or type your own chart. Add a fit note and a measuring picture if you like. Click Publish, then Add to store. Size guides go on product pages. You need an Online Store 2.0 theme.
Step 1 · Create the widget
In Nudgesmart, open Store Widgets and click Create Widget. Pick the size guide widget.
Give it a clear name under Widget information, such as "Women's tops". The name shows as the heading on your store unless you change it in the theme editor.
Step 2 · Build your size chart
Open the Size chart section. Type the column names across the top, such as Chest and Waist. Then add one row per size.
Size chart grid with column headings and one row per size
Screenshot coming soon
Good to know:
- You can have up to 8 columns.
- Press Tab or Enter to move between cells.
- Already have a chart in a spreadsheet? Copy the cells and paste them into the grid.
- Want a head start? Open Template, fit note and measuring guide and pick a template.
Step 3 · Add a fit note and measuring picture
In Template, fit note and measuring guide, add a short fit note, such as "Runs small. Size up if you're between sizes." You can also upload a picture that shows how to measure.
Add a short description to the picture, such as "Where to measure chest and waist". Screen readers read it out to shoppers who can't see the picture.
Step 4 · Pick a style and layout
Open the Design tab and choose how the chart appears.
Design tab for the size guide widget with Layout, Shade every other row and cm / in switch options
Screenshot coming soon
Your options:
- Layout. Button that opens the chart keeps your page tidy. Chart on the page shows the table right away.
- Shade every other row makes long charts easier to read.
- Show the cm / in switch lets shoppers swap units.
- Style, Accent color and Corners.
Step 5 · Publish and add it to your product page
In the Status & publishing card, click Publish. Then click Add to store and choose Add to product page.
Size guides work on product pages only. The full steps, including the Widget dropdown in the theme editor, are in How to add a Nudgesmart widget to your store.
Show the right chart on the right products
Most stores need more than one chart. Make one size guide per chart, then tell each one where to show:
- Open the size guide and go to the Settings tab.
- Under Show on products, add the collections, tags, brands or product types it's for.
- Publish it.
- In the theme editor, leave the block's Widget setting empty.
Now one block shows the right chart on each product. See show different widgets on different products for the order the rules are checked in.
Common pitfalls
- The wrong chart shows on a product. A widget picked in the block's Widget setting always wins. Clear it to let your rules decide.
- Two charts match the same product. The one you published last wins. Change the rules so each product matches only one.
- Edits don't show on the store. Click Publish changes.
Frequently asked questions
Can I put a size guide on my home page?
No. Size guides are made for product pages, so the block is only offered there.
Can I show measurements in both cm and inches?
Yes. Turn on Show the cm / in switch in the Design tab.
What to read next
How to create an FAQ widget
Build a list of questions and answers, style it to match your theme, publish it, and add it to your home, product, collection or other pages.
How to show customer reviews with the testimonials widget
Choose which reviews each testimonials widget shows, pick a layout, publish it, and add it to your home, product or collection pages.