Base Theme Directories and Files in...

The SuiteCommerce Base Theme provides a foundational template that developers can use to create and customize their own themes. Understanding the structure and contents of this base theme is crucial for theme development. This article explores the directories and files included in the SuiteCommerce Base Theme, highlighting their roles and how they are utilized in theme customization.

What Are the Base Theme Directories and Files?

When you activate the SuiteCommerce Base Theme and fetch its source files, your Workspace directory will be populated with several essential folders and files:

none

1Workspace/
2         SuiteCommerceBaseTheme/
3               assets/
4               Modules/
5               Overrides/
6               Skins/
7               manifest.json

Breakdown of Directories and Files

Folder/File	Description
assets	Contains subdirectories for `font-awesome` and `img`, which hold custom fonts and images used throughout the theme. You can manage your fonts and images here as needed.
Modules	The core of the theme, this directory includes all functional modules, each with its own `Sass` (stylesheets) and `Templates` (HTML templates) folders. Customize these files to alter your site's appearance.
Overrides	This directory is for theme-specific overrides of any currently active extensions, allowing you to adapt extensions to fit the theme’s layout and style.
Skins	Contains pre-defined style options like `skin1.json` and `skin2.json`. These skins dictate color and visual elements that can be easily swapped by administrators in the Site Management Tools (SMT).
manifest.json	A JSON file that compiles all theme resources. This includes references to HTML templates, stylesheets, and other assets. It requires editing when you add new resources as part of customization.

Assets Directory

The assets directory includes two important subfolders:

font-awesome: Houses custom fonts used in the theme.
img: Contains base imagery such as icons and favicons.

When creating or customizing themes, organize fonts and images in subdirectories within assets for better structure and accessibility.

Modules Directory

The Modules directory is pivotal to theme functionality. Each module is crafted to define specific features for your site, with a structure supporting both styles and templates. As a developer, you can edit these files (e.g., the _header-logo.scss file) to make changes such as logo alignment in your header.

Overrides Directory

This directory accommodates any necessary theme-specific adjustments for installed extensions. Such overrides enable you to conform new functionalities to the existing layout and style of your site, ensuring a cohesive user experience.

Skins Directory

The Skins directory allows site administrators to quickly switch between different visual appearances without deep diving into code. By modifying or creating new .json files within this directory, you can adjust the look and feel of the site.

Manifest File

The manifest.json file is critical during the compilation process. It encompasses details of all theme resources, and modifications here should be made cautiously, as it directly impacts the deployment of new assets.

Conclusion

Understanding these directories and their purposes will significantly boost your efficiency and effectiveness in customizing and deploying your themes within SuiteCommerce, aligning with best practices for theme development.

Key Takeaways

The SuiteCommerce Base Theme serves as a comprehensive framework for building custom themes.
Key directories such as assets, Modules, and Skins facilitate organized theme development.
The manifest.json file is crucial for compiling theme resources; changes here impact the deployment process.

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

Frequently Asked Questions (4)

What is the purpose of the 'Overrides' directory in the SuiteCommerce Base Theme?

The 'Overrides' directory is used for theme-specific customizations of active extensions. It allows you to adapt existing extensions to fit the theme’s layout and style, ensuring a cohesive appearance.

Do I need to modify the 'manifest.json' file when customizing a SuiteCommerce theme?

Yes, you need to update the 'manifest.json' file to include references to any new HTML templates, stylesheets, and other assets when customizing your theme.

How do skins work in the SuiteCommerce Base Theme?

Skins in the SuiteCommerce Base Theme are predefined style options stored as '.json' files in the 'Skins' directory. They allow administrators to quickly change the site's appearance using the Site Management Tools without modifying code.

Can I customize the logo alignment in a SuiteCommerce theme?

Yes, you can customize the logo alignment by editing the appropriate stylesheet files, such as '_header-logo.scss', within the 'Modules' directory.

Base Theme Directories and Files in SuiteCommerce