Theme Customization Steps in SuiteCommerce

TL;DR Opening

This article provides actionable steps for customizing themes in SuiteCommerce, including modifying files, creating new ones, and applying best practices. Following these guidelines ensures a smoother theme development process.

How Can You Customize Your Theme Files?

After fetching active theme files, you can:

• Customize existing files
• Add new files
• Enable customization via Site Management Tools

Customizing Pre-Existing Theme Files

To customize theme files efficiently, follow these steps:

1. Open your theme's directory:
   Navigate to your theme directory in your top-level development directory. For example:
   Workspace/<THEME_DIRECTORY>/
2. Locate the files to customize:
   For instance, if you aim to change colors, find the \_colors.scss file in Modules/BaseSassStyles/Sass/variables/.
3. Edit the relevant file:
   Open and modify the HTML or Sass file. For example, change the success message color by updating the $sc-color-success variable from #097839 to #0d852d.
4. Save your changes.
5. Repeat for other files you want to customize.

For additional details on customization, review Best Practices for Creating Themes.

Adding New Files to a Theme

You can also add new HTML, Sass, or asset files as needed. Here’s how:

1. Create your new files:
   Choose the correct location within Workspace/<THEME_DIRECTORY>/ for your file type.
   • HTML: Modules/<MODULE>/Templates
   • Sass: Modules/BaseSassStyles/Sass/reference-theme
   • Assets: assets
2. Avoid name collisions:
   Ensure that no new files share names with existing ones, even if they are in different folders.
3. Edit the manifest file:
   Include your new files in the manifest.json to ensure they are compiled with other resources.
   For example: Workspace/<THEME_DIRECTORY>/manifest.json.

Testing and Deployment

Once you're finished editing and adding files, utilize the theme developer tools to test and deploy your theme effectively. See Test and Deploy Your Theme for an overview of these processes.

Additional Resources

• Best Practices for Creating Themes
• Commerce Sass Style Definitions
• Theme Tutorials

Related Topics

• Develop Your Theme
• Customize Pre-Existing Theme Files
• Add a New File to a Theme
• Edit the Theme Manifest

Key Takeaways

• Customize files to align with your branding and user experience goals.
• Add new files carefully to avoid conflicts and ensure proper manifest updates.
• Regularly test and deploy your theme for optimal performance and user feedback.

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