• Updated:
    • Andrei Mazulnitsyn
    • Ashish Patel
    • Anokhin Alexey
    • Dmitriy Kulagin

Creating / Writing your theme (using current/default theme)

Open your nopCommerce solution or website (web version) in Microsoft Visual Studio - Go to this location:

  • If using source code: \Nop.Web\Themes\
  • If using web version: \[Project Root]\Themes\

  1. Select any default / current theme

    step-1

  2. Now, Right-click on the theme → select COPY

    step-2

  3. Now select the "Theme" folder → right-click → PASTE

    step-3

  4. You will get something like "Copy of default/current theme"

    step-4

  5. Rename it - whatever you like to be the name of your new theme – For instance, let's say: MyFirstTheme

    step-5

  6. Now inside your New theme folder "MyFirstTheme" → open theme.json

    step-6

  7. Change the current/existing theme name with your new theme name "MyFirstTheme"

    step-7

  8. Now, inside your new theme folder "MyFirstTheme" → Content → Images add your new images in the "images" directory and start updating/customizing your style.css according to your requirements.

    If you would like to test the changes → Go to the Admin section → Apply your new theme → Save the change and preview your public store.

    step-8

nopCommerce training course
Start developing your skills and become a Certified Developer