Quick Notes
For liquid snippets, if there are Optional variables provided, the syntax is as follows: {% include 'fileName', var1: somevalue, var2: otherValue, etc%}
Banner Slider
This is a full width slider.
Before After slider
This UI showcases before/after comparison.

{% include 'baSlider', beforeImg: 'Enter_Before_Image_Path', afterImage: 'Enter_Before_Image_Path' %}
UnderTone Quiz
An undertone is the color from underneath the surface of your skin that affects your overall hue.
There are three undertones - Cool, Warm, and Neutral.
Vein Color
There are a few ways to find out your undertone. First, look at your veins. Are they a blue or purple hue, or are they greenish in color?
{% include 'quiz-undertone' %}
Shade Comparison Quiz
Find a Brand
Select a Product
Our Matches
{% include 'quiz-shade_comparison' %}
Flour Match Quiz

What best describes your makeup goal
{% include 'quiz-flour_match' %}
Add to Cart form
This will add the transaction buttons onto whatever product it is attached to
This button will automatically switch itself between "Add to Cart" and "Notify me" depending on product status and inventory
{% include 'product-form' %}
Cordial Sign up
This snippet will create the newsletter sign up form to register users into our mailing list
{% include 'bbCordial' %}
Tabs
tab 1 content goes here
tab 2 content goes here
tab 3 content goes here
Tiles
Insert Tile 1 Content Here
Insert Tile 2 Content Here
Insert Tile 3 Content Here
Accordion
Item 1
Item 2
Item 3
Accordion Header
Breadcrumbs
{% include 'breadcrumbs' %}
Loyalty Points snippet
Will calculate and display user's loyalty point info (mobile sticky CTA bar, PDP info on desktop)
{% include 'loyalty-points-info' %}
Dynamic Resize function
Use to dynamically set Aspect ratio for a group of items based on parent container
{% include 'dynamicResize' %}