Your ecommerce site’s theme is like your in-store branding: it's what your customers see right away when they visit your SuiteCommerce site. The right theme provides the best representation of your business to your customers and prospects and gives them the best experience while they browse, shop, and buy.
NetSuite has long supported numerous themes and the ability to make your own custom theme. We recently introduced a number of improvements to SuiteCommerce theming:
- Updated base theme. We gave the standard baseline theme a refreshed look and feel, which makes it easier for custom theme designers to get up to speed and reduces time to get your site live.
- Improved interface inclusivity. Improvements to reading order, keyboard navigation, color contrast, and the use of consistent font sizes.
- Fallback themes. Our new architecture enables any theme based on the updated base theme to “fall back” to the base theme, for example, if a custom theme requests a component that is unavailable, the site will revert to what’s available in the base theme instead of breaking.
- Reactivation from the command line. New tasks in the command-line interface let you update and reactivate a site's theme and extensions without having to use the NetSuite UI, reducing development time and optimizing automated continuous integration/continuous delivery (CI/CD) processes.
Let's look at each of these theme improvements in more detail.
Updated Base Theme for a Fresh Look and Feel
A base theme is a complete but minimal set of templates, style sheets, and icons that serve as the foundation for other themes. Like a comprehensive set of tools and resources, it is meant to be simple and functional yet also complete and easy to manage. In other words, it’s unlikely that you would use the base theme in a live environment, but you’ll probably use a theme that is built from the base theme.
By updating the look and feel and making internal improvements to the base theme, it’s easier for developers to fully realize your vision for your ecommerce site. Some of the improvements include:
- Global changes to the default fonts, colors, backgrounds, and spacing.
- Improvements to global sections of the site, such as the header, footer, and homepage.
- More CMS placeholder areas so that content can be dropped in from the Site Management Tools, particularly in the MyAccount area.
- Additional predefined skins to better demonstrate the possibilities of alternative color schemes.
This update is the fourth major iteration of our SuiteCommerce themes and represents a fundamental change in the way they are architected. At the time of writing, we've only updated the base theme, but our team will update the other NetSuite themes over time.
Check out the new base theme on our reference demo site (opens in new tab).
Improved Interface Inclusivity
We are pleased to announce that, as part of the fourth version of the base theme, we have worked to improve the interface in the following ways:
- Ordering of elements on pages is designed so users who use keyboard navigation can logically tab through the page to find what they need.
- Visitors can interact with some complex page elements, such as the mini cart, more intuitively with a keyboard.
- Sites include default color contrast ratios, which makes similarly toned elements appear more distinct from each other (e.g., dark text on light backgrounds).
- Default and consistent font sizing and spacing for your site, which helps make text easier to read.
Inclusivity doesn't stop at the code level of the site—many aspects require diligent day-to-day maintenance from the operator, such as regular testing, ensuring images have descriptive alternative text, and properly punctuating and structuring content.
Fallback Themes for Improved Maintainability
If you've built a custom theme or use an “unmanaged” theme (one that is not automatically updated), you may not have been able to take full advantage of a new feature added to SuiteCommerce until you manually added the right templates and style sheets to your themes. This can be particularly frustrating if you're a nontechnical person who needs help from a developer to perform this work.
Starting with our V4 base theme, we have made architectural changes that should make these problems a thing of the past. Now, any theme created from a “fallback” theme (such as the new base theme) will automatically inherit any updates from the parent theme unless it has been specifically overridden as part of the customization or design process. What does this mean?
- Keeping a custom theme updated should require less manual work and improve the efficiency of the maintenance process every time there's a new release.
- It should be easier to adopt new features as the required templates and style sheets should be available immediately after you update the base theme and reactivate your custom theme.
- Bug fixes and small improvements should be seamlessly delivered and integrated into your custom theme, without developer intervention.
SuiteCommerce is a SaaS ecommerce system that receives regular updates to the core code from NetSuite, and building a custom theme used to mean that that part of your site was excluded from the site update process. Now, with fallback themes, only the parts you explicitly change and override will require manual maintenance and everything else will be handled automatically.
Now, when a new version of the base theme is available, and your current theme is built from it, you will see a notification in the SuiteCommerce Extension Manager recommending that you reactivate your theme to take advantage of the latest updates.
Reactivation From the Command Line for Continuous Integration and Delivery
If your SuiteCommerce theme and extension development processes includes aspects of CI/CD, you'll be pleased to know that we have added new Gulp commands that can automate the activation of themes and extensions on a site. Previously, the final step in the development or update process required manually entering the NetSuite UI and clicking through the process to start the activation process; now, this can be automated.
The new commands cover a number of scenarios: reactivating existing deployments, both deploying and reactivating, or reactivating because an updated theme or extension is available. By default, these activities are synchronous, so Gulp will wait for them to finish, but you can also perform these asynchronously.
See Gulp Command Reference for Theme and Extension Developer Tools (opens in new tab) for more information.
Get the Improved Theme
- If you're using a managed version of the base theme, you can update to V4 today to realize these benefits.
- If you're using a managed version of one of our other NetSuite themes, you will need to wait until those themes are updated with the V4 architecture.
- If you're using an unmanaged version of a theme (such as one custom-built by or for you), then you must reimplement your theme using the new V4 architecture.
- SuiteCommerce Advanced sites must be on version 2023.2.1 to use the V4 theme.
Remember, these updates only apply to the latest version of the theme. Any benefits may not be immediately available to your site's theme.
For even more details on what’s new in SuiteCommerce and how you can take advantage of new features, read the release notes (opens in new tab).