As you probably know, SuiteCommerce is a highly customizable e-commerce solution for NetSuite. Some of the first aspects of your SuiteCommerce site that you will want to customize are the general look and feel of the site. To get off on the right foot, and minimize the need for customizations down the road, an industry best practice is to implement SuiteCommerce using a theme that that closely mimics the look and feel that you ultimately want to achieve on your site.
While you can start using many of the pre-built SuiteCommerce Themes out of the box without making a ton of customizations, you probably won't want to leave your SuiteCommerce Theme as it is. You may want to customize the colors on your site using "skins", and you will likely want to adjust some of the functionality of your site using SuiteCommerce Extensions. But we're getting a bit ahead of ourselves here... so let's start by going over the basics of what a SuiteCommerce theme is.
What is a SuiteCommerce Theme?
In the context of SuiteCommerce, you can think about a Theme as being the clothing your website wears. All the colors, fonts, panels, and other elements that form the overall “look” of the website are parts of the theme.
It is possible to switch out a theme while still keeping the same basic underlying functionality, although the more custom extensions and/or theme customizations you have the more additional steps are required to make sure the new theme is compatible with the “inside” of the website.
A theme will look somewhat different depending on your screen size, and very different between a computer and a mobile device. SuiteCommerce themes all come ready to go for mobile device use; any customizations that affect the theme will have to be tested to ensure mobile compatibility.
SuiteCommerce Theme Options
Several stock themes are included for free with your SuiteCommerce license. As of this writing, here are your options: Base, Threads, Bridge, Horizon, Manor, and Posh (another theme, Tasty, is in development). Base is quite bare-bones to start with, and not ready to use without customization, while the other stock themes could be driven right off the lot and used right away. Any of the themes can be modified, the Base theme just forces you to do so.
There are other pre-built options beyond just these six stock themes. For instance, we built our own theme that our clients are welcome to use if it fits their style:
.
SuiteCommerce Theme "Skins"
It is worth noting that the theme is fundamentally the layout of the website, not the colors, although you can specify the colors right in the theme code. A theme can be “skinned” with different colors while remaining essentially the same theme.
Steve Goldberg describes skins well in "The Extension Framework and Extensibility API":
Themes can also come in different flavors called skins. So, for example, while you may like a particular theme lays things out, you may wish to have a particular color scheme: with skins, you can have seasonal presets so that things are familiar but different depending on how you want to brand things. Keep things roughly the same but adjust colors and fonts for fall, winter, spring and summer, for example.
That is, the theme is like the cut of a suit – say, a double-breasted jacket and pants with a high waist and a full break – while the SuiteCommerce skin is like the material and color of that suit, which could be a navy wool or a bold, mauve velvet or a pinstripe cotton. Because you are using the same pattern, it is relatively simple to make the same suit in whatever fabric you want, and change it out when the mood strikes (or, perhaps, to match the colors of a new product line or rebranding campaign).
Not all themes have skins. This is because, from a development perspective, a skin is really a way of determining the values of certain variables. These variables (for example, navigationHeaderColor or backgroundColor) are stored in a JSON Object within the Theme code. What this means is that the theme developer must first set up the theme to accept these variables before a skin can be created to define the value.
Choosing a SuiteCommerce Theme
Before we wrap things up, we have two suggestions for when you are picking your theme:
- Seriously consider using the base theme and then customizing it. You will probably want to customize whatever theme you choose anyway, and the base theme is the best-supported theme. Some of the other stock themes are not updated frequently, which can lead to annoying (and sometimes costly) incompatibility issues when new versions of the NetSuite backend are released.
- The theme – the look and feel – of your site is such an important part of any ecommerce implementation or overhaul that it is well worth insisting on seeing a graphic mock-up of your new site before you hire a developing team to build it. You might want to look for companies that offer free graphic mock-ups as part of their quoting service for SuiteCommerce implementations.
Theme Doesn't Show in Extension Manager
If your base theme bundle is installed, but the base theme doesn’t show up as an option in your extension manager, then you won’t be able to create an Activation.
The error message when you hit activate is: “Select a Theme is required”
To fix this issue, try going into the ‘SC ExtMech Extension' custom record instance for that theme and remove anything that’s in the 'target version' field. This should resolve the issue.
NetSuite Commerce Partner
That's all for now, but we hope this article was helpful and informative! If you have questions about SuiteCommerce Themes in general, or our SuiteCommerce theme development in particular, feel free to contact our team at any time. Anchor Group is a certified Oracle NetSuite Commerce Partner, and is equipped to handle all kinds of SuiteCommerce projects, large or small!
FREE SuiteCommerce Book
If you liked this article, you'll LOVE our book on SuiteCommerce! How do we know? Because the content in this article was reproduced from a section of our book! So, what are you waiting for?
Order the free SuiteCommerce book today, and we'll even pay for shipping!
