Skip to content
RockStarUI Docs

Product Tabs

What this section does

Section titled “What this section does”

The Product Tabs section shows curated products in category tabs on the homepage. It is used to highlight different collections in one compact section without sending users to another page.

Shopify Theme Editor with the Product tabs section selected on the Home page template, showing tab blocks in the left sidebar, the live tabbed products preview in the center, and Product tabs settings in the right panel.

How to set it up

Section titled “How to set it up”
  1. Go to Online Store -> Themes.
  2. Click Customize.
  3. Open the Home page template.
  4. In the left sidebar, select Product tabs.
  5. Add or edit tab blocks, then save.

Editor areas overview

Section titled “Editor areas overview”
  1. Left sidebar:
    • Shows the section instance and its tab blocks.
    • Add Tab creates a new tab block.
    • Drag tab blocks to change tab order.
  2. Center preview:
    • Shows heading, subheading, tab labels, and product cards for the active tab.
    • Useful for checking copy length and card density.
  3. Right settings panel:
    • Section-level controls (Heading, Subheading, Tabs aria-label, Products to show).
    • Theme settings and custom CSS groups for styling overrides.

Key settings explained

Section titled “Key settings explained”
  1. Heading: main section title shown above the tabs.
  2. Subheading: supporting copy under the heading; keep this short for visual balance.
  3. Tabs aria-label: accessibility label for screen readers describing the tab group.
  4. Products to show: number of product cards per tab panel.

Tab block settings

Section titled “Tab block settings”

Each Tab block includes:

  1. Label: tab text shown in the tab row (for example, Best Seller, Bedroom, Storage).
  2. Collection: product source for that tab.

Fallback behavior:

  1. If a tab has no collection selected, the section falls back to all products.
  2. If there are no tab blocks, the section does not render.

Common tasks

Section titled “Common tasks”

Add a new tab

Section titled “Add a new tab”
  1. In Product tabs, click Add Tab.
  2. Set Label and choose a Collection.
  3. Drag into desired position.
  4. Save.

Reorder tabs

Section titled “Reorder tabs”
  1. Drag tab blocks in the left sidebar.
  2. Confirm order in preview.
  3. Save.

Increase visible products

Section titled “Increase visible products”
  1. Raise Products to show.
  2. Review desktop and mobile layout to avoid overcrowding.
  3. Save.

Tips

Section titled “Tips”
  1. Use 3-5 tabs for clarity; too many tabs reduce scanability.
  2. Keep label lengths similar so the tab row looks balanced.
  3. Ensure each selected collection has enough products to fill the configured limit.
  4. Set a meaningful Tabs aria-label for accessibility compliance.

FAQs

Section titled “FAQs”

Why is a tab showing unexpected products?

Section titled “Why is a tab showing unexpected products?”

That tab likely has no collection selected, so it falls back to all products. Open that tab block and set a collection explicitly.

Why does one tab look empty?

Section titled “Why does one tab look empty?”

The assigned collection may have fewer products than expected, or unavailable products in the active market. Check the collection content in Shopify Admin.

Why do products look too dense on mobile?

Section titled “Why do products look too dense on mobile?”

Lower Products to show and verify the section in mobile preview before publishing.

Section titled “Related guides”

Publish checklist

Section titled “Publish checklist”
  1. Check each tab label and collection assignment.
  2. Confirm product count per tab is appropriate for mobile and desktop.
  3. Validate heading/subheading copy length.
  4. Save and publish.

Need help?

Section titled “Need help?”

If you still need help, contact support via the Contact page.