CMS & Pages

Quark Commerce includes a headless CMS for building dynamic pages with content blocks. Pages are composed of reusable components configured through the Backoffice.

Get a Page

GET /api/storefront/pages/{slug}
X-Store-Code: us-store
X-Language-Code: en

Response:

{
  "id": "guid",
  "title": "Home",
  "slug": "home",
  "contentBlocks": [
    {
      "id": "guid",
      "componentType": "hero-banner",
      "sortOrder": 0,
      "data": {
        "title": "Summer Collection",
        "subtitle": "Up to 50% off",
        "imageUrl": "https://api.example.com/media/banners/summer.jpg",
        "buttonText": "Shop Now",
        "buttonLink": "/c/s-new-arrivals"
      }
    },
    {
      "id": "guid",
      "componentType": "product-grid",
      "sortOrder": 1,
      "data": {
        "title": "Featured Products",
        "categoryId": "guid",
        "maxItems": 8,
        "columns": 4
      }
    },
    {
      "id": "guid",
      "componentType": "text-block",
      "sortOrder": 2,
      "data": {
        "content": "<p>Welcome to our store...</p>"
      }
    }
  ]
}

Content Block Types

The CMS supports various component types. Your frontend renders each type with the appropriate component:

Component Type	Description
hero-banner	Full-width banner with image, text, and CTA
product-grid	Grid of product cards from a category
text-block	Rich text content (HTML)
image-gallery	Image carousel/gallery
category-grid	Grid of category cards
custom-html	Raw HTML block

Rendering Strategy

Build a component registry in your frontend that maps componentType strings to UI components. This pattern allows new block types to be added without code changes — just register a new component for the type.

// Example: Component mapping (adapt to your framework)
const componentMap = {
  'hero-banner': HeroBannerComponent,
  'product-grid': ProductGridComponent,
  'text-block': TextBlockComponent,
};

Page Resolution

Pages can be resolved by slug. The Backoffice defines which pages exist and their content. Common pages:

• home — homepage
• about — about us
• Custom pages created by the admin

info

The CMS is fully headless — the API provides structured data, and your frontend is responsible for rendering. This means you have complete control over the visual output.