Table of Contents

• Product Card
• Article Card
• Content Card
• Overlay Card
• Banners
• Page Hero
• Promo
• Modals
• Overlays
• Drawer
• Slideup
• Slideup Alert
• Collapse
• Quantity Adjuster

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.

Classic Rosé Cru

This is a superior Rosé. Refreshing and balanced, our Rosé Cru comes in an elegant collectible wine bottle with a signature rose stopper. The JNSQ 750mL Rosé Cru is perfect for a summer picnic with friends or enjoying a night in with fresh bruschetta.

$29

Add to Bag

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

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.

The collapsible plug in doesn't require you to use the panel element unless you're building an accordion. The base panel class has been left, and should remain, unstyled.

Single Collapsable Item

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

Accordion Example

Note: Unfortunately when creating an accordion with Bootstrap, the parent element (see data-parent) must have direct children with class panel. Also, be sure not to put the collapse class directly on the element that you want to hide/show as it has trouble with padding. Create a wrapper div and put your content in there.

The above example uses the panel element with it's associated .panel__* child elements but you can apply the accordion behavior to any elements as long as they are wrapped with .panel.

Expandable List

The expandable list is it's own component and should be wrapped in a .panel element. 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 single method available as slate.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.