Categories

What this section does

Display product categories

Where it goes

• Can be used as many times as you like on one page.
• This section is in every plan — no extra plugin needed.

Styles

Different looks for the same section. You can change the style later; your content stays as it is.

The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.

• Grid

  Freegrid

  Category grid layout

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, columns

• Carousel

  Freecarousel

  Horizontal scrolling categories

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor

• Masonry

  Page Editormasonry

  Pinterest-style masonry layout

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor

• List

  Page Editorlist

  Vertical list with details

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor

• Flow

  Page Editorflow

  Large horizontal flowing cards with featured imagery

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor

• Organic Grid

  Page Editororganic

  Asymmetric 3-column organic grid with varied card sizes

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, columns, accentColor

• Leaf Collage

  Page Editorleaf-collage

  Category tiles clipped by cycling organic shapes (leaf, petal, pebble)

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, columns, accentColor, clipShape

• Glass

  Page Editorglass

  Glassmorphism cards with blur backdrop effect

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, columns, accentColor

• Spotlight

  Page Editorspotlight

  One large featured category with supporting smaller cards

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, ctaLabel

• Bento

  Page Editorbento

  Bento box layout with mixed-size cells

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, accentColor

• Magazine

  Page Editormagazine

  Editorial layout with hero, numbered sidebar, and lower grid

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor

• Neon

  Page Editorneon

  Dark cards with neon glow borders and scan-line hover

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, columns, accentColor

• Polaroid

  Page Editorpolaroid

  Scattered tilted polaroid photo cards

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor

• Minimal Circles

  Page Editorminimal-circles

  Circular cropped images with labels below

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, accentColor

• Ribbon

  Page Editorribbon

  Full-width alternating image-text bands

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, accentColor, ctaLabel

• Mosaic

  Page Editormosaic

  Dark color-blocked mixed-size tiles

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor

• Editorial Grid

  Page Editoreditorial-grid

  Asymmetric editorial grid with one large hero category and smaller supporting tiles

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, columns, accentColor

• Collections

  Page Editorcollections

  Square image cards with dark overlay — category name and product count overlaid at the bottom. Premium storefront style.

  Specific to this style: selectionMode, selectedCategoryIds, sort, columns, accentColor

• Portrait Strip

  Page Editorportrait

  Tall portrait cards arranged side-by-side in a single row — inspired by fashion lookbooks and editorial catalogues

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, displayCount, imageFilter, cardHeight, showOverlay, overlayOpacity, cardBg, cardTitleColor

• Featured Split

  Page Editorfeatured-split

  First category a large feature block, rest in a grid

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, columns, accentColor

• Uniform Tiles

  Page Editoruniform-tiles

  Equal square tiles in a responsive grid

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor, columns, accentColor

• Concept Rail

  Page Editorconcept-rail

  Edge-bleed horizontal carousel of tall portrait cards with a bottom gradient scrim, superscript item count and a circular arrow. Header eyebrow + heading on the left, circular prev/next arrows on the right. Premium "Concept" design language.

  Specific to this style: title, subtitle, eyebrow, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, cardStyle, textColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor

• Collage & Text

  Page Editorcollage-text

  Asymmetric editorial collage — a text column (eyebrow, big heading, paragraph, outline pill CTA) beside a 2×2 asymmetric grid of rounded image tiles, each with a large overlay category label. Premium "Concept" design language.

  Specific to this style: title, subtitle, eyebrow, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, accentColor, cardBg, cardTitleColor, cardProductCountColor, cardDescriptionColor, cardOverlayColor

• Joy Tiles

  Page Editorjoy-tiles

  Color-blocked pastel category tiles with a faint watermark icon, dark title and a hover-fill arrow chip

  Specific to this style: title, subtitle, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, tileColor1, tileColor2, tileColor3, tileColor4, tileColor5, tileTextColor, showWatermarkIcon

• Editorial Index

  Page Editoreditorial-index

  A numbered category index — fine hairline rows or bordered number-cards; number and accent colours are themed

  Specific to this style: title, subtitle, eyebrow, buttons, selectionMode, selectedCategoryIds, sort, showAll, displayCount, showProductCount, showDescription, listStyle, showNumbers, nameFont, linkLabel, numberColor, hoverAccent

Settings

The fields you see in the Section Settings panel on the right when this section is selected.

Shared by every style

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height