Show / Hide Table of Contents
    • Updated: 2/3/2022
      • 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
    • Improve this Doc
    Back to top Generated by DocFX