Layout Components

Mix and match these building blocks to build your pages

All items

All items share these properties:

className

string

CSS class name to enable styling

field

string

Connect to a dynamic field of a product. Only relevant for product pages.

defaults

any

If the dynamic field is not set, use this as the default value.

emptyItem

ITEM

If the dynamic field is empty, don’t show the item, but show this instead.

Stack

Represents a container <div> and is used as a parent for other items.

items

ITEM[]

required

The items to be rendered inside the stack.

hideOnSearch

boolean

Whether to hide the stack when a search is made.

requiresAuth

boolean

Whether to hide the stack when the user is not authenticated.

withPurchase

boolean

Whether to show the stack only when the user has purchased the product or only when the user has not made a purchase. Only relevant for product pages.

withData

string

Only show the stack when data with this key was transferred as part of a purchase. Only relevant for product pages.

ifField

string

Only show if the dynamic field of this key is set. Only relevant for product pages.

Text

Renders text

text

string

required

The text to be rendered. Required only if field is not set.

HTML

Represents HTML

html

string

required

Placeholder text for the search bar. Required only if field is not set.

Image

Renders an image

src

string

required

The URL of the image. Required only if field is not set.

title

string

The alt text of the image.

height

number

The height of the image, in pixels.

width

number

The width of the image, in pixels.

Video

Renders a video player

src

string

required

The URL of the video. Required only if field is not set.

title

string

The alt text of the video.

poster

string

The URL of the poster image.

autoplay

boolean

Whether to autoplay the video. Autoplay is only allowed when muted.

loop

boolean

Whether to loop the video.

height

number

The height of the video, in pixels.

width

number

The width of the video, in pixels.

Link

Represents a link

label

string

required

The text to be rendered. Required only if field is not set.

href

string

required

The url to link. Required only if field is not set.

target

string

The target of the link.

icon

LucideIcon

The icon to be rendered next to the text. Use from the lucide icon library (https://lucide.dev/icons) - like LuBox

List Item

Represents a value of an item in a list. Can only be used with a dynamic field of type List.

Gallery

Represents a gallery of images.

items

MediaItem[]

required

The items, either image or video. Required only if field is not set.

itemClassName

string

CSS class name to enable styling

thumbClassName

string

CSS class name to enable styling

thumbHeight

number

required

The height of the thumbnails, in pixels. Required for optimization purposes.

thumbWidth

number

required

The width of the thumbnails, in pixels. Required for optimization purposes.

withCaption

boolean

Wether to render captions for the items.

captionClassName

string

CSS class name to enable styling

withControls

boolean

Wether to render controls for carousel.

Iterator

Iterates over a list of items. Can only be used with a dynamic field of array.

itemsType

ITEM

required

Item type. How to render the items.

itemProps

Object

Any props to pass to the item.

limit

number

Whether to limit the number of items to show.

Toggle

Represents a toggle.

Search bar

Represents a search bar.

placeholder

string

Placeholder text for the search bar.

classNames

CSS class names to enable styling Object with these keys: form, input, reset, submit, submitIcon, resetIcon, loadingIndicator.

Search results

Displays the search results.

columns

number

Number of columns to show.

columnClassName

string

CSS class name to enable styling

hitsPerPage

number

Number of results to show per page.

Products

Renders a predefined list of products.

Product card

Renders a product card.

Filter option

by collection(any including category, keywords) / by custom field / by other fields view in links, dropwdown, allow multiple

Tabs

Renders tabs, that the user can navigate between.

Accordion

Renders an accordion like component, with header and hidden content that toggles on click.

Reviews box

Renders a dynamic content of reviews. Only relevant for product pages.