Some of the most elemental tools in managing a Magento 2 store are Product Attributes and Categories. They are the two basic methods that Magento 2 provides for differentiating products. So elemental, in fact, that a blog post about them may seem unnecessary; but the most fundamental tools can also be the most powerful, and getting these elements right can make the difference between a fantastic storefront or a frustrating one. To explain, let’s start with a quick primer.
Have you ever walked into a store or supermarket in which everything just seemed to be in the right place, and locating the items you wanted felt effortless? Or perhaps you’ve had the opposite experience, that of wandering in a daze through countless aisles in a frustrated search for an item that seems like it should be obvious. Designing an intuitive layout for a brick-and-mortar store doesn’t happen by accident; it takes a deep knowledge of the products for sale and careful research into customer behavior.
If the thoughtful organization is important in physical storefronts, it’s even more crucial in virtual ones. As the manager of a Magento online storefront, you have access to both Product Attributes and Categories to organize and represent your online store’s information just like the owner of a brick and mortar store would. On an online store, a vast array of very different products is ultimately reduced to a grid of boxes with titles.
Attributes and Categories in Magento
In Magento’s admin dashboard, Product Attributes are defined in Stores » Attributes » Product. The easiest way to think of an attribute is as the type of information that you might look for on a product’s box. If you were purchasing light bulbs, for example, you would want to know the bulb’s brand, technology, socket type, brightness, and color. If the labels on light bulb boxes are clear, then they are simpler to compare with other boxes and easier for a customer to select for purchase. Generally, the more information the better.
By default, Magento provides many useful attribute types. The most commonly used attribute type is a list of options that are presented as a dropdown menu when a product is added to the Magento admin dashboard. A good example would be the light bulb’s socket type, with options like “Bayonet, Bi-pin, Edison, and Flanged.” An attribute like this would most likely appear on the front end as checkboxes of which one or more may be selected, allowing the customer to filter available options.
This product attribute is defined as a dropdown in the dashboard. The options appear as checkboxes for filtering on the storefront.
Product Categories are defined in Catalog » Inventory » Categories. The most basic application of categories is to construct the main navigation menu for your Magento site. In a standard Magento store, the navigation menu is made up of the subcategories assigned to the default root category (with the ID of “2”). In most stores, the sub-subcategories become dropdown menus or “mega menus” of the main categories.
The category structure is used to define the main menu on most storefronts.
Just as one product might appear on multiple shelves in a store to suit customer needs, any product can be assigned to multiple categories. This is especially likely in the case of promoted or sale items.
It pays to put a lot of thought and effort into defining attributes for the products in your store. This can be time-consuming, but the good news is that Magento includes a useful feature that can make the work you put into attributes streamline the process of creating categories. You can create smart categories that automatically populate with products matching a defined set of rules, including product attributes.
In order to be used for smart categories, a product attribute needs to meet the following criteria:
- While defining the attribute in Stores » Attributes » Product, navigate to the Storefront Properties tab and make sure that Use in Product Listing is set to Yes.
- In Stores » Configuration » Catalog » Visual Merchandiser, select the attributes that you would like to use in smart categories.
The Visual Merchandiser settings determine which attributes can be used for smart categories.
Now, when defining categories, you can create a smart category by setting Match Products by Rule to Yes in the Products in Category accordion tab. Products are then added to the category by applying one or more rules, which can include attribute values.
In the above example, We’ve created a category that includes all products with a value in the Baudrate attribute. To do this, we’ve created a rule that only selects products with a Baudrate value that is not equal to “xylophone.” Since no such value exists in the Baudrate attribute, all products with the attribute applied are placed in the category. It’s a little bit like reverse psychology. Quick, don’t think about your mom! Of course, it’s perfectly possible to create narrower categories that include only particular attribute values instead.
Extending Magento’s Attribute Capabilities
The more products an online store has, the more heavily it will rely on attributes to help users filter down to the exact products that they want. Magento’s native attribute capabilities are quite robust. Shero client Neteon, for example, has a catalog of over 7,000 products. On the surface, many of the products look practically identical to one another, so Neteon uses nearly 200 attributes to help customers find what they want. It does this using Magento’s out-of-the-box functionality, with a little presentation help from the Ultimo theme.
For stores that need more, the Magento marketplace has some great extensions that can improve on Magento’s capabilities. One of our favorites is Improved Layer Navigation by Amasty. This powerful module adds all kinds of useful features, for example:
- Adding filterable navigation to multiple areas of the site, such as horizontal filters at the top of category pages.
- Adding new filter types, such as visual swatches and sliders.
- Adding groups to attributes with a large number of values.
- Advanced filtering by category as well as an attribute.
Shero client Primitives by Kathy uses Improved Layer Navigation for navigating its massive catalog of over 17,000 products. One of the module’s really useful features is the ability to create a single “Shop All Products” page that displays the store’s entire available catalog, which can then be narrowed down using Improved Layer Navigation’s impressive Ajax-based filtering tools.
By placing a list of all product types on the left of the product grid and a horizontal menu of filterable attributes at the top, Primitives by Kathy allows customers to quickly narrow their search down to a specific set of products out of the vast catalog. The filtering takes place with blazing speed, and without refreshing the page.
Filtering options are elegantly reduced to values that are relevant to the current criteria.
Tips For Maximizing Product Layout on the Navigation
Now that we’ve explored some possibilities for using and extending Magento’s category and attribute features, let’s wrap up with a word on best practices. How can you provide the best possible experience for your customers?
1. Invest in Attributes
The attributes assigned to your products are the single most important factor in helping customers to find what they need quickly. Product names, descriptions, images and categories all play a role, but unless your catalog is very small, the purchased product will almost always be located based on its attribute values. Take the time to understand all the information that customers might rely on to compare your products and make sure that your attributes are both comprehensive and accurate.
2. Use Attribute Groups
Magento has included a useful feature that allows you to create multiple groups of attributes and assign them to different types of products. For example, a light bulb is going to have a different set of basic attributes than a lawnmower. By creating multiple attribute sets, the store administrator can not only streamline the attribute management process but can also more accurately prioritize attributes within each group. In our experience, this is an underused value of Magento.
3. Get To Know the Storefront Properties
When creating an attribute, take a careful look at the Storefront Properties tab and make sure that you understand the purpose for each option. These options determine where a given attribute appears in the (both back end and front end), and under what conditions. Taking the time to research and understand each option will save headaches for the store administrator and will facilitate a better experience for the customer.
4. Don’t Reinvent the UI Wheel
On the desktop, visitors expect to see product filters in a sidebar and sorting options at the top of the page. At mobile size, visitors expect to see both at the top of the product grid. Most themes provide this layout by default. While Magento offers endless options for customization, it’s usually best not to stray too far from users’ expectations, thus adding an unnecessary learning curve to their shopping experience.
5. DO Rethink the Mega Menu
While mega menus can be designed well and used effectively for stores with a large number of products, they can also overwhelm customers by providing too many choices at once. Often, a curated experience that guides customers toward an ideal purchase is more effective than a visual buffet that tries to display all the store’s offerings in one small space. A mega menu can distract the visitor from all the hard work you’ve put into promoting products on your homepage. Also, since the market is increasingly dominated by mobile shoppers, the development of mega menus can take valuable resources away from the development of an excellent experience on smaller, touch-based devices. So while mega menus do certainly have their place, they may easily be overused.
If you are hoping to launch a Magento 2 store or improve the profitability of your current one, be sure to take its basic organization of Product Attributes and Categories into account. The better you understand the shopping behavior of your customers, the better you’ll be able to use categorization and attributes to help them find what they’re looking for.