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.
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 |
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
<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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
It's possible to adjust 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.
If you have pack sizing enabled for products, you can display a total pack size price within the product purchasing interface.
This is by default enabled, if you would prefer to hide it, simply add the below CSS:
Sample CSS
<style>
:root {
/* Hide total pack size pricing */
--spark-pdp-pack-size: none;
}
</style>
If you would like to overwrite the default text that is shown, you can do so by adding the below code to your
layout/theme.liquid file within the SparkLayer Core Script.layout/theme.liquid
<script>
window.sparkOptions = {
siteId: 'your-site-id',
/* Add the below to your SparkLayer Core Script */
translations: {
en: {
pdp: {
price: {
{% raw %}
"pack-size": "Pack ({packSize}): {price}",
{% endraw %}
}
},
}
},
/* End */
};
</script>
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>