How to add new attributes in Front from Shopware 6 Categories and Products

An online shop aims to fulfill the main goal of being the best provider of products, to have the largest reach possible, and more importantly to meet all the requirements of customers so that the procedure of selection and purchase of products is straightforward and safe.

To achieve all this, a system must be provided that is user-friendly and contains all the information of the wards of that shop, the products it offers, and all the specifics of each product category.
For easier and more structured implementation and administration of a shop, all pages and their content are preferably integrated into categories. Then these pages and content will be accessible to the client through navigation menus, links to send a certain URL, etc.

For a basic structuring of categories, it is preferable to start from an entry point which is usually Home, then from that point, other categories, subcategories, etc. can be added.
For each category, some necessary attributes must be configured in order to get a page running in the most functional and practical way.

By clicking on each category in the name, we will be shown some tabs, depending on what they are specified for.
The General tab provides the most general information of a category, such as: category name, status (active / in-active), tags (in case they will be used to contain a certain condition), category type (Page / List, Structuring element / Entry point, Link). In the section on Navigation we will be able to configure whether or not the selected category is the entry point for main navigation. The settings menu includes the part that the selected category is hidden in the navigation, or is represented by a display image which we can upload together with a certain description.
In addition to the data provided in this form in the General tab, we can add custom fields which we can create ourselves based on a specific concept that we want to add to that particular category.
Each category can have several products that we desire. These products can be placed in the second Products tab in the Product assignment section. The product placement type can be either manual selection or dynamic product group. With manual selection we can select the products that we want to be assigned and that will emerge in front of the category, while with dynamic product group the products are grouped based on the order that we have already specified.
Categories can be displayed in the storefront in the main navigation menu, in the footer or even in the sidebar navigation.

As for the products, they also have a dedicated part in the administration of Shopware 6, to configure any necessary attributes.
The general part contains basic product information such as product name, manufacturer, product number, description, product promotion, prices (tax rate, gross and net price, etc.), deliverability, visibility, and structure (where we define the sales channels in which the product will be displayed), categories in which this product can be found, and media (product photos which can be numerous).
In the product specifications part, we can give the product values for width, length, weight, selling unit, scale unit, packing unit, among other details. Furthermore, for all products in the shop, we can create properties that products may contain – size, color, material, etc. These properties can have various colors or values of different alphanumeric and even appear as a dropdown menu. For each product, we can register the properties of the product, and later display them in the storefront.

As a front-end developer, adapting to the specific design of the shop or even adding a piece of my creativity is an inevitable part of the job. Therefore, in both categories and products I can add and display other additional attributes that are required by the client, or are considered mandatory by us software developers.
In the category, I try to make navigation as easy as possible in functionality, and also give an overall simple look. Moreover, I can add further elements by placing a representative photo of the subcategory or any other front effect, when clicking or activating the category, the very moment the user is selecting something.
I also prefer the products to contain all the necessary information that customers need to get from any desired product. The product detail section is preferably divided into two parts where the first part includes product pictures, while the second part product information provides the name, product number, general characteristics of the product represented by properties (color, size, age, material, weight, length, width), buttons for counting the quantity for purchase, the fulfillment of the purchase, information of the brands that support that purchase, details for the delivery of the order, etc. As additional elements, we can set a dropdown menu to choose which type of payment the customer will select (this can be implemented by adding advance payment methods), or whichever mail delivery account the customer prefers.

At the bottom of the product, it is preferable to display a paragraph with a more detailed description, or show reviews of the product from previous consumers.
Correspondingly, in case it is considered necessary for a product to have a more specific template than the basic one of Shopware 6, we can use another system that is offered in Custom products. In this part, we can develop a template with our preferences, in order to present the product in the shop that we are developing, and then assign that template to any product we want.

In case the new properties we want to add exceed the possibility offered by the Shopware 6 system, we can implement these properties in the basic structure of the inherited file, with the programming language used in the implementation. Changes to the front of the element can be made with the dedicated code implementation in Shopware 6.
The elements of the shop which can be included with the combination of products and categories are, cross-selling, navigation in the type of filtering on the sidebar of the product catalog, and many other elements which are created based on creativity and various needs.

If you want to know more about e-commerce development platforms or apps, read our blog posts for Shopify and Shopware. Our dedicated outsourcing team can be your collaborator in ecommerce.