The Skin Preset File

This topic applies to

Applies to

Commerce Web Stores

 

Creating a skin involves building a JSON preset file. This file contains the variables you want your skin to change. Each variable listed includes the new value to use when the skin is applied.

To create a skin preset file:

  1. Expose all Sass variables you want your skin to override. See Expose Sass Variables for Customization for instructions.

  2. Navigate to your theme’s Skins directory.

    This directory is located in your top-level theme development directory. For example:

    <Top-LevelDevelopmentDirectory>/
          Workspace/
             Skins/
  3. Create a new JSON file.

    Name this file in an intuitive manner. Do not include spaces or special characters.

    For example:

    ../Workspace/Skins/winter_skin.json

  4. Open this file and define the Sass variables you want your skin to change and include the values your skin changes.

    For example, your winter skin might look like the following:

    { "$sc-color-body-background": "white" , "$sc-button-primary-text-color": "white" , "$sc-button-primary-hover-text-color": "white" , "$sc-button-primary-active-text-color": "white" , "$sc-button-primary-text-transform": "none" , "$sc-button-secondary-text-color": "white" , "$sc-button-secondary-hover-text-color": "white" , "$sc-button-secondary-active-text-color": "white" , "$sc-button-secondary-text-transform": "none" , "$sc-button-tertiary-hover-text-color": "white" , "$sc-button-tertiary-active-text-color": "white" , "$sc-button-tertiary-text-transform": "none" , "$sc-button-large-line-height": "1" , "$sc-button-large-letter-spacing": "1px" , "$sc-button-large-mobile-width": "100%" , "$sc-button-large-desktop-width": "auto" , "$sc-button-medium-line-height": "1" , "$sc-button-medium-letter-spacing": "0.5px" , "$sc-button-medium-mobile-width": "100%" , "$sc-button-medium-desktop-width": "auto" , "$sc-button-small-line-height": "1" , "$sc-button-small-letter-spacing": "normal" , "$sc-button-small-mobile-width": "auto" , "$sc-button-small-desktop-width": "auto" , "$sc-body-line-height": "1.6" , "$sc-h1-line-height": "1.2" , "$sc-h2-line-height": "1.2" , "$sc-h3-letter-spacing": "0" , "$sc-h4-line-height": "1.4" , "$sc-h5-line-height": "1.4" , "$sc-h6-line-height": "1.4" , "$sc-blockquote-line-height": "1.6" , "$sc-color-primary": "#e23200" , "$sc-color-secondary": "#15607b" , "$sc-neutral-shade": "#4D5256" , "$sc-color-theme": "#97CCDF" , "$sc-color-link": "#0067b9" , "$sc-color-link-active": "#0067b9" }

    Important

    When creating a skin preset file, include only variables that are exposed for editing within your theme’s Sass files. If you include a variable that is not exposed, that value does not change when the skin is applied to the theme. See Expose Sass Variables for Customization.


  5. Save the JSON file.

  6. Include your new skin in the extension manifest file. See Add a Skin to the Theme Manifest.