​
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.
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. 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. 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.