//css class :root { --text-color-primary: #000096; --text-color-secondary: #FFFFFF; --text-color-placeholder: #7D756B; } //use .[classname] { color: var(--text-color-primary); }
//css class :root { --background-color-primary: #FFFFFF; --background-color-secondary: #F2EAE4; --background-color-tertiary: #000096; --background-color-line-seperator: #F5EFE6; --background-color-overlay: rgba(0, 0, 0, 0.3); } //use .[classname] { background: var(--background-color-primary); }
Hero
Used for hero banners that require large font styles that has no SEO values
//css class .fs-hero //html element <h1 class="fs-hero">Hero</h1>
Headline (H1) - Default (PLP)
Used for page titles especially on product listing page title names e.g. ‘DSLR Cameras’.
//css class .fs-h1-plp //html element <h1 class="fs-h1-plp">H1 - PLP</h1>
Headline (H1) - (PDP)
Used for product names on product detail page to ensure we pull SEO values. e.g. ‘Canon DSLR 7D Camera’
//css class .fs-h1-pdp //html element <h1 class="fs-h1-pdp">H1 - PDP</h1>
Headline2 (H2)
Used for secondary titles and situations where we need to consider secondary SEO keywords.
//css class .fs-h2 //html element <h2 class="fs-h2">H2 Tag</h2>
Headline3 (H3)
//css class .fs-h3 //html element <h3 class="fs-h3">H3 Tag</h3>
Headline4 (H4)
Can an be applied in a flexible manner. Typically a product name on PLP page.
//css class .fs-h4 //html element <h4 class="fs-h4">H4 Tag</h4>
Headline5 (H5)
Can an be applied in a flexible manner. Typically price on PLP page.
//css class .fs-h5 //html element <h5 class="fs-h5">H5 Tag</h5>
Headline6 (H6)
//css class .fs-h6 //html element <h6 class="fs-h6">H6 Tag</h6>
Paragraph Small
Mostly used for small content blocks that require less prominence and for tables in My Account.
//css class .fs-p-small //html element <p class="fs-p-small">Paragraph Small</p>
Paragraph Body
Paragraph Body [default]
The primary paragraph style used for the majority of content on site.Please consider ADA compliance rules if website is based in U.S.
//css class .fs-p-body //html element <p class="fs-p-body">Paragraph Body</p>
Paragraph Large
Used for additional prominence on text. i.e. Intro content for blog articles etc.
//css class .fs-p-large //html element <p class="fs-p-large">Paragraph Large</p>
Label Small [default]
For small labels. i.e. Product Tags, ‘Select Size’ Titles, & Table headings
//css class .fs-label-small //html element <span class="fs-label-small">Label Small</span>
Label Large
Used for labels that require more hierarchy than smaller caps. i.e. Used for navigation etc.
//css class .fs-label-large //html element <span class="fs-label-large">Label Large</span>
Button
Applied to all buttons except for “links”.
//css class .fs-button //html element <a class="fs-button">Button</a>
Text Button
Used for underline buttons. Please refer to the underline ‘component’.
//css class .fs-textbutton //html element <a class="fs-textbutton">Text Button</a>
Field
Text style for all fields. Please refer to the field components.
//css class .fs-field //html element <a class="fs-field">Field</a>
Navigation
Text style for Navigation. Please refer to the filter and mega menu.
//css class .fs-navigation-primary //html element <a class="fs-navigation-primary">Navigation</a>
//css class .fs-navigation-secondary //html element <a class="fs-navigation-secondary">Navigation</a>
Breadcrumbs
Text style for Breadcrumbs. Please refer to the filter and mega menu.
//css class .fs-breadcrumbs //html element <a class="fs-breadcrumbs">Breadcrumbs</a>
Buttons have a width of 100% so be sure if you want them smaller to set a max-width within your section.
The default for svg for btn__icon--(right/left) is . If you need to overwrite it, you can edit it within your section with something like the following
//html element <a class="btn btn__icon--left">Add To Bag</a> //css class .btn__icon--left::before { background-image: url("data:image/svg+xml,<SVG></SVG>"); } //css using an existing asset .btn__icon--left::before { background-image: url({{""assetName.fileExtension|asset_url}}); } //shopify section/block using type:text with an input of an entire svg element .btn__icon--left::before { background-image: url("data:image/svg+xml,{{section.settings.(sectionID) | url_param_escape }}"); }
//css class .btn //html element <a class="btn">Pick Your Flavor</a>
//css class .btn .btn__icon--left //html element <a class="btn btn__icon--left">Add To Bag</a>
//css class .btn .btn__icon--right //html element <a class="btn btn__icon--right">Add To Bag</a>
//css class .btn .btn--secondary //html element <a class="btn btn--secondary">Pick Your Flavor</a>
For svg icons that are normally white/transparent and need to be put onto a white or transparent background. We can use a css filter to change the color of them without having to input a new svg.
//css class .btn .btn--secondary .btn__icon--left //html element <a class="btn btn--secondary btn__icon--left">Add to Bag</a> //css styles .btn--secondary:hover.btn__icon--left::before { background-image: url({{"assetName.fileName" | asset_url}}); } .btn--secondary.btn__icon--left::before { filter: brightness(0) saturate(100%) invert(12%) sepia(45%) saturate(3904%) hue-rotate(225deg) brightness(117%) contrast(137%); }
Filters can occasionally be a little off sometimes so make sure that they are accurate in browser.
If you have an icon that has a transparent background and you need it to be white instead you can use the following filter:
filter: brightness(0) invert(1);
//css class .btn .btn--disabled //html element <a class="btn btn--disabled">Proceed To Checkout</a>
National 2 Condensed Regular | 15pt
To be used as a tertiary CTA for supplementary information links
//css class .btn__text //html element <a href="#" class="btn--text">Shop all Cookies</a>
If you have an svg that needs to be rotates, and an svg in that direction does not already exist, You can use transform in css to accomplish this
//css class .icon__flip //html element <svg class="icon__flip">(svg code)</svg> //css code transform: rotate(180deg);
Label Small
Pitch Semi-bold | 11pt
10% Tilt
//css class .product-card__tag //html element <label class="product-card__tag fs-p-body">Most Popular</label>
Pitch Semi-bold | 14pt
4% Tilt
Our Cookies
//css class .eyebrow__label //html element <p class="eyebrow__label">Our Cookies</p>
field: 50px high
*dropshadow added to show edge
4-Pack
8-Pack
12-Pack
//css class //html element
Pack Size: H5
Shipping cost: Paragraph small
$27 + Shipping cost
$49 Free Shipping
$68 Free Shipping
//css class .product-selector__form-control-radio //html element <div class="product-selector__form-control-radio"> <input id="product_name" type="radio" name="shipping" value="product_name" aria-labelledby="#"> <label for="product_name" aria-label="#"> <h5>4-Pack</h5> <p class="fs-p-small">$27 + Shipping cost</p> </label> </div>
Would you like to upgrade your 8-pack to be packaged in one of our Levain Cookie Tins?
Each online order can only be sent to one address.
$0.00
Send your gift recipient a custom greeting card!
Or send a complimentary gift message
*If you enter your recipient's email address, they will receive shipping notification emails (we won't include any order or pricing info, so your gift details will still be a surprise!)