Custom Theme CSS

This article is intended for advanced users and our partners as it requires advanced web development or Salesforce admin or programming knowledge. While the functionality is part of StoreConnect, we do not provide end user assistance to implement it beyond our help documentation. If you need help or are unsure on how to do this, you can hire one of our StoreConnect partners.

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

Customizing Content Blocks with CSS

StoreConnect provides multiple content block templates that you can choose and use on the Salesforce UI. These templates already have their own CSS classes and using the content block Identifier value, auto generates a unique ID selector for any given content block created.

You can follow this article “Using CSS with content blocks” to learn how to select them and modify its properties.

Overriding your Branding Colours with 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. This can include call to action buttons, links and notice banners.

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 input fields 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 {
  --sc-brand-primary-h: [hue-value];
  --sc-brand-primary-s: [saturation-value];
  --sc-brand-primary-l: [lightness-value];

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

We separate hue, saturation, and lightness values to allow greater flexibility in lightening and darkening. 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?

Global CSS Variables for UI Components

We offer a number of other configurable CSS variables that are associated with specific pieces of a theme UI. Overriding these variables will save you some time and avoid overriding theme classes over and over again.

Typography

  --sc-font-family: [font-here];
  --sc-font-base: [font-here];

  --sc-header-bg: white;
  --sc-header-color: var(--sc-shade-darkest);

  --sc-menu-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
  --sc-menu-max-height: 300px;
  --sc-menu-image-max-height: 200px;
  --sc-menu-column-max-width: 300px;
  --sc-menu-column-min-width: 100px;
  --sc-menu-dropdown-width: 400px;
  --sc-menu-link-color-resting: currentColor;
  --sc-menu-link-color-hover: hsla(212, 100%, 50%, 1);
  --sc-menu-link-color-hover: green;

  --sc-footer-bg: hsla(var(--sc-color-primary-h), var(--sc-color-primary-s), 40%, 1);
  --sc-footer-color: white;

You can find these global variables inspecting the body tag element with your inspector tool.

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.

Related help documents

 
 
Back to Documentation