Close

Blog posts tagged with 'nopCommerce themes'

The term responsive design has been around for a while now and it has definitely caused quite a commotion. Many say that it is just a hype, while others think about it as a trend that is going to shape the web marketing and development for decades to come.

With the rapid rise of the mobile internet users and the predictions that desktop usage will eventually get obsolete, it is clear now that businesses should respond to this evident market shift. No matter what your online business is, to neglect this tendency will mean to neglect all your mobile visitors and the money they are willing to spend purchasing your products.

This is especially true for the e-commerce business. If you run an online store and if you have been asking yourself what the benefits of the responsive design are and whether your e-commerce store needs to get responsive, we would like to answer this for you.

The most obvious benefit of responsive design is that you are going to reach a bigger number of potential customers. Your mobile customers are not going to bounce off your website but browse through it and shop, without difficulty.

Responsive design is different from mobile web sites as you only have to maintain one website with one markup, which adapts itself and looks good on all devices: desktop, tablet, smartphohe, e-reader, etc.

Responsive design is also an investment in your website SEO. Search engines are most probably going to factor in responsive design in their page rank algorithms in the future. And if they are not already doing so and rewarding your responsive website, the fact that your responsive design allows more visitors to stay more on your website and do more conversions is enough to boost your SEO standing significantly.

The following infographic explains what responsive design is, what its advantages are and why you shouldn’t overlook it.

In the last couple of months we at Nop-Templates.com have been working on introducing responsive design to our nopCommerce premium themes. We are sure that this innovation will help our customers explore new business opportunities and drive more sales and revenue their way.

The infographic is courtesy of http://www.infographs.org and is produced by www.dotcominfoway.com.

After the successful launch of the Nop Fashion Theme Roller, we were eager to introduce this powerful feature to the Nop Electronics Theme. We are happy to announce that we finally did it! The Theme Roller allows store owners, developers and web agencies to customize the look and feel of their nopCommerce online shop on the fly.

Now you do not need to change the nopCommerce CSS in order to match the colors and styles of your company or your client's image. Just use the Nop Electronics Theme Roller to customize the theme to meet your requirements. Once done you can save your changes and download your customized version of the theme from Nop-Templates.com.

To see how you can re-brand the default Nop Electronics Theme, please watch this video. With the new Theme Roller you will impress your customers, sell your products and make your competitors envy the nopCommerce technology that you so successfully use.

We are constantly striving to improve our products, so stay tuned for more exciting news from Nop-Templates.com

If you have missed the other parts of this blog series, please feel free to read more here:

What's new in nopCommerce 3.0 - part 1 - multi vendor support.

What's new in nopCommerce 3.0 - part 2 - multi store support.

What's new in nopCommerce 3.0 - part 3 - Nop-Tempalates themes and plugins.

The multi-store and multi-vendor are the big stars in the nopCommerce 3.0 release. But there is one more major feature, which we have not talked about yet. NopCommerce 3.0 will be released with a brand new HTML and CSS. The whole markup of the system has been refactored to be clean, optimized, semantically correct, modern and most importantly easy to work with and customize.

This major feature was done by Nop-Templates and contributed to nopCommerce. We have had our top front-end developer work on the system for almost 2 months so that the markup that nopCommerce generates can be, as he likes to put it, "Shining"!

There are three major directions, which were followed during the refactoring.

1. Add or remove elements to achieve flexibility of styling.

Take the sorting options on the nopCommerce category pages for example:

NopCommerce Sorting Options

Imagine you would like to style the sorting options panel, put a background on it or a border. Before the refactoring the sorting options panel elements (the three dropdowns) did not have a parent element and styling the whole panel was quite difficult. You would probably end up overriding the category template view, just to do that. Now these elements have a common panel and if you would like to change it, you only need to work with CSS.

Another good example for this type of refactoring is the product page of nopCommerce where you have a separate line of markup for each product variant:

