Customize Existing Themes in SuiteCommerce

Customizing an existing theme in SuiteCommerce allows you to tailor your online store's appearance and functionality to match your brand. This guide details the steps for effectively modifying assets in the SuiteCommerce Base Theme or any custom theme you may have.

Prerequisites for Theme Customization

Before initiating theme customization, ensure you have completed the following tasks:

• Install and configure SuiteCommerce or SuiteCommerce Advanced.
• Install Node.js and Gulp.js.
• Set up Theme Developer Tools.
• Familiarize yourself with the anatomy of the Base Theme and understand best practices for creating themes.

Steps to Customize an Existing Theme

1. Access the Top-Level Directory
   From the command line, navigate to your top-level theme development directory. This is typically where you've set up the theme developer tools, such as ThemeDevelopmentTools-20.2.x.

2. Fetch the Active Theme
   Execute the following command to retrieve the active theme:

   noneCopy

   gulp theme:fetch

   Note: This command will overwrite existing files in your workspace, so ensure that you back up any important files before proceeding.

3. Open Your Theme Directory
   Navigate to the directory containing your theme files. For example:
   Workspace/SuiteCommerceBaseTheme/

4. Locate Files to Customize
   Identify the specific file you wish to modify. For instance, to customize the top margin of the Add to Cart button, find the file at:
   Workspace/<THEME_DIRECTORY>/Modules/Cart/Sass/_cart-add-to-cart-button.scss

5. Edit the SASS File
   Open and edit the _cart-add-to-cart-button.scss file directly. Modify the class to update the margin-top from lv3 to lv5.

   cssCopy

   1.cart-add-to-cart-button-button {
   2    @extend .button-primary;
   3    @extend .button-large;
   4    width: 100%;
   5    font-weight: $sc-font-weight-semibold;
   6    margin-top: $sc-margin-lv5;
   7}

   Previous code should be commented out for reference:

   cssCopy

   1/* Previous code:
   2.cart-add-to-cart-button-button{
   3    @extend .button-primary;
   4    @extend .button-large;
   5    width: 100%;
   6    font-weight: $sc-font-weight-semibold;
   7    margin-top: $sc-margin-lv3;
   8}*/

6. Save Changes
   After making your changes, save the file.

7. Repeat Customizations
   Follow the same steps for any other HTML or Sass files associated with the theme that you wish to modify.

8. Test Changes Locally
   To preview your theme customizations, run the command:

   noneCopy

   gulp theme:local

   This will set up a temporary local server to view your adjustments in action.

Key Takeaways

• Customize themes in SuiteCommerce for enhanced branding.
• Always fetch the current theme securely to avoid data loss.
• Test changes locally before publishing to ensure functionality.