Customising the Design

Introduction

By default, the SparkLayer Frontend has relatively agnostic styling and tries to keep things as neutral as possible. In order to allow SparkLayer to be styled to match the theme and branding of the online store, a large selection of variables are exposed that can be customised via standard CSS methods.

Please note: If you're unable to style an element to your exact needs, please contact us and we'll be happy to advise.

Applying the customisations

The customisations work by adding a special snippet of CSS to the source code of your website that overwrites the default styling for SparkLayer. Please refer to our Integration Guide on how to do this.

Available customisations

The following list contains all available styles that can be updated on SparkLayer.

Colours

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Colours */
--spark-default-body-color: #555555;
--spark-primary-color: #000000;
--spark-primary-color-light: #F5F5F5;
--spark-primary-color-dark: #999999;
--spark-secondary-color: #125EF8;
--spark-tertiary-color: #00AF76;
--spark-lightest-color: #FFFFFF;
--spark-success-color: #00AF76;
--spark-error-color: #EF0000;
--spark-link-color: #125EF8;
--spark-input-color: #CCCCCC;
}
</style>

Variable

Description & usage

Default Value

--spark-default-body-color

Body font colour

#555555

--spark-primary-color

Title font colour, e.g. price information

#000000

--spark-primary-color-light

Light shading, e.g. table shading

#F5F5F5

--spark-primary-color-dark

Dark shading

#999999

--spark-secondary-color

Secondary colour, e.g. a highlight colour

#125EF8

--spark-tertiary-color

Tertiary colour, e.g. large button colour

#00AF76

--spark-lightest-color

Lightest colour, e.g .white

#FFFFFF

--spark-success-color

Success message colour

#00AF76

--spark-error-color

Error message colour

#EF0000

--spark-warn-color

Warning message colour

#EDC35C

--spark-link-color

Anchor link colour

#125EF8

--spark-input-color

Form fields border colour

#CCCCCC

Typography

About embedded fonts

SparkLayer by default uses two typefaces on the Frontend

It's possible to overwrite these using the variables listed below. If you do require custom fonts for SparkLayer (e.g. using Google Fonts), please ensure these are included in your website's core CSS file and including in your site header if necessary.

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Typography */
--spark-font-default: 'Roboto', sans-serif;
--spark-font-highlight: 'Poppins', sans-serif;
--spark-font-weight-default: 400;
--spark-font-weight-light: 300;
--spark-font-weight-medium: 500;
--spark-font-weight-heavy: 600;
--spark-header-font: 'Poppins', sans-serif;
--spark-header-font-weight: 500;
--spark-h1-fontsize: 24px;
--spark-h2-fontsize: 22px;
--spark-h3-fontsize: 20px;
--spark-h4-fontsize: 16px;
--spark-h5-fontsize: 15px;
--spark-h6-fontsize: 14px;
--spark-pricing-fontsize: 16px;
--spark-pricing-font-weight: 400;
--spark-pricing-fontsize-small: 14px;
--spark-product-code-fontsize: 16px;
--spark-product-code-font-weight: 400;
--spark-product-code-fontsize-small: 14px;
--spark-product-stockstatus-fontsize: 16px;
--spark-product-stockstatus-fontsize-small: 14px;
}
</style>

Variable

Description

Default Value

--spark-font-default

Main body font

'Roboto', sans-serif

--spark-font-highlight

Highlight font

'Poppins', sans-serif

--spark-font-weight-default

Default font weight

400

--spark-font-weight-light

Light font weight

300

--spark-font-weight-medium

Medium font weight

500

--spark-font-weight-heavy

Heavy font weight

600

--spark-header-font

Header font

'Poppins', sans-serif

--spark-header-font-weight

Header font weight

500

--spark-h1-fontsize

H1 font size

24px

--spark-h2-fontsize

H2 font size

22px

--spark-h3-fontsize

H3 font size

20px

--spark-h4-fontsize

H4 font size

16px

--spark-h5-fontsize

H5 font size

15px

--spark-h6-fontsize

H6 font size

14px

--spark-pricing-fontsize

Pricing font size

16px

--spark-pricing-font-weight

Price font weight

500

--spark-pricing-fontsize-small

Price font size on mobile

14px

--spark-product-code-fontsize

Product code font size

16px

--spark-product-code-font-weight

Product code font weight

500

--spark-product-code-fontsize-small

Product code font size on mobile

14px

Buttons

