Customising the Design
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.
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.
The following list contains all available styles that can be updated on SparkLayer.
<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 |
| Body font colour |
|
| Title font colour, e.g. price information |
|
| Light shading, e.g. table shading |
|
| Dark shading |
|
| Secondary colour, e.g. a highlight colour |
|
| Tertiary colour, e.g. large button colour |
|
| Lightest colour, e.g .white |
|
| Success message colour |
|
| Error message colour |
|
| Warning message colour |
|
| Anchor link colour |
|
| Form fields border colour |
|
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.
<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 |
| Main body font |
|
| Highlight font |
|
| Default font weight |
|
| Light font weight |
|
| Medium font weight |
|
| Heavy font weight |
|
| Header font |
|
| Header font weight | 500 |
| H1 font size |
|
| H2 font size |
|
| H3 font size |
|
| H4 font size |
|
| H5 font size |
|
| H6 font size |
|
| Pricing font size |
|
| Price font weight | 500 |
| Price font size on mobile |
|
| Product code font size |
|
| Product code font weight |
|
| Product code font size on mobile |
|
<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 |
| Button font |
|
| Button border |
|
| Button font size |
|
| Button font weight |
|
| Button padding |
|
| Button border radius |
|
| Button text transform |
|
| Button letter spacing |
|
| Button background |
|
| Button background hover |
|
| Button font colour |
|
<style>:root {/* Disabeld buttons */--spark-button-disabled-background: #DFDFDF;--spark-button-disabled-color: #9F9F9F;}</style>
Variable | Description | Default Value |
| Disabled button background |
|
| Disabled button font colour |
|
<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 |
| Large button font size |
|
| Large button padding |
|
| Large button background |
|
| Large button background hover |
|
<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 |
| Toast notification background colour |
|
| Toast notification text colour |
|
| Toast notification link colour |
|
| Toast notification border colour |
|
| Toast notificaiton border radius |
|
<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 |
| Message box padding |
|
| Message success background |
|
| Message success border |
|
| Message warn background |
|
| Message warn border |
|
| Message error background |
|
| Message error border |
|
<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 |
| Default border radius |
|
| Overlay border radius |
|
| Width of overlay |
|
| Width of overlay in 'maximised' view |
|
| Loading 'skeleton' colour |
|
| Overlay spacing - top |
|
| Overlay spacing - bottom |
|
| Overlay spacing - sides |
|
| Overlay spacing - reduced |
|
| Loading spinner colour |
|
<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 |
| Form font text transform |
|
| Input field placeholder colour |
|
| Input field border colour |
|
| Input field border |
|
| Input field border radius |
|
| Input field background |
|
| Input field error colour |
|
| Input field success colour |
|
| Input field focus colour |
|
| Input field font size |
|
| Input field margin |
|
| Input field padding |
|
| Label font size |
|
| Disabled input field colour |
|
| Disabled input border colour |
|
<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 |
| Radio button selected colour |
|
| Radio button unselected colour |
|
| Radio button border |
|
<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 |
| Select menu border |
|
| Select menu background |
|
| Select menu focus border colour |
|
| Select menu font size |
|
| Select menu padding |
|
| Select menu border radius |
|
| Select menu disabled colour |
|
<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 |
| Table border colour |
|
| Table striped rows background |
|
| Table header background |
|
| Table header text colour |
|
| Table header font weight | 500 |
<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 |
| Button radius |
|
| Button padding |
|
| Pricing font size |
|
| Pricing font size on mobile |
|
| Minimum height for select menu wrapper |
|
