How to Display Products & Designs Using Category Tabs

Make it easier for customers to browse large product or design collections without overwhelming them. By displaying categories as tabs, you can organize multiple product groups into a single, clean layout – perfect for streamlined, high-converting storefront pages.

In this article

• Prerequisites
• Why use category tabs
• How to display categories as tabs
• Customize tab layout and design
• Best-practice tips
• Troubleshooting
• FAQs
• Additional resources

Prerequisites

Why use category tabs

Displaying products or designs using category tabs allows you to present more content in less space while keeping your storefront easy to navigate.

• Reduce page clutter: Show multiple categories without creating multiple pages
• Improve browsing experience: Customers can switch between categories instantly
• Support one-page storefronts: Ideal for affiliate or campaign stores
• Highlight key categories: Feature best sellers, product types, or collections

How to display categories as tabs

1. Go to Admin → Websites
2. Select your website and click Edit Website → Website Pages
3. Add or select a listing widget
   Drag and drop a widget such as:
   • Blank Product Listing
   • Pre-decorated Product Listing
   • Design Listing
4. Open widget settings
   Click the widget, then click Settings.
5. Enable category tabs
   Change the display mode from Normal to Categories as Tabs.
6. Select categories to display
   Choose multiple categories that will appear as tabs (e.g., Best Sellers, T-Shirts, Sweatshirts).
7. Set the default category
   It is recommended to display All Products first so customers see a complete overview.

Customize tab layout and design

Once category tabs are enabled, you can refine their appearance and behavior to match your site design.

• Rename tabs: Adjust category names (e.g., rename “Polos” to “Men’s Polos”)
• Reorder tabs: Control the tab order (top-to-bottom = left-to-right)
• Set tab alignment: Choose left, center, or other positioning options
• Adjust colors:
  • Active tab background
  • Hover state color
• Style the tab container: Modify or remove borders for a cleaner “floating” look

Best-practice tips

• Use divisible product counts: Set the number of products to values like 30, 36, or 60 to ensure clean layouts across devices.
• Design for all screen sizes:
  • Mobile: 1–2 products per row
  • Tablet: 2–3 products
  • Desktop: 3–6+ products
• Keep categories focused: Avoid overcrowding tabs with too many options
• Combine with display styles:
  • Grid: Standard layout
  • Masonry: Dynamic sizing
  • Collage: Visual-heavy layout
  • Carousel: Compact scrolling display

Troubleshooting

• Tabs are not showing:
  Ensure the display mode is set to Categories as Tabs, not Normal.
• No products appear in a tab:
  Confirm that products or designs exist in the selected category.
• Layout looks uneven:
  Adjust the number of products displayed to a more flexible number (e.g., 30 or 36).
• Tabs look misaligned:
  Check alignment and spacing settings under the widget’s Design options.

FAQs

Can I show multiple categories without tabs?
No. Without tabs, only one category can be displayed at a time.

What is the best default tab to show?
“All Products” is recommended so customers see your full offering immediately.

Can I use tabs for designs as well as products?
Yes. Category tabs work with blank products, pre-decorated products, and designs.

Do tabs work on mobile devices?
Yes. Tabs are responsive and adapt to smaller screens for easy navigation.

Additional resources

• Configuring the Blank Product Listing Widget
• Design Listing Widget