Popular Categories
The Popular Categories section showcases your most important product categories on the homepage. It helps customers quickly discover product groups and navigate to areas of interest. Displaying popular categories prominently improves product discovery and encourages browsing.
On this page
Site Builder does not include a preview mode. Any changes saved are applied directly to your live website. Review all content carefully before saving.
Overview
The Popular Categories section displays a grid or list of your store's product categories. Each category is represented by an image and name, making it easy for customers to identify and navigate to their area of interest.
This section helps:
- Improve product discoverability
- Reduce time to find relevant products
- Showcase the breadth of your product catalog
- Encourage browsing and exploration
- Guide customers to high-priority categories
Design Layouts
The Popular Categories section provides multiple professionally designed layouts. Each layout changes how categories are displayed and arranged.
Available layout options include:
- Design 1 — Grid layout with equal-sized category cards
- Design 2 — Masonry layout with varying card sizes
- Design 3 — Horizontal scrollable row
- Design 4 — Large featured category with smaller supporting categories
- Design 5 — Circular category icons with labels
Color & Style Options
The Popular Categories section inherits colours from your global Color & Style configuration. You can customize specific elements to match your design vision.
Customizable elements include:
- Card Background — Background colour of each category card
- Card Border — Border style and colour
- Category Name Colour — Text colour for category titles
- Hover Effect — Colour change or overlay on mouse hover
- Section Background — Background colour of the entire section
- Image Overlay — Gradient or colour overlay on category images
Category Selection
Choose which product categories appear in this section. You have full control over the selection and order of displayed categories.
You can:
- Select categories — Choose from all categories in your store
- Remove categories — Hide categories that are not a priority
- Add new categories — Include recently created categories
- Change display order — Drag and drop to reorder categories
- Set display limit — Show a specific number of categories (e.g., 4, 6, 8)
Display your most popular or highest-margin categories first. The order in which categories appear can significantly impact click-through rates and sales.
Category Images
Each category in this section is represented by an image. These images should be visually appealing and clearly represent the category.
Image Guidelines:
- Use high-quality images that represent the category
- Maintain consistent dimensions across all category cards
- Ensure images are not blurry or pixelated
- Use lifestyle images when possible — they perform better than plain product shots
- Keep file sizes optimized for fast loading
Section Title
Configure the heading text displayed above the category grid.
// Example section titles
"Shop by Category"
"Browse Our Collections"
"Find What You Need"
"Explore Categories"
Keep the title concise and aligned with your brand voice. You can also add a sub-heading or description below the main title.
Best Practices
- Display 4-8 categories — too many can overwhelm customers
- Feature your most popular or profitable categories prominently
- Use consistent, high-quality images for all categories
- Keep category names short and easy to understand
- Update categories seasonally to reflect current trends
- Ensure category images load quickly — optimize file sizes
- Make categories clickable and link to the correct category pages
- Use hover effects to make the section interactive and engaging
- Test the layout on mobile — categories should be easy to tap