Dev Components

The styling has been set up in the file named "common-components.scss.liquid". This file is included on the theme.liquid file. There is a scss.liquid file, named `common-components` is the style sheet for all the styling applying accross the whole website (eg. header, footer, etc.). You can find the structure of this file in the ReadMe file.

Here is a list of the components that have been rebuild:

- Heading 2

- Container

- Underline links

- Buttons

Headings 2 are styled as per Go-To styling by default but if it's included in a `scheme-bro-to` element, it will be styled as per Bro-To styling. It's the same mechanics for Gro-To. There is a scheme evaluation which is adding a scheme CSS class on the body of the page. The styling applies for the element with CSS class .h2, because styling general <h2> would change the styling on the whole website.

Containers are using a CSS class named "content-width", which will be aligned with the logo from the navigation in the header.

Underline links are created with 2 CSS class `underline_link-primary`, `underline_link-secondary`, `underline_link-tertiary` or `underline_link-quaternary` (so far, only the links contained in a `scheme-gro-to` element can have a tertiary and quaternary styling). For each scheme there are two different styling. You can also add the CSS `underline_link-reverse` for underline links on a dark background.

There is also the base underline link which is black and white link, created with this class `underline_link-base`.
You can also add the CSS class `full-coloured` to use the underline colour for the copy and the arrow.

Buttons are also created with a CSS class `button-primary`. The styling is also based the scheme CSS class of a parent element (eg. scheme-go-to, scheme-bro-to, scheme-gro-to, ). You can also add the CSS `button-reverse` for buttons on a dark background.

!important: To change the font weight, you need to change the font-weight but not the font-family.

snippets: the snippets list from Shogun has been cleaned up, mainly removed all the product page snippets, landing pages snippets, links because the product and landing pages have been rebuilt
modals: now allow nesting other elements by dragging and dropping. You can add elements like text/headings/image… inside the modal.
product legacy styling: there is a setting to add the previous product page styling or not. Once the new product pages will go live, we will be able to disable this setting and remove the legacy styling file.
font-family: we now only use font-weight and not family to change the weight of a font. to prevent the old font to be displayed, even when an old font is set up on Shogun, we need to remove the old font from Shogun app, once the new the new styling will go live.
bold/italic: bold and italic styling are not set up through a font-family anymore, they are using their initial display
underline links: I've created a custom element to play with underline links option on Shogun Documentation here

Primary full coloured arrow link

Secondary

Product Page

What is it?

A terrifically powerful, fantastically lightweight facial oil that deeply hydrates, soothes, revitalizes and completely protects the face against bad guys trying to make it unhappy. It's your daily skin booster and new best friend.

Featuring 10 potent, purposefully selected plant and nut oils, this supercharged face oil boasts a bucket load of essential fatty acids, vitamins and antioxidants, as well as anti-inflammatory properties and write-home-about-it nourishment. It leaves zero residue and penetrates deeply and quickly to hydrate, revive, brighten and insure your face against fine lines, dark spots, dryness and ageing inflammation.

Face Hero balances oily skin, hydrates dry skin and creates a bright, bouncy canvas for makeup. It’s your all-in-one daily skin guardian, and quite frankly, just the hero we've been waiting for.

Face Hero is suitable for all skin types. It is lightweight enough for compromised or oily skins, (because remember, even oily skin needs nourishment), nourishing enough for very dry, dehydrated or mature skin and is dermatologically tested to be suitable for sensitive skin.

What's in it?

View ingredient List arrow link

What is it?

Our Daily Glow set comes with everything your face needs to be healthy and luminous. Featuring Properly Clean, our skin-softening mousse cleanser. Face Hero, our best-selling-for-a-reason face oil. And Zincredible Tinted, our lightweight daily moisturiser with physical SPF protection and radiance-boosting mineral powders. Give 'em a glow!

Featuring

Face Hero

Properly Clean

Very Useful Face Cream

Face Hero

View ingredient List arrow link

Go-To TV

How-To:
Very Useful Face Cream

Watch the video

Use at night before bed, during flights, as a base for makeup, after UV exposure, and whenever you feel your skin could do with a hit of TLC.

Don’t substitute for a USB. Messy.

We didn’t call it Very Useful Face Cream for nothing.

A lightweight face cream with a heavy hit of TLC.

Where does it fit in my routine?

In the AM

Opt for a daily moisturiser with SPF. (We unbiasedly recommend Zincredible SPF 15.)

In the PM

Apply Very Useful Face Cream as the last step of your skin care routine.
(After cleansing, exfoliating, oils/serums.)

Kiss yourself goodnight in the mirror.

A tiny bit of fun copy here.

How do I use this set?

On The Face!

Cleanse skin morning and night with Properly Clean.
Use Exfoliating Swipeys to gently (and quickly) clear away dead skin cells 2-3 times a week.
Pop on Transformazing before a fancy event (or post-flight/big night) for Very Amazing Skin. Leave for 10 minutes. Remove and pat in serum.
Apply 3-5 drops of Face Hero all over face, neck and decolletage.
Follow with Zincredible SPF 15 (in the AM) or Very Useful Face Cream (in the PM).
Pop on Lips for serious nourishment or Pinky-Nudey Lips! For UV protection and a lovely, subtle tint.

Hero Ingredients

Amla Berry Extract

A powerful antioxidant with very high vitamin C content, amla berry extract helps eliminate free radicals (found in UV rays, toxins and environmental pollutants) and keeps the skin young & fresh.

CoQ10

Naturally present in the body, environmental factors reduce the levels of CoQ10 in the skin. The application of CoQ10 has antioxidant and skin soothing effects and may help improve the signs of aging.

Apricot Kernel Oil

A light, gentle oil that comes from the kernels (seeds) of apricots. High in essential fatty acids and vitamins E and A, it helps to balance, nourish and soften the skin.

View full Ingredient Glossary