{"title":"Customize a theme using CSS","slug":"custom-theme-css","url":"https://support.storeconnect.com/articles/custom-theme-css","url_markdown":"https://support.storeconnect.com/articles/custom-theme-css.md","subtitle":null,"summary":"Override brand colors with HSL CSS variables, style content blocks using their identifiers, and use global CSS variables for header, footer, menu, and typography components.","type":"Help_Documentation","video_url":"","keywords":"custom css, theme customization, css variables, brand colors, hsl variables, content block css, typography variables, header styles, footer styles, menu styles, store styling, custom styles","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"There are a few different ways to customise your StoreConnect store’s CSS.\n\n-   [Customizing Content Blocks with CSS](custom-theme-css)\n-   [Overriding your Branding Colours with CSS](custom-theme-css)\n-   [Global CSS Variables for UI Components](custom-theme-css)\n\n### Customize content blocks with CSS\n\nStoreConnect 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.\n\nYou can follow this article [“Using CSS with content blocks”](using-css-with-content-blocks) to learn how to select them and modify its properties.\n\n### Overriding brand colors with CSS\n\nEach 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.\n\nThe “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.\n\nYou 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:\n\n```\nbody {\n  --sc-brand-primary-h: [hue-value];\n  --sc-brand-primary-s: [saturation-value];\n  --sc-brand-primary-l: [lightness-value];\n\n  --sc-brand-secondary-h: [hue-value];\n  --sc-brand-secondary-s: [saturation-value];\n  --sc-brand-secondary-l: [lightness-value];\n}\n```\n\nWe 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)\n\nOnce 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?\n\n### Global CSS variables for ui components\n\nWe 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.\n\n#### Typography\n\n```\n  --sc-font-family: [font-here];\n  --sc-font-base: [font-here];\n```\n\n#### Header\n\n```\n  --sc-header-bg: white;\n  --sc-header-color: var(--sc-shade-darkest);\n```\n\n#### Menu and navigation items\n\n```\n  --sc-menu-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);\n  --sc-menu-max-height: 300px;\n  --sc-menu-image-max-height: 200px;\n  --sc-menu-column-max-width: 300px;\n  --sc-menu-column-min-width: 100px;\n  --sc-menu-dropdown-width: 400px;\n  --sc-menu-link-color-resting: currentColor;\n  --sc-menu-link-color-hover: hsla(212, 100%, 50%, 1);\n  --sc-menu-link-color-hover: green;\n```\n\n#### Footer\n\n```\n  --sc-footer-bg: hsla(var(--sc-color-primary-h), var(--sc-color-primary-s), 40%, 1);\n  --sc-footer-color: white;\n```\n\nYou can find these global variables inspecting the body tag element with your inspector tool.\n\nIn 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.\n\n**Related help documents**\n\n-   [Adding custom CSS](adding-custom-css)\n-   [Using CSS with content blocks](using-css-with-content-blocks)\n-   Theme Builder Reference"}