Skip to main content

Collection Sections

Collection sections help visitors browse your catalog by collection, from the banner at the top of a collection page to carousels, lists, and scroll-driven showcases on the home page. Ronin includes 4 collection sections. Each also has the universal width, color scheme, background, and padding controls described in Section Settings.

Collection banner​

A split banner at the top of the collection page. The left side holds a breadcrumb, the collection heading, and a draggable row of category links; the right side shows the collection image. It is used by the collection template.

section-collection-banner.webp

Features:

  • Heading that uses the collection name when left blank
  • Image that uses the collection image when left blank, with a selectable ratio (Auto, 9:16, 3:4, 1:1, 4:3, 16:9, or Custom) and alt text
  • Breadcrumb generated from the current collection
  • Up to 12 category links, each with a label and link, in a draggable row
  • Blocks: Category

A "shop by collection" row: a heading with previous/next arrows above a peeking carousel of collection cards. It appears on the third home page layout.

section-collection-carousel.webp

Features:

  • Overline, heading, heading size, and alignment, with an option to accent the italic word and a highlight style for a bracketed word
  • Cards layout: Carousel, Grid, or Masonry, with columns and gap per device
  • Carousel controls: pagination, per-move count, effect, speed, autoplay, loop, and auto height
  • Card image aspect ratio (Auto, 9:16, 3:4, 1:1, 4:3, 16:9, or Custom)
  • Up to 12 collections, each with an optional label override and image override (falls back to the collection's title and featured image)
  • A link field for cards that have no collection selected
  • Blocks: Collection

Collection index​

An editorial two-column list: a sticky aside with the heading and a call to action beside a ruled list of oversized collection names with their product counts. On desktop, hovering a row reveals a peek image that follows the cursor. It appears on the second home page layout.

section-collection-index.webp

Features:

  • Overline, heading, heading size, and alignment, with italic accent and highlight style options
  • Call to action button with label, style, size, URL, and new-tab options
  • Up to 8 collections, each with a label override and a peek image shown on hover (falls back to the collection's featured image)
  • Product count and link pulled from each collection
  • A link field for rows that have no collection selected
  • Cursor-trailing peek image on desktop; a plain list on touch devices
  • Blocks: Collection

Collection scroll​

A pinned horizontal scroll. As the visitor scrolls down, a row made of a headline panel and collection cards slides sideways across the screen. It appears on the default, fourth, and fifth home page layouts.

section-collection-scroll.webp

Features:

  • Overline, heading, intro, heading size, and alignment, with italic accent and highlight style options
  • Button with label, style, size, URL, and new-tab options
  • Up to 8 cards, each linked to a collection
  • Optional cutout image per card that overrides the collection's featured image (a transparent PNG is recommended)
  • Dark card option per card
  • Horizontal scroll on desktop; cards wrap into a vertical list on mobile and tablet
  • Blocks: Card
Choosing the right collection section
  • Use Collection banner at the top of the collection page.
  • Use Collection carousel when you have many collections and want a compact, swipeable row.
  • Use Collection index for a type-led list with hover previews.
  • Use Collection scroll when you want a few hero collections to make a big, scroll-driven impression.