Starter Kit Sections

Account

The Account Section holds all the customer's information, such as address and orders.

📘

This Section must be added to the /account page.

Code overview


AccountAddress

The AccountAddress Section is responsible to manage customer's addresses.

📘

This Section must be added to the /account/address page.

Code overview


Banner

The Banner Section displays an image with a title. It can be used as a hero interface.

📘

This Section can be added to the Collections template.

Props

name

type

description

image

Media

Image to be used as the banner's background.

title

string

Title of the banner.

titleHorizontalAlignment

'left' | 'center' | 'right'

Title horizontal alignment. Default is left.

titleVerticalAlignment

'top' | 'center' | 'bottom'

Title vertical alignment. Default is center.

Any other prop

This Section accepts any other prop you pass to it.

Code overview


CartPage

The CartPage Section manages the store's cart.

📘

This Section must be added to the /cart page.

Code overview


Footer

A footer for your store.

Props

name

type

description

logoImage

Media

Image to be shown as logo.

logoLink

string

Logo link.

address

string

The company's address.

companyName

string

The company's name.

copyright

string

Store's copyright.

Code overview


ForgotPasswordForm

The ForgotPasswordForm allows customers to request a link to reset their password.

📘

This Section must be added to the /account/recover-password page.

Props

name

type

description

successMessageTitle

string

Title of the message to be shown after the form is successfully submitted. Default is Check your inbox!.

successMessageDescription

string

The message to be shown after the form is successfully submitted. Default is We've just sent you an email - follow the reset instructions to change your password.

loginPageText

string

Login's page link text. Default is Go back to login.

loginPageUrl

string

Login's page url. Default is /account/login

Code overview


GeneralStructuredData

The GeneralStructuredData Section handles all the Structured Data for pages other than product pages.

📘

This Section should be added to the any template other than the Products template.

Code overview


Header

A header for your store.

Props

name

type

description

logoImage

Media

Image to be shown as logo.

menu

MenuType

Menu's content.

sticky

boolean

Whether the header should be sticky or not. Default is initial (not sticky).

Code overview


Login

The Login form allows customers to authenticate to their accounts.

📘

This Section must be added to the /account/login page.

Props

name

type

description

redirectTo

string

Url to be redirected after the form's submission. Default is /account'.

Code overview


Orders

The Orders Section is responsible to show all the customer's orders.

📘

This Section must be added to the /account/orders page.

Code overview


PageMeta

The PageMeta is a special Section that handles the SEO of your store. It props can be managed via Page Settings.

Props

name

type

description

title

string

Page title.

description

string

Page description.

url

string

Canonical url.

type

string

Meta og:type.

image

Media

Meta og:image.

Code overview


ProductBox

The ProductBox Section handles all things product. Through the ProductBox customers can see information and details of a given product, such as images, price, variants, and more importantly add the given product to the cart.

📘

This Section should be added to the Products template.

Props

name

type

description

product

CmsProduct

The product to be shown.

Code overview


ProductGrid

The ProductGrid Section displays a grid of products of a given collection.

📘

This Section should be added to the Collections template.

Props

name

type

description

collection

Collection

A collection of products to be displayed.

productsPerPage

number

Quantity of products to be displayed per page.

showTitle

boolean

Whether the collections' name is be displayed as title or not.

Code overview


ProductStructuredData

The ProductStructuredData Section handles all the Structured Data for product pages.

📘

This Section should be added to the Products template.

Props

name

type

description

product

CmsProduct

Product's content to be used within the structured data.

Code overview


RegisterForm

The RegisterForm Section allows new customers to create their accounts.

📘

This Section must be added to the /account/register page.

Code overview


ChangePasswordForm (previously know as ResetForm)

The ResetForm Section allows customers to reset their password using the link they received after requesting the password reset with the ForgotPasswordForm .

📘

This Section must be added to the /account/reset-password page.

Code overview


Search

The Search Section allows customers to search on the store.

📘

This Section must be added to the /search page.

Code overview


Did this page help you?