Settings: How can I 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

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>). 

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;  

Still need help? Contact Us Contact Us