# Section Collections

Section collections group custom sections into reusable, distributable packages. They bundle multiple sections with metadata (name, description, cover image) so they can be offered as a set in the Instant Site Editor.

### Creating a Collection <a href="#creating-a-collection" id="creating-a-collection"></a>

Use the CLI to scaffold a new collection:

```bash
crane init --collection <name>
```

This creates the directory structure under `collections/`. The command fails if a collection with that name already exists.

### Folder Structure <a href="#folder-structure" id="folder-structure"></a>

```
collections/
├── assets/                          # Shared assets (cover images)
│   └── collection_cover_image.png
└── <collection-name>/
    └── configuration.ts             # Collection descriptor
```

### Configuration <a href="#configuration" id="configuration"></a>

The `configuration.ts` file defines the collection's metadata and the sections it includes.

### Factory Functions

The `@lightspeed/crane-api` package exports the following factory functions used in configuration files:

| Factory                      | Description                                                                                                     |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------- |
| `collection.configuration()` | Creates a collection configuration object with full type safety. Accepts `metadata`, and `sections` properties. |
| `section.custom()`           | Creates a custom section referencing your own section implementation. Sets `type` to `'custom'` automatically.  |

### Properties

#### Metadata Properties <a href="#metadata-properties" id="metadata-properties"></a>

<table><thead><tr><th width="200.4609375">Property</th><th width="99.79296875">Type</th><th width="119.8984375">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>metadata.name</code></td><td><code>string</code></td><td>Yes</td><td>Display name (2–60 characters)</td></tr><tr><td><code>metadata.description</code></td><td><code>string</code></td><td>Yes</td><td>Description text (2–150 characters)</td></tr><tr><td><code>metadata.cover_image</code></td><td><code>ImageData</code></td><td>Yes</td><td>Cover image with <code>set</code> containing at least one resolution</td></tr><tr><td><code>metadata.preview_url</code></td><td><code>string</code></td><td>No</td><td>Preview URL for the collection</td></tr><tr><td><code>metadata.categories</code></td><td><code>string[]</code></td><td>No</td><td>Template categories (unique values, see below)</td></tr></tbody></table>

#### Template Categories <a href="#template-categories" id="template-categories"></a>

Available values for `metadata.categories`:

* `apparel_footwear`
* `vape_smoke`
* `home_garden`
* `sport_outdoor`
* `jewelry_accessories`
* `pet_animals`
* `bikes`
* `health_beauty`
* `gift_shop`
* `electronics`
* `other`

### Sections <a href="#sections" id="sections"></a>

The `sections` array defines which custom sections are included in the collection. Each entry references a section from your `sections/` directory.

#### Section Properties <a href="#section-properties" id="section-properties"></a>

<table><thead><tr><th width="200.265625">Property</th><th width="100.41015625">Type</th><th width="120.1640625">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>type</code></td><td><code>'custom'</code></td><td>Yes</td><td>Always <code>'custom'</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Yes</td><td>Section ID (must exist in the <code>sections/</code> directory)</td></tr><tr><td><code>showcase_id</code></td><td><code>string</code></td><td>No</td><td>Default <a href="/pages/8AFXuroY3zKcdYdCVoer">showcase</a> to use</td></tr><tr><td><code>showcase_overrides</code></td><td><code>object</code></td><td>No</td><td>Override showcase defaults (see <a href="/pages/8AFXuroY3zKcdYdCVoer#showcase-overrides">Showcases — Showcase Overrides</a>)</td></tr><tr><td><code>category</code></td><td><code>string</code></td><td>No</td><td>Section category for classification in the editor</td></tr></tbody></table>

#### Section Categories <a href="#section-categories" id="section-categories"></a>

Available values for the `category` field:

`COVER`, `ANNOUNCEMENT`, `STORE`, `SLIDER`, `VIDEO`, `SPECIAL_OFFER`, `CUSTOMER_REVIEW`, `COMPANY_INFO`, `SHIPPING_PAYMENT`, `LOCATION`, `COLLECTIONS`, `BRANDS`, `CONTACT_INFO`

### Example <a href="#example" id="example"></a>

```typescript
// collections/my-collection/configuration.ts
import { collection, section } from '@lightspeed/crane-api';

export default collection.configuration({
  metadata: {
    name: 'Example Collection',
    description: 'Example Collection with custom sections',
    cover_image: {
      set: {
        ORIGINAL: {
          url: 'collection_cover_image.png',
        },
      },
    },
  },
  sections: [
    section.custom({
      type: 'custom',
      id: 'example-section',
      showcase_id: '1',
      category: 'COLLECTIONS',
    }),
  ],
});
```

{% hint style="info" %}
Asset Path

The `cover_image` URL references a file in the `collections/assets/` directory.
{% endhint %}

### Build and Deploy <a href="#build-and-deploy" id="build-and-deploy"></a>

Collections are built and deployed alongside sections and templates — no additional commands needed:

```bash
crane build    # Builds sections, templates, and collections
crane deploy   # Deploys everything to the platform
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ecwid.com/site-themes/develop-site-themes/sections/section-collections.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.