(For more resources related to this topic, see here.)
General site layout and overview
When customers navigate to your store, they will be presented with the homepage. The homepage is where we'll begin to review the site layout and structure.
- Logo : This is your store logo. As with just about every e-commerce site, this serves as a link back to your homepage.
- Header links : The toolbar holds some of the most frequently used links, such as Shopping cart, Wishlist, and Account. These links are very customer focused, as this area will also show the customer's logged in status once they are registered with your site.
- Header menu : The menu holds various links to other important pages, such as New products, Search, and Contact us. It also contains the link to the built-in blog site.
- Left-side menu : The left-side menu serves as a primary navigation area. It contains the Categories and Manufacturers links as well as Tags and Polls.
- Center : This area is the main content of the site. It will hold category and product information, as well as the main content of the homepage.
- Right-side menu : The right-side menu holds links to other ancillary pages in your site, such as Contact us, About us, and News. It also holds the Newsletter signup widget.
- Footer : The footer holds the copyright information and the Powered by nopCommerce license tag.
The naming conventions used for these areas are driven by the Cascading Style Sheet (CSS) definitions. For instance, if you look at the CSS for the Header links area, you will see a definition of header-links.
nopCommerce uses layouts to define the overall site structure. A layout is a type of page used in ASP.NET MVC to define a common site template, which is then inherited across all the other pages on your site. In nopCommerce, there are several different layout pages used throughout the site. There are two main layout pages that define the core structure:
- Root : This layout is responsible for loading the header, footer, and contains the Master Wrapper, which contains all the other content of the page.
These two layouts are common for all pages within nopCommerce, which means every page in the site will display the logo, header links, header menu, and footer. They form the foundation of the site structure. The site pages themselves will utilize one of three other layouts that determine the structure inside the Master Wrapper:
- Three-column : The three-column layout is what the nopCommerce homepage utilizes. It includes the right side, left side, and center areas. This layout is used primarily on the homepage.
- Two-column : This is the most common layout that customers will encounter. It includes the left side and center areas. This layout is used on all category and product pages as well as all the ancillary pages.
- One-column : This layout is used in the shopping cart and checkout pages. It includes the center area only.
Changing the layout page used by certain pages requires changing the code. For instance, if we open the product page in Visual Studio, we can see the layout page being used:
As you can see, the layout defined for this page is _ColumnsTwo.cshtml, the two-column layout. You can change the layout used by updating this property, for instance, to _ColumnsThree.cshtml, to use the three-column layout.
Category and manufacturer pages
When adding new products to the site, you can specify their category and manufacturer. These groupings allow customers to search for products on your site more easily.
Category pages display a collection of products that you have grouped under that category. For instance, all books are grouped under the category Books . A customer can navigate to any category located in the left-side area. Once a customer navigates to a particular category, that category link will become bold to indicate to the customer where they currently are. The breadcrumb will also update with the current location.
Categories may also have subcategories to further group your products. For instance, a Computers category may have subcategories that include Desktops, Laptops, and Accessories. If a category has subcategories, the customer will be presented with a page displaying the subcategories. In addition, the left-side area will expand to show the subcategories under the parent category.
Clicking on a subcategory on this page will take the customer to a page displaying all the products for that particular subcategory. The breadcrumb will also update to reflect that the customer is in a subcategory.
Manufacturer pages behave similarly. All products grouped under a certain manufacturer can be displayed together. Customers can navigate to a manufacturer page from the left-side area. Clicking on a particular manufacturer name will display all the products for that manufacturer. As with the category pages, the link will become bold, but there is no breadcrumb on these pages. This is replaced with the manufacturer name instead.
In this article you took a deep dive into the storefront and the customer experience. You got an overview of the general store layouts and how they are used throughout the site. You learned about category and manufacturer pages.
Resources for Article :
- Installation of Drupal and Ubercart 2.x [Article]
- Shipping and Tax Calculations with PHP 5 Ecommerce [Article]
- Making Your Store Look Amazing [Article]