How to change webshop styling / SCSS parameters

Styling elements can be adjusted on your Sharefox webshop, to match styling & branding guidelines appropriate for your organisation. The majority of these elements can be changed from Admin ▸ Settings ▸ Styling page.

Elements that are dynamically adjustable via your Admin site are marked with the ⟳ symbol below. After changing the value, remember to click the Publish button on the right of the screen.

FOR ADVANCED USERS

A full list of SCSS variables that can be used for custom styling of your Sharefox Shop site styling is included below ($variable: <example value>). 

We do not recommend changing the default css for the site, more than what is made available under Settings -> Styling, and Settings -> Template as we will in some time migrate all shops over to Shop 2.0 (new technology). In the migration we will not take in the css changes - moving over to changes via a json file. As a consequence the changes you do now to the CSS file have to be redone later. 

-> If you really have to do changes, go to: Admin > Settings > Media > Custom files section > Upload a ‘styles.css’ file with the style.

1. GENERAL: COLOUR SETTINGS

⟳ $primary: #55c27c;

// Primary / signature colour for: Buttons, search border, price color, highlightings, Help menu items, About us menu items, etc. 

⟳ $blue: #414b5d; 

// A dark blue: Main text colour on all pages, product on-hover background

$dark-blue: #262534; 

// Second dark colour: Menu color on other pages than landing, footer background color, map +/- icons color

$black: #000; 

// High-contrast / visibility for: Time selection popup text (options and description) 

$white: #fff; 

// White reference

⟳ $danger: #CD5C5C; 

// High-attention colour: Input field validations, error fields and borders, missing availability on time selection popup / product page, also Google login button (note: should not be) 

$light-blue: #4568b2; 

// Only for: Small spinner / thin loader on page load, also FB sign up button (note: should not be)

2. GENERAL: OTHER SETTINGS

// Button rounded value 

⟳ $btn-round: 30px !important; 

// Show/Hide menu bottom border on pages other than landing page 

$header-no-border: false;

3. TEXT SETTINGS

3.1 FONT

$main-font-family: ufonts_com_freightsansbold; 

// Font family on: headers, titles and product name 

$second-font-family: ProximaNovaReg;

// Font family on: normal text (other places)

$third-font-family: ProximaNovaReg; 

// Landing page only: Announcement header / sub-title 

// Fonts enabled/disabled. If true then this font should exist on the customer site and will be loaded

$helvetica: false;

$futura: false; 

$futura-book: false; 

$geogrotesque: false; 

$raleway: false;

$old_standard_tt: false; 

$nunito-sans: false; 

$radikal: false; 

$radikal-medium: false; 

3.2 LANDING PAGE

$header_title_font_size: 44px; 

// Header title font size on landing page

$header_subtitle_font_size: 30px; 

// Header subtitle font size on landing page

$title-color: $white; 

// Title color on the header on landing page 

4. IMAGE SETTINGS

4.1 LOGO

// Logo scale 

⟳ $logo_scale: 1; 

// Scale for the logo on mobile view 

⟳ $logo_scale_mobile: 1; 

// Logo positioning horizontal vertical

$logo_transform_origin: left center; 

4.2 HEADERS MOBILE

// Landing header background image for mobile view. 

$landing-header-bg: "../img/bg_mobile.png"; 

// Products header background image for mobile view. 

$products-header-bg: '../'; 

// Blogs header background image for mobile view. 

$activities-header-bg: '../'; 

4.3 HEADERS OTHER

// Landing page header gradient options (degree, top and bottom colors) $linear-gradient-deg: 180deg; 

$linear-gradient-top-color: rgba(135, 146, 157, 0);

$linear-gradient-bottom-color: rgba(104, 115, 125, 0);

// Landing page header background position 

$header_bg_position: center center; 

// Landing page header background size

$header_bg_size: cover; 

// Products header background image position

$products-header-bg-position: center bottom; 

4.4 BLOG PAGE

// Image fit type for main slider on Blog Page ex: https://vollebekkfabrikker.no/blog/bybi. 

$image_size_fit: cover;