NopCommerce Product Variant

It is common to divide the elements for each variant (picture, description, attributes, buttons) into two separate panels, left and right. Before the refactoring to achieve this, each element had to be floated separately as there were no elements to act as left and right panel. Imagine doing this also for your theme RTL support. Now this is easily achieved as there are two separate panels, left and right, and elements can be arranged in these panels.

Another good example of this newly added markup to achieve flexibility are new class names added to table elements so that columns in a table could be styled separately. Before the refactoring separate styling of columns could not be achieved via CSS only. Now this is possible and is handy on pages like the shopping cart for example where you might need different font, color, centering, etc for a column:

NopCommerce Shopping Cart

There are numerous such changes through the code, which involve not only the pages mentioned so far but also blog, news, etc. pages. The purpose of this refactoring direction was to add flexibility to the markup so that customizations to the nopCommerce pages could be achieved only via CSS and not by overriding views and working with Razor, which complicates not only the development process but also creates problems with the maintenance and upgrade of these changes.

2. Unification of common elements. This refactoring direction has to do mainly with adding class names to common elements so that they can be styled together.

Take the nopCommerce category navigation for example:

NopCommerce Category Navigation

In this case the Categories and Recently Viewed Products navigation require the same styling as they both present a list ot items. Before the refactoring this could be achieved but without a common class declaration as there was no such class. Now these two panels can be styled with a single class declaration.

Such unification changes were done to many nopCommerce page elements like form elements, form lines, form labels and controls. Before the refactoring the nopCommerce forum for example had a lot of common tables, but without common class names. Now the nopCommerce forum is much easier to style because of this. This is also valid for the MyAccount pages, which depend heavily on form elements. Unification changes were done to whole pages too. The search page of the web site and of the forum were unified for example.

3. Remove deprecated elements and code approaches to achieve standard-compliant and semantically correct markup.

If you are a front-end developer familiar with nopCommerce you could be reading this blog only to find the answer to this question.

Is the <div class="clear"/> still used in nopCommerce 3.0?

The answer is no! This was an old, deprecated approach to clear floats, back from the days when HTML was written with IE 6 in mind. It was semantically incorrect and added waste to the HTML markup of the system, which not only looked bad to developers and search engines but was more difficult to work with. Now floats throughout nopCommerce are cleared only via CSS, which means that you cannot expect it to be perfect in IE 6, but to be honest who cares about IE 6. In fact please do good to developers and the web by not using this browser:

http://www.ie6countdown.com

With the <div class="clear"/> out of the way we had to take care of the next big front-end oldie: using table elements for layout. Table elements should be used where there is table data, like the nopCommerce shopping cart for example. But using tables to achieve layout, like presenting the products on the catalog pages for example is wrong and also frowned upon by search engines. So all tables used for layout were removed from nopCommerce.

NopCommerce Products

Another example of semantically incorrect use of HTML markup in nopCommerce, which was corrected by the refactoring is definition lists (dl elements) being used to define forms in the website. This was replaced with a more appropriate markup as definition lists should be used where there is specification data, (color - blue, material - cotton, etc.).

The whole nopCommerce generated markup was rid of all old-fashioned and semantically incorrect elements and approaches to make the system modern and much more appealing to developers and search engines.

The HTML Refactoring is not as widely talked about and advertised as the multi-store and multi-vendor support, which bring direct benefits to the nopCommerce store owner. The refactoring is a feature, which the developers will relate to. But as such it is extremely important. It will boost the theme development in the community and will allow nopCommerce developers to complete more quality nopCommerce projects much faster and with greater ease, which will again result in benefits for the store owners.

If you are a developer keen on looking at all the HTML Refactoring changes, please follow the changes in this nopCommerce branch:

http://nopcommerce.codeplex.com/SourceControl/network/forks/7Spikes/HtmlImprovement

