Frontend

Customising the Design

Introduction
By default, the Frontend﻿ has relatively basic 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 your website, a large selection of variables are exposed that can be customised via adding special CSS variables to your store.
Please note
If you're unable to style an element to your exact needs, please contact us and we'll be happy to advise on the best approach.
﻿
Applying the customisations
The customisations work by adding special snippets of CSS to the code of your website that subsequently then overwrite the "default" styling for SparkLayer. 
﻿
<video class="full-screen-video__media" preload="none" autoplay="" loop="" muted="" playsinline="" webkit-playinginline="">
    <source src="https://www.sparklayer.io/assets/videos/CSS-Edit.mp4" type="video/mp4">
</video>
<video class="full-screen-video__media" preload="none" autoplay="" loop="" muted="" playsinline="" webkit-playinginline="">
    <source src="https://www.sparklayer.io/assets/videos/CSS-Edit.mp4" type="video/mp4">
</video>
﻿
In your web browser, it's possible to isolate and view the variables really easily - by inspecting element, you'll see the variable names in the Developer Tools section 
﻿
Making code changes
To learn more about how to apply code changes, please refer to our Frontend Integration Guide﻿ for full details.
For a full list of all available styles, please refer to our guide below.
﻿
Colours
Sample CSS Code
CSS
<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-warn-color: #FF9243;
    --spark-link-color: #125EF8;
    --spark-input-color: #CCCCCC;
}
</style>
<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-warn-color: #FF9243;
    --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
