It's important to realize that a SuiteCommerce Theme primarily represents the structure of the website, rather than its colors. However, you can define colors directly within the theme's code.
As you're likely aware, SuiteCommerce is an incredibly adaptable e-commerce platform for NetSuite. One of the first elements you’ll want to customize is the overall aesthetic of your SuiteCommerce site. To ensure a smooth start and reduce the need for further modifications in the future, an industry-standard approach is to implement a SuiteCommerce Theme that closely reflects the design you ultimately wish to achieve.
While you can use several pre-made SuiteCommerce Themes straight out of the box, you may find that you still want to tweak your SuiteCommerce Theme. You might want to change the colors on your site with "skins," and you will probably want to revise some functionalities using SuiteCommerce Extensions. But let's take a step back and address the basics of what a SuiteCommerce Theme encompasses.
What is a SuiteCommerce Theme?
In SuiteCommerce, a Theme can be seen as the attire your website dons. All the colors, fonts, panels, and other components contribute to the overall “appearance” of the website and are included in the theme.
You can change a theme without altering the underlying functionality of the website. However, the more custom extensions or changes you have, the more additional steps will be necessary to ensure that the new theme aligns with the internal structure of the website.
The appearance of a theme may vary based on screen size, appearing differently on desktops versus mobile devices. SuiteCommerce themes are designed to be mobile-friendly; any adjustments that affect the theme must be tested for compatibility with mobile.
SuiteCommerce Theme Options
There are several basic themes included at no extra charge with your SuiteCommerce license. As of now, your options include: Base, Threads, Bridge, Horizon, Manor, and Posh (with another theme, Tasty, currently in development). The Base theme starts quite minimal and requires customization, while the other pre-built themes can be used immediately without extensive alterations. Any of these themes can be adapted; the Base theme simply requires you to do more work.
Beyond these six standard themes, there are additional pre-designed options available. For example, we have created our own theme that clients are free to utilize if it aligns with their preferences.
SuiteCommerce Theme "Skins"
It’s crucial to understand that a theme represents the layout of the website, not the colors, though you can specify colors within the theme's code. A theme can be “skinned” with different colors while retaining its fundamental structure.
Steve Goldberg effectively explains skins in "The Extension Framework and Extensibility API":
Themes may also come in various varieties known as skins. For instance, you may appreciate a certain theme's layout but desire a different color palette. With skins, you can have seasonal presets, ensuring continuity while making adjustments to colors and fonts for each season, such as fall, winter, spring, and summer.
In essence, think of a theme like the cut of a suit - perhaps a double-breasted jacket paired with pants having a high waist - whereas the SuiteCommerce skin represents the fabric and color of that suit, whether it be navy wool, vibrant mauve velvet, or pinstriped cotton. Because the same design pattern is utilized, it's relatively straightforward to recreate the suit in various materials, allowing for changes based on mood or to coincide with a new product line or rebranding effort.
Not all themes feature skins, as they are technically mechanisms to determine specific variable values. These variables (like navigationHeaderColor or backgroundColor) are stored within a JSON Object in the Theme code. Consequently, the theme developer must configure the theme to accept these variables before a skin can be created to specify the values.
Choosing a SuiteCommerce Theme
Before we conclude, here are two recommendations when selecting your theme:
Carefully think about using the Base theme before customizing it. You will likely want to tailor whichever theme you select, and the Base theme is the most well-supported option. Some of the other stock themes are rarely updated, potentially leading to frustrating (and sometimes expensive) compatibility issues when new NetSuite backend versions are introduced.
The theme - or look and feel - of your site is a critical aspect of any e-commerce implementation or upgrade. Therefore, it's worth insisting on viewing a graphic mock-up of your new site before hiring a development team to create it. Look for companies that provide complimentary graphic mock-ups as part of their quote for SuiteCommerce projects.
Theme Doesn't Show in Extension Manager
If your base theme bundle is active but doesn't appear in your extension manager, you won't be able to create an Activation.
The error message you’ll receive when attempting to activate is: “Select a Theme is required.”
To resolve this issue, access the ‘SC ExtMech Extension' custom record instance for that theme and remove any entries in the 'target version' field. This should fix the problem.
NetSuite Commerce Partner
That wraps up our discussion for now! We hope this article has been useful and informative. If you have any inquiries regarding SuiteCommerce Themes in general or our SuiteCommerce theme development in particular, please feel free to reach out. Versichis a certified Oracle NetSuite Commerce Partner, equipped to manage a variety of SuiteCommerce projects, both big and small!