This concludes our insight into the nopCommerce 3.0 major release. I hope you have found the series useful. Do not forget to send us your feedback and thoughts in the comments below or on the related facebook post on our facebook page.

Nopcommerce 3.0 will be released next week so stay tuned and do consider following us on Facebook, Twitter or Google+!

If you have missed the other parts of this blog series, please feel free to read more here:

What's new in nopCommerce 3.0 - part 1 - multi vendor support.

What's new in nopCommerce 3.0 - part 2 - multi store support.

Picking up from where we left last time we would like to continue our talk about the multi-store support but this time in the context of our nopCommerce themes and plugins. The multi-store support in nopCommerce 3.0 is a big feature and as such it required equal changes to every plugin we have in our valued nopCommerce toolbox. To the store owners and the developers these changes can be summarized by answering a single question.

Will the Nop-Templates themes and plugins support the multi-store in nopCommerce 3.0?

The answer is YES! The configuration of every plugin can now be limited to a specific store or a set of stores.

Take the Nop Anywhere Sliders for example. You can have a slider (with a configuration and a set of images) for one store and another slider (with a different configurations and a set of images) for another store. The multi-store configuration UI in the plugins is consistent with the nopCommerce one. Take a sneak peak at the administration of a slider:

Nop Anywhere Sliders

There is a new tab "Stores", which when required can be used to map a slider to a specific store:

Nop Anywhere Sliders

This plugin multi-store support is available in all our nopCommerce plugins.

What about the themes you would ask? The nopCommerce team thought of this on our behalf and implemented the multi-store in such a way that different themes can be applied to different stores. Combined with the plugins configuration per store, this means that you have no limits to your flexibility and power in a multi-store environment despite the fact that you running only a single installation of nopCommerce.

The multi-store support is a major feature in our plugins and themes. But it is not the only feature you are going to receive with the nopCommerce 3.0 release of our products.

We have implemented numerous new features and improvements in the plugins. In fact by looking at the snapshot of the Nop Anywhere Sliders you can guess one of them? Please do in the comments below and you will receive a free license for the Nop Anywhere Sliders.

Our nopCommerce 3.0 themes are now based on the new nopCommerce HTML\CSS markup, developed by Nop-Templates and contributed to the system. This means that the themes are now modern, optimized, easy to customize and have what is required to be taken to the next level, which is Responsive Design.

The new HTML\CSS markup is what we are going to look at next in this blog series. So stay tuned for more nopCommerce 3.0 exciting news!

We are back with more insight into the currently buzzing and much awaited nopCommerce 3.0 release. Today we are going to look at the multi-store support in nopCommerce.

As usual we have something for all nopCommerce users - store owners, developers and Nop-Templates customers. But let's start with the store owners. So what does it really mean to have more than one store running in nopCommerce?

It means that you can have more than one website\store (different domains or subdomains) running in the same nopCommerce installation. In other words if I was a retailer who was selling two major brands Brand1 and Brand2 and my business required that these brands are sold on separate websites\stores I would not have to create two separate nopCommerce installations to do this.

How does this help?

  • For starters you have only one database and web application to cater for.
  • You have a single administration for all your websites, where you can manage your catalog, customer and order data.
  • Your customers have a single login for all your stores.
  • You can share catalog data between stores, have a product in more than one store for example.
  • Since your customer data is shared you can use it between stores for marketing campaigns and different crosell\upsell implementations.

Most of the entities in your nopCommerce installation like categories, products, etc. can be limited per store. But it is important to note that your customers cannot be.

Why is this important? Because you cannot dedicate an administrator for only one store. Your catalog, customer and order data is visible to all administrators.

This means that the multi-store support in nopCommerce is really for single store owners with more than one online store. You would not have a shopify or bigcommerce style of system. You cannot have such a system anyway, as it requires a multi-tenant application and nopCommerce is not multi-tenant.

