How to change or add topic template in nopCommerce

How to change or add topic template in nopCommerce

nopCommerce offers a great functionality of "topic" pages that allow store owners / managers to create pages right from the administration section without even touching the source code. Creating these topic pages on the fly from the administration section DOES NOT require any technical skills. As long as you have the access to the administration section (& required privilege) you can easily create a topic page.

 

In nopCommerce, pages like "About us", "Condition of Use" & "Private notice" etc. are actually based on topic pages. The main benefit of topic pages is that, you (As a store owner / manager) can update / change the content of the page anytime right from the administrator section. But, what if you (as a store owner / manager) want to change the layout of the topic pages? What if you want topic page 1 to look different from topic page 2?

 

Well, there is an in-built feature called "Topic Templates" in nopCommerce out of the box that allows you to choose different templates for different topic pages. By default, when you go and edit any topic page in the administration section, you are not going to see any option that allows you to choose template. The reason is that there is only one template saved on your nopCommerce store site. In order for you to enable this feature, you will have to add a new (second) template.

 

Go to: Administration > System > Temlpates > Topic templates

 

nopCommerce topic template

 

Click on the "Add new record" button to add the new template. 

In this example, we have added "New Template" with path name "TopicDetailsV2" like this:

 

nopCommerce topic template

Make sure to add the new page (template) in this path: Nop.Web (Presentation) / Views / Topic /...

 

nopCommerce topic template

 

Now, after adding the template, when you go to the Administration section > Content management > Topics (pages).

 

Pick any topic and open it in "Edit" mode and yuo should see the new template like this:

 

nopCommerce topic template

Hope it helps!

Version used for this tutorial: nopCommerce 3.90

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment
Comments
4/10/2018 2:56 PM
I am trying to modify the home page topic layout and in the header.cshtml I have the @html.action("topicblock", "Topic", new {systemName=""homepagetext"}.  When I change topicblock to my new template topichome I get internal error. Any suggestions?
4/12/2018 7:30 AM
Hi Nate,
What error are you getting? Have you checked the system log? What nopCommerce version are you using?
10/30/2019 7:38 PM
Привет всем! интересный у вас сайт!
Нашел прикольную базу кино:  <b> смотреть лучшую фантастику hd </b> <a href=http://kinofanonline.net/>http://kinofanonline.net/</a>  
Тут: <a href=http://kinofanonline.net/anime/>аниме твое имя смотреть онлайн в хорошем</a> Лучшие аниме смотреть список 2018
Здесь: документальные фильмы смотреть бесплатно в хорошем качестве http://kinofanonline.net/dokumentalnyy/ рейтинг 2019
Здесь: http://kinofanonline.net/1027-avtor-betmena-protiv-supermena-ubet-pervuyu-ledi.html Автор «Бэтмена против Супермена» убьет первую леди смотреть онлайн бесплатно
Здесь: http://kinofanonline.net/5262-rozhdestvo-v-konvey-christmas-in-conway-2013.html
11/22/2019 9:05 AM
Всем привет! прикольный у вас сайт!
Нашел русскую базу кино:  <b> смотреть бесплатно лучшие фильмы приключения </b> <a href=http://kinofly.xyz/>http://kinofly.xyz/</a>  
Тут: <a href=http://kinofly.xyz/anime/>аниме через торрент бесплатно в хорошем качестве</a> смотреть самые лучшие аниме рейтинг 2019
Тут: смотреть аниме в хорошем качестве http://kinofly.xyz/anime/ список 2018
Тут: смотреть комедии россия онлайн в хорошем качестве http://kinofly.xyz/komediya/ рейтинг 2018
Тут: http://kinofly.xyz/10765-anna-pakuin-poluchila-glavnuyu-rol-v-drame-broken.html <b> Анна Пакуин получила главную роль в драме "Broken" смотреть онлайн бесплатно </b>
Здесь: http://kinofly.xyz/15149-studiya-nizhniy-2017.html
11/22/2019 9:10 AM
Всем привет! прикольный у вас сайт!
Нашел русскую базу кино:  <b> смотреть бесплатно лучшие фильмы приключения </b> <a href=http://kinofly.xyz/>http://kinofly.xyz/</a>  
Тут: <a href=http://kinofly.xyz/anime/>аниме через торрент бесплатно в хорошем качестве</a> смотреть самые лучшие аниме рейтинг 2019
Тут: смотреть аниме в хорошем качестве http://kinofly.xyz/anime/ список 2018
Тут: смотреть комедии россия онлайн в хорошем качестве http://kinofly.xyz/komediya/ рейтинг 2018
Тут: http://kinofly.xyz/10765-anna-pakuin-poluchila-glavnuyu-rol-v-drame-broken.html <b> Анна Пакуин получила главную роль в драме "Broken" смотреть онлайн бесплатно </b>
Здесь: http://kinofly.xyz/15149-studiya-nizhniy-2017.html
11/22/2019 9:16 AM
Всем привет! прикольный у вас сайт!
Нашел русскую базу кино:  <b> смотреть бесплатно лучшие фильмы приключения </b> <a href=http://kinofly.xyz/>http://kinofly.xyz/</a>  
Тут: <a href=http://kinofly.xyz/anime/>аниме через торрент бесплатно в хорошем качестве</a> смотреть самые лучшие аниме рейтинг 2019
Тут: смотреть аниме в хорошем качестве http://kinofly.xyz/anime/ список 2018
Тут: смотреть комедии россия онлайн в хорошем качестве http://kinofly.xyz/komediya/ рейтинг 2018
Тут: http://kinofly.xyz/10765-anna-pakuin-poluchila-glavnuyu-rol-v-drame-broken.html <b> Анна Пакуин получила главную роль в драме "Broken" смотреть онлайн бесплатно </b>
Здесь: http://kinofly.xyz/15149-studiya-nizhniy-2017.html
11/30/2019 5:38 PM
Приветствую! интересный у вас сайт!
Нашел сериальную базу кино:  <b> хорошая фантастика смотреть кино </b> <a href=http://kinofly.xyz/>http://kinofly.xyz/</a>  
Здесь: <a href=http://kinofly.xyz/fantastika/>фантастика онлайн бесплатно в хорошем качестве 2018</a> кино онлайн 2018 бесплатно в хорошем фантастика рейтинг 2019
Тут: смотреть онлайн лучшие криминальные боевики http://kinofly.xyz/boevik/ список 2019
Здесь: анна детектив смотреть бесплатно в хорошем http://kinofly.xyz/detektiv/ рейтинг 2019
Здесь: http://kinofly.xyz/12912-fox-gotovit-detskuyu-versiyu-fantasticheskoy-chetverki.html <b> FOX готовит "детскую" версию "Фантастической четверки" смотреть онлайн бесплатно </b>
Тут: http://kinofly.xyz/8896-betmen-supermen-i-otryad-samoubiyc-vpechatlili-gostey-comic-con.html