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.

<div class="banner-slider"> <!-- Repeat this portion for every slide --> <div class="banner-slider-block"> <picture> <source media="(max-width: 480px)" srcset="Mobile_image_path_goes_here"> <source srcset="Image_path_goes_here"> <img class="banner-slider-img" src="Image_path_goes_here" /> </picture> <!--If slide has cta target, add URL here--> <a class="banner-slider-cta" href="#"></a> </div> <!-- End slide --> </div>

Before After slider

This UI showcases before/after comparison.

{% include 'baSlider', beforeImg: 'Enter_Before_Image_Path', afterImage: 'Enter_Before_Image_Path' %}

Optional Variables: beforeCaption: 'Enter Custom Before Caption' afterCaption: 'Enter Custom After Caption'

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?

*This feature is meant to get you as close as possible to the perfect match! Using this tool does not guarantee the perfect match as there are many factors we cannot account for (screen resolutions, summer tans and winter cools, etc).

{% include 'quiz-undertone' %}

Shade Comparison Quiz

1

Find a Brand
    2

    Select a Product
      3

      Our Matches
      *This feature is meant to get you as close as possible to the perfect match! Using this tool does not guarantee the perfect match as there are many factors we cannot account for (screen resolutions, summer tans and winter cools, etc).

      {% include 'quiz-shade_comparison' %}

      Flour Match Quiz

      What best describes your makeup goal

      *This feature is meant to get you as close as possible to the perfect match! Using this tool does not guarantee the perfect match as there are many factors we cannot account for (screen resolutions, summer tans and winter cools, etc).

      {% 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

      <div class="bbTabs"> <ul> <!-- Repeat as needed--> <li><a href="#tab1">Tab 1 Label</a></li> <li><a href="#tab2">Tab 2 Label</a></li> </ul> <!-- Repeat in respect to above tabs--> <div id="tab1"> <!--tab 1 content goes here--> </div> <div id="tab2"> <!--tab 2 content goes here--> </div> </div>

      Tiles

      Tile 1 Tile 2 Tile 3

      Insert Tile 1 Content Here

      Insert Tile 2 Content Here

      Insert Tile 3 Content Here

      <div class="tiles"> <!-- Repeat as needed--> <a class="tile" data-tile="tile_1_Content">Tile 1</a> <a class="tile" data-tile="tile_2_Content">Tile 2</a> </div> <!-- Repeat as needed, in respect to # of tiles--> <div class="tileWrapper" id="tile_1_Content"> <div class="tileContent wrap"> <div class="tileClose"></div> <!--This line creates the 'X' close button, but is not strictly required, the module has been coded to also close if user clicks outside the immediate area--> <!--Insert Tile 1 Content Here--> </div> </div> <div class="tileWrapper" id="tile_2_Content"> <div class="tileContent wrap"> <div class="tileClose"></div> <!--Insert Tile 2 Content Here--> </div> </div>

      Accordion

      Item 1

      Item 1 Content Goes here

      Item 2

      Item 2 Content Goes here

      Item 3

      Item 3 Content Goes here
      <div class="accordion"> <!-- Each item will have a Heading / Div pair--> <h2><!--This can be changed to any of the h1-h7 heading levels, depends on preference--> Accordion Header </h2> <div> <!-- Any content or code can be placed here--> </div> <!-- This is the end of 1 item, repeat as needed--> </div>

      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' %}

      Optional Variables: dynFxn: 'Name the function (for multi-instance use)', dynSource: 'class or ID of object you are grabbing reference dimension from' sourceDim: '"height" or "width"; the axis you're taking from dynSource' dynTarget: 'class or ID of object you are applying dimension to' dimension: '"height" or "width"; axis you are applying dimension to', dynRatio: 'aspect ratio calculator; Input will = percentage of dynSource > sourceDim value', mobileDynOverride: true/false; This will enable a responsive design breakpoint, overrideBreak: '###' Pixel width at which break point is set (480 = portrait phone, etc)