General

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Buttons */
--spark-button-font-family: 'Poppins', sans-serif;
--spark-button-border: 0;
--spark-button-font-size: 15px;
--spark-button-font-weight: 400;
--spark-button-padding: 0.875em 1.75em;
--spark-button-radius: 4px;
--spark-button-text-transform: none;
--spark-button-text-letter-spacing: 0;
--spark-button-raised-background: #25EF8;
--spark-button-raised-background-hover: #508AFF;
--spark-button-raised-color: #FFFFFF;
}
</style>

Variable

Description

Default Value

--spark-button-font-family

Button font

'Poppins', sans-serif

--spark-button-border

Button border

0

--spark-button-font-size

Button font size

15px

--spark-button-font-weight

Button font weight

400

--spark-button-padding

Button padding

0.875em 1.75em

--spark-button-radius

Button border radius

4px

--spark-button-text-transform

Button text transform

none

--spark-button-text-letter-spacing

Button letter spacing

0

--spark-button-raised-background

Button background

#25EF8

--spark-button-raised-background-hover

Button background hover

#508AFF

--spark-button-raised-color

Button font colour

#FFFFFF

Disabled buttons

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Disabeld buttons */
--spark-button-disabled-background: #DFDFDF;
--spark-button-disabled-color: #9F9F9F;
}
</style>

Variable

Description

Default Value

--spark-button-disabled-background

Disabled button background

#DFDFDF

--spark-button-disabled-color

Disabled button font colour

#9F9F9F

Large buttons

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Large buttons */
--spark-button-large-font-size: 18px;
--spark-button-large-padding: 0.875em 1.75em;
--spark-button-large-background: #25EF8;
--spark-button-large-background: #508AFF;
}
</style>

Variable

Description

Default Value

--spark-button-large-font-size

Large button font size

18px

--spark-button-large-padding

Large button padding

0.875em 1.75em

--spark-button-large-background

Large button background

#25EF8

--spark-button-large-background

Large button background hover

#508AFF

Messages

Toast notifications

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Toast notifications */
--spark-toast-color: #FFFFFF;
--spark-toast-text-color: #000000;
--spark-toast-action-color: #125EF8;
--spark-toast-border-color: #DDDDDD;
--spark-toast-border-radius: 4px;
}
</style>

Variable

Description

Default Value

--spark-toast-color

Toast notification background colour

#FFFFFF

--spark-toast-text-color

Toast notification text colour

#000000

--spark-toast-action-color

Toast notification link colour

#125EF8

--spark-toast-border-color

Toast notification border colour

#DDDDDD

--spark-toast-border-radius

Toast notificaiton border radius

4px

General messages

Sample CSS Code
Sample CSS Code
<style>
:root {
/* General messages */
--spark-message-padding: 0.7rem 1.25rem;
--spark-message-success-background: #E5FFF5;
--spark-message-success-border: 1px solid #1c9665;
--spark-message-warn-background: #FDF7E3;
--spark-message-warn-border: 1px solid #EDC35C;
--spark-message-error-background: #E74148;
--spark-message-error-border: 1px solid #E74148;
}
</style>

Variable

Description

Default Value

--spark-message-padding

Message box padding

0.7rem 1.25rem

--spark-message-success-background

Message success background

#E5FFF5

--spark-message-success-border

Message success border

1px solid #1c9665

--spark-message-warn-background

Message warn background

#FDF7E3

--spark-message-warn-border

Message warn border

1px solid #EDC35C

--spark-message-error-background

Message error background

#E74148

--spark-message-error-border

Message error border

1px solid #E74148

General

Sample CSS Code
Sample CSS Code
<style>
:root {
/* General */
--spark-border-radius-default: 4px;
--spark-border-radius-large: 8px;
--spark-drawer-max-width: 700px;
--spark-drawer-max-width-wide: 1000px;
--loading-background-color: #DEDEDE;
--spark-container-content-top: 3rem;
--spark-container-content-bottom: 3rem;
--spark-container-content-side: 4.5rem;
--spark-container-content-reduced: 1.5rem;
--spark-spinner-default-color: #125EF8;
}
</style>

Variable

Description

Default Value

--spark-border-radius-default

Default border radius

4px

--spark-border-radius-large

Overlay border radius

8px

--spark-drawer-max-width

Width of overlay

700px

--spark-drawer-max-width-wide

Width of overlay in 'maximised' view

1000px

--loading-background-color

Loading 'skeleton' colour

#DEDEDE

--spark-container-content-top

Overlay spacing - top

3rem

