Content Editors

Content editors define the merchant-editable content fields for your section. Each editor maps to a specific input widget in the Instant Site Editor — text inputs, image uploaders, toggles, dropdown selects, and more.

Overview

All content editors are created using factory functions from @lightspeed/crane-api:

import { content } from '@lightspeed/crane-api';
Type
Factory
Purpose

INPUTBOX

content.inputbox()

Single-line text input

TEXTAREA

content.textarea()

Multi-line text input

BUTTON

content.button()

Button with text, link, and action

IMAGE

content.image()

Image upload

TOGGLE

content.toggle()

Boolean on/off switch

SELECTBOX

content.selectbox()

Dropdown selection

DECK

content.deck()

Collection of repeatable cards

MENU

content.menu()

Menu items list

NAVIGATION_MENU

content.navigationMenu()

Navigation menu (header)

LOGO

content.logo()

Logo (text or image)

DIVIDER

content.divider()

Visual separator in the editor

INFO

content.info()

Informational text in the editor

PRODUCT_SELECTOR

content.productSelector()

Product picker

CATEGORY_SELECTOR

content.categorySelector()

Category picker

tag

Label Convention

All label, placeholder, and description properties must be translation keys starting with $ (e.g., '$label.content.title'). These are resolved from your translation files.

INPUTBOX

Single-line text input for short content like titles and headings.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the editor label

placeholder

string

Yes

Translation key for placeholder text

defaults

object

No

Default values

Defaults

Property
Type
Required
Description

text

string

Yes

Default text value (translation key)

Factory

TEXTAREA

Multi-line text input for longer content like descriptions and paragraphs.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the editor label

placeholder

string

Yes

Translation key for placeholder text

defaults

object

No

Default values

Defaults

Property
Type
Required
Description

text

string

Yes

Default text value (translation key)

Factory

BUTTON

Button with configurable text, action type, and target. The button action type determines which additional fields are required.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the editor label

defaults

object

No

Default values

Defaults

Property
Type
Required
Description

title

string

Yes

Default button text (translation key)

buttonType

string

Yes

Action type (see table below)

link

string

No

URL for HYPER_LINK type

linkTarget

string

No

Link target (e.g., _blank)

email

string

No

Email address for MAIL_LINK type

phone

string

No

Phone number for TEL_LINK type

tileId

string

No

Section ID for SCROLL_TO_TILE type

categoryId

number

No

Category ID for GO_TO_CATEGORY types

Button Types

Type
Required Fields
Description

HYPER_LINK

link

Navigate to a URL

MAIL_LINK

email

Open email client

TEL_LINK

phone

Open phone dialer

SCROLL_TO_TILE

tileId

Scroll to a section on the page

GO_TO_CATEGORY

categoryId

Navigate to a store category

GO_TO_CATEGORY_LINK

categoryId

Link to a store category

GO_TO_STORE

Navigate to the store page

GO_TO_STORE_LINK

Link to the store page

GO_TO_PAGE

Navigate to a specific page

Factory

circle-exclamation

IMAGE

Image upload with optional static flag. Images support multiple resolutions for responsive rendering.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the editor label

static

boolean

No

If true, marks the image as static (non-editable by merchants). Must match the corresponding design editor's static flag

defaults

object

No

Default values

Defaults

Property
Type
Required
Description

imageData

object

Yes

Image data with set (image URLs by resolution) and optional borderInfo

The imageData.set object must contain at least one key from: ORIGINAL, WEBP_LOW_RES, WEBP_HI_2X_RES, MOBILE_WEBP_LOW_RES, MOBILE_WEBP_HI_RES. Each value has url (required), width (optional), and height (optional).

Factory

circle-exclamation

TOGGLE

Boolean on/off switch for enabling or disabling features.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the editor label

description

string

Yes

Translation key for the toggle description

defaults

object

No

Default values

Defaults

Property
Type
Required
Description

enabled

boolean

Yes

Default toggle state

Factory

SELECTBOX

Dropdown selection with predefined options.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the editor label

placeholder

string

Yes

Translation key for placeholder text

description

string

Yes

Translation key for description text

options

array

Yes

Array of selectable options (min 1)

defaults

