6 Fundamental Views Any Magento 2 Theme Design Needs

6 fundamental views for Magento 2 theme design

As an online store-owner, you may ask: so in order to sell goods on my site, how many views do I need? Answering this question ensures that you understand your user’s buying process, therefore helps you better organize the structure of your website and address your needs for the website theme.

This article focuses on the views that your Magento 2 site must-have in order to be able to convert a visitor into a customer. A starter in Magento 2 should think of this as a guideline to prioritizes the pages that need extra attention in the early days of their business.

Inside a Magento theme design, there are always 6 fundamental views: Homepage, Category page, Product page, Cart page, Checkout page and About page.

Let’s think of your website as a brick-and-mortar bookstore. When a person walks into your bookstore, what do they see?

Homepage

The website domain is the same as the address of the bookstore, for customers to come buy goods.

When a person walks in your bookstore, they see an overview of the goods the store sells: books. The bookshelves, which has category names with bold, large font size on it, helps navigate the person to the kind of book they want. Your bookstore visitors should find it easy to notice the best-selling and newly arrived books right at the welcoming door of your store.

bookstore overview most important view of bookstore

The Homepage of your site serves the same purpose as the overview of your bookstore: telling your visitors what you sell, provide good navigation, and promote the products that sell. Take a very quick look at e-commerce market leader’s homepage:

homepage - most important page of e-commerce website

For those purposes, the best practices of designing the Homepage are:

  • Present your goods in a visually attractive way. This means high-quality images and a great homepage design.
  • Provide good navigation. This means that the products should be categorized in an easy-to-understand way, and can be accessed in no more than 3 clicks. Using Mega Menu is a good option. For more information about e-commerce website structure watch the video below from Brian Dean:

  • Promote the products that sell. This means using attention-grabbing banners with clear promotion message. Using dynamic banner slider may be a good start, as Amazon still make use of it.

The Category page

When a person entering your bookstore knows which book genre he is fond of, let’s say it’s “classics”, he goes to the shelves with the name of that genre on it. Now he sees various classic books, presenting in an organized way. He can pick up some books that seem interesting to him, and knowing the name, the price, some basic testimonials without actually opening the book.

bookshelves - important view of bookstore

The Category page has the same function as the bookshelves. It should showcase your in-stock goods of a certain category in an organized way. Visitors should be able to have a glimpse of the basic information of each product you have: the name, the price, and some review. Take a look at Pet Shop’s Category page below:

category page - important page for e-commerce website

For those purposes, the best practices are:

  • Having a filter that can be used to narrow down to user’s specific needs: product price, brand or several other attributes. In Magento 2, the filter is called Layered Navigation.
  • The product price and review are easy to notice, and the product image is clear.

The Product Page

When a person examining your bookshelf is interested in a particular book, he picks up the book to take a look at the inside. Typically, he reads the table of content, the introduction, the detailed testimonials, the author biography, and sometimes a page of the chapter he is curious about. All of that is to have a more in-depth knowledge of what the book is about.

book content - important view of bookstore

The Product Page works exactly the same way. It should be able to give a sense of good understanding of the product, to further empower users to buy the product or not. All these good information are multimedia, detailed information (weight, size, color…), delivery policies, detailed reviews with ratings, warranty policies. Take a look at Take Lessons’ product page below:

With these purpose in mind, here are the best practices for designing product page:

  • Detailed information should be divided into criteria.
  • Review section should come after the product detailed information, to ensure the lead of the value and credibility of the product.
  • Of course, the Call to action that seduces the lead to add the product to cart should stand out, favorably sticky-designed.

The Cart page

After deciding to buy, the person picking up the book, and find some more books. Let’s say after sometimes, he decided to buy 3 more books and no more. Take a last look at 4 books on his hand to check if he has missed any, he holds all the books and head to the cashier desk.

hand - important view in bookstore

The Cart page is as important as the above buyer’s hand. In order for the buying experience to be good, the cart page is designed for the reviewing process of the buyer. The buyer should be able to raise or decrease the number of each product. Take a look at the Cart page of our website, when you want to purchase our Magento 2 Themes:

Cart page - important page of e-commerce site

Cart page design best practices:

  • Avoid function errors. This means that you should spend time checking bugs and debug at all costs. For example, if the “Go to checkout” button is not working, then all of your previous efforts have gone with the wind.
  • Simple design that is congruent with the website concept.

The Checkout page

The person goes to the check out to pay money for the books. He can choose to pay with his credit cards, or in cash. The tax is and all other fees are calculated so that he acknowledge the actual money he has to pay. He pays and leaves your bookstore with satisfaction.

cashier - important view at bookstore

The Checkout page is your cashier desk when the customers pay the money. The customer should be able to provide shipping location and method, choose preferred payment method, and check the final money he has to pay. Other information like email address can be added. Take a look at our Checkout Page below:

checkout page - important page for e-commerce

Checkout page best practices: the same as Cart page best practices.

About page

Lastly, although the offline buying process does not include detailed researching about the vendors, the online buying process relies heavily on the trust of visitors. If you are a new venture, it requires months or even years for your brand to be recognized. The starting point of visitor’s trust to your brand is inside the About page, where you showcase your company information: who you are, what you do, the vision you are achieving… Take a look at Ebay’s About page below:

About page - important page for e-commerce website

About page design best practices:

  • Divide the page into independent sections that tell different angles of your business. Many of potential customers need to be hooked on your brand first, then make a purchase later.
  • Spend time crafting and choosing among the best stories you can tell. I personally cannot stretch this enough, as it is one of the highest ROI activity to do when selling online.

In conclusion,

So that’s it. By now you have known 6 must-have views for any Magento 2 theme design: Homepage, Category page, Product page, Cart page, Checkout page and About page. We hope that you are now determined on the most important pages on your Magento 2 website.

The design of your website pages should be congruent with the importance of the pages. When choosing a theme, you need to acknowledge your design demands for each important page. Therefore, you can later choose between themes wisely. 

If you are using Magento 2, you might not need to have a new theme, as the default theme has covered these 6 must-have pages. The next step for you is to read more about what is configurable and what is not in Magento 2 default theme.

Do you have any opinion on Magento 2 theme design? Let us know in the comment section below, and we would have a discussion.

 

About Boyer Theme Expert

Check Also

Creative with Magento 2 Multi-vendor Theme

For more details: Magento Extensions Magento Themes Besides a lot of themes coming from different …

Leave a Reply

Your email address will not be published. Required fields are marked *