Components
This page is here to document available components for use on the site. These are hard coded in an alternate page template file named page.components.liquid.
Table of Contents
- Hero Elements
- Product Card
- Article Card
- Aplos Block
- Drawer
- Collapse
- Quantity Adjuster
- Newsletter Form
Hero Elements
Hero elements are elements that (generally) go at the top of the page. There are a couple different types depending on the use case.
Hero
Full screen element with support for title, content, cta and background image / video. Only used on the homepage.
See snippets/hero.liquid.
Page Hero
Full screen element with support for title and background image. Used like a hero but for internal pages. May also be used below the top of the page (see product detail reviews)
See snippets/page-hero.liquid.
Page Header
This element is hidden from the screen but outputs the passed in title as a h1 tag making it good for pages that don't use a text title.
See snippets/page-header.liquid.
Page Banner
A full width image banner with options for desktop and mobile images. Doesn't contain any text.
See snippets/page-banner.liquid.
Product Card
See snippets/product-card.liquid.
Aplós Arise
$48 USDArticle Card
See snippets/article-card.liquid.
Aplos Block
The main UI elements of this website is the Aplos Row and Aplos Block.
The Aplos Block is a content container that supports both a background image and background video. It has responsive padding to match other UI pieces on the site. The javascript initializer for these elements is contained inside the base section constructor so that all sections on the site can use them without needing to initialize them inside each specific section. See snippets/aplos-block.liquid for the full snippet API.
The Aplos Row is an optional container for aplos block elements that will constrain overall height and force even block height.
Style rules for both of these elements can be found in _scripts/components/aplos.scss
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 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.
Page Shifting
The design of the site requires that page content shift in the direction of the drawer as if it is being pushed to the side. To achieve this affect, any elements that need to be shifted must have the .drawer-shifter class applied to the closest non-fixed position parent element. It would be nice to apply this class to the page container and be done with it but browsers can't handle fixed elements inside of elements with a transform applied to them. This means you may have to apply the class to multiple elements in a single template (see the product page for instance with it's transaction bar...). This also means that any drawer markup must exist outside of the element that shifts in response to the drawer. Seems obvious but just remember to put your drawer markup as far down the page as possible
Events
| Name | Description |
|---|---|
hide.drawer |
Triggered when the hide method is called even if the drawer is already closed. |
hidden.drawer |
Triggered when the hide animation completes. |
show.drawer |
Triggered when the show method is called even if the drawer is already open. |
shown.drawer |
Triggered when the show animation completes. |
Collapse
Bootstrap "collapse" is included, we can use this feature to build single elements with toggle-able visibility and multiple elements with accordion behavior.
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.
Test Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. 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 theme 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.
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 - .newsletter-form-contents[data-form-contents] - .newsletter-form-inputs - .newsletter-form-message[data-form-message][data-success][data-fail]
Use the buttons below to toggle various states of the form.