The Product Attributes section shows how an attribute can be handle in the product catalog. It describes its behavior and appearance. In GrandNode product attributes are used to describe a specific characteristic of the product like size, color, capacity. Product attributes are also used to create Attributes Combination that can have independent SKU, stock quantities, and prices.
Before you will be able to use the product attributes, you will need to create them.
In GrandNode you can find a few different types of product attributes:
- radio buttons,
- drop-down list,
- read-only checkboxes,
- multiline textboxes,
- date pickers,
- file uploaders,
- color squares,
- image squares.
Before we will be able to assign a product attribute to the product, we have to create it.
1. Go to Admin panel -> Catalog -> Attributes -> Product Attribute, by pressing Add new button.
2. Enter a Name, optional Description, and Search Engine Friendly Name for your attribute. If you want, you can also jump to the Predefined values tab and specify predefined attributes for it.
3. The rest of the things related to the product attributes configuration are available during product creation.
Before the start, you would need to think about the consistent naming convention. To avoid the situation that different systems will consider your attributes wrong, it's important to keep consistency in your store. For example Color: Green, Color: Red. Sometimes, Color: red, may be treated as a totally different attribute, so keep it in mind!
Consider if you should use the product attribute or specification attributes. Product attributes are used to describe the characteristic that can be used in generating product combinations like Shoes in Red color and Size 42, where specification attributes are used to filter product and describe product features - like Material: Cotton.
If you want to add existing product attributes to your product, you would need to edit the product, go to the Product Attributes tab, and press Add new attribute button.
The example presented on the screen above will result in the following appeared on the frontend:
What's important, you can customize the appearance of the product attributes. Remove the typical HTML inputs, radio buttons and replace them with customized, styled modern ones. Please look at the example coming from one of our premium themes:
What's worth to mention, product attributes can be shown also on catalog pages. It's a very common practice in apparel stores, where sizes of clothes are visible on the category page. You can easily achieve it with GrandNode built-in features.
All you need to do is create a product attribute, provide its search engine friendly name, and mark the Show on catalog pages checkbox during the attribute creation on the product. Furthermore, if the customer selects a specified attribute, he will be redirected to the product page with the already chosen product variant. With a little help from the developer, you are able to handle add products to the shopping cart with chosen attribute.
1. Go to Admin panel -> Catalog -> Products -> Edit product
2. Jump to the Product Attributes tab
3. Attribute drop-down field contains all product attributes created in your store. Choose the one that suits you.
4. Text prompt field is used to replace the Product Attribute name, if necessary. It's an optional field.
5. If you want to create a required attribute, you would need to change the Is Required field value to True.
6. If you want to show the attribute on the catalog page, it's described above, change the Show attribute on the product catalog pages to True.
7. Under the Control Type field you will be able to find all types of attributes that can be created, choose the one that suits you.
8. Display order field defines the order in which the attribute is displayed.
9. Save changes and jump into the View/Edit Values page.
10. On the new page press the Add new value button.
11. Under the Attribute value type field you will find the type of value if it's a simple attribute like Red for Color or 42 for Size, or it's a value associated with an independent product.
12. Enter the main name for the Value in the Name field. It will be visible for customers on the frontend.
13. Price adjustment field is used to add an additional fee to the price of the product.
14. Weight adjustment field is used to add additional weight to the product weight.
15. Cost is a field to internal use, which defines the whole cost of the chosen attributes, it may refer to the price of the purchased components.
16. If you want to select this value as default, you should change the value of the Pre-selected field to True.
17. Display order field defines the order in which the value is displayed
18. If you want to change the product picture when the user selects this value, choose it from the list.
When you create the product attribute, you are able to generate attribute combinations.