# Customising the design

URL: https://docs.sparklayer.io/help/storefront/customising-design

Match SparkLayer's storefront to your brand by changing 4 lines of CSS for colours and fonts, turn on dark mode, and fine-tune elements with CSS variables.

> **Quick summary**
>
> - Your B2B customers see SparkLayer's [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md) in your brand colours and fonts. These come from a short piece of CSS (styling code) that you add to your store's theme.
> - There are no colour or font settings in SparkLayer. The only design setting without code is **Dark theme**, under **Pricing and display** at **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app.
> - For most stores, 4 values are enough: a brand colour, a hover colour, a body font and a heading font. See [Change your brand colours and fonts](#add-custom-css-to-your-store).
> - If someone else edits your theme, send them this page. The [CSS variable reference](#variable-reference) is for your developer or agency. Design customisation is included on every plan. Some things, such as the product page layout, button order and button width, have no variable: see [What you can and can't change](https://docs.sparklayer.io/help/storefront/what-you-can-change.md).

## 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

1. Copy the [recommended starting CSS](#recommended-starting-css) below.
2. Change the 4 brand values at the top of it to your own (see [the 4 brand values](#the-four-brand-values)). Leave the rest as it is.
3. Paste the code into your theme's `<head>`, after the SparkLayer Core Script if your theme has it (see [where to paste the code](#where-to-paste-the-code)).
4. 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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app 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](https://docs.sparklayer.io/developers/frontend.md).

### 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

**Shopify:**

1. In your Shopify admin, go to **Online Store > Themes** ([open in the Shopify admin](https://admin.shopify.com/themes)).
2. On your current theme, open the **…** menu and click **Edit code**.
3. 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.

**Other platforms:**

Add the code to the header template of your site, alongside the SparkLayer Core Script. Your platform's install guide shows where: [BigCommerce](https://docs.sparklayer.io/help/platforms/bigcommerce/install.md), [Wix](https://docs.sparklayer.io/help/platforms/wix/install.md), [WooCommerce](https://docs.sparklayer.io/help/platforms/woocommerce/install.md) or [Magento](https://docs.sparklayer.io/help/platforms/magento/install.md).

## 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.

```html title="Sample CSS Code"
<!-- 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:

1. Go to **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app.
2. Open **Pricing and display** and turn on **Dark theme**.
3. Click **Save and publish**. See [Storefront options](https://docs.sparklayer.io/help/storefront/storefront-options.md).

**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](https://docs.sparklayer.io/help/storefront/storefront-options.md#add-a-core-script-setting):

```javascript title="Core Script"
display: {
  darkTheme: true,
},
```

You can fine-tune dark mode's colours with the [dark mode variables](#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](https://docs.sparklayer.io/help/storefront/interfaces.md). See [Custom slots (targets)](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md).

## 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:

1. 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.
2. In the **Styles** panel, look for values written as `var(--spark-…)`. For example, a table header's text colour shows as `color: var(--spark-table-header-text-color, #555)`.
3. 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

```html title="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-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](https://fonts.google.com/specimen/Roboto) for body text and [Poppins](https://fonts.google.com/specimen/Poppins) 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.

```html title="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-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

```html title="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 | 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

```html title="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: #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

```html title="Sample CSS Code"
<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

```html title="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: #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.

```html title="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 | 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:

```css
spark-toast {display: none;}
```

#### General messages

```html title="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 | 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

```html title="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 | 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

```html title="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 | 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

```html title="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 | 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

```html title="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: #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](https://docs.sparklayer.io/help/storefront/interfaces/product-card.md): the product image, name, price, variant drop-downs, quantity selector and **Add** button shown on collection pages.

```html title="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 | 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](#turn-on-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

**Can I change the colours without editing code?**

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](#recommended-starting-css). If you'd rather not edit your theme, ask your developer or agency, or [contact us](mailto:contact@sparklayer.io). Dark mode is the one design setting you can turn on without code, at **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app.

**Why aren't my CSS changes showing?**

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.

**My styles stopped working after I published a theme**

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](https://docs.sparklayer.io/help/platforms/shopify/theme-setup.md).

**What if I can't style an element the way I want?**

If there's no variable for what you need, [contact us](mailto:contact@sparklayer.io) 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](https://docs.sparklayer.io/help/storefront/what-you-can-change.md).

**Can I hide parts of the interfaces with CSS?**

Yes, for some elements. For example, you can hide the product image, SKU or pack price on product pages. See [How products are shown](https://docs.sparklayer.io/help/storefront/product-display.md) and [Quantity rules](https://docs.sparklayer.io/help/storefront/quantity-rules.md) for the variables.