Storefront Components

The storefront editor comes with many components you can drag and drop to customize your storefront look and feel.

Layout

Layout components add structure and formatting to your page.

Accordion

The accordion component adds collapsible content sections, useful for creating an FAQ section or organizing non-essential information.

Customization options

Option	Usage
Allow multiple	Whether to allow multiple accordions to be opened at the same time.
Sections	Manage the individual collapsible sections and their titles. Each accordion section can contain text, images, or other content.

Horizontal rule

The horizontal rule component adds a horizontal divider between sections.

Customization options

Option	Usage
Width (px)	Set the width of the divider in pixels.
Color	Choose the color of the divider using the color picker.
Make transparent	Toggle whether the divider is transparent.

Multi-column layout

The multi-column layout evenly distributes multiple columns across the page, each serving as a container for content like text and images.

Customization options

Option	Usage
Columns	Set the number of columns, up to a maximum of four.
Vertical alignment	Choose how to align content vertically within each column.

Text components

Text components allow you to add formatted text to your page.

Heading

The heading component adds a simple heading to your page.

Customization options

Option	Usage
Text	Specify the text for the heading.
Level	Choose the header level, up to H6.
Text alignment	Choose how to align the heading text within its parent container.

Rich text

The rich text component adds a text block with a rich text editor.

Content

Content components add additional content to your page.

Hero section

The hero section component highlights a prominent content area, typically featuring an image, headline, description, and call-to-action (CTA) button.

Customization options

Option	Usage
Layout type	Select whether to display an image and how to arrange the layout.
Image	Choose an image to display. Images must be uploaded to your storefront media before you can select it.
Image URL	If using your own content delivery network (CDN), paste the image URL.
Image alt text	Enter alternative (alt) text for the image.
Round image corners	Choose whether to round the corners of the image.
Alignment	Choose how to align the content within the section.
Title	Enter the section header text.
Text editor	Add content to the text block.
Buttons	Display up to two buttons in the hero section. Customize button text, link, and style.

Image

The image component adds an image to your page.

Customization options

Option	Usage
Image	Choose an image to display. Images must be uploaded to your storefront media before you can select it.
Aspect ratio	Set the image aspect ratio.
Rounded	Choose whether to round the image corners.
Image URL	If using your own content delivery network (CDN), paste the image URL.
Alt text	Enter alternative (alt) text for the image.

Image carousel

The image carousel component creates a rotating slideshow that displays a series of images, allowing users to navigate through them using arrows or auto-scroll.

Customization options

Option	Usage
Images	The image to display in the carousel. Each image must be uploaded to your storefront media before selection.
Size	Adjust the carousel's height.
Arrow position	Set the position of the carousel arrows (outside the image or overlaid).
Arrow type	Customize the arrow icons.
Auto scroll	Enable automatic scrolling of images.
Scroll interval (seconds)	Set the interval between auto-scrolling images.

Video

The video component embeds a video player from a URL. Supported sources include YouTube and Vimeo.

Customization options

Option	Usage
Source	Specify where the video is hosted.
URL	Provide the video URL.
Video ID	The video ID auto-populates after setting the video URL.

Testimonials

The testimonials component displays a grid of up to three quotes, each accompanied by a title, subtitle, and optional avatar.

Customization options

Option	Usage
Testimonials	Add and manage quotes in the grid. Each testimonial includes a quote, main text, and subtext. Optionally, add a square avatar image by providing the image URL. Drag and drop to rearrange testimonials.
Style	Choose the style for the testimonial cards.
Drop shadow	Toggle a drop shadow effect for each testimonial card.

Logo grid

The logo grid component displays a collection of brand logos in an evenly distributed grid, allowing users to visually browse featured brands on your marketplace.

Customization options

Option	Usage
Layout	Select between vertical or horizontal arrangement for the logos.
Title	Enter the section header text.
Description	Add a description for the section.
Text align	Set the alignment for the title and description (left, center, or right).
Logos	Add logos by providing the URL to the image files. Add a description to identify each logo. Drag and drop to rearrange logos.
Show logo description	Toggle to display or hide descriptions beneath each logo.

Button

The button component adds a clickable button with a link.

Customization options

Option	Usage
Variant	Select the button's color and style variant. Available colors depend on the primary color set in your storefront settings.
Size	Choose the button size: small, medium, or large.
Content	Define the text displayed inside the button.
Link	Specify the URL or page that opens when the button is clicked.
Full width	Choose whether to make the button span the entire width of its container.

Product catalog

Product catalog components dynamically display collections and categories from your catalog.

Collection

The collection component showcases a collection's featured image, title, and description, with a link to the collection page.

Customization options

Option	Usage
Collection	Choose the collection to showcase. The collection must be published before selection. The image, title, and description are taken from what's configured on the collection.

Product category list

The product category list features a selection of categories displayed in a grid. Each tile shows the category image, title, and an optional description, linking to the category page.

Customization options

Option	Usage
Title	Enter the section title.
Title text align	Choose the alignment for the section title.
Max number or elements per row	Choose how many categories to display across each row.
Product categories	Choose the categories to feature in the grid. The category image, title, and description are populated from the category settings.
Card style	Choose the style and shape for the category images.
Show category descriptions	Choose whether to display the category descriptions beneath the titles.

Featured products (collection)

The featured products (collection) component displays a list of products within a specific collection.

Customization options

Option	Usage
Collection	Choose the collection to showcase. The collection must be published before selection.
Product name style	One line: Limit the product name to one line. The name will be truncated if there's not enough space. Multi-line: Allow the product name to spill over to multiple lines.
Product image style	Full height: Maintain the image aspect ratio. Square: Size each image evenly.

Featured products (category)

The featured products (category) component displays a list of products within a specific category.

Customization options

Option	Usage
Category	Choose the category containing the products you want to feature.
Product name style	One line: Limit the product name to one line. The name will be truncated if there's not enough space. Multi-line: Allow the product name to spill over to multiple lines.
Product image style	Full height: Maintain the image aspect ratio. Square: Size each image evenly.

Footer

The footer appears at the bottom of each page.

Simple footer

Simple footer displays one menu of links across one row.

Customization options

Option	Usage
Copyright notice	Specify the text to appear in the copyright statement.
Navigation menu	Choose the navigation menu to use for the footer links.
Social media	Add links to your social media pages.

Column footer

Column footer displays multiple menus across columns.

Customization options

Option	Usage
Copyright notice	Specify the text to appear in the copyright statement.
Navigation links	Choose each navigation menu to display. Each menu appears as a column with its title and links.
Navigation links alignment	Choose the alignment for each navigation menu text.
Show divider	Toggle whether to display a horizontal divider between the navigation menus and other content.
Social media	Add links to your social media pages.