Collection list tabs

Overview

Collection list tabs lets you display multiple collection lists under a single section heading, with each list accessible via tabs. Each tab is a block, and each block contains a Collection list selector (a curated list of collections).

This is perfect for “Shop by category” experiences like:

• “Women / Men / Kids”

• “New / Best sellers / Sale”

• “By room: Living / Bedroom / Kitchen”

---

How it works

Tab structure (blocks)

• Each block = one tab

• Block fields:

  • Tab title

  • Collection list (Shopify “collection_list” selector)

Max blocks: 5.

Rendering logic

• The section builds the tab buttons first.

• A tab is included when:

  • the block has collection_list selected, OR

  • you’re in design mode, OR

  • hide_when_empty_content is false

Only tabs that pass this logic are added to available_tab_ids and rendered as panels.

If no valid tab exists, the section outputs nothing.

---

Layout behavior (grid vs slider per tab)

Each tab calculates its own item_count:

• If block has a collection list: item_count = collection_list.count

• Else (empty): item_count = 8 (placeholder mode)

Then it decides slider mode:

• Mobile slider: swipe_on_mobile AND item_count > columns_mobile

• Tablet slider: swipe_on_mobile AND item_count > columns_tablet

• Desktop slider: enable_desktop_slider AND item_count > columns_desktop

So one tab can be a slider while another might not, depending on item count.

---

Collection cards

Each tab renders the same card-collection snippet as your normal Collection list section.

Supported options:

• Image ratio: adapt / square / portrait / landscape

• Show title

• Show products count

• Auto “small title” sizing based on columns:

  • small on mobile if columns_mobile > 1

  • small on tablet if columns_tablet > 2

  • small on desktop if columns_desktop > 4

If a tab has no list selected, it renders placeholders (collection-apparel-*).

---

Section heading + tabs UI

The heading area is custom-built in section_heading and includes:

• Title / subtitle layout

• A <ul role="tablist"> for the tab buttons

• Each button uses:

  • role="tab"

  • aria-controls="panel-..."

  • aria-selected toggled

  • A unique suffix: section.id + block.id

The tabs are wrapped with <custom-tabs class="tabs"> and rely on your theme’s component-tabs.css + JS behavior (via that custom element).

Accessibility label

• The tablist aria-label uses tabs_label setting.

• You should set a meaningful label like: “Collection categories”.

---

“View all” behavior

This section includes a show_view_all setting in schema, but in the markup you shared it is not used (no View All button is rendered).

So currently:

• Turning on Show view all will do nothing unless you add the markup.

---

Section settings

Content

• Title

• Subtitle

• Heading size

Cards

• Image ratio

• Show title

• Show products count

Layout

• Columns desktop (1–5)

• Columns tablet

• Columns mobile

• Swipe on mobile (mobile + tablet slider)

• Enable desktop slider

• Full width

• Enable section box layout

Tabs

• Tabs label (accessibility)

Behavior

• Hide when empty content

  • If enabled: tabs without selected lists will be hidden (except in design mode)

  • If disabled: empty tabs will show placeholders

Styling

• Color scheme

• Padding top / bottom

---

Blocks

Collection list (tab)

• Tab title

• Collection list selector (curated list of collections)

---

Tips

• Keep tab titles short (1–2 words) for clean UI.

• Use swipe_on_mobile for better mobile browsing if lists are long.

• If merchants might forget to set lists, keep hide_when_empty_content = true so the storefront doesn’t show empty placeholder tabs.

---

Common gotchas

• Typo: type="butotn" in the tab button should be type="button".

• First tab active logic: Your panel class uses active on “not first” due to this line:
  tabs__tab-content--tabbed ... {% unless has_first_tab %} active{% endunless %}
  That seems reversed (first tab should be active). If your JS corrects it, fine—otherwise you may want to flip it.

• show_view_all setting unused (no output).