TopRank Tabs

Turn collection products into ranked tabs

Create product ranking tabs inside collection pages. Highlight best sellers, seasonal picks, and sale items with badges.

No code required Works with any theme 2–4 tabs Columns or Slide

Configure in Theme Editor, publish, and you’re done.

Storefront ranking with tabs

How it works

Add the TopRank Tabs block in the theme editor, choose collections for each tab, and publish.

Ranking tabs (2–4)

Turn collections into categories. Rename tab labels to match your store.

Each tab uses one selected collection. No manual product picking.

Badges & rank styles

Show rank badges with flexible text (supports {rank}) and per-rank colors.

Pick styles, set max rank (0–30), customize colors for #1/#2/#3/#4+.

Layout controls

Choose Columns or Slide. Control columns, items, and image ratio for a consistent grid.

Columns: 1–12 columns, 1–30 items/column (up to 30 total).

Storefront ranking with tabs
Add block in theme editor

What shoppers see

Tabs switch product groups on the collection page. The ranking follows each collection’s order.

Before / After comparison
Before / After comparison
Ranking logic
TopRank Tabs uses the existing product order of each selected collection. It doesn’t reorder your collections or modify products. Optional exclusions: unavailable items, out-of-stock items (when enabled), and matching excluded tags.

Setup (2 minutes)

1
Add block
Theme editor → Add block → TopRank Tabs.
2
Configure tabs
Enable 2–4 tabs, set labels, and select collections for each tab.
3
Choose layout
Columns or Slide, text sizes, image ratio, and badge style.
4
Publish
Save the theme. Changes appear on the storefront.
TopRank Tabs mockup
If all tabs are turned off, the tab UI is hidden and Tab 1’s ranking is shown.

Pricing

Simple monthly pricing with a free trial.

Pro
7‑day free trial
Add TopRank Tabs to your theme
$7.99
/ 30 days
  • Storefront display (billing‑linked)
  • All layout & badge settings
  • Multi-language admin UI

* The block makes no storefront network requests (communication‑zero design).

FAQ
Products don’t show up

Check the selected collections, product availability, excluded tags, and stock exclusion setting.

Does it change my collection order?

No. The storefront ranking follows the existing collection order.

Can tabs be renamed?

Yes. Tab labels are fully editable.

Can I preview before paying?

If inactive, storefront output is hidden by default, but you can preview in theme editor (design mode).

Can I cancel anytime?

Yes. You can cancel via Shopify billing at any time.

Legal & Support
Privacy Policy, Terms of Service, and support contact.
Add TopRank Tabs to your theme
Works inside collection pages • No code required
Get started