Documentation
Back to website >

Uploadable theme for nopCommerce

Starting with version 4.10, themes, such as standard plug-ins, can now also be packed into a ZIP file, so that they can be uploaded via the admin center under "Configuration\Plugins".

Finally, the individual subfolder with the theme files is packed into a zip file in the root of which a description file is also packed.

This additional file "uploadeditems.json" has the following structure:

[
{
"Type": "Theme",
"SupportedVersion": "4.10",
"DirectoryPath": "EULANDA-White/"
}
]


This information is stored in UTF-8 format as text. This can be done wonderfully with the Windows notepad.

Make sure that the option "Hide file extension for known file types" is not activated in the file explorer under Options, because then the extension".txt" will be added invisibly but supposedly the correct file name will be displayed.


Below the zip root, next to this additional file, is only the main folder of the theme files specified under "DirectoryPath" in the additional file - i.e. "EULANDA-White".

Below are the normal files as with any theme. So the folders "Content" and "Views" with the respective subfolders.

A complete structure could look like this, for example:

\uploadeditems.json
\EULANDA-White
\EULANDA-White\preview.jpg (510px x 333px)
\EULANDA-White\theme.json
\EULANDA-White\Content
\EULANDA-White\Content\Css
\EULANDA-White\Content\Css\ie8.css
\EULANDA-White\Content\Css\print.css
\EULANDA-White\Content\Css\styles.css
\EULANDA-White\Content\Css\styles.rtl.css
\EULANDA-White\Content\Css\Images
\EULANDA-White\Content\Css\Images\*.gif *.png usw.
\EULANDA-White\Views
\EULANDA-White\Views\_ViewImports.cshtml
\EULANDA-White\Views\Shared
\EULANDA-White\Views\Shared\Head.cshtml

The name of the zip file is irrelevant. The theme properties are specified via the json file "theme.json".

The theme file in this example has the following content:

{
"SystemName": "EULANDA-White",
"FriendlyName": "EULANDA-White",
"SupportRTL": false,
"PreviewImageUrl": "~/Themes/EULANDA-White/preview.jpg",
"PreviewText": "'EULANDA-White'"
}

The content of the example was essentially taken from the NopCommerce standard theme "DefaultClean".

After the plugin installation, the theme is available at the usual location on the web server.