--spark-container-content-bottom

Overlay spacing - bottom

3rem

--spark-container-content-side

Overlay spacing - sides

4.5rem

--spark-container-content-reduced

Overlay spacing - reduced

1.5rem

--spark-spinner-default-color

Loading spinner colour

#125EF8

Forms

Input fields

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Input fields */
--spark-form-field-text-transform: none;
--spark-placeholder-text-color: #999999;
--spark-input-border-color: #CCCCCC;
--spark-input-border: 1px solid #CCCCCC;
--spark-input-radius: 4px;
--spark-input-background: #FFFFFF;
--spark-input-error-color: #EF0000;
--spark-input-success-color: #00AF76;
--spark-input-focus-color: #125EF8;
--spark-input-font-size: 14px;
--spark-input-margin: 0;
--spark-input-padding: 0.75rem;
--spark-label-font-size: 0.8rem;
--spark-input-disabled-color: #777777;
--spark-input-disabled-solid-color: #949494;
}
</style>

Variable

Description

Default Value

--spark-form-field-text-transform

Form font text transform

none

--spark-placeholder-text-color

Input field placeholder colour

#999999

--spark-input-border-color

Input field border colour

#CCCCCC

--spark-input-border

Input field border

1px solid #CCCCCC

--spark-input-radius

Input field border radius

4px

--spark-input-background

Input field background

#FFFFFF

--spark-input-error-color

Input field error colour

#EF0000

--spark-input-success-color

Input field success colour

#00AF76

--spark-input-focus-color

Input field focus colour

#125EF8

--spark-input-font-size

Input field font size

14px

--spark-input-margin

Input field margin

0

--spark-input-padding

Input field padding

0.75rem

--spark-label-font-size

Label font size

0.8rem

--spark-input-disabled-color

Disabled input field colour

#777777

--spark-input-disabled-solid-color

Disabled input border colour

#949494

Radio buttons

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Radio buttons */
--spark-radio-fill-color: #125EF8;
--spark-radio-empty-color: #5A5A5A;
--spark-radio-border: 2px solid #125EF8;
}
</style>

Variable

Description

Default Value

--spark-radio-fill-color

Radio button selected colour

#125EF8

--spark-radio-empty-color

Radio button unselected colour

#5A5A5A

--spark-radio-border

Radio button border

2px solid #125EF8

Select menus

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Select menus */
--spark-select-border: 1px solid #CCCCCC;
--spark-select-background: #FFFFFF;
--spark-select-focus: #125EF8;
--spark-select-font-size: 14px;
--spark-select-padding: 0.75rem;
--spark-select-radius: 4px;
--spark-select-disabled-color: #999999;
}
</style>

Variable

Description

Default Value

--spark-select-border

Select menu border

1px solid #CCCCCC

--spark-select-background

Select menu background

#FFFFFF

--spark-select-focus

Select menu focus border colour

#125EF8

--spark-select-font-size

Select menu font size

14px

--spark-select-padding

Select menu padding

0.75rem

--spark-select-radius

Select menu border radius

4px

--spark-select-disabled-color

Select menu disabled colour

#999999

Tables

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Tables */
--spark-table-border-color: #CCCCCC;
--spark-table-striped-color: #F5F5F5;
--spark-table-header-background-color: #FFFFFF;
--spark-table-header-text-color: #555555;
--spark-table-header-font-weight: 500;
}
</style>

Variable

Description

Default Value

--spark-table-border-color

Table border colour

#CCCCCC

--spark-table-striped-color

Table striped rows background

#F5F5F5

--spark-table-header-background-color

Table header background

#FFFFFF

--spark-table-header-text-color

Table header text colour

#555555

--spark-table-header-font-weight

Table header font weight

500

Product Card

Sample CSS Code
Sample CSS Code
<style>
:root {
/* Product Card */
--spark-product-card-button-radius: 4px;
--spark-product-card-button-padding: 0.75rem 1rem;
--spark-product-card-pricing-font-size: 15px;
--spark-product-card-pricing-font-size-small: 14px;
--spark-product-card-select-min-height: 50px;
}
</style>

Variable

Description

Default Value

--spark-product-card-button-radius

Button radius

4px

--spark-product-card-button-padding

Button padding

0.75rem 1rem

--spark-product-card-pricing-font-size

Pricing font size

15px

--spark-product-card-pricing-font-size-small

Pricing font size on mobile

14px

--spark-product-card-select-min-height

Minimum height for select menu wrapper

50px