Body font: Roboto﻿
Highlight font: Poppins 
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 included in your site header if necessary.
Sample CSS Code
CSS
<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-header-text-transform: none;
    --spark-header-letter-spacing: 0eml
    --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-packsize-fontsize: 16px;
    --spark-packsize-font-weight: 400;
    --spark-packsize-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;
    --spark-product-stockstatus-align: flex-start;
    --spark-product-stockstatus-back-order-display: flex;
}
</style>
<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-header-text-transform: none;
    --spark-header-letter-spacing: 0eml
    --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-packsize-fontsize: 16px;
    --spark-packsize-font-weight: 400;
    --spark-packsize-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;
    --spark-product-stockstatus-align: flex-start;
    --spark-product-stockstatus-back-order-display: flex;
}
</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-header-text-transform
Header transform
none
--spark-header-letter-spacing
Header character spacing
0em
--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-packsize-font-weight
Pack sizing font size
16px
--spark-packsize-fontsize
Pack sizing font weight
400
--spark-packsize-fontsize-small
Pack sizing 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
--spark-product-stockstatus-align
The alignment of the stock status message
flex-start
--spark-product-stockstatus-back-order-display
The display of the Pre-order message
flex
﻿
General
Sample CSS Code
CSS
<style>
:root {
    /* General */
    --spark-border-radius-default: 4px;
    --spark-border-radius-large: 8px;
    --spark-drawer-max-width: 700px;
    --spark-drawer-max-width-wide: 1000px;
    --spark-loading-background-color: #DEDEDE;
    --spark-loading-background-overlay-product: 255, 255, 255;
    --spark-container-content-top: 3em;
    --spark-container-content-bottom: 3em;
    --spark-container-content-side: 4.5em;
    --spark-container-content-reduced: 1.5em;
    --spark-spinner-default-color: #125EF8;
}
</style>
<style>
:root {
    /* General */
    --spark-border-radius-default: 4px;
    --spark-border-radius-large: 8px;
    --spark-drawer-max-width: 700px;
    --spark-drawer-max-width-wide: 1000px;
    --spark-loading-background-color: #DEDEDE;
    --spark-loading-background-overlay-product: 255, 255, 255;
    --spark-container-content-top: 3em;
    --spark-container-content-bottom: 3em;
    --spark-container-content-side: 4.5em;
    --spark-container-content-reduced: 1.5em;
    --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
--spark-loading-background-color
Loading 'skeleton' colour
#DEDEDE
--spark-loading-background-overlay-product
Loading overlay colour on product pages
255,255,255
--spark-container-content-top
Overlay spacing - top
3em
--spark-container-content-bottom
Overlay spacing - bottom
3em
--spark-container-content-side
Overlay spacing - sides
4.5em
--spark-container-content-reduced
Overlay spacing - reduced
1.5em
--spark-spinner-default-color
Loading spinner colour
#125EF8
﻿
Buttons
General
Sample CSS Code
CSS
<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>
<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
CSS
<style>
:root {
   /* Disabeld buttons */
   --spark-button-disabled-background: #DFDFDF;
   --spark-button-disabled-color: #9F9F9F;
}
</style>
<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
CSS
<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>
<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
CSS
<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>
<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 notification border radius
4px
--spark-toast-animation-display
Display a progress bar 
block
Hiding the toast notification
If you'd prefer to fully hide the toast notifications from displaying, you can add this CSS code to your website's code.
spark-toast {display: none;}
General messages
Sample CSS Code
CSS
<style>
:root {
    /* General messages */
    --spark-message-padding: 0.7em 1.25em;
    --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>
<style>
:root {
    /* General messages */
    --spark-message-padding: 0.7em 1.25em;
    --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.7em 1.25em
--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
﻿
Forms
Input fields
Sample CSS Code
CSS
<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.75em;
    --spark-label-font-size: 0.8em;
    --spark-input-disabled-color: #777777;
    --spark-input-disabled-solid-color: #949494;
}
</style>
<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.75em;
    --spark-label-font-size: 0.8em;
    --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.75em
--spark-label-font-size
Label font size
0.8em
--spark-input-disabled-color
Disabled input field colour
#777777
--spark-input-disabled-solid-color
Disabled input border colour
#949494
Radio buttons
Sample CSS Code
CSS
<style> 
:root {
    /* Radio buttons */
    --spark-radio-fill-color: #125EF8;
    --spark-radio-empty-color: #5A5A5A;
    --spark-radio-border: 2px solid #125EF8;
}
</style>
<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
CSS
<style>
:root {
    /* Select menus */
    --spark-select-border: 1px solid #CCCCCC;
    --spark-select-background: #FFFFFF;
    --spark-select-focus: 1px solid #125EF8;
    --spark-select-font-size: 14px;
    --spark-select-padding: 0.75em;
    --spark-select-radius: 4px;
    --spark-select-disabled-color: #999999;
}
</style>
<style>
:root {
    /* Select menus */
    --spark-select-border: 1px solid #CCCCCC;
    --spark-select-background: #FFFFFF;
    --spark-select-focus: 1px solid #125EF8;
    --spark-select-font-size: 14px;
    --spark-select-padding: 0.75em;
    --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.75em
--spark-select-radius
Select menu border radius
4px
--spark-select-disabled-color
Select menu disabled colour
#999999
﻿
Tables
Sample CSS Code
CSS
<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;
    --spark-table-header-font-size: 14px;
    --spark-table-header-text-transform: none;
    --spark-table-variants-border-color: #CCCCCCC;
}
</style>
<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;
    --spark-table-header-font-size: 14px;
    --spark-table-header-text-transform: none;
    --spark-table-variants-border-color: #CCCCCCC;
}
</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
--spark-table-header-font-size
Table header font size
14px
--spark-table-header-text-transform
Table header text transform
none
--spark-table-variants-border-color
Table border colour for product detail page variants
#CCCCCC
﻿
Product Card
﻿
Sample CSS Code
CSS
<style>
:root {
    /* Product Card */
    --spark-product-card-button-radius: 4px;
    --spark-product-card-button-padding: 0.75em 1em;
    --spark-product-card-pricing-font-size: 15px;
    --spark-product-card-pricing-font-size-small: 14px;
    --spark-product-card-select-min-height: 50px;
    
    --spark-product-card-stockstatus-fontsize: 16px;
    --spark-product-card-stockstatus-fontsize-small: 14px;
    --spark-product-card-stockstatus-align: center;
    --spark-product-stockstatus-back-order-display: none;
    
    --spark-product-card-tiered-pricing-display: flex;
    --spark-product-card-tiered-pricing-font-size: 12px;

}
</style>
<style>
:root {
    /* Product Card */
    --spark-product-card-button-radius: 4px;
    --spark-product-card-button-padding: 0.75em 1em;
    --spark-product-card-pricing-font-size: 15px;
    --spark-product-card-pricing-font-size-small: 14px;
    --spark-product-card-select-min-height: 50px;
    
    --spark-product-card-stockstatus-fontsize: 16px;
    --spark-product-card-stockstatus-fontsize-small: 14px;
    --spark-product-card-stockstatus-align: center;
    --spark-product-stockstatus-back-order-display: none;
    
    --spark-product-card-tiered-pricing-display: flex;
    --spark-product-card-tiered-pricing-font-size: 12px;

}
</style>
﻿
Variable
Description
Default Value
--spark-product-card-button-radius
Button radius
4px
--spark-product-card-button-padding
Button padding
0.75em 1em
--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
--spark-product-card-tiered-pricing-display
Display of tiered pricing widget
flex
--spark-product-card-stockstatus-fontsize:
Stock status font size
16px
--spark-product-card-stockstatus-fontsize-small
Stock status font size on mobile
14px
--spark-product-card-stockstatus-align
Stock status alignment
center
--spark-product-card-tiered-pricing-display
Tiered pricing info display
flex (use none to hide)
--spark-product-card-tiered-pricing-font-size
Tiered pricing font size
12px
﻿
Dark mode
﻿
If your Shopify store theme is set up to use a dark theme, you can enable a special 'Dark Mode' in SparkLayer.  Within your SparkLayer Core Script﻿, simply add the following.
﻿
JS
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
  display: {
    darkTheme: true,
    /* Other settings should show below */
  }
/* End of code */
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
  display: {
    darkTheme: true,
    /* Other settings should show below */
  }
/* End of code */
﻿
You can also customise the look and feel by adding the following CSS overwrites.
Variable
Description
Default Value
--spark-dark-mode-lightest-color,
Default font colour
#ffffff
--spark-dark-mode-status-in-stock
In stock colour
#5ecfad
--spark-dark-mode-status-back-order
Backorder colour
#96b1ef
--spark-dark-mode-status-out-of-stock
Out of stock colour
#ff9a9a
--spark-dark-mode-table-border-color
Table border colour
#555
--spark-dark-mode-table-header-background
Table header colour
#000
--spark-dark-mode-table-row-background
Table row colour
#333
--spark-dark-mode-table-row-alt-background
Table alternate row colour
#222
--spark-dark-mode-qty-background
Quantity box colour
#000
--spark-dark-mode-qty-background-hover
Quantity box hover colour
#222
--spark-dark-mode-qty-border-color
Quantity box border colour
#555
﻿
Using "slots" to extend the interface
Custom Slots (or "Targets") allow you to enhance a range of the SparkLayer Frontend Interfaces﻿ by adding your own custom code in predefined areas. 
﻿
It's a great way to further enhance your B2B customer experience using SparkLayer and you can learn more in our guide here﻿.

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

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-header-text-transform	Header transform	none
--spark-header-letter-spacing	Header character spacing	0em
--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-packsize-font-weight	Pack sizing font size	16px
--spark-packsize-fontsize	Pack sizing font weight	400
--spark-packsize-fontsize-small	Pack sizing 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
--spark-product-stockstatus-align	The alignment of the stock status message	flex-start
--spark-product-stockstatus-back-order-display	The display of the Pre-order message	flex

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
--spark-loading-background-color	Loading 'skeleton' colour	#DEDEDE
--spark-loading-background-overlay-product	Loading overlay colour on product pages	255,255,255
--spark-container-content-top	Overlay spacing - top	3em
--spark-container-content-bottom	Overlay spacing - bottom	3em
--spark-container-content-side	Overlay spacing - sides	4.5em
--spark-container-content-reduced	Overlay spacing - reduced	1.5em
--spark-spinner-default-color	Loading spinner colour	#125EF8

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

Variable	Description	Default Value
--spark-button-disabled-background	Disabled button background	#DFDFDF
--spark-button-disabled-color	Disabled button font colour	#9F9F9F

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

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 notification border radius	4px
--spark-toast-animation-display	Display a progress bar	block

Variable	Description	Default Value
--spark-message-padding	Message box padding	0.7em 1.25em
--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

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.75em
--spark-label-font-size	Label font size	0.8em
--spark-input-disabled-color	Disabled input field colour	#777777
--spark-input-disabled-solid-color	Disabled input border colour	#949494

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

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.75em
--spark-select-radius	Select menu border radius	4px
--spark-select-disabled-color	Select menu disabled colour	#999999

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
--spark-table-header-font-size	Table header font size	14px
--spark-table-header-text-transform	Table header text transform	none
--spark-table-variants-border-color	Table border colour for product detail page variants	#CCCCCC

Variable	Description	Default Value
--spark-product-card-button-radius	Button radius	4px
--spark-product-card-button-padding	Button padding	0.75em 1em
--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
--spark-product-card-tiered-pricing-display	Display of tiered pricing widget	flex
--spark-product-card-stockstatus-fontsize:	Stock status font size	16px
--spark-product-card-stockstatus-fontsize-small	Stock status font size on mobile	14px
--spark-product-card-stockstatus-align	Stock status alignment	center
--spark-product-card-tiered-pricing-display	Tiered pricing info display	flex (use none to hide)
--spark-product-card-tiered-pricing-font-size	Tiered pricing font size	12px

Variable	Description	Default Value
--spark-dark-mode-lightest-color,	Default font colour	#ffffff
--spark-dark-mode-status-in-stock	In stock colour	#5ecfad
--spark-dark-mode-status-back-order	Backorder colour	#96b1ef
--spark-dark-mode-status-out-of-stock	Out of stock colour	#ff9a9a
--spark-dark-mode-table-border-color	Table border colour	#555
--spark-dark-mode-table-header-background	Table header colour	#000
--spark-dark-mode-table-row-background	Table row colour	#333
--spark-dark-mode-table-row-alt-background	Table alternate row colour	#222
--spark-dark-mode-qty-background	Quantity box colour	#000
--spark-dark-mode-qty-background-hover	Quantity box hover colour	#222
--spark-dark-mode-qty-border-color	Quantity box border colour	#555

Updated 07 Jun 2024

Did this page help you?

Frontend Integration Guide

JavaScript SDK & Headless