Theming

You can make use of the power of our theme for cart interface customization. This is a simple and effective way of quickly changing some frequently customized parts of Snipcart's interface.

This feature was introduced in v3.2.0 of Snipcart. This isn't available on any previous version.

How this works

We now use a set of CSS custom properties (variables) throughout our app's style. These variables all have a default value used as a fallback (default theme) if you haven't declared it in your own stylesheet.

Ex: color: var(--color-link, blue); will be blue if no --color-link is declared.

Colors

Colors are one of the most frequently customized parts of our application. Our theme offers a complete set of color variables to change the entire color scheme of the app. As you will see below, more control is given for critical components of the application like inputs, buttons, and links.

List of color variables (by component) :

Buttons

There is 3 styles of buttons:

  1. Primary
  2. Secondary
  3. Danger

Each type of button has 7 states:

  • Default
  • Hover
  • Active
  • Focus
  • Disabled
  • Success
  • Error

It is possible to customize the color, border color and background color for each style and state. A few states also have a shadow property for customizing the box-shadow of the button.

Here is an example with Button Primary:

Demo of component Button Primary

/* Default */
--color-buttonPrimary
--borderColor-buttonPrimary
--bgColor-buttonPrimary

/* Hover */
--color-buttonPrimary-hover
--borderColor-buttonPrimary-hover
--bgColor-buttonPrimary-hover
--shadow-buttonPrimary-hover

/* Active */
--color-buttonPrimary-active
--borderColor-buttonPrimary-active
--bgColor-buttonPrimary-active
--shadow-buttonPrimary-active

/* Focus */
--color-buttonPrimary-focus
--borderColor-buttonPrimary-focus
--bgColor-buttonPrimary-focus
--shadow-buttonPrimary-focus

/* Disabled */
--color-buttonPrimary-disabled
--borderColor-buttonPrimary-disabled
--bgColor-buttonPrimary-disabled

/* Success */
--color-buttonPrimary-success
--borderColor-buttonPrimary-success
--bgColor-buttonPrimary-success

/* Error */
--color-buttonPrimary-error
--borderColor-buttonPrimary-error
--bgColor-buttonPrimary-error

Those same variables are available for the other buttons styles by replacing buttonPrimary with buttonSecondary or buttonDanger.

Links

The link component as 4 states:

  • Default
  • Hover
  • Active
  • Focus

It is possible to customize the color, border color and background color for each state. The focus state also has a shadow property for customizing the box-shadow of the link.

Link component

/* Default */
--color-link
--borderColor-link
--bgColor-link

/* Hover */
--color-link-hover
--borderColor-link-hover
--bgColor-link-hover

/* Active */
--color-link-active
--borderColor-link-active
--bgColor-link-active

/* Focus */
--color-link-focus
--borderColor-link-focus
--bgColor-link-focus
--shadow-link-focus

Inputs

There is 4 parts in our input components:

  • Input
  • Label
  • Icon
  • Placeholder

They share all, or a subset of these states:

  • Default
  • Hover
  • Focus
  • Disabled
  • Checked
  • Error
  • Autofill

Fields

/* ----------------------- 
    PART: Input
----------------------- */

--color-input
--borderColor-input
--bgColor-input

/* Hover */
--color-input-hover
--borderColor-input-hover
--bgColor-input-hover
--shadow-input-hover

/* Focus */
--color-input-focus
--borderColor-input-focus
--bgColor-input-focus
--shadow-input-focus

/* Checked */
--color-input-checked
--borderColor-input-checked
--bgColor-input-checked
--shadow-input-checked

/* Disabled */
--color-input-disabled
--borderColor-input-disabled
--bgColor-input-disabled

/* Error */
--color-input-error
--borderColor-input-error
--bgColor-input-error

/* Autofill */
--bgColor-input-autofill

/* ----------------------- 
    PART: Label
----------------------- */

--color-inputLabel

/* Hover */
--color-inputLabel-hover

/* Focus */
--color-inputLabel-focus

/* ----------------------- 
    PART: Icon
----------------------- */

--color-inputIcon

/* Hover */
--color-inputIcon-hover

/* Focus */
--color-inputIcon-focus

/* Checked */
--color-inputIcon-checked

/* Disabled */
--color-inputIcon-error

/* -----------------------
    PART: Placeholder
----------------------- */

--color-inputPlaceholder

Badges

Badges have 3 states:

  • Default (completed)
  • Active
  • Disabled

It is possible to change the color, border color and background color for each of these states.

Badge

/* Default (completed) */
--color-badge
--borderColor-badge
--bgColor-badge

/* Active */
--color-badge-active
--borderColor-badge-active
--bgColor-badge-active

/* Disabled */
--color-badge-disabled
--borderColor-badge-disabled
--bgColor-badge-disabled

Global