So we have established that nopCommerce 3.0 is a good fit for store owners who would like to have more than one store. To be able to plan their multi store implementation, these store owners should know what entities\data can be limited per store. In the initial release of nopCommerce 3.0 these are the entities that will support multi-store (can be limited per store):

  • Categories
  • Products
  • Manufacturers
  • News
  • Blogs
  • Topics
  • Message Templates
  • Settings

Different themes can also be configured for different stores.

And these are the entities that do not support multi-store but will probably do in the future:

Plugins and widgets cannot be enabled\disabled per store but this does not mean that their configurations cannot be made store specific. In fact this is how most of the widgets in nopCommerce 3.0 (Google Analytics for example) work. You might also be wondering if prices or specific attributes can be configure per store. Currently there is no such support and this is not even on the nopCommerce road map. Could this be achieved via customization? Please read more later in this article.

Do note that even though a category or manufacturer can be limited to a specific store, this does not mean that all products for the given category or manufacturer are automatically limited to the store. Products need to be managed separately. There is a work item to facilitate this process and you can vote for it here:

https://nopcommerce.codeplex.com/workitem/11389

For the store owners familiar with nopCommerce, here is where you need to begin when setting your multi-store.

1. Create a website on your hosting space www.vans.bg for example and install nopCommerce on your www.vans.bg website. This is where the nopCommerce installation will run.

2. Create a second website www.etnies.bg for example and add a CNAME recrod to forward all request to your first website www.vans.bg. Do not install anything on this website, it should be empty.

3. Go back to your www.vans.bg website and configure a domain alias for www.etnies.bg.

The above three steps sound more complex than they are. Still if you have difficulties you can always ask you hosting provider or administrator to do it for you. For detailed information please read this forum post:

http://www.nopcommerce.com/boards/t/21356/multi-store-roadmap-lets-discuss.aspx?p=3#89679

4. Setup your stores:

Manage NopCommerce Stores

5. You do need to set the HOST VALUES for each store, because this is how nopCommerce will know which store is the active one for the current request. Read more on this later in this article:

Edit NopCommerce Store

6. Once your stores have been added you need to configure the different nopCommerce settings. Individual settings can be set for all stores or per store:

NopCommerce Settings Per Store

7. Once your stores and settings are configured you can start editing your catalog. Categories, products and manufactures can be limited per store as can be other entities like Blogs, News, etc...The nopCommerce administration to do this is consistent across all entity administration pages. Here is how you can limit products per store:

NopCommerce Products Per Store

I bet that our developer audience, who have not looked at the nopCommerce 3.0 code yet, are wondering how all this magic works? The answer is quite simple, which can only testify to the cleverness of the nopCommerce approach.

As you could see, every store has HOST VALUES mapped to it. Therefore when a request arrives in the nopCommerce pipeline, nopCommerce inspects the HOST HEADER value of the request and sets the current store in the WebStoreContext. The WebStoreContext is available to all controllers and services, so all actions can pass the current store to data retrieval operations which require it. In the database entities (products, categories, manufacturers, etc...) are mapped to the different stores via a general table called StoreMapping.

But what you really would be using in your nopCommerce development code is the StoreMappingService in the Nop.Service.Stores namespace. The StoreMappingService has all the methods required to manage the mapping of the entities to the different stores. Most importantly it has a generic method called Authorize, which when passed an entity (a category or product for example) determines if the entity is visible in the current store.

There is one important aspect of this multi-store implementation. You can have the different stores run on different domains or subdomains, but you cannot have them run in separate virtual directories.

Earlier in this article I mentioned whether entity properties (product prices for example) can be configured per store. Currently this is not supported and because the nopCommerce architecture is not based on EAV (Entity Attribute Value) model like some other well know e-commerce systems, implementing such a configuration could be quite tricky for static properties (those that map to predefined database table columns). However nopCommerce does have a basic GenericAttribute infrastructure, which can be used for custom properties to be added to entities. Fortunately the GenericAttribute class has a StoreId property, so you can limit your custom properties to certain stores. For more information have a look at the GenericAttribute, GenericAttributeExtensions and GenericAttributeService classes.

