Design Settings

New design settings variable will only appear in the BO after: 1- Update the theme 2- Go on the local website one time to generate compilation 3- Design settings will appear in the BO

Some theme have design settings allowing the user to change colors, font, background images etc. for the website. When they change a design setting, it re-compiles the SASS of the theme with the new values.

Screenshot of design settings in backoffice

Let's do a simple example where we can change 3 variables.

1. Create the config file that the system will read. Create sass/_config.scss

$body_background_color-color-color: #FFFFFF;
$body_text-color-color: #333333;

@import "website"; /* do not remove this line */

1. Import the file in main.scss before any file needing these variables.

In main.scss

// config backo
@import 'config';

body {
    background: $body_background_color-color-color;
    color: $body_text-color-color;
}

In the backoffice, you will see 2 new variables in the "Color groups" tab, and the user can now choose the one he wants.

Variables name / type / tab

The pattern for the name of the variable is $key-tabname-type.

Each information is split by the - character, so you can't use it inside the key

$key-tabname-type: defaultValue;

List of available tabs

• general

• color

• font

• image (WIP)

List of types of variable

Simple input (no type defined)

$default_radius-general: 0px; // variable "default_radius", in tab "general"

Color Picker color

User can select a color and use opacity

$demo-general-color: #FFF; // variable "demo", in tab "general", type of field "color"

Image image

WIP, avoid using it for now

Font family font

Select a font-family. If this is a Google Font, it will automatically add to the website the link tag to import google font

$hero_caption_title_font_family-font-font: Lora;

Font Style font_style

$hero_caption_title_font_style-font-font_style: normal;

Text Transform text_transform

$hero_caption_title_text_transform-font-text_transform: none;

Toggle / Switch switch (0 or 1)

Value will be 0 or 1

$enable_breadcrumb-general-switch: 1;

Examples

$hero_caption_title_font_family-font-font: Lora;
$hero_caption_title_font_size-font: 40px;
$hero_caption_title_font_color-font-color: #FFF;
$hero_caption_title_font_weight-font: 400;
$hero_caption_title_font_letter_spacing-font: 0;
$hero_caption_title_font_line_height-font: normal;
$hero_caption_title_font_style-font-font_style: normal;
$hero_caption_title_text_transform-font-text_transform: none;
$pattern_benefit-image-image: '/integration/name-of-your-theme/public/images/coral-reef.png';

// GENERAL SETTINGS
$enable_breadcrumb-general-switch: 1;

So for example $hero_caption_title_font_size-font: Lora;

• key = hero_caption_title_font_size

• tab = font

• type = no type ? ==> default input

• default value = Lora

Another example $hero_caption_title_font_color-font-color: #FFF;

• key = hero_caption_title_font_color

• tab = font

• type = color

• default value = #FFF