Table of Contents

• Product Card
• Article Card
• Content Card
• Overlay Card
• Banners
• Page Hero
• Promo
• Modals
• Overlays
• Drawer
• Tabs
• Slideup
• Slideup Alert
• Collapse
• Quantity Adjuster
• Newsletter Form
• Video Player

Note About Liquid Snippets

The majority of the components listed on this page are generated using liquid snippets. The documentation for liquid snippets is fairly limited and glosses over a crucial aspect of how they work with regards to variables. All the snippets that we've created are built to accept variables as arguments that affect the snippet output. The majority of these snippets include default values defined inside the snippets themselves which allows you to pass in only the variables that you need. Unfortunately, liquid doesn't have any concept of variable scoping inside the snippet so the distinction between variables inside and outside is a little loose.

Take the example below:

// snippets/test.liquid
//
// Usage - {% include 'test', color: { string } %}

{% if color == blank %}
  {% assign color = 'red' %}
{% endif %}

The color is "{{ color }}"

// Usage
//  

{% assign test_color = 'roygbiv' %} 
{% include 'test', color: test_color %} // The color is "roygbiv"
{% include 'test' %} // The color is "red"
{{ color }} // red

{% assign color = 'green' %}
{% include 'test' %} // The color is "green"
{% include 'test', color: 'blue' %} // The color is "blue"
{% include 'test' %} // The color is "green"

As you can see, if a variable is defined inside a snippet, it becomes available outside of the snippet anywhere after the point where that snippet was included. In the example above, we defined color to be red inside the snippet and were able to output it's value immediately after including it.

The best protection against these kinds of variable scoping issues is to pass in argument values as variables with different names that those used inside the snippet. In this case, passing in the color argument using the variable test_color avoids any variable naming confusion.

Product Card

See snippets/product-card.liquid.

Bake & Breakfast

Oven

$1,495

silver red black white

Quantity:

1 2 3 4 5

Add to Cart

Snippet API

Article Card

See snippets/article-card.liquid.

Snippet API

Content Card

Generic card for displaying text content and a call to action..

See snippets/content-card.liquid.

Overlay Card

A card with background image and overlaid text.

See snippets/overlay-card.liquid.

Play with the options and apply a blend mode to the background and make something cool.

Snippet API

Banners

Banners are one of the most flexible and re-usable components on the site. They consist of a parent .banner element and any number of child .banner__panel elements. The parent .banner element accepts .banner--large and .banner--small modifier classes to create different sized banners. Note that these modifier classes affect the vertical padding of the child banner panels.

Each banner panel has options for content alignment, text alignment, ctas, color inversion, custom vertical padding and content width, overlays and background images plus positioning at 3 different screen sizes. Most options are optional and have fallbacks. See snippets/banner-panel.liquid for the full list of options.

Banners should generally be used outside of .container elements in order to be full bleed. They have their own child .container elements to ensure that content doesn't stretch beyond the max content width for the site.

Note: Banner panel styling is set via a small style block contained within the snippet. Because we use an ID inside this style block to target the specific panel, you must pass a unique ID string into the snippet. For most use cases, some combination of section ID, block ID, and forloop index will do the trick.

Page Hero

Page heroes function similar to banners but should only be used at the top of a page. They are typically used as an enhancement over the text-only .page-header element when we want to display text over a background image. Although their base styling is similar, they are built separately from banners to allow more flexibility. The snippet API is also slightly different to support different features.

Note: Because of the limitations of liquid code and the fact that the page-hero snippet is built to accept an image object as opposed to an image file url, it is impossible to pass a theme image asset to the snippet in order to show a fully featured example. The example below shows the page hero without a background image, but one can be easily passed in as as a section setting (section.settings.image) or a reference from another object (product.featured_image).

Promo

Promos consist of an image and text laid out vertically on mobile and horizontally on desktop. Listed below are the available options that affect layout / styling.

Snippet API

Modals

Built using Bootstrap's Modal, use these to create an overlay to focus the user's attention. Click here to see the docs for more info

