Shop

Mega menu

First Light

First Light

beauty supplements

Ceramides Skin Supplement
Ceramides Skin Supplement

"This is my 4th bottle...it really improves my skin. My beautician says my pores are smaller. love it!"— Mary

$55.00

Ceramides Skin Supplement

Clinically proven to boost skin's hydration by 23% in 2 weeks.

Explore Ceramides Skin Supplement

skin care products

The Serum
The Serum

"this is the one serum that can essentially replace all other skincare products that I have been using"— Annie

$89.00

The Serum

Specially designed to bring back baby soft skin with an intense boost in hydration. This serum mimics the protective and hydrating properties of the Vernix Caseosa, bringing an instant, natural glow that your skin will thank you for.

Explore The Serum
The Essence
The Essence

"I don't know how they do it, but I love how soft my skin feels right after using The Essence."— Jo

$75.00

The Essence

Our beauty holy trinity BFE Complex works synergistically with your skin to develop a moisture reservoir to deeply hydrate, while immediately helping to soften skin.

Explore The Essence
Flowerberry

Flowerberry

beauty supplements

Eye Illuminating Supplement
Eye Illuminating Supplement

"I always find my eyes getting tired throughout the day but since taking Flowerberry I even got compliments"— Renee

$55.00

Eye Illuminating Supplement

Bringing our In-and-Out philosophy to the eyes, this beauty supplement is the first of its kind. FlowerBerry brightens lackluster eyes, improves eye health while filtering out blue light with our unique blend of traditional superfood.

Explore Eye Illuminating Supplement

skin care products

Eye Illuminating Cream
Eye Illuminating Cream

"I now swear by this and recommend it to all my friends"— Z Chia

$49.00

Eye Illuminating Cream

A luxurious cream that helps to diminish crow's feet, brighten dark circles, de-puffs in 2 weeks with our proprietary FlowerBerry complex. Nourish and repair your delicate eye area for brighter, youthful-looking eyes.

Explore Eye Illuminating Cream
True Bright

True Bright

beauty supplements

Skin Brightening Supplement
Skin Brightening Supplement

"I'm now into my 5th bottle and needless to say, my pigmentation has lightened tremendously."— Vaun

$75.00

Skin Brightening Supplement

Experience the secret ingredient to radiant-looking skin in this customer favorite skin-enhancer. Formulated using Sakura extract and Colorless Carotenoids, this supplement helps to brighten skin and lighten pigmentation.

Explore Skin Brightening Supplement
Invi-Sun Skin Supplement
Invi-Sun Skin Supplement

"Since taking it i realized even after being out all day my skin did not have any redness. Incredible.."— Lena

$45.00

Invi-Sun Skin Supplement

Enjoy more time outdoors with our skin defense supplement. Just two capsules before sun exposure will help keep skin blushing to a minimal and strengthen your skin’s natural resilience.

Explore Invi-Sun Skin Supplement
Live Stream
icon-next Created with Sketch.

Styles

This page is here to show off styles for standard page elements such as typography, form elements, and icons. These are hard coded in an alternate page template file, named page.styles.liquid.


Typography

Fonts

Adjust css to match weight will styles for specific project

  • Roboto
  • Normal
  • Normal Italic
  • Medium
  • Medium Italic
  • SemiBold
  • Bold
  • ExtraBold
  • Black
  • Black Italic
  • Oswald
  • Normal
  • Medium
  • Medium Italic
  • SemiBold
  • SemiBold Italic
  • Bold
  • Bold Italic
  • ExtraBold
  • Black

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

RTE headings

RTE heading one

RTE heading two

RTE heading three

RTE heading four

RTE heading five
RTE heading six

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Type styles

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote

Lists

ul (default)
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Child lists (to match the RTE styles)
  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with child list
      • Third level item
      • Another third level item
  • Four

Responsive tables

Order Date Payment Status Fulfillment Status Total
#1001 December 22, 2015 Authorized Unfulfilled $43.03
#1002 December 23, 2015 Authorized Unfulfilled $44.03
#1003 December 24, 2015 Authorized Unfulfilled $45.03
#1004 December 25, 2015 Authorized Unfulfilled $46.03
#1005 December 26, 2015 Authorized Unfulfilled $47.03
#1006 December 27, 2015 Authorized Unfulfilled $48.03

Forms

Default form elements

Invisible labels

Add a class of show-for-sr to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.


Vertical forms (customer, contact, etc)

No styles for this exist in Slate, but are used in most themes. Style elements inside a form/div with class `form-vertical` to see your styles here.

You cannot add a class directly to most liquid form elements (e.g. {% form 'contact' %}). Instead, wrap the form in a div with the class .form-vertical to achieve the same effect.

$
Liquid error: Could not find asset snippets/custom-select-dropdown.liquid
Checkboxes

Radios

Notes and form errors

No note styles exist in Slate but are commonly added to handle form errors. Example styles:

                .note {
                padding: 20px;
                border: 1px solid #ccc;
                }

                .note--success {
                border-color: green;
                background-color: lightgreen;
                }

                .note--error {
                border-color: red;
                background-color: lightred;
                }
            

Example usage:

                {% if form.posted_successfully? %}
                <p class="note note--success">Thanks for submitting the form</p>
                {% endif %}

                {% if form.errors %}
                <div class="note note--error">
                    {{ form.errors | default_errors }}
                </div>
                {% endif %}
            
This is a standard note
This is a success message

This is an error message.

  • Bullets can offer more insight to the error

Buttons

Button Group


Miscellaneous elements

Horizontal Rules

There are no default hr styles in Slate, but these are common ones to add.

Default hr


Invisible hr.hr--clear


Small hr.hr--small



SVG icons

Read more about using, creating, and editing SVG icons in Slate's documentation.

Payment icons

Social icons

  • icon-facebook Created with Sketch.
  • icon-pinterest Created with Sketch.
  • icon-snapchat Created with Sketch.
  • icon-tumblr Created with Sketch.
  • icon-twitter Created with Sketch.
  • icon-vimeo Created with Sketch.
  • icon-youtube Created with Sketch.

General icons

  • icon-line-arrrow-down Created with Sketch.
  • icon-cart Created with Sketch.
  • icon-search Created with Sketch.
  • icon-refresh Created with Sketch.

Foundation Elements

Drilldown Menu

Responsive Accordion Tabs

  • Accordion 1
    Lobortis ex aliquet volutpat condimentum tincidunt nisl metus platea eleifend magnis cubilia proin phasellus risus consectetur molestie id nec ad
  • Accordion 2
    Class ex ad aenean quisque augue volutpat morbi sed lacinia Class ex ad aenean quisque augue volutpat morbi sed lacinia
  • Accordion 3
    Elit urna mi penatibus fringilla euismod mattis ultricies sociosqu inceptos ligula habitant pulvinar nostra aliquet cras tincidunt massa convallis eu

Accordion

Tabs

One

Check me out! I'm a super cool Tab panel with text content!

Two

Three

Check me out! I'm a super cool Tab panel with text content!

Four

Five

Check me out! I'm a super cool Tab panel with text content!

Six

Interchange - Background Image

Images

Unsplash Background Image

Unsplash Image

Bgset Using Shopify Image Object (Imgix optional)

Bgset Using Asset Image (Imgix optional)

Asset or Metafield Image (Imgix optional)

Shopify Image Object (Imgix optional)