Skip to main content

Create styling themes

Create a styling theme to define the logos, fonts, colors, and shapes used in supported Cleverbridge checkout experiences.

In SCM, go to Configure > Styling. Created styling themes are listed in the table on this page.

Create a styling theme​

  1. In SCM, go to Configure > Styling.

  2. Select Add Styling.

    Add Styling button on the Styling page

    The Create Styling page opens.

    Create Styling page

  3. On the Logo tab, enter a unique Styling name.

    The styling name cannot contain spaces.

Add logos and social media icons​

On the Logo tab, configure the visual assets used by the theme:

  • In General, enter the Styling name.
  • In Logo, upload the header logo, footer logo, and favicon.
  • In Social media icons, upload the icons required for your configuration.

Logo and social media icon settings

Configure fonts​

On the Fonts tab, define the typography used by the theme.

Configure the base font​

In Base Font, select the font family and base size.

Add a custom font​

Select Add custom font to upload a font file supplied by your organization or design agency.

Make sure that your organization has the right to use and distribute the uploaded font.

Font settings

Configure advanced typography​

Select Show advanced settings to configure the following properties for supported text styles:

  • Font size.
  • Font weight.
  • Line height.
  • Letter spacing.

You can configure these properties for headings, subtitles, body text, captions, and button text.

Configure colors​

On the Colors tab, define the color palette used by the theme.

Expand a color group to configure its standard values. Select Show advanced settings to configure additional variants, such as light, dark, and contrast colors.

Color settings and advanced color options

The available color groups include:

  • Base Colors: Primary and secondary brand colors.
  • Text Colors: Colors used for body text, headings, footers, and disabled text.
  • Status Colors: Colors used for error, warning, informational, and success messages.
  • Background Colors: Colors used for standard backgrounds, promotions, headers, footers, selected elements, and loaders.
  • Common Colors: Shared colors used by additional checkout elements.

Configure shapes​

On the Shapes tab, configure the border radius used by supported checkout elements.

Use a larger radius for rounded elements or a smaller radius for a more rectangular appearance.

Save the styling theme​

After configuring the theme, select Save and complete in the upper-right corner of the page.

The styling theme is saved and appears in the table under Configure > Styling. Its logos, fonts, colors, and shapes can be used in supported checkout experiences.


Did you find this doc useful?