Application-Level Styles for Effective Theme Customization

TL;DR Opening

Application-level styles enable developers to create distinct designs for different application experiences within SuiteCommerce, including Shopping, My Account, and Checkout. This customization enhances user experience across various interfaces and improves the overall consistency of a brand’s visual identity.

What Are Application-Level Styles?

Application-level styles are a part of the flexible Sass styling hierarchy in SuiteCommerce. They allow you to define unique styling for the various applications, enabling you to customize the user interface for distinct experiences such as Shopping, My Account, and Checkout.

Hierarchy of Sass Styles

Sass styles in SuiteCommerce are organized into a hierarchical structure that consists of:

• Base Sass Styles: These are foundational components used across the site, serving as the building blocks for more complex designs.
• Template-Specific Styles: Styles tailored for specific templates and pages, allowing for cascading style effects based on the template in use.
• Application-Level Styles: Styles that are application-specific, meant to cater to unique user experiences in Shopping, My Account, and Checkout applications.

Base Sass Styles

Base Sass styles provide reusable components that can be iteratively combined to build templates and pages. Components are categorized as follows:

Template-Specific Styles

In addition to base styles, each module features a Sass folder defining styling rules specific to the modules’ templates. Extensions and customizations of base styles are implemented within these Sass files to enhance the module's templates.

Example of Template-Specific Class Reference

The following example demonstrates how styles are referenced and defined:
Class Referenced in Template File:

{{#if showRemoveButton}}  
   <button class="address-details-remove-address" data-action="remove" data-id="{{internalid}}" {{#if isInvalidAddressToRemove}}disabled{{/if}}>  
      {{translate 'Remove'}}  
   </button>  
{{/if}}  

Class Defined in Sass File:

.address-details-remove-address {  
    @extend .button-edit;  
    margin-right: $sc-base-margin-lvl2;  
    cursor: pointer;  
}  

Defining Styles for Each Application

For each of the primary applications, there exists a designated layout Sass file that specifies styles unique to that application experience. The styles are organized as follows:

• Workspace/<THEME_DIRECTORY>/Modules/ShoppingApplication/Sass/_shopping-layout.scss
• Workspace/<THEME_DIRECTORY>/Modules/MyAccountApplication/Sass/_myaccount-layout.scss
• Workspace/<THEME_DIRECTORY>/Modules/MyAccountApplication/Sass/_myaccount-layout-sb.scss
• Workspace/<THEME_DIRECTORY>/Modules/CheckoutApplication/Sass/_checkout-layout.scss

These files allow for modular styling that can adapt based on the specific application context.

Theme Manifest File Dependencies

It's essential to include dependencies for any application-specific styles in the theme manifest file. This incorporation ensures that customizations are compiled correctly during deployment.

Key Takeaways

• Application-level styles allow customized designs for Shopping, My Account, and Checkout experiences.
• Base Sass styles serve as reusable components for building templates and pages.
• Template-specific styles enable additional customization beyond base styles for module templates.
• Each application has its own dedicated layout Sass file for style definitions, ensuring unique UI experiences across the SuiteCommerce platform.

Source: This article is based on Oracle's official NetSuite documentation.