Customize Pre-Existing Theme Files

This topic applies to

Applies to

SuiteCommerce Web Stores

When you download a theme’s source files, you have access to the HTML, Sass, and assets used by that theme. You can customize the HTML and Sass files directly within your Workspace directory. Best practice, when making changes to existing Sass variables, is to edit the existing Sass files directly.

To customize a pre-existing theme file:

  1. Open the theme directory in your top-level development directory.

    For example:

    Workspace/<THEME_DIRECTORY>/
  2. Locate the subdirectory containing the file or files you want to customize.

    For example, you want to customize the top margin of the Add to Cart button for this theme. You locate the _cart-add-to-cart-button.scss file in the theme’s Cart module:

    Workspace/<THEME_DIRECTORY>/Modules/Cart@1.0.0/Sass/_cart-add-to-cart-button.scss
  3. Edit the HTML or Sass file within the associated module.

    You can edit this file directly. See Best Practices for Creating Themes for details. In this example, you edit the .cart-add-to-cart-button-button class and change the margin-top value from lv3 to lv5.

    //...
    // New code with new margin-top value:
    .cart-add-to-cart-button-button{
       @extend .button-primary;
       @extend .button-large;
       width: 100%;
        font-weight: $sc-font-weight-semibold;
        margin-top: $sc-margin-lv5;
    }
    
    /* Previous Code:
    .cart-add-to-cart-button-button{
       @extend .button-primary;
       @extend .button-large;
       width: 100%;
        font-weight: $sc-font-weight-semibold;
        margin-top: $sc-margin-lv3;
    }*/
    //...
  4. If you want to expose Sass variables to the Site Management Tools Theme Customizer, add the editable() function to expose any variables. See Set Up Your Theme for Customization in SMT for details.

  5. Save the file.

  6. Repeat this procedure in this fashion for any other theme-related HTML or Sass files you intend to customize.

When you are ready, use the theme developer tools to test or deploy your theme. See Theme Developer Tools for procedures on how to use these tools.