Customising the design
Steps for
How it works
SparkLayer's interfaces start with neutral styling. Each colour, font and size in them has a named setting, called a CSS variable, such as --b2b-brand-color. When you set a variable in your theme, your value replaces SparkLayer's default everywhere that variable is used.
You don't need to know CSS to change your brand colours and fonts. You copy a ready-made block of code, change 4 values and paste it into your theme.
Change your brand colours and fonts
- Copy the recommended starting CSS below.
- Change the 4 brand values at the top of it to your own (see the 4 brand values). Leave the rest as it is.
- Paste the code into your theme's
<head>, after the SparkLayer Core Script if your theme has it (see where to paste the code). - Save your theme, then sign in to your store as a B2B customer to check the result.
More detail
The starting code lives on this page, not in SparkLayer: there's no custom CSS screen. Design and tips at Storefront,Widgets (opens in your SparkLayer Dashboard in a new tab) links here. The interfaces only appear for signed-in B2B customers, so you won't see your changes while signed out. For more on making code changes to your store, see the frontend integration guide.
The 4 brand values
| Value | What to enter | Example |
|---|---|---|
--b2b-brand-color | Your main brand colour, as a hex code. It's used for buttons, links and highlights. | #1A4D8F |
--b2b-brand-color-hover | The colour buttons change to when a customer points at them, usually a slightly darker shade of your brand colour. | #133A6B |
--b2b-brand-font | The font for body text. List your font first, then a fallback. | Arial, sans-serif |
--b2b-brand-font-heading | The font for headings and buttons. | Georgia, serif |
A hex code is the 6-character code for a colour, starting with #. Your brand guidelines or your theme's colour settings usually show it. Keep the semicolon (;) at the end of each line.
Every CSS variable starts with two hyphens, for example --spark-primary-color or --b2b-brand-color. A variable with one hyphen, or with the hyphens turned into a dash when you copied it, is ignored.
Where to paste the code
- In your Shopify admin, go to Online Store,Themes (opens in your Shopify admin in a new tab).
- On your current theme, open the … menu and click Edit code.
- Open
layout/theme.liquid, paste the code just before the closing</head>tag and click Save.
Your developer can put it in a separate CSS file in your theme instead.
Add the code to the header template of your site, alongside the SparkLayer Core Script. Your platform's install guide shows where: BigCommerce, Wix, WooCommerce or Magento.
Recommended starting CSS
This sample sets your brand colours and fonts and applies them throughout SparkLayer. Change the 4 values under "Set the brand styling" first. The rest are optional fine-tuning.
<!-- SparkLayer Sample CSS Code -->
<style type="text/css">
:root {
/* Set the brand styling */
--b2b-brand-color: #000; /* Main brand colour */
--b2b-brand-color-hover: #333; /* Main brand colour hover */
--b2b-brand-font: Arial, sans-serif; /* Main brand font */
--b2b-brand-font-heading: Arial, sans-serif; /* Main brand heading font */
/* Update colours */
--spark-default-body-color: #555555; /* Main body colour */
--spark-primary-color: #000000; /* Main title colour */
--spark-secondary-color: var(--b2b-brand-color); /* Main highlight colour */
--spark-link-color: var(--b2b-brand-color); /* Link colour */
/* Typefaces */
--spark-font-default: var(--b2b-brand-font); /* Body typeface */
--spark-font-highlight: var(--b2b-brand-font-heading); /* Highlight typeface */
--spark-font-weight-default: 400; /* Default font weight */
--spark-font-weight-medium: 500; /* Medium font weight */
--spark-font-weight-heavy: 600; /* Bold font weight */
/* General */
--spark-border-radius-default: 0; /* Default border radius */
--spark-drawer-max-width: 700px; /* Width of overlay */
--spark-drawer-max-width-wide: 1000px; /* Width of overlay in maximised view */
/* Font sizes */
--spark-font-default-size: 14px; /* Default font size*/
--spark-font-default-size-small: 14px; /* Default font size - small screens */
--spark-header-font: var(--b2b-brand-font-heading); /* Header typeface */
--spark-header-font-weight: 500; /* Header font weight */
--spark-h1-fontsize: 24px; /* Header 1 font size */
--spark-h2-fontsize: 22px; /* Header 2 font size */
--spark-h3-fontsize: 20px; /* Header 3 font size */
--spark-h4-fontsize: 16px; /* Header 4 font size */
--spark-h5-fontsize: 15px; /* Header 5 font size */
--spark-h6-fontsize: 14px; /* Header 6 font size */
--spark-pricing-fontsize: 20px; /* Font size of pricing */
--spark-pricing-font-weight: 500; /* Font weight of pricing */
--spark-pricing-fontsize-small: 14px; /* Font size of pricing on mobile */
--spark-product-code-fontsize: 16px; /* Font size of product code */
--spark-product-code-font-weight: 500; /* Font weight of product code */
--spark-product-code-fontsize-small: 14px; /* Font size of product code on mobile */
--spark-product-stockstatus-align: flex-start; /* Alignment of stock status for single variants */
/* Buttons */
--spark-button-font-family: var(--b2b-brand-font-heading); /* Button typeface */
--spark-button-color: var(--b2b-brand-color); /* Default button colour */
--spark-button-color-highlight: var(--b2b-brand-color-hover); /* Default button colour hover */
--spark-button-large-color: var(--b2b-brand-color); /* Large button colour */
--spark-button-large-color-highlight: var(--b2b-brand-color-hover); /* Large button colour hover */
--spark-border-radius-button: 0; /* Button border radius */
--spark-button-font-weight: 600; /* Button font weight */
--spark-button-text-transform: none; /* Button text transform */
--spark-button-text-letter-spacing: 0; /* Button letter spacing */
--spark-button-padding: 1em 2.75em; /* Button padding */
--spark-button-small-font-size: 16px; /* Small button font size */
/* Tables */
--spark-table-border-color: #CCCCCC; /* Table border colour */
--spark-table-header-background-color: #F1F1F1; /* Table header background */
--spark-table-header-text-color: #222222; /* Table header font colour */
--spark-table-header-font-weight: 500; /* Table header font weight */
/* Product Card */
--spark-product-card-button-radius: 0; /* Button radius */
--spark-product-card-button-padding: 0.75em 1em; /* Button padding */
--spark-product-card-pricing-font-size: 15px; /* Pricing font size */
--spark-product-card-pricing-font-size-small: 14px; /* Pricing font size on mobile */
--spark-product-card-select-min-height: 0; /* Set a min-height for select menu */
}
</style>
<!-- End SparkLayer Sample CSS Code -->Turn on dark mode
With dark mode, customers see SparkLayer's interfaces with light text on dark backgrounds. Turn it on if your store uses a dark theme. You don't need code:
- Go to Storefront,Options (opens in your SparkLayer Dashboard in a new tab).
- Open Pricing and display and turn on Dark theme.
- Click Save and publish. See Storefront options.
Turn on dark mode in the Core Script (for developers)
Instead of the toggle, your developer can add darkTheme: true to the display settings of your Core Script:
display: {
darkTheme: true,
},<!-- SparkLayer Core Script: in your theme, just before </head>.
Already have window.sparkOptions? Add just the setting to it. -->
<script>
window.sparkOptions = {
display: {
darkTheme: true,
},
};
</script>You can fine-tune dark mode's colours with the dark mode variables.
Add your own content with custom slots
Custom slots (also called targets) let you show customers your own content, such as a message or a banner, in set places in the frontend interfaces. See Custom slots (targets).
Find the variable for an element
This section and the reference below are for your developer or agency. To change one element, such as a table header, find the CSS variable it uses:
- On your store, signed in as a B2B customer, right-click the element you want to change and choose Inspect to open your browser's developer tools.
- In the Styles panel, look for values written as
var(--spark-…). For example, a table header's text colour shows ascolor: var(--spark-table-header-text-color, #555). - Set that variable in your custom CSS. The second value in brackets is the default.
CSS variable reference (for developers)
Each table lists the CSS variables for one area of SparkLayer's interfaces, what they change and their default value. Copy the sample code for an area to see every variable together.
Colours
<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 | What it changes | Default |
|---|---|---|
--spark-default-body-color | Body text colour | #555555 |
--spark-primary-color | Title text colour, for example price information | #000000 |
--spark-primary-color-light | Light shading, for example table shading | #F5F5F5 |
--spark-primary-color-dark | Dark shading | #999999 |
--spark-secondary-color | Secondary colour, for example a highlight colour | #125EF8 |
--spark-tertiary-color | Tertiary colour, for example the large button colour | #00AF76 |
--spark-lightest-color | Lightest colour, for example 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 | Link colour | #125EF8 |
--spark-input-color | Form field border colour | #CCCCCC |
Typography
SparkLayer uses 2 typefaces by default: Roboto (opens in a new tab) for body text and Poppins (opens in a new tab) for highlights. You can replace them with the variables below.
If you use custom fonts (for example from Google Fonts), include them in your website's main CSS file, and in your site header if needed. They then load before SparkLayer uses them.
<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: 0em;
--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 | What it changes | Default |
|---|---|---|
--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 | Heading font | 'Poppins', sans-serif |
--spark-header-font-weight | Heading font weight | 500 |
--spark-header-text-transform | Heading text transform | none |
--spark-header-letter-spacing | Heading letter 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 | Price font size | 16px |
--spark-pricing-font-weight | Price font weight | 500 |
--spark-pricing-fontsize-small | Price font size on mobile | 14px |
--spark-packsize-fontsize | Pack size font size | 16px |
--spark-packsize-font-weight | Pack size font weight | 400 |
--spark-packsize-fontsize-small | Pack size 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 | Alignment of the stock status message | flex-start |
--spark-product-stockstatus-back-order-display | Display of the pre-order message | flex |
General
<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 | What it changes | Default |
|---|---|---|
--spark-border-radius-default | Default border radius | 4px |
--spark-border-radius-large | Overlay border radius | 8px |
--spark-drawer-max-width | Width of the overlay | 700px |
--spark-drawer-max-width-wide | Width of the 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
<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: #125EF8;
--spark-button-raised-background-hover: #508AFF;
--spark-button-raised-color: #FFFFFF;
}
</style>| Variable | What it changes | Default |
|---|---|---|
--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 | #125EF8 |
--spark-button-raised-background-hover | Button background on hover | #508AFF |
--spark-button-raised-color | Button text colour | #FFFFFF |
Disabled buttons
<style>
:root {
/* Disabled buttons */
--spark-button-disabled-background: #DFDFDF;
--spark-button-disabled-color: #9F9F9F;
}
</style>| Variable | What it changes | Default |
|---|---|---|
--spark-button-disabled-background | Disabled button background | #DFDFDF |
--spark-button-disabled-color | Disabled button text colour | #9F9F9F |
Large buttons
<style>
:root {
/* Large buttons */
--spark-button-large-font-size: 18px;
--spark-button-large-padding: 0.875em 1.75em;
--spark-button-large-background: #125EF8;
--spark-button-large-background: #508AFF;
}
</style>| Variable | What it changes | Default |
|---|---|---|
--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 | #125EF8 |
--spark-button-large-background | Large button background on hover | #508AFF |
Messages
Toast notifications
Toast notifications are the short pop-up messages SparkLayer shows customers on screen.
<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 | What it changes | Default |
|---|---|---|
--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 | Whether a progress bar shows | block |
To hide toast notifications completely, add this CSS to your website:
spark-toast {display: none;}General messages
<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 | What it changes | Default |
|---|---|---|
--spark-message-padding | Message box padding | 0.7em 1.25em |
--spark-message-success-background | Success message background | #E5FFF5 |
--spark-message-success-border | Success message border | 1px solid #1c9665 |
--spark-message-warn-background | Warning message background | #FDF7E3 |
--spark-message-warn-border | Warning message border | 1px solid #EDC35C |
--spark-message-error-background | Error message background | #E74148 |
--spark-message-error-border | Error message border | 1px solid #E74148 |
Forms
Input fields
<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 | What it changes | Default |
|---|---|---|
--spark-form-field-text-transform | Form 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
<style>
:root {
/* Radio buttons */
--spark-radio-fill-color: #125EF8;
--spark-radio-empty-color: #5A5A5A;
--spark-radio-border: 2px solid #125EF8;
}
</style>| Variable | What it changes | Default |
|---|---|---|
--spark-radio-fill-color | Selected radio button colour | #125EF8 |
--spark-radio-empty-color | Unselected radio button colour | #5A5A5A |
--spark-radio-border | Radio button border | 2px solid #125EF8 |
Select menus
<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 | What it changes | Default |
|---|---|---|
--spark-select-border | Select menu border | 1px solid #CCCCCC |
--spark-select-background | Select menu background | #FFFFFF |
--spark-select-focus | Select menu border when focused | #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 | Disabled select menu colour | #999999 |
Tables
<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: #CCCCCC;
}
</style>| Variable | What it changes | Default |
|---|---|---|
--spark-table-border-color | Table border colour | #CCCCCC |
--spark-table-striped-color | Background of striped table rows | #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 | Border colour of the variants table on product pages | #CCCCCC |
Product card
These variables style the product card interface: the product image, name, price, variant drop-downs, quantity selector and Add button shown on collection pages.
<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 | What it changes | Default |
|---|---|---|
--spark-product-card-button-radius | Button radius | 4px |
--spark-product-card-button-padding | Button padding | 0.75em 1em |
--spark-product-card-pricing-font-size | Price font size | 15px |
--spark-product-card-pricing-font-size-small | Price font size on mobile | 14px |
--spark-product-card-select-min-height | Minimum height of the select menu wrapper | 50px |
--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 | Display of the tiered (quantity) pricing information. Use none to hide it. | flex |
--spark-product-card-tiered-pricing-font-size | Tiered pricing font size | 12px |
Dark mode
When dark mode is on, these variables control its colours.
| Variable | What it changes | Default |
|---|---|---|
--spark-pdp-price-summary-color | Default price colour | #ffffff |
--spark-dark-mode-lightest-color | Default text colour | #ffffff |
--spark-dark-mode-status-in-stock | In stock colour | #5ecfad |
--spark-dark-mode-status-back-order | Back-order 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 | Alternate table row colour | #222 |
--spark-dark-mode-qty-background | Quantity box colour | #000 |
--spark-dark-mode-qty-background-hover | Quantity box colour on hover | #222 |
--spark-dark-mode-qty-border-color | Quantity box border colour | #555 |
FAQs
No. Colours and fonts are set with CSS in your theme, but you only need to change the 4 brand values in the recommended starting CSS. If you'd rather not edit your theme, ask your developer or agency, or contact us. Dark mode is the one design setting you can turn on without code, at Storefront,Options (opens in your SparkLayer Dashboard in a new tab).
Check that the code is inside :root { … } in a <style> tag, that every variable starts with two hyphens (--spark-…), that each line ends with a semicolon, and that it's added to the theme your store is actually using. Then sign in as a B2B customer and refresh the page: SparkLayer's interfaces only load for signed-in B2B customers.
Check SparkLayer isn't loaded twice. On Shopify, this happens when the theme has the SparkLayer app embed turned on and also a SparkLayer script hard-coded in its code, for example in theme.liquid. Keep only the app embed, and remove the hard-coded script. See Theme setup.
If there's no variable for what you need, contact us and we'll advise on the best approach. Some things can't be changed with CSS at all, such as the layout and button order of the product page widget, or a button's width. See What you can and can't change.
Yes, for some elements. For example, you can hide the product image, SKU or pack price on product pages. See How products are shown and Quantity rules for the variables.
Was this page helpful?
Last updated