On this page
This guide is for nopCommerce 4.90 and 5.00. It explains how themes work, how to choose and install one, and how to build your own without making upgrades harder. The details come from the nopCommerce source, including one change in 5.00 that most theme guides don’t mention yet.
How nopCommerce themes work
A theme is a folder under /Themes in the site:
A theme folder
Themes/
YourTheme/
theme.json name, preview and RTL support
preview.jpg shown in the admin area
Content/
css/styles.css the theme’s styles
css/styles.rtl.css right-to-left version
images/
Views/
Shared/_Header.cshtml only the views you change
Product/ProductTemplate.Simple.cshtml When nopCommerce renders a page, it looks for the view in the active theme first, in /Themes/YourTheme/Views/…, and falls back to the default /Views/… when the theme doesn’t have it. That fallback is the most useful thing to know about nopCommerce themes: a theme only needs the views it really changes, and every view it leaves out keeps working and gets updated with nopCommerce.
The theme.json file is short. This is the one for DefaultClean:
Themes/DefaultClean/theme.json
{
"SystemName": "DefaultClean",
"FriendlyName": "Default clean",
"SupportRTL": true,
"PreviewImageUrl": "~/Themes/DefaultClean/preview.jpg",
"PreviewText": "The 'DefaultClean' site theme"
}Note what is missing: there is no supported-version field. Plugins declare the nopCommerce versions they support and won’t load on others; themes don’t, so nopCommerce will happily load a theme built for an older release. That matters at upgrade time.
Free, paid or custom
| Option | Cost | Good | Watch out for |
|---|---|---|---|
| DefaultClean | Free, included | Always matches the version, tested by nopCommerce | Plain design; most stores change at least the colours and header |
| Free marketplace theme | Free | Quick way to a different look | Updates for new versions are not guaranteed; check the last release date |
| Paid theme | One-time fee, sometimes with yearly updates | Polished design, extra plugins (menus, sliders, filters), vendor support | You depend on the vendor for each new nopCommerce version |
| Custom theme | Development work | Exactly your design and catalog, only the views you need | You maintain it at every upgrade |
Free and paid themes are listed on the nopCommerce Marketplace (opens in a new tab). Larger theme vendors include Nop-Templates, nopStation and nopAccelerate. Paid themes often come with their own plugins for mega menus, sliders and filters, which is useful but adds more pieces that each need a build for your version.
For electronics stores, our own TechOrbit theme includes a homepage managed from the admin area and our Advanced Search & Autocomplete plugin, for nopCommerce 4.90.
How to choose a nopCommerce theme
- Supports your exact nopCommerce version, with a build for the next one planned
- Has a live demo with the storefront and, ideally, the admin settings
- Includes the Razor views and CSS as files you can edit, not only compiled code
- Lists the plugins it needs, and whether they are included
- Works on mobile and passes a quick PageSpeed Insights test on the demo
- Supports right-to-left languages, if you sell in Arabic, Hebrew or Persian
- States how long updates and support last after purchase
- Doesn’t edit core nopCommerce files to work
How to install a nopCommerce theme
- Download the theme package for your nopCommerce version. Unblock the ZIP in Windows file properties if it came from the internet.
- In the admin area go to Configuration → Local plugins and use “Upload plugin or theme”, or copy the theme folder into /Themes on the server. Copy any plugins that come with it into /Plugins.
- Restart the application, then install the theme’s plugins from Configuration → Local plugins if it has any.
- Go to Configuration → Settings → General settings and pick it as the Default store theme. In a multi-store setup, choose the store first: each store has its own theme.
- Use Clear cache in the admin header, or restart the application, then check the storefront on desktop and mobile.
How to build your own nopCommerce theme
- Copy DefaultClean. Copy /Themes/DefaultClean to /Themes/YourTheme. Never edit DefaultClean itself: an upgrade replaces it.
- Rename it in theme.json. Set SystemName to the folder name and FriendlyName to the name shown in the admin area. Replace preview.jpg with a screenshot of your design.
- Change the styles. Most design changes belong in Content/css/styles.css. Keep styles.rtl.css in step if you support right-to-left languages.
- Override only the views you change. Copy a view from /Views into the same path under your theme, for example Views/Shared/_Header.cshtml or Views/Product/ProductTemplate.Simple.cshtml, and edit the copy. Views you don’t copy fall back to the default ones.
- Select and test it. Choose the theme in General settings and test the home page, category, product, cart, checkout and account pages, on mobile too.
The less you copy, the easier the next upgrade. A theme that changes the colours, fonts, header and footer usually needs only styles.css and a handful of views. Theme settings that staff should change, such as homepage banners, are better as a small plugin with its own settings page than as text in views. A custom footer still has to keep the licence credit unless you buy a removal key; see how to remove “Powered by nopCommerce” the right way.
Turn on CSS and JavaScript bundling and minification in Configuration → Settings → App settings on the live store, and keep images in the theme at the sizes they are shown.
Overriding plugin views in nopCommerce 5.00
In 4.90 a theme can only override the core views. A plugin’s storefront views, such as a payment method’s checkout form or a widget, could only be changed by editing the plugin.
nopCommerce 5.00 adds a theme-aware view engine for plugins. A storefront view at /Plugins/Widgets.Example/Views/PublicInfo.cshtml can now be overridden by a file at the same path inside the theme:
Overriding a plugin view in 5.00
Plugins/Widgets.Example/Views/PublicInfo.cshtml the plugin’s view
Themes/YourTheme/Plugins/Widgets.Example/Views/PublicInfo.cshtml used insteadIt applies to storefront views only; admin views can’t be overridden this way. It means a theme can now restyle a third-party widget without touching the plugin, so the plugin can still be updated.
Themes and upgrades
Because themes don’t declare supported versions, an outdated theme doesn’t fail to load. It loads, and pages that changed in the new release break or lose features. Before every major upgrade:
- Get the theme’s build for the new version from its vendor, along with builds for its plugins.
- For a custom theme, compare each overridden view with the new default view and copy the changes across.
- Test the main pages and checkout on staging with the new version.
nopCommerce 5.00 changes more views than usual. Our nopCommerce upgrade guide covers the full process, and what’s new in nopCommerce 5.0 lists what changed.
Frequently asked questions
Where are nopCommerce themes stored?
In the Themes folder of the site, one folder per theme, for example /Themes/DefaultClean. Each theme folder has a theme.json file, a Content folder for CSS and images, and a Views folder for the Razor views it changes.
How do I change the theme in nopCommerce?
Go to Configuration → Settings → General settings, choose it as the Default store theme and save. Each store in a multi-store installation can use a different theme. You can also let customers pick a theme by turning on “Allow customers to select a theme”.
Are there free nopCommerce themes?
Yes. DefaultClean is included, and the nopCommerce Marketplace has a free themes section. Check the supported version and last update date: many free themes were made for older releases and never updated.
Will my theme work after upgrading nopCommerce?
Not automatically. Themes don’t declare which versions they support, and each major release changes views. Get the theme’s build for the new version from its vendor, or compare your overridden views with the new default views and update them.
Can I edit a paid theme?
Usually yes, because themes are Razor views and CSS files. Keep a list of the files you change, because a theme update will overwrite them. For larger changes, copy the theme under a new name first.
Does the theme affect SEO and speed?
Yes. The theme controls the HTML, heading structure, image sizes and scripts on every page. A heavy theme with many sliders and scripts slows the store down. Test the demo with PageSpeed Insights before buying.
Next steps
If a ready-made theme gets you most of the way, buy it and change only what you need. If your brand or catalog needs its own storefront, we build custom nopCommerce themes that override only the views they need, so they stay easy to upgrade.