Getting Started• 4 minutes read

Category Section: Your Category Showcase

The Category section is used to display product categories in a structured layout.

It helps visitors discover the main category paths in your store.

Quick Editor Tips

Fill these first: Heading, Fetch Settings, Layout Type, Breakpoints.

  • Decide first whether you want to show all categories, specific categories, recently viewed, or most viewed.
  • Use Grid for stable category browsing and Slider for more visual layouts.
  • Keep the heading simple and helpful.
  • Check how many columns show on mobile before publishing.
  • Add the section button only if there is a clear next step, such as View All Categories.

This guide explains the Category section in simple language: what it is for, what each field does, and how to set it up without confusion.

What the Category Section is For

This section helps visitors browse your store by category instead of by individual products.

You can use it to:

  • highlight your main shopping departments,
  • promote a small hand-picked set of categories,
  • show categories visitors recently looked at,
  • surface the most viewed categories in your store.

Why it Matters

  1. Clarity – it helps visitors understand how your store is organized.
  2. Speed – people can jump into the right category faster.
  3. Discovery – it can push traffic toward important category pages.

The Category Section Fields

Below is a beginner-friendly explanation of each field.

1) Kicker Text

What it is: A small line above the heading.

What it is used for: Adds context, such as Shop by Category or Explore Our Collections.

Quick tip: Keep this short. It should support the heading, not replace it.

2) Heading

What it is: The main title of the section.

SEO and layout flexibility: You can change its HTML level to H1, H2, or H3 depending on where the section appears.

What to write: Shop by Category, Browse Our Collections, Explore Popular Categories.

3) Subheading

What it is: A short support line below the heading.

What it is used for: Gives a little more direction before the category list starts.

Example: Find the category that fits your style, season, or budget.

4) Description

What it is: A rich text area for a short explanation.

What it is used for: Helps frame the category block and can guide visitors toward the right collection.

Quick tip: Keep it brief. This section works best when browsing feels easy and fast.

5) Category Fetch Settings

What it is: The control group that decides which categories appear in the section.

The available modes are:

  • All Categories – shows all available categories using your chosen order and amount.
  • Specific Categories – lets you search for and choose exact categories manually.
  • Recently Viewed – shows categories the visitor recently looked at.

Extra options inside this field:

  • Per Page – how many category items should appear.
  • Order By – available when using All Categories, for example by Date, Title, Menu Order, Price, Popularity, Rating, or Random.

Important: If you choose Specific Categories, you need to search and select the exact categories manually.

6) Image Settings

What it is: A simple image-size setting for the category images.

What it is used for: Helps control which saved image size is used, which can affect visual sharpness and performance.

Note: This is not where you upload images manually for each category. It controls how category images are displayed.

7) Section Button

What it is: An optional button shown with the section.

What it is used for: Gives visitors one extra path, such as View All Categories or Browse Full Catalog.

The button includes: text, URL, and optional small CTA text under the button.

8) Breakpoints

What it is: The responsive column settings for different screen widths.

What it is used for: Controls how many category items show per row on desktop, tablet, and mobile.

The default idea is simple:

  • Base means desktop,
  • smaller width numbers apply to smaller screens,
  • the value is how many columns should appear at that width.

Quick tip: For mobile, fewer columns are usually easier to read and tap.

9) Layout Type

What it is: The display mode for the category items.

The available choices are:

  • Grid – categories stay in a regular multi-column layout.
  • Slider – categories become a carousel.

If you choose Slider, you also get a Slider Type choice:

  • Slide – moves normally from one set to the next.
  • Loop – keeps cycling continuously.
  • Fade – fades between items instead of sliding.

What to Write in Category: A Beginner Recipe

  • Kicker: Shop by Department
  • Heading: Explore Our Main Categories
  • Subheading: Start with the collection that fits your style.
  • Description: Browse our most popular shopping categories and jump into the products you care about most.
  • Fetch Mode: Specific Categories
  • Layout Type: Grid
  • Section Button: View All Categories

Common Mistakes to Avoid

  • Showing too many categories at once.
  • Using a heading that does not explain what the block is about.
  • Forgetting to check mobile columns.
  • Using Slider when a simple Grid would be easier to browse.

Final Note

The Category section is strongest when it helps visitors find direction quickly. Keep the message simple, choose the right categories, and make sure the layout stays clear on smaller screens.