Overlays

Overlays are similar to modals but are more generic and have more flexibility. They take over the entire screen but don't use a dialog box to hold content. Content is vertically centered within the viewport, but horizontal alignment is up to you. See the "search" example. They use a data-api that is similar to modals.

NOTE: These are still a work in progress, I'm having trouble with the close button on mobile.

Trigger overlay Trigger search overlay

Events

Drawer

Drawers are elements that are fixed to the side of the screen and are hidden by default. Opening them will transition the element on screen and apply a backdrop to focus user attention and act as a clickable area that dismisses the drawer.

The example below is included statically to use as reference while styling. Clicking the triggers below will show a live, working demo.

You can use the drawer with or without a backdrop. If the backdrop is used, scrolling will be killed on the body when the drawer is opened.

The API closely follows the one for Bootstrap's modals. You can create the drawer programatically by calling the Drawer constructor and passing in options or by using data-* attributes to specify the element, trigger and options. The example below uses the data API.

Trigger drawer Trigger drawer without backdrop

Options

Events

Tabs

Tabs are elements consisting of a list of clickable tabs and corresponding tab panel elements. Clicking a tab will hide any visible tab panel before displaying the panel connected to the clicked on tab.

Slideup

Slideups are similar to drawers in that they are fixed to the screen but they are positioned at the bottom of the viewport and are generally used for site notices as opposed to site functionality.

The example below is included statically to use as reference while styling. Clicking the trigger below will show a live, working demo.

The API closely follows the one for Bootstrap's modals. You can create the slideup programatically by calling the Slideup constructor and passing in options or by using data-* attributes to specify the element, trigger and options. The example below uses the data API.

Trigger slideup

Options

Events

Slideup Alert

Slideup alerts are one time alerts that utilize the slideup class. Use the form below to test how alerts will show up.

Collapse

Bootstrap "collapse" is included, we can use this feature to build single elements with toggle-able visibility and multiple elements with accordion behavior.

NOTE: Cards should be wrapped in a parent .accordion class to prevent double borders from showing while in a collapsed state. Also, be sure not to apply margins and padding directly to the elements that you are collapsing as it will cause stuttering during the transition between states.

Single Collapsible Item

The above example uses the .card element but you can apply the collapse behavior to any elements.

Accordion

Expandable List

The expandable list is it's own component. Each list is made up of a header and body with child items. See _styles/components/expandable-list.scss for styling.

Quantity Adjuster

The quantity adjuster automatically comes with javascript functionality that provides input validation and UI constraints around min / max attributes set on the input element (including responding to changes during the component's lifetime). It requires a specific markup structure with the following data attributes.

- [data-quantity-adjuster]
  - [data-increment]
  - input[type="number"]
  - [data-decrement]

By default, the component's javascript will initialize all quantityAdjuster components on page load as well as on all Shopify them editor events. There is a static method available available as QuantityAdjuster.refresh() which will initialize any components on the page that have yet to be initialized.

The example below has a default value of 2 with min / max values set at 1 and 10 respectively. Click the buttons below to make changes to the component and see how it responds.

Newsletter Form

The newsletter form is a UI component for displaying a form input with associated messaging for different subscription states. The contents element wraps the form inputs as well as the form message. Different message strings are stored as data attributes and inserted into the dom as necessary. It requires a specific markup structure with the following data attributes.

- form
  - .newsletter-form-contents[data-form-contents]
    - .newsletter-form-inputs
    - .newsletter-form-message[data-form-message][data-message-success][data-message-fail]

Use the buttons below to toggle various states of the form.

Video Player

The video player component supports both YouTube and Vimeo videos. All settings are passed as data attributes. The component consists of a specific markup structure which loads an iframe from the required video provider when initialized.

YouTube Example

Vimeo Example

This example uses the background setting that Vimeo offers. This setting removes all controls and branding on the player, as well as autoplaying and looping the video. This setting can be toggled via the data-background attribute on the .video-player element.