Custom Theme CSS

There are a few different ways to customise your StoreConnect® store’s CSS.

Each StoreConnect® theme has a configurable “primary” and “secondary” brand colour; these are used for complementary elements in the UI based on the rules of your chosen theme.

The “primary” colour is typically used for the most important or brand-prominent parts of the UI - like the header background, “add to cart” button, and active or hover states of elements like inputs and links. The “secondary” brand colour, as the name suggest, is designated for less prominent but complementary elements in the UI.

You can configure the core colours in Salesforce by setting CSS variables in the “Custom Styles” field under the CMS section of your store, like:

body {
  --brand-primary-h: [hue-value];
  --brand-primary-s: [saturation-value];
  --brand-primary-l: [lightness-value];

  --brand-secondary-h: [hue-value];
  --brand-secondary-s: [saturation-value];
  --brand-secondary-l: [lightness-value];
}

To find the hue, saturation, and lightness values of your desired brands colours you can use the following tool: Converting HEX values to HSL

Once set, these “primary” and “secondary” brand colours will automatically be used on specific UI elements based on the default rules of the theme. But what if you want to change the colour or style of a particular piece of the UI?

We offer a number of other configurable CSS variables that are associated with specific pieces of a theme UI, for example:

  --font-body: [font-here];
  --button-primary-bg: [background-colour-here];

If you require an even greater level of customisation you can also insert a small snippet of CSS, which will override any of the previous configurations. For example:

.Button {
  background-color: red;
  color: white;
  font-style: italic;
  font-size: 30px;
}

In general, where possible, we recommend you leverage our configurable settings over using custom snippets of CSS, as we have written them in a way that takes into consideration the many implications of design for different browsers, states, and devices.

 

 
Back to Documentation