Customize a theme using CSS

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

• Customizing Content Blocks with CSS
• Overriding your Branding Colors with CSS
• Global CSS Variables for UI Components

Customize 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 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 color; 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 color 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 color, as the name suggests, is designated for less prominent but complementary elements in the UI.

You can configure the core colors 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 colors you can use the following tool: Converting HEX values to HSL

Once set, these Primary and Secondary brand colors will automatically be used on specific UI elements based on the default rules of the theme. But what if you want to change the color 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
• Using CSS with content blocks
• Theme Builder Reference