Customize an Existing Theme

The following tutorial describes how to customize assets in the SuiteCommerce Base Theme. If you have a custom theme that you want to revise, the steps in this tutorial still apply but some of the customization details will be different.

Note:

Before starting the following procedure, complete the list of tasks in Theme Tutorial Prerequisites.

To customize an existing theme:

From a command line, go to your top-level theme development directory. The top-level theme development directory is the directory where you set up the theme developer tools, for example: ThemeDevelopmentTools-20.2.1.
Run the following command to fetch the active theme. See Fetch Active Theme Files for more information.

Note:
Remember that this command overwrites the files in your workspace so be sure you don’t need any of the existing files.
```
                gulp theme:fetch 

              
```
When the fetch is complete, your local workspace directory should look like this example:
```
                Workspace/
   SuiteCommerceBaseTheme/
      assets/
      Modules/
      Overrides/
            Skins
      manifest.json 

              
```
Note:
The following steps assume that you fetch and are working with the SuiteCommerce Base Theme. But, you can also apply the changes in these steps to a different theme.
Open the theme directory in your top-level development directory.

For this example:

Workspace/SuiteCommerceBaseTheme/
Locate the subdirectory containing the file or files you want to customize.

In this 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/Sass/_cart-add-to-cart-button.scss

Edit the _cart-add-to-cart-button.scss Sass file.

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;
}*/
//...

Save the file.
Repeat this procedure for any other theme-related HTML or Sass files you need to customize.
Test your theme customizations locally by running the gulp theme:local command as described in Test a Theme on a Local Server.

To customize an existing theme:

Related Topics