Category List Flex Component makes it easy for merchants to showcase categories on their storefront. With drag-and-drop functionality, it automatically displays a list of categories based on the page it’s placed on. Whether you’re building a clean sub-category grid, a seasonal landing page, or a curated shopping hub, this tool gives you flexibility without requiring custom coding. Category List is like Product List Flex Component in the way Product List displays products, Category List displays category navigation with dynamic flexibility.
What Can You Do With It?
This component gives you fine control over how category listings appear, without needing to touch any templates or write code. You can:
Automatically display sub-categories of the current page (like a sub-category grid on the CTGY page).
Manually choose a category, if you want a curated list somewhere like the homepage.
Add images (tree, title, or custom field).
Include custom text or pull from category custom fields.
Add buttons like "Shop Now" for calls-to-action.
Use pre-built fragments (layouts) like tiles, cards, or lists for different visual styles.
Best Practices
Use short, clear category names (e.g., “Hoodies” instead of “Our Signature Hoodie Line”).
Keep category groups shallow—avoid nesting too deep.
Keep styling consistent—icons, images, and spacing should look uniform.
Preview on mobile to ensure responsiveness.
Example Use Cases
Car Parts Store: Organize truck parts by model year—“2019–2024 Ram 6.7L,” etc.—to help shoppers filter quickly.
Apparel Store: Create department-style groupings like “Outerwear,” “Headwear,” and “Lifestyle.”
Seasonal Hub: Build a gift guide or holiday collection landing page by showcasing themed categories.
Comparison to Carousel Components
While carousel components (Product Carousel, Category Carousel) let you create horizontally scrolling content sections (like a slideshow), the Category List is for grid- or list-based navigation. Use Carousel components when you want to feature rotating items (like promotions), and the Category List when you want structured, scannable lists of categories.
Step-by-Step Guide: Using the Category List Flex Component
Step 1: Access Page Builder
Path: User Interface > Content Management > Page Builder
Select the page where you want to display your category list.
(Example: CTGY page for sub-category navigation, or a custom landing page.)
Step 2: Add the Category List Component
Click + Add Component.
Choose Category List from the available components.
Drag it into your desired section on the page layout.
Step 3: Edit the Component
In the Components panel, click on the Category List component you just added to open its settings:
Choose a Category Source
In the Category List settings section, under Parent Category, choose the category source:
Determined by Page Items: The category the Shopper is on will display the sub-categories from the page the Shopper is on.
Specific Category: You can display all sub-categories for a Specific Category, for example: on a Landing Page, display all subcategories by selecting the Specific Category Source option.
In the Responsive Settings dropdown, customize how the component appears across different devices, desktop, tablet, and mobile.
Customize Display Options under the Category Card dropdown
Under the Category Card section, you can configure how each category is displayed using several detail types, including: Detail Name: Custom Fields, Detail: Name, Button: View Category, Feature: Fragment, and Feature: Image
Custom Fields – Click Look Up to select a Custom Field, add Prefix, and/ or Suffixes
Name – Show the category name, with optional prefix/suffix.
Button: View Category – Add a clickable button like “Shop Now”.
Fragments: If you have written fragments you can include them here by clicking Loop Up.
Image – Select which image to display for each category. Choose from Tree Image or Title Image
Step 4: Style and Preview
Adjust margins, padding, spacing to match your page layout
Optionally add custom CSS overrides for more advanced styling
Preview the page in desktop and mobile views to confirm responsiveness
Step 5: Publish
Once you are satisfied with the layout and functionality:
Click Save
Click Publish to make the page live
Pro Tips
Use the Category List on Category Pages, Landing Pages, or Homepages to replace static sub-category layouts.
Keep category names short and scannable.
Avoid deep category nesting for better usability.
Add a call to action "Shop Now" button linking the shopper to the category page with the Button: View Category Detail > Type option from above.