Styles

Colors

Color brings a design to life. Color is versatile; it's used to express emotion and tone, as well as place emphasis and create associations.

Styles

Iconography

Icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics to either replace or accompany labels.

Styles

Spacing

Spacing variables are used to consistently apply margin and padding across components and UIs. Having a set spacing scale brings a rhythm to the product and creates a natural and familiar flow from page to page.

Styles

Typography

Typography is used to create clear hierarchies, useful organizations, and purposeful alignments that guide users through the product and experience. It is the core structure of any well designed interface.

Components

Accordion

Accordion enables users to expand and collapse sections of content.

Components

Badge

A component that can wrap any type of content to highlight information for a user or to just draw attention to a specific element.

Components

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Components

Button

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Components

Checkbox

Checkboxes are used when there is a list of options and the user may select multiple options, including all or none.

Components

Form

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Components

List

Lists consist of related content grouped together and organized vertically.

Components

Loader

Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.

Components

Modal

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

Components

Notification

Notifications are messages that communicate information to the user.

Components

Pagination

A component that is used to concatenate long sets of data for a user to consume information easier.

Components

Payment icons

The appearance of payment icons help reinforce the feeling of security on the website. These are the currently enabled payment options defined in the store settings.

Components

Quantity selector

Form field to decrement or increment a number input using attached buttons. Each quantity selector has a unique identifier to avoid conflicts.

Components

Radio

Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option.

Components

Search bar

A special input field used as the primary means of discovering content, or as a filter to aid the user in finding content.

Components

Select

Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.

Components

Swatch

A highly stylised radio input with the appearance of a selected choice card. There are active, inactive, disabled and empty states for each swatch. Can be used as labels or with filled backgrounds.

Components

Text input

Text inputs enable the user to interact with and input data. Use when the application requires long-form content from the user.

Components

Text link

Links are used primarily as a navigational element. Links may also change what or how data is displayed (view more, show all). If the action taken by the user will change or manipulate data, use a button.

Sections

Cover listing

Sections

Featured blog

Sections

Featured collection

Sections

Image slider

Sections

Instafeed

Sections

Newsletter callout

Sections

Newsletter modal

Sections

Video hero

Global

Cart drawer

An off-canvas drawer that slides in from the right-hand side of the viewport. This drawer is used for ease of accessibility to customise items currently in the cart and to provide user feedback throughout the purchasing experience.

Global

Site footer

A good site footer becomes the visual anchor of an e-commerce store in which users are able to see all the key categories and pages at a glance with minimal interaction.

Global

Site header

The look and feel of the header is the key ingredient to a consistent user experience that all good websites share. It controls all the links guiding and navigating the user across the website which ultimately builds trust within the store.

Collection

Collection hero

This block is the visual anchor of every collection page and is used to quickly identify which category the user is currently browsing.

Collection

Product card

Product cards are a medium-sized component that contains key product information such as a featured thumbnail, title and price. These products cards are shared across the theme and are one of the most re-usable components available.

Collection

Quick view

Product

Product form

The product form is one of the most important components of any e-commerce interface. It is the UI in which users are selecting and clicking around to customise options of the product they will ultimately be adding to their cart.

Product

Product gallery

Product images displayed in an intuitive layout to let customers see what the products look like with the support of extra functionality such as clickable thumbnails and image zoom on hover.

Product

Product swatches

Product swatches are styleised options that abstract the default dropdown menus away and allow for branded selectors to the product form to enhance the user experience.

Cart

Cart overview

A snapshot of what to expect after this step of the process such as subtotal, VAT, shipping and taxes. This is also the last interface before users leave for the checkout stage.

Cart

Cart table

A loosely coupled flex table to display and interact with items currently in the customers cart.