Help
Help CenterStore widgetsHow to create a comparison table widget

How to create a comparison table widget

Compare products, plans or bundles side by side with checks and crosses, style it to match your theme, and add it to any page.

A comparison table shows shoppers the difference between your options at a glance, so they can pick the right one faster.

Updated October 8, 20263 min readStore widgets

TL;DR

Go to Store Widgets, click Create Widget and pick the comparison table. Name up to 5 columns, add one row per feature, and type yes or no for a check or a cross. Pick a style, click Publish, then add the Nudgesmart widget block in the theme editor and choose your table in its Widget setting.

Step 1 · Create the widget

In Nudgesmart, open Store Widgets and click Create Widget. Pick the comparison table. The editor opens with a sample table so you can see how it looks. If you haven't told us about your store yet, a short Store details screen first asks a few questions about your shipping and returns, so the table starts with your real policies. You can skip it, and change your answers any time from Store Details on the Store Widgets page.

Give it a clear name under Widget information, such as "Which bundle is right for you?". The name shows as the heading on your store unless you change it in the theme editor.

Step 2 · Add your columns and rows

Open the Table section. Type a name for each column across the top, such as your product or plan names. Then add one row per feature.

Good to know:

  • You can have up to 5 columns.
  • In each row, type yes for a check mark or no for a cross. Anything else shows as text, such as "2 years" or "$19".
  • Turn on Highlight this column to make your best option stand out.

Step 3 · Pick a style and layout

Open the Design tab. Choose a Style, then a Layout, and check the preview.

Your options:

  • Style. Seven looks: Match my theme, Minimal, Editorial, Card, Bold, Soft and Luxe. Match my theme uses your theme's fonts and colors.
  • Layout. Table is a classic table. On phones, shoppers swipe sideways and the feature names stay in view. Cards shows each row as a card on phones.
  • Accent color, Corners and the other options in the tab.

Use the Desktop and Mobile tabs above the preview to check both sizes.

Step 4 · Publish and add it to your store

In the Status & publishing card, click Publish. Then add it to your store in the theme editor.

  1. In Shopify, go to Online Store → Themes → Customize.
  2. Open the page you want, such as a product page or your home page.
  3. Click Add block, then Apps, and pick Nudgesmart widget.
  4. Choose your table in the block's Widget setting.
  5. Click Save.

You can also click Add to store in Nudgesmart to open the theme editor on the right page. The comparison table works on your home page, product pages, collection pages and other pages.

Common pitfalls

  • The Publish button is greyed out. Add at least one column first.
  • My edits don't show on the store. Click Publish changes. Edits stay as a draft until you publish.
  • The block is empty. The Nudgesmart widget block shows nothing until you pick a widget. In the theme editor it says "Choose a widget in this block's Widget setting". Choose your table there, then click Save.
  • Nudgesmart asks me to confirm before publishing. Your table still has sample rows. You can publish to check how it looks, but replace them with your own before you open your store.

How to manage your reviews

Edit, hide or delete reviews, choose which reviews each widget shows, and make sure a hidden review comes off your store.

How to create a product tabs widget

Organise details like ingredients, shipping and care into tabs, pick one of three layouts, and add them to your product pages or any other page.

On this page

TL;DRStep 1 · Create the widgetStep 2 · Add your columns and rowsStep 3 · Pick a style and layoutStep 4 · Publish and add it to your storeCommon pitfallsWhat to read next