# Customize a theme using CSS

Source: https://support.storeconnect.com/articles/custom-theme-css · Last modified 21 August 2026

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

-   [Customizing Content Blocks with CSS](custom-theme-css)
-   [Overriding your Branding Colours with CSS](custom-theme-css)
-   [Global CSS Variables for UI Components](custom-theme-css)

### Customize content blocks with CSS

StoreConnect provides multiple [Content block templates](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”](using-css-with-content-blocks) to learn how to select them and modify its properties.

### Overriding brand colors 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) 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](https://htmlcolors.com/hex-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];
```

#### Header

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

#### Menu and navigation items

```
  --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;
```

#### Footer

```
  --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**

-   [Adding custom CSS](adding-custom-css)
-   [Using CSS with content blocks](using-css-with-content-blocks)
-   Theme Builder Reference

---

## Follow StoreConnect

- [Email Newsletter](https://getstoreconnect.com/c/lp-newsletter)
- [LinkedIn Newsletter](https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7444956928444862464)
- [YouTube](https://www.youtube.com/channel/UCngKdP2x8l1wcbAKW3tvU8g)
- [LinkedIn](https://www.linkedin.com/company/storeconnect)
- [X / Twitter](https://x.com/storeconnecthq)

## Popular Links

- [Partners](https://getstoreconnect.com/partners)
- [News](https://getstoreconnect.com/articles/news)
- [Events](https://getstoreconnect.com/articles/events)
- [Feature Comparison](https://getstoreconnect.com/how-we-compare)
- [Download a free trial](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT)
- [Book a Demo](https://getstoreconnect.com/contact)

## Documentation

- [Help documentation](https://support.storeconnect.com/help-documentation)
- [AI agents](https://support.storeconnect.com/ai)
- [Videos & tutorials](https://support.storeconnect.com/videos-tutorials)
- [Developer reference](https://support.storeconnect.com/developer-reference)
- [Release notes](https://support.storeconnect.com/release-notes)
- [Troubleshooting](https://support.storeconnect.com/troubleshooting)
- [Trust Center](https://trust.getstoreconnect.com/)
- [Status Page](https://status.storeconnect.com/)

## Contact

- info@getstoreconnect.com
- US +1 415 745 3230
- AUS +61 2 8365 2308

100 S Ashley Dr, Suite 600-2461
Tampa FL 33602-600 USA

Level 22, Sydney Place
180 George Street
Sydney, NSW, 2000, AUS

---

StoreConnect Support — https://support.storeconnect.com/articles/custom-theme-css