Overview and Structure

Description

Geins CMS is a modular, headless system for composing pages from reusable widgets. It includes a catalog of built‑in widgets and supports custom widgets via the widget designer.
Additionally a flexible menu feature is included.

Core concepts

• Page Area and Page Area Family
  • Defines where content can be placed. Use page area families to group related areas, for example, for product pages or the start page.
  • Available filters are stored on the area family level.
  • Areas define sections of a page layout that can hold containers.
• Collections
  • A Collection is an actual instance of a Page Area Family and its areas with specific filters applied. It can also represent a full page.
  • Collections can be used to create pages or add content to other pages.
  • Two types exist: content and page. Pages include URLs, web metadata, and optional tags.
  • Collections can be filtered by various criteria (for example: Channel, Language, Customer group, Category, Brand, Product, Campaign).
  • An Area Collection contains one or more containers.
• Containers
  Hold widgets and define layout (for example: two columns 50/50, four columns).
• Widgets
  • Modular content blocks added to containers. Geins includes built‑in widgets and supports custom widgets via the widget designer.
  • Examples of built‑in widgets:
    • Banner
    • Text
    • Rich text
    • Image
    • Product list
    • Video
    • HTML code
• Pre‑configured page areas
  • Start Page — homepage content
  • Productlist — product listing pages
  • Product — product detail pages
  • Pages — custom content pages
• Scheduling
  • Collections, containers, and widgets can be scheduled to appear or expire at set times.
• Menus
  • Hierarchical navigation structures supporting multiple levels.
  • Menu items can link to catalog entities (for example, categories or brands) or be completely custom.
  • Use menus to build site navigation and render them where needed with your navigation components/widgets.

CMS structure example

The following diagram illustrates how a product page is structured using the CMS, showing the hierarchy from page area family down to individual widgets:

graph TD
    A[Page Area Family: Product] --> B[Collection: Product, Filter: Brand X]
      B --> C[Area: Product Hero]
      B --> D[Area: Product Content]
      
      C --> E[Container 1: Full Width]
      E --> F[Widget: Image Banner]
      E --> G[Widget: Rich Text]
      
      D --> H[Container 2: Two Columns 50/50]
      H --> I[Widget: Product List]
      H --> J[Widget: Video]
      
      D --> K[Container 3: Single Column]
      K --> L[Widget: HTML Code]
      
      style A fill:#1e3a5f,stroke:#4a90e2,color:#fff
      style B fill:#5a4a2a,stroke:#d4a650,color:#fff
      style C fill:#2d2d2d,stroke:#666,color:#fff
      style D fill:#2d2d2d,stroke:#666,color:#fff
      style E fill:#1e4620,stroke:#4caf50,color:#fff
      style H fill:#1e4620,stroke:#4caf50,color:#fff
      style K fill:#1e4620,stroke:#4caf50,color:#fff

This example shows:

• A Product page area family with two areas (Product Hero and Product Content)
• A Collection filtered for a specific brand
• Multiple Containers with different layouts
• Various Widgets providing content and functionality

Typical use cases

The CMS content structure enables flexible page design and reusable content management across a storefront.

1. Defining page templates with page area families

Page area families provide the foundation for different page types and layouts. Examples include:

• Setting up distinct structures for the start page, product pages, product listing pages, and custom content pages.
• Creating a new page area family for campaign landing pages or promotional sections.

2. Managing content with collections

Collections are instances of page area families with specific filters applied. Examples include:

• Creating a collection filtered by brand to display brand-specific hero content on product pages.
• Using collections filtered by category, product, or campaign to show contextual content across multiple pages.
• Building standalone pages with collections of type "page" that include URLs and web metadata.

3. Building page layouts with areas, containers, and widgets

Areas define content zones within a page area family, containers organize the layout within areas, and widgets provide the actual content. Examples include:

• Adding multiple containers to the "Product Hero" area with different layouts (full width, two columns, etc.).
• Populating containers with widgets like image banners, product lists, videos, or custom HTML.
• Scheduling containers and widgets to appear or expire at specific times for promotions.

4. Creating site navigation with menus

Menus provide hierarchical navigation structures that can be rendered anywhere on the site. Examples include:

• Building a main navigation menu linking to categories and brands from the catalog.
• Creating custom menu items for specific pages or external links.
• Using menus in header, footer, or sidebar navigation components.