object

No

Default values

Each option in options:

Property
Type
Required
Description

value

string

Yes

Option value (must not be empty)

label

string

Yes

Translation key for the option label

Defaults

Property
Type
Required
Description

value

string

Yes

Default selected value (must match one of the options values)

Factory

circle-exclamation

DECK

Collection of repeatable cards. Merchants can add, remove, and reorder cards. Each card contains its own set of content editors.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the editor label

addButtonLabel

string

Yes

Translation key for the "Add card" button

maxCards

integer

Yes

Maximum number of cards (min 1)

cards

object

Yes

Card configuration (see below)

defaults

object

No

Default values

Card Configuration

The cards object has the following structure:

The settings record can contain any content editor type except DECK (no nesting), MENU, NAVIGATION_MENU, or LOGO. Each card gets a copy of these settings.

Factory

circle-exclamation

Menu items list. The label property is optional for this editor.

Properties

Property
Type
Required
Description

label

string

No

Translation key for the editor label

defaults

object

No

Default values

Defaults

Property
Type
Required
Description

items

array

No

Array of menu items

Each menu item:

Property
Type
Required
Description

id

string

Yes

Unique identifier

title

string

No

Display text

type

string

No

Action type (same as button types, plus GO_TO_PAGE)

link

string

No

URL (for HYPER_LINK)

email

string

No

Email (for MAIL_LINK)

phone

string

No

Phone (for TEL_LINK)

tileIdForScroll

string

No

Section ID (for SCROLL_TO_TILE)

pageIdForNavigate

string

No

Page ID (for GO_TO_PAGE)

showStoreCategories

boolean

No

Show category submenu

isSubmenuOpened

boolean

No

Submenu expanded state

categoryId

number

No

Category ID (for GO_TO_CATEGORY)

Factory

Navigation menu for site headers. Similar to MENU but without a configurable label — it is always rendered as the main navigation.

Properties

Property
Type
Required
Description

defaults

object

No

Default values

Defaults

Same structure as MENU defaults.

Factory

circle-info

Mandatory for Headers

The NAVIGATION_MENU editor is mandatory for sections with type HEADER. It must be defined with the key menu. See Sections

Logo element supporting both text and image modes.

Properties

Property
Type
Required
Description

label

string

No

Translation key for the editor label

defaults

object

No

Default values

Defaults

Property
Type
Required
Description

logoType

string

No

"TEXT" or "IMAGE"

text

string

No

Default logo text (translation key)

imageData

object

No

Default logo image (same structure as IMAGE defaults)

Factory

circle-info

Mandatory for Headers

The LOGO editor is mandatory for sections with type HEADER. It must be defined with the key logo. See Sections

DIVIDER

Visual separator in the editor UI. Does not render any content in the storefront — it is purely for organizing the editor panel.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the divider label

defaults

object

No

Default values (empty, type only)

Factory

INFO

Informational text displayed in the editor UI. Like the DIVIDER, this does not render in the storefront — it provides guidance to merchants.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the info title

description

string

Yes

Translation key for the info description

button

object

No

Optional link button in the editor

defaults

object

No

Default values

The button object:

Property
Type
Required
Description

label

string

Yes

Translation key for button text

link

string

Yes

URL (must be a valid URL)

Defaults

Property
Type
Required
Description

text

string

No

Default info text (translation key)

button

object

No

{ title?: string, link?: string }

Factory

PRODUCT_SELECTOR

Product picker allowing merchants to select products from their store catalog.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the editor label

maxProducts

integer

Yes

Maximum number of products (1–32)

defaults

object

No

Default values (empty, type only)

Factory

CATEGORY_SELECTOR

Category picker allowing merchants to select store categories.

Properties

Property
Type
Required
Description

label

string

Yes

Translation key for the editor label

maxCategories

integer

Yes

Maximum number of categories (1–32)

defaults

object

No

Default values (empty, type only)

Factory

Showcase Default Factories

When defining showcase configurations, you need to provide default values for content fields independently of the editor definition. The content.default.*() factories create these standalone defaults:

These factories auto-inject the type discriminant. See Showcases for usage in showcase files.

Complete Example

Last updated

Was this helpful?