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!

Find us on Facebook