In the realm of e-commerce, a visually appealing and well-structured online store can make a significant difference in customer experience and engagement. NopCommerce, a powerful and flexible open-source e-commerce solution, empowers businesses by allowing them to customize templates for categories, manufacturers, products, and topics. In this article, we will explore the functionality of NopCommerce templates and guide you through the process of creating and customizing templates to enhance your online store.
Navigating the Template Landscape
In NopCommerce, you have the ability to specify alternate layout templates for categories, manufacturers, products, and topics. To manage and view the existing templates, head to the "System → Templates" page.
By default, the system comes with one template for categories, one for manufacturers, one for topics, and two for products. These templates serve as the foundational structure for the respective entities in your online store.
Category Templates
When editing a category in the admin area, you can choose from a dropdown list of templates. It's important to note that the template dropdown list is visible only if you have more than one template created for categories, manufacturers, and topics.
Product Templates
Given that there are two product types in NopCommerce – Simple and Grouped (product with variants) – there are two default product templates. To see the template dropdown list on the product details page, you must create two product templates, each tailored to the chosen product type.
Adding a New Template
Let's walk through the process of creating a new template using the example of a product template for the Simple product type.
-
Create Template File:
- Navigate to the "Views\Product" folder.
- Copy the "ProductTemplate.Simple.cshtml" file and rename it, for instance, "ProductTemplate.MyNewOne.cshtml."
- Modify the code of the new template file to fit your specific needs.
-
Access the System Templates Page:
- Go to "System → Templates" and move to the "Product templates" panel.
-
Add New Template:
- In the "Add new record" block, complete the form:
- Enter the Name of the template (e.g., My New One).
- Enter the View path (e.g., ProductTemplate.MyNewOne).
- Set the Display order; 1 represents the top of the list.
- For product templates only, provide the Ignored product type IDs (advanced). Since we are creating a template for the Simple product type, ignore the Grouped product type with ID 10.
- In the "Add new record" block, complete the form:
-
Save the New Template:
- Click the "Add new record" button to save the new template.
Once saved, you will see the new template on the product details page, offering you a choice between the two product templates.
Conclusion
Customizing templates in NopCommerce allows you to tailor the visual presentation of your online store, providing a unique and branded shopping experience for your customers. Whether it's refining category layouts, enhancing product displays, or creating engaging topic templates, the flexibility of NopCommerce templates empowers you to shape your e-commerce platform according to your business needs. Dive into the world of NopCommerce templates and unlock the potential to create a captivating and user-friendly online shopping destination.
Referances