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
<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
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 including in your site header if necessary.
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-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-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
Buttons
General
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
<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
<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
<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
<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
General
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;
    --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
Forms
Input fields
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.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
<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
<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
<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
<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
Product Detail Page
It's possible to hide specific content within the SparkLayer interface that is loaded on a product detail page. This is done by setting specific CSS variables within your CSS code.
Hiding the image in the table view
Adding the CSS below will hide the thumbnail image from showing
Sample CSS
<style>
:root {
    /* Default */
    --spark-pdp-image: table-cell;
    
    /* Hide image */
    --spark-pdp-image: none;
}
</style>
Hiding the product code
Adding the CSS below will hide the product code from showing
Sample CSS
<style>
:root {
    /* Default */
    --spark-pdp-sku: block;
    
    /* Hide image */
    --spark-pdp-sku: none;
}
</style>
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 within the code 
display: {darkTheme:true},
SparkLayer Core Script
<script>
  window.sparkOptions = {
   ....
    platform: "shopify",
    display: {darkTheme:true},
    auth: {
      user: {{ customer.email | json }},
      token: {{ customer.metafields.sparklayer.authentication | json }},
    },
  };
  ........
</script>
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
Frontend JavaScript SDK
If you're looking to create a more bespoke design and layout using SparkLayer, we've made this possible via a dedicated JavaScript SDK. The SDK allows you to fully customise how the SparkLayer interacts on the product pages and you can even use it to trigger specific events such as adding items to an order. 
In our example video below, we've demonstrated how SparkLayer can be used with a completely customised product page. When items are added to an order, this then triggers the SparkLayer Quick Order Interface.​
To see what's possible, visit our JavaScript SDK docs and please contact us if you'd like guidance on potential use-cases!
If you're interested in using the SparkLayer JavaScript SDK, please contact our team and we'll be happy to walk you through it.