Squarespace 7.1UI Components

Tier List Widget

By Common Ninja

Free
Tier List Widget – Squarespace UI Components on SquareLocator
Fit check
Great for
Gaming and entertainment sites
Reviewers and buying-guide bloggers
Brands creating shareable content
Communities and fan sites
Know before you buy
  • Check Common Ninja's current free plan view limits before using it on a busy page.
  • Make sure your Squarespace plan lets you add code blocks.
  • Try the editor demo on the vendor page before committing.
Version7.1
SetupEasy

Overview

Common Ninja's Tier List widget turns a set of items into an S/A/B/C style ranking board on a Squarespace page. You can publish your own ranking, or leave items in an Unranked row and let visitors drag them into the tiers themselves. Tiers are unlimited with your own labels and colours, items can be text, images or both, and dragging works on touch screens and with the keyboard.

What you get

  • Drag and drop between tiers and within rows, including on touch screens
  • Unlimited custom tiers with your own labels and colours
  • An optional Unranked row for visitors to sort
  • Text and image items in square, rounded or circular shapes
  • Pulse, shake, glow or float animations on hover or continuously
  • Keyboard and screen-reader support, translations and custom CSS

Who it suits

Gaming, film and music sites, reviewers and bloggers writing buying guides, and brands that want an interactive piece of content people will share. It is a content and engagement tool rather than a business feature, so most service sites will not need it.

Honest limits

  • Visitors' own rankings are an on-page activity; we could not confirm from the vendor page that individual visitor rankings are saved or aggregated, so do not plan on collecting them as data.
  • It is an externally hosted embed, so it loads from Common Ninja's servers rather than from Squarespace.
  • The free plan has monthly view limits; once a busy page passes the cap the widget can stop showing until you upgrade or the month resets.
  • You need a Squarespace plan that lets you add code blocks.

How it is delivered

Sign up for a free Common Ninja account, build the widget in their visual editor, then copy the embed code from the Add to Website tab and paste it into a Squarespace code block. There is nothing to install on Squarespace itself and no files to download. The free plan is ongoing; paid Common Ninja plans are billed by Common Ninja and raise view limits and unlock extra features.

Related guide: Free Squarespace plugins and the Squarespace plugins hub.

Common Ninja's Tier List widget turns a set of items into an S/A/B/C style ranking board on a Squarespace page. You can publish your own ranking, or leave items in an Unranked row and let visitors drag them into the tiers themselves. Tiers are unlimited with your own labels and colours, items can be text, images or both, and dragging works on touch screens and with the keyboard.

What you get: drag and drop between tiers and within rows, including on touch screens; unlimited custom tiers with your own labels and colours; an optional Unranked row for visitors to sort; text and image items in square, rounded or circular shapes; pulse, shake, glow or float animations on hover or continuously; keyboard and screen-reader support, translations and custom CSS.

Who it suits: Gaming, film and music sites, reviewers and bloggers writing buying guides, and brands that want an interactive piece of content people will share. It is a content and engagement tool rather than a business feature, so most service sites will not need it.

Honest limits: Visitors' own rankings are an on-page activity; we could not confirm from the vendor page that individual visitor rankings are saved or aggregated, so do not plan on collecting them as data. It is an externally hosted embed, so it loads from Common Ninja's servers rather than from Squarespace. The free plan has monthly view limits; once a busy page passes the cap the widget can stop showing until you upgrade or the month resets. You need a Squarespace plan that lets you add code blocks.

Setup follows the usual Common Ninja routine: build it in their visual editor, paste one line of embed code into a Squarespace code block, and any later edits update on your site automatically. A free plan is available, with paid tiers for higher view limits and extra features.
What it does
  • Drag-and-drop tier ranking
  • Unlimited custom tiers
  • Unranked row for visitor sorting
  • Image and text items
  • Keyboard and screen-reader support
Full specifications

FAQs

FAQs

What does the Tier List widget do?
It displays items in ranked tiers, such as S, A, B and C, and lets visitors drag items between tiers and reorder them.
How do I add it to Squarespace?
Build it in Common Ninja's editor, then paste one line of embed code into a Squarespace code block. Later edits in the Common Ninja dashboard update on your site automatically.
Is it free?
There is a free plan with monthly view limits. Paid tiers raise the view limits and unlock extra features, so check Common Ninja's pricing page before using it on a busy page.
Can visitors make their own ranking?
Yes. Leave items in the optional Unranked row and visitors can drag them into the tiers they choose.
Can I rename the tiers?
Yes. Tiers are unlimited and you set each label and colour, so you can use letter grades or labels like Must Play, Worth It and Skip.
Is it accessible?
Items can be moved with the keyboard and each move is announced to screen readers, and dragging also works on touch screens.