Learn Prestashop 1.7

Prestashop is lightweight, SEO friendly E-Commerce platform for large Online Stores!

• Last Updated: 01/03/2020
• ( 17 minutes reading )

What is product's attributes and how to configure those

Introduction

Imagine that as a shop owner, you have different versions of the same product. Take for example an iPhone. If you are selling the phone then it probably has 2 or 3 variants of the product like for example the colors or even the versions it has - 64 and 256 GB. Since those are sharing the same product but with different specifications, you need a way to create a separate product from the original at different prices.

 

As we already explained in another tutorial this is achievable with the “Product Combinations”, however, to create such you will need to first define the available attributes which the combinations of a product will be based upon. In the next few lines of this tutorial, we will get you familiar with the Product Attributes and we will teach you how to manage those!

 

Step 1: Accessing the Attributes page

When you login to the PrestaShop admin area, go to the admin panel on the left vertical navigation menu and look for the “Catalog” option. After you find it, please, click on it. A drop-down menu will appear with a lot of options, such as: “Products”, “Categories”, “Monitoring”, “Attributes and Features” and so on.

 

Accessing attributes and features menu

 

Finally, please, click on the “Attributes and Features” link to access the page where you will be managing all the existing Attributes.

 

Step 2: Introduction to the interface of the “Attributes” page

When you click the “Attributes and Features” link you will be redirected to a page called “Attributes”. There you will be provided with a conveniently structured table view of all the already created attributes and the values for each one of them in your Online Store.

 

Attributes page overview

 

If you click on any attribute you will be presented with a new table view. This time, however, it will contain all the values that are already set for this particular attribute.

 

Accessing an attribute

 

For example, if you click on the “Color” attribute, you will see all the available colors that can be used for the generation of product combinations based on Color.

 

As you can see the table with all the attribute values have few fields but the main ones that will be shared among all attributes’ values are:

 

  • Id
  • Value
  • Color
  • Position

 

and a final column that you may consider as “Available Actions”.

 

Attribute's value overview

 

The first column - Id basically is basically the id of the attribute in the database of Prestashop. The “Color” column shows all the colors that the product is available. The next column is called “Position”. PrestaShop allows you to change the attributes position by moving the attribute up or down. Depending on the ordering you would like the attributes to be displayed in, you can move them up or down.

 

Ordering product attributes

 

Basically, that is pretty much all of the information with the table view about the existing

attributes. Let’s move with the other options that the attributes page has to offer.

 

Step 3: Make a combination based on existing attributes

The attributes in PrestaShop allow you to create different combinations of the products based on existing attributes. Creating combinations based on the existing attributes actually provides you with the chance to set different prices for the products, based on their sizes, colors, materials and so on. To learn how to make combinations based on the existing attributes, please, check out our other tutorial “How to add products in PrestaShop 1.7”.

 

Step 4: Create New Attributes

If you want to create a combination of a product, the attributes are the basis of the product combinations. You should think of attributes as properties of a product that may change between variations, while still keeping the same product name: color, capacity, size, weight, etc. You can use anything that varies between versions of the same product, except the price.


Let’s continue by creating a new Attribute. To do that, please click on the “Add new attribute” button positioned on the top-right of the page.

 

Adding new attribute

 

Once you click on the “Add new attributes” button, you will be redirected to a new page, which is called “Add new attribute” respectively. On that page, you will be asked to fill in only 2 fields and to select an option from one drop-down list.

 

Add new attribute page overview

 

The required information on the “Add new attributes” page is as follows:

 

  • Name” - The name of the attribute. This needs to be short but precise, so as to not confuse it with another attribute.
  • Public name” - This name will be displayed to the customers on the product page.
  • Attribute type” - The drop-down menu enables you to choose whether the product's page should display this attribute values as a drop-down list, a radio button list, or a color (or texture) picker.

 

Once done filling out the required fields, please click on the Save button so the attribute you are adding can be saved.

 

Saving new attribute

 

Once PrestaShop saves the new attribute for you, you will be redirected to the main attributes page once again.

 

Step 5: Create a new Value

Since you had created the new attribute, it is time to add new value as well. To be able to do that you have to click on the “Add new value” button on the top-right of the page.

 

Add new attribute value

 

You will be redirected to a page called “Add New Value”. There you will be provided with very few options to fill out.

 

New attribute value page overview

 

The required fields are as follows:

 

  • Attribute group” - Please, make sure that you will choose the actual attribute for which you will be creating this value.
  • Value” - This field represents the name of the value (for instance for Color, it may be Pink, Green, etc.). Please, bear in mind, that you can see all the values that you added when you click the “View” button for the needed attribute in the main “Attributes” page.
  • Color” - In case your attribute is a color, you can set up the required color. You can choose from the color picker board or insert the hex code of color (for instance “#CC6600”).
  • Texture” - The “Texture” allows you to upload an image to define the texture or type of your product. This image will be displayed on a product page.

 

Please, bear in mind, that by uploading an image, this will override the color code entered previously.


Once you are done filling out the required fields, please, click the  ‘Save’ button at the bottom-right corner of the page.

 

Saving new attribute values

 

You can also continue creating more values for the same attribute type by clicking on the “Save then add another value” button.

 

Save the attribute and add another value

 

After done filling the required fields, you can return to the main attribute page. If you want to see the values for the attribute you have just created, please, click on the “View” button for the specific attribute.

 

Step 6: Manage Existing Attributes

Managing the attributes of your Online Store is very simple - with just a few clicks. since you already know how to add an attribute, the remaining actions for finalizing the management of product attributes are Editing and Deleting an attribute. You can find both of these actions next to every attribute, on the right side, in the table view of the “Attributes” home page. If you click on the  “View” drop-down menu for each attribute the actions will appear immediately.


Let’s start with the first option - “Edit” an attribute. As explained already you have to click the “View” drop-down button, which is on the right side of every attribute in the table view.

 

Edit attribute value

 

When you click the arrow from the drop-down menu, you will see two options that will appear immediately: “Edit” and “Delete”. Please, click the “Edit” option. That action will redirect you to a page that is exactly the same as the page for adding an attribute. However, the only difference now is that all the fields will be already filled out.

 

Edit attribute value interface

 

When you are done editing the attribute simply press the “Save” button at the bottom of the page so your changes can be saved and you will be brought back to the categories home page.

 

Saving attribute value

 

If you want to delete an attribute, please click the same drop-down menu button, from the main “Attributes” page, but this time from the two options that appear, click the “Delete” option.

 

Delete existing attribute

 

Once you click it, a dialog box will appear. There you will be asked if you want to delete the selected items.

 

Confirm attribute deletion

 

Please, click the “Ok” button to actually delete the attribute.


Pretty much, these are all the available actions when it comes to managing attributes. Now, as you probably noticed in the main “Attributes” page, right above the structured table, there is one more tab called “Features”. You can find out more about Product Features and how you can manage them on our other tutorial “What is Product’s Features and how to configure it?


Congratulations! Today you learned what is the meaning of an attribute, how is it different from features, how to add those and how to configure them.

...
Simeon
System Administration & Network Operations Captain

Simeon is an experienced System Administrator with over 10 years of experience in the Web Hosting field. He is recognized unanimously as the man behind every technical innovation or improvement that HostArmada introduces. Adaptable and responsible, he solves every technical issue that we or our clients throw at him. Every so often you will find him publishing technical content on our website.