A few other variables are used to apply colors to the rest of the app. The deeper the theme feature is integrated within our app, the more organized these variables will be.

/* Default */
--color-default
--borderColor-default
--bgColor-default

/* Alt */
--color-alt
--bgColor-alt

/* Icon */
--color-icon

/* Success */
--color-success
--bgColor-success

/* Error */
--color-error
--borderColor-error
--bgColor-error

/* Info */
--bgColor-info

/* Modal */
--bgColor-modal
--bgColor-modalVeil

Example (Dark theme)

Here is an example of a color theme customization for a dark version of our app. It uses all currently available variables.

#snipcart {
    /* ----------------- 
        Colors
    ----------------- */
    --color-default: hsl(0, 0%, 90%);
    --color-alt: hsl(0, 0%, 50%);
    --color-icon: hsl(200, 90%, 40%);
    --color-success: hsl(144, 50%, 55%);
    --color-error: hsl(6, 55%, 60%);

    --color-link: hsl(220, 70%, 55%);
    --color-link-hover: hsl(220, 70%, 65%);
    --color-link-active: var(--color-link);
    --color-link-focus: var(--color-link);

    --color-input: var(--color-default);
    --color-input-hover: var(--color-input);
    --color-input-focus: var(--color-input);
    --color-input-checked: var(--color-input);
    --color-input-disabled: var(--color-alt);
    --color-input-error: var(--color-error);
    --color-inputLabel: var(--color-default);
    --color-inputLabel-hover: var(--color-inputLabel);
    --color-inputLabel-focus: var(--color-inputLabel);
    --color-inputIcon: var(--color-alt);
    --color-inputIcon-hover: var(--color-default);
    --color-inputIcon-focus: var(--color-inputIcon);
    --color-inputIcon-checked: var(--color-default);
    --color-inputIcon-error: var(--color-error);
    --color-inputPlaceholder: var(--color-alt);

    --color-buttonPrimary: var(--color-default);
    --color-buttonPrimary-hover: hsl(0, 0%, 100%);
    --color-buttonPrimary-active: var(--color-buttonPrimary);
    --color-buttonPrimary-focus: var(--color-buttonPrimary);
    --color-buttonPrimary-disabled: var(--color-alt);
    --color-buttonPrimary-success: var(--color-buttonPrimary);
    --color-buttonPrimary-error: var(--color-buttonPrimary);

    --color-buttonSecondary: var(--color-icon);
    --color-buttonSecondary-hover: hsl(200, 90%, 50%);
    --color-buttonSecondary-active: var(--color-buttonSecondary);
    --color-buttonSecondary-focus: var(--color-buttonSecondary);
    --color-buttonSecondary-disabled: hsl(210, 10%, 25%);
    --color-buttonSecondary-success: var(--color-success);
    --color-buttonSecondary-error: var(--color-error);

    --color-buttonDanger: var(--color-error);
    --color-buttonDanger-hover: hsl(6, 55%, 70%);
    --color-buttonDanger-active: var(--color-buttonDanger);
    --color-buttonDanger-focus: var(--color-buttonDanger);
    --color-buttonDanger-disabled: hsl(210, 10%, 25%);
    --color-buttonDanger-success: var(--color-default);
    --color-buttonDanger-error: var(--color-default);

    --color-badge: var(--color-link);
    --color-badge-active: var(--color-link);
    --color-badge-disabled: var(--color-alt);

    /* ----------------- 
        Border colors
    ----------------- */
    --borderColor-default: hsla(0, 0%, 100%, 10%);
    --borderColor-error: hsl(6, 55%, 30%);

    --borderColor-link: currentColor;
    --borderColor-link-hover: currentColor;
    --borderColor-link-active: currentColor;
    --borderColor-link-focus: currentColor;

    --borderColor-input: hsla(0, 0%, 100%, 10%);
    --borderColor-input-hover: hsl(200, 90%, 40%);
    --borderColor-input-focus: var(--borderColor-input-hover);
    --borderColor-input-checked: var(--borderColor-input-hover);
    --borderColor-input-disabled: hsl(210, 10%, 20%);
    --borderColor-input-error: var(--borderColor-error);

    --borderColor-buttonPrimary: transparent;
    --borderColor-buttonPrimary-hover: transparent;
    --borderColor-buttonPrimary-focus: transparent;
    --borderColor-buttonPrimary-disabled: transparent;
    --borderColor-buttonPrimary-success: transparent;
    --borderColor-buttonPrimary-error: transparent;

    --borderColor-buttonSecondary: transparent;
    --borderColor-buttonSecondary-hover: transparent;
    --borderColor-buttonSecondary-focus: transparent;
    --borderColor-buttonSecondary-disabled: transparent;
    --borderColor-buttonSecondary-success: transparent;
    --borderColor-buttonSecondary-error: transparent;

    --borderColor-badge: transparent;
    --borderColor-badge-active: transparent;
    --borderColor-badge-disabled: transparent;

    /* ----------------- 
        Background colors
    ----------------- */
    --bgColor-default: hsl(210, 10%, 11%);
    --bgColor-alt: hsl(210, 10%, 9%);
    --bgColor-success: hsl(144, 70%, 15%);
    --bgColor-error: hsl(6, 50%, 15%);
    --bgColor-info: hsl(210, 55%, 15%);

    --bgColor-modal: hsl(210, 10%, 7%);
    --bgColor-modalVeil: hsla(210, 10%, 7%, .75);

    --bgColor-link: none;
    --bgColor-link-hover: none;
    --bgColor-link-active: none;
    --bgColor-link-focus: hsl(210, 55%, 10%);

    --bgColor-input: hsl(210, 10%, 10%);
    --bgColor-input-hover: var(--bgColor-input);
    --bgColor-input-focus: var(--bgColor-input);
    --bgColor-input-checked: var(--borderColor-input-hover);
    --bgColor-input-disabled: hsl(210, 10%, 14%);
    --bgColor-input-error: var(--bgColor-input);
    --bgColor-input-autofill: hsl(210, 60%, 15%);

    --bgColor-buttonPrimary: hsl(220, 70%, 22%);
    --bgColor-buttonPrimary-hover: hsl(220, 70%, 30%);
    --bgColor-buttonPrimary-active: var(--bgColor-buttonPrimary);
    --bgColor-buttonPrimary-focus: var(--bgColor-buttonPrimary);
    --bgColor-buttonPrimary-disabled: hsl(210, 10%, 25%);
    --bgColor-buttonPrimary-success: hsl(144, 66%, 30%);
    --bgColor-buttonPrimary-error: hsl(6, 60%, 35%);

    --bgColor-buttonSecondary: var(--bgColor-info);
    --bgColor-buttonSecondary-hover: hsl(210, 60%, 18%);
    --bgColor-buttonSecondary-active: var(--bgColor-buttonSecondary);
    --bgColor-buttonSecondary-focus: var(--bgColor-buttonSecondary);
    --bgColor-buttonSecondary-disabled: hsl(210, 10%, 9%);
    --bgColor-buttonSecondary-success: var(--bgColor-success);
    --bgColor-buttonSecondary-error: var(--bgColor-error);

    --bgColor-buttonDanger: var(--bgColor-error);
    --bgColor-buttonDanger-hover: hsl(6, 50%, 18%);
    --bgColor-buttonDanger-active: var(--bgColor-buttonDanger);
    --bgColor-buttonDanger-focus: var(--bgColor-buttonDanger);
    --bgColor-buttonDanger-disabled: hsl(210, 10%, 9%);
    --bgColor-buttonDanger-success: hsl(144, 66%, 30%);
    --bgColor-buttonDanger-error: hsl(6, 60%, 35%);

    --bgColor-badge: hsl(210, 55%, 10%);
    --bgColor-badge-active: hsl(210, 60%, 15%);
    --bgColor-badge-disabled: hsl(210, 10%, 11%);

    /* ----------------- 
        Shadows
    ----------------- */

    --shadow-default: 0px 20px 24px -20px hsla(0, 0%, 0%, .5);
    --shadow-tooltip: 0px 8px 16px hsla(220, 70%, 22%, .5);

    --shadow-link-focus: 0px 6px 4px -3px hsla(200, 90%, 40%, .5);

    --shadow-input-hover: none;
    --shadow-input-focus: 0px 5px 10px -3px hsla(200, 90%, 40%, .3);
    --shadow-input-checked: none;

    --shadow-buttonPrimary-hover: 0px 10px 4px -8px hsla(0, 0%, 0%, .5);
    --shadow-buttonPrimary-active: none;
    --shadow-buttonPrimary-focus: 0px 0px 6px 2px hsl(200, 90%, 40%);

    --shadow-buttonSecondary-hover: 0px 10px 4px -8px hsla(0, 0%, 0%, .2);
    --shadow-buttonSecondary-active: none;
    --shadow-buttonSecondary-focus: 0px 0px 6px 2px hsla(200, 90%, 40%, .8);

    --shadow-buttonDanger-hover: 0px 10px 4px -8px hsla(0, 0%, 0%, .25);
    --shadow-buttonDanger-active: none;
    --shadow-buttonDanger-focus: 0px 0px 6px 2px hsla(6, 55%, 60%);
}

What's next

Colors were our priority for the theme. We look forward to adding more types of customization based on your feedback.

Browser support

All major browsers support CSS Variables. Our implementation falls back to our default theme when CSS variables are not supported. Users on legacy browsers will still be able to enjoy the default experience.

Was this article helpful?