One last thing we would like to point the attention of the nopCommerce developers to is that nopCommerce 3.0 multi-store, in fact nopCommerce itself is not multi-tenant. All stores run in the same application and app pool. Implementing a multi-tenancy in nopCommerce is not going to be a walk in the park but for those of you who are willing to tackle it, here is a good place to start:

http://msdn.microsoft.com/en-us/library/aa479086.aspx

This is our summary of the multi-store implementation in nopCommerce 3.0. In summary we can say that it is cleverly implemented, fairly easy to setup and gets the job done - provides store owners with more than one store. There is a lot to be added to this implementation but we do expect big time projects to be implemented on the initial version.

What is left to cover is how our themes and plugins are going to work with this major feature. We are going to do this in the next part of these series. Do not forget that we also have the new nopCommerce 3.0 HTML markup to talk about. So do stay tuned for more exciting nopCommerce 3.0 content!

With little less than 2 weeks before the nopCommerce 3.0 release we thought it would be useful to share our take on what the new features are in this much awaited major version of our favorite e-commerce system.

NopCommerce 3.0 is all about multi-vendor and multi-store support. One curious fact about this is that no open source system supports this out of the box. In other words you would not get these enterprise features for free unless you are using nopCommerce 3.0.

Another big change in nopCommerce 3.0 is the HTML Refactoring of the system, which was done by Nop-Templates and contributed to nopCommerce.

We would like to cover these major changes from the perspective of the store owner, the developer and the Nop-Templates products. This is quite a lot for one blog post, so we will publish it in several parts.

Let's start with the multi-vendor support!

Imagine you would like to create an online market place, where different people or businesses can manage sales of their own products through a common web store. Products from all independent vendors appear in the common store catalog and online customers shop at one store even though the products are supplied by many different vendors. There are numerous examples of such market places. Let's just mention Amazon and Themeforest to give you an idea of two of the biggest - one selling pretty much all types of tangible and some non-tangible goods, the other selling virtual products only.

How does nopCommerce 3.0 can afford you with such a market place out of the box?

With nopCommerce 3.0:

  • You can add unlimited number of vendor accounts and have more than one user mapped to a vendor account.
  • Different vendors have separate administration area for products and orders by default. Since all vendors are added to the Vendor role, the store owner can configure access control to the different administration areas for the Vendor role.
  • Products from all vendors appear in a single store front
  • Customers can place products from different vendors in one order
  • All vendors receive a notification when an order is placed, which includes one of their products.
  • You have a common payment processing

What is missing from this implementation is the ability to do vendor commissions and payouts. But with some customization and automation effort this could be easily implemented, unless you don't mind to do it manually, which is also an option.

This is its initial release and there are a few useful features that could be added to the multi-vendor support in nopCommerce. Certainly it will evolve and be enhanced over time. Still it is powerful enough and will get you a long way in your virtual mall enterprise. Do consider voting for these work items if you would like to affect the future development of the multi-vendor support:

http://nopcommerce.codeplex.com/workitem/11368

http://nopcommerce.codeplex.com/workitem/11369

What does the multi-vendor mean for the nopCommerce-savvy store owners?

First of all it means that you need to add the vendors to your store:

NopCommerce Vendors

Second you need to configure the ACL (administration access control) for the Vendor Role:

NopCommerce Vendors ACL

You need to map the users who represent your vendors to their vendor. Note that you cannot map a customer to more than one vendor.

Customer Vendor Management

And you get a new field on the product administration pages:

NopCommerce Product Vendors

You do get to filter your products and orders by vendor:

NopCommerce Product Vendors Filter

NopCommerce Order Vendors Filter

For the nopCommerce developers, the multi-vendor support means that the Product and Customer entities now have a new property: VendorId. This property needs to be taken into account when implementing product or customer searches as well as various custom entity mappings.

The Nop-Templates customers might wonder how our nopCommerce plugins and themes are going to be affected by the multi-vendor functionality. The good thing is that the plugins and the themes are going to work with the multi-vendor support out of the box.

The multi-store support however, which is the other highlight of this nopCommerce release is a completely different story. If you would like to learn more about it, stay tuned for part 2 of this series on "What's new in nopCommerce 3.0?".

After months of plugin development, new features and improvements, we are extremely happy to announce the release of a new nopCommerce theme.

The Nop Neo Fashion Theme is modern, stylish and functional. It is based on our Nop Ultimate Plugin Collection to deliver not only stunning looks but also a powerful e-commerce experience. We have just added two new plugins to the Nop Ultimate Plugin Collection, the Nop Quick View and the Nop Customer Reminders, for a total of 12 plugins, which means that they are all included in the Nop Neo Fashion Theme.

Most importantly the theme is based on the brand new nopCommerce markup, which was developed by Nop-Templates and contributed to nopCommerce for its upcoming 3.0 version. This means that theme code and structure is clean, optimized, following modern standards and easy to customize.

Do visit the live demo of the theme to get a feel for its design and functionality. To try the backend of the theme you can download the trial version of the Nop Ultimate Plugin Collection and install it on the Default Clean theme or any other theme.

As usual your feedback in the comments below will be appreciated!

Our best selling Nop Fashion Theme just received a new powerful feature, which will allow store owners, developers and web agencies to customize the look and feel of their nopCommerce fashion shop on the fly.

We are proud to introduce the new Nop Fashion Theme Roller for nopCommerce 2.8. Now you do not need to change the nopCommerce CSS in order to match the colors and styles of your company or your client's image. Just visit the Nop Fashion Theme Demo Website and use the Nop Fashion Theme Roller to customize the theme to meet your requirements. Once done you can save your changes and download your customized version of the theme from Nop-Templates.com as long as you have a valid license for the theme.

Do watch this video to see how you can change the default Nop Fashion Theme to a brand new floral blue theme, which will impress your customers, sell your products and make your competitors envy the nopCommerce technology that you so successfully use.

We are currently working on Theme Roller features for all our premium themes. So stay tuned for more exciting news from Nop-Templates.com.

We are extremely proud to announce the release of our new nopCommerce plugin - the Nop Quick View.

The Nop Quick View makes your product catalog much easier and faster to navigate by providing a pop-up details view for every product on the category page. Just hover over the product and click the "Quick View" button.

Nop Quick View

The various product detail sections are all configurable from the administration of the plugin. You can choose what exactly to be shown on the Quick View window.

Nop Quick View Administration

As with all our nopCommerce plugins, the Nop Quick View is open to modifications and has already been integrated in our free and premium nopCommerce themes. It supports single and multi variant products.

Nop Quick View

The Nop Quick View supports a Cloud Zoom and an Ajax Cart. With all this product information and functionality you customers will seldom have to go to the product details page, navigate back and forth and waste time choosing the products that they need. This dramatically improves your online store shopping experience resulting in better conversions and more sales.

Best of all, the Nop Quick View is included in the Nop Ultimate Plugin Collection, which provides 11 nopCommerce plugins for less than half the price. Do not also forget that our products are backed by the support of the one of the top nopCommerce teams - the Nop-Templates development team, who are setting the trends on the nopCommerce extensions market.

Killer nopCommerce product pages! ~ Tuesday, February 5, 2013

These are the 21 steps, according to Invesp.com, which will assure you a killer product page on your e-commerce web site. We are proud to find out that the product pages of our nopCommerce themes actually support 19 out of the 21 features. If you guess the missing two, you will know what nopCommerce plugins we are currently working on.

How to Create Effective E-commerce Product Pages

1 2 3 4 Next
Find us on Facebook