Menu
Feedback
Start here
Tutorials


Creating or editing categories, attributes, and variations (Beta)
17 min read

This feature is in beta, which means that we are working to improve it. If you have any questions, please contact our Support.

In the VTEX Admin, under Catalog > Categories, you'll find the page for managing your store's category tree. This article guides you through creating and configuring categories, attributes, and variations. It's divided into the following sections:

Once a category, attribute, or variation is created, it can't be deleted; only edited, deactivated, or hidden in the interface.

Terminology

In the beta phase, we'll use a new name for the following terms:

Current nameBeta name
Product specificationsAttributes
SKU specificationsVariations
Groups (of product specifications or SKUs)Groups (of attributes or variations)

Interface overview of categories, attributes, and variations

In the VTEX Admin, when you go to Catalog > Categories, the interface by displays Categories and Attributes by default, as shown in the image below:

{"base64":"","img":{"width":1089,"height":747,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":86304,"url":"//images.ctfassets.net/alneenqid6w5/7436dJLF4YzoYkjrm6GBfM/fe467645e777cf8e5cbdc1e5e596390c/category_attributes_EN.png"}}

On this page, you can view information and perform the following actions:

  • A - Search category: After adding categories, you can use the search bar to search for the desired option by name.
  • B / C - Create category: You can add a new category by clicking the + icon next to the search bar, or by hovering over All products and clicking the + icon that displays.
  • D - Hide categories: You can hide the list of categories by clicking the icon at the top of the page next to the name of the page category.
  • E - Create subcategory: When you hover over the name of a category, the + icon displays, allowing you to create a nested category, which is a subcategory.
  • F - Edit category: When you hover over the name of a category, the vertical ellipsis displays, allowing you to edit the category.
  • G - Inherited attribute: The share icon displayed next to an attribute indicates that it has been inherited as a category setting applied to All products. Subcategories have all the attributes configured in the parent category, so they "inherit" these configurations.
  • H - Attribute status: An attribute can be active, indicated by a green circle, which means it's enabled and can display on the storefront. If inactive, it’s represented by a white circle.
  • I - Type of attribute: The icon next to the attribute name represents the attribute type, which can be "Free text", "Large text", "Single selection", or "Multi selection".
  • J - Edit attribute: After adding an attribute, you can edit it by clicking the pencil icon on the row of the desired attribute.
  • K - Add attribute: You can add an attribute by clicking the + icon in the attribute group name.
  • L - Hide inactive attributes: You can hide inactive attributes in the interface by clicking the eye icon .
  • M - Add group of attributes: You can create a group of attributes by clicking the + icon at the top right of the page.
  • N - Edit category: You can edit the selected category by clicking the vertical ellipsis at the top right of the page.
  • O - Select option: When accessing the Categories page, you can choose between viewing their Attributes (related to products) or Variations (related to SKUs).

Selecting the Variations option displays an interface like the one shown below:

{"base64":"","img":{"width":1089,"height":702,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":60541,"url":"//images.ctfassets.net/alneenqid6w5/5XX38yXs6AkibrvpWqXODV/0a0418f43b503e6fb16913ee28c4ef40/category_variations_EN.png"}}

On this page, you can view information and do the following:

  • P - Variation status: A variation status can be active, indicated by a green circle, meaning that it has been activated to display on the storefront, or inactive, indicated by a white circle.
  • Q - Type of variation: The icon next to the attribute name indicates the variation type, which can be "Single selection" or "Multi selection".
  • R - Add variation: You can add a variation to a group by clicking the + icon in the group name.
  • S - Hide inactive variations: You can hide inactive variations in the interface by clicking the eye icon .
  • T - Add group of variations: You can create a group of variations by clicking the + icon at the top right of the page.
  • U - Edit category: You can edit the selected category by clicking the vertical ellipsis at the top right of the page.
  • V - Edit variation: After adding a variation, you can edit it by clicking the pencil icon on the row of the desired variation.

Actions on categories

In the Admin VTEX, go to Catalog > Categories, or type Categories in the search bar at the top of the page. The category editing interface is always displayed on the left, whether you select Attributes or Variations.

Category actions include:

When a category is added, it can't be removed, only edited or deactivated.

Adding categories

To create a category, follow the steps below:

Once a category has been created as a parent category, it can't be edited as a subcategory. The same rule applies to subcategories, which can't become categories or change their parent category.

  1. In the left corner of the page, next to the search bar, click the + icon, or hover over All products and click the + displayed. You can also click the + icon next to the category name.
  2. In the modal displayed, enter the category name. This is the only required field.

The category name is crucial for SEO (Search Engine Optimization), so we recommend the following:

  1. If you want to activate the category you're creating, select the checkbox Active. To keep it deactivated, leave the option unchecked.

  2. In the Basic information section, complete the following fields:

    • Parent category: If the category you’re creating is a subcategory (for example, nested under another category), enter the numerical code of the parent category it belongs to.
    • VTEX global category: The global category is a taxonomy created by Google for the Merchant Center, predefined as a single tree on the VTEX platform.
  3. In the Storefront and SEO section, complete the following fields:

    • Similar words: Synonyms of the category names. Use this field to improve the coverage of search results. You can add multiple words, separated by commas, up to 200 characters.
    • Page title: Text displayed in the browser tab that corresponds to the title of the category page on the site. This field is crucial for SEO, as it doesn't allow HTML tags and must contain up to 150 characters.
    • Description: Brief summary of the category. We recommend using up to 200 characters, so that search engines display the description correctly on the results pages. The field only supports plain text and doesn't allow HTML tags.
    • Store search priority: Integers used to define the category's priority in search results. The highest value means the highest priority in the results, and the value zero or the field left blank means no priority. Learn more in the article How the score field works.
  4. In the Storefront section, you can check any of the following options:

    • Show on menu: Makes the category or department visible on the store's top and side menus.
    • Menu with active link: Determines whether the category visible in the store is clickable, which redirects to a category page.
    • Brand filter: Defines whether the category or department page should display the option to filter by brands.
  5. In Product display mode, you determine how the SKUs of the products in the category will be displayed in the store product listing page. You can choose the following options:

    • SKU list: Items organized in a list format. If you don’t choose another option, this one will be used by default.
    • Combo boxes: Items selected from combo boxes.
    • Radio selection icons: Items selected from a list where you can select a single item at a time.
    • Follows the variation setting: The product presentation follows the configuration at the SKU level, for example, defined by the variation.
  6. Click Create.

Once this is done, the confirmation message "Category created successfully" will be displayed.

Editing categories

To edit a category, follow the steps below:

  1. Hover over the desired category and click the vertical ellipsis menu .
  2. Click Edit category.
  3. Edit the information you want.

The following configurations can't be edited:

  1. Click Apply.

Once this is done, the confirmation message "Category updated successfully" will be displayed.

Searching categories by name

Once you've created categories, you can find them using the search bar indicated by the magnifying glass icon . The search only considers the names of categories and subcategories.

You can use a shortcut for this search. By pressing the / key, the cursor moves to the search field to enter the name of the desired category.

Hiding categories

On the Categories page, you can hide the list of categories by clicking the icon next to the category name at the top of the page. To display the list of categories again, click the same icon.

Actions on groups of attributes or variations

In Catalog, a group is a set of related attributes or variations. To manage your groups, go to Catalog > Categories and select Attributes or Variations. The possible actions for groups are:

Every group created on the Attributes page is reflected on the Variations page, and vice versa. However, each group only displays the attributes or variations configured in it, which are displayed based on the selected page.

Adding groups

To create a group, follow the steps below:

  1. At the top of the Attributes or Variations page, click the + icon.
  2. Enter the group name, up to 100 characters.
  3. Click outside the text area to view the Save button.
  4. Click Save.

Once this is done, the confirmation message "Category group saved successfully" will be displayed. The group will be automatically listed in alphabetical order after being added.

To learn how to add attributes to a group, go to Adding attributes, and to learn how to add variations to a group, go to Adding variations.

Editing groups

You can edit a group by changing its name,including attributes or including variations, as will be explained in the following sections.

To rename a group, follow the steps below:

  1. On the Attributes or Variations page, double-click the name of the desired group.
  2. Edit the name.
  3. Click outside the text area to see the Save button.
  4. Click Save.

Once this is done, the confirmation message "Category group saved successfully" will be displayed.

Identifying groups and inherited attributes

When a group of attributes is created in the parent category, it becomes mandatory for all subcategories, so we say it's an "inherited" group.

In the Attributes interface, you can identify groups and inherited attributes by the share icon, located to the left of the name, as in the image below:

{"base64":"","img":{"width":1212,"height":369,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":32229,"url":"//images.ctfassets.net/alneenqid6w5/5nmtuQ4WLDd95101bFo3vq/49808ee4f19506367fed4f66f5ae172d/inherited_atribute_EN.png"}}

To learn about attribute status, see the section Viewing attribute activation status and values.

Actions on attributes

In beta, attributes is the terminology for what used to be called product specifications — the informative properties that can be added to products. In Catalog > Categories, the Attributes page allows you to:

To view its interface, see the section Interface overview of categories, attributes, and variations.

Adding attributes

To add an attribute, follow the steps below:

Once an attribute has been added to a group, it can't be removed; it can only be edited, deactivated, or hidden in the interface. The attributes' type can't be edited.

  1. On the Attributes page, after you've added a group, click the + icon next to the name of the group you want, or click the down arrow next to the name of the group and then click Add first attribute.

  2. Click the type of attribute you want:

    • Free text: Character-free typing, suitable for short text. The field doesn't support HTML tags. Example: Description of ingredients.
    • Large text: Character-free typing, suitable for longer text. The field doesn't support HTML tags. Example: Size charts for fashion stores.
    • Single selection: There are two or more predefined values, but you can select only one. Example: Shoe sizing, using values such as 34, 35, 36, etc.
    • Multiple selection: There are at least two predefined values, and you can select multiple options. Example: Gender for which a product is intended, which can be a combination of Male, Female, and Unisex.
  3. In the side drawer, complete the title field with the attribute name. This is the only required field.

  4. If you want to activate the attribute you're creating, select the Active checkbox. To keep it deactivated, leave the option unchecked.

  5. In Settings, complete the following fields:

    • Required: Select this checkbox to make the attribute required. Leave it unchecked to keep it optional. If the attribute is required, the product can only be activated once the field is completed.
    • Default value: Common value for the attribute. Example: In a t-shirt store, the default value for the "material" attribute is "cotton", the most commonly used type.
    • Description: Description of the attribute and its values.
  6. In Storefront, all the fields refer to the customers' shopping experience, and you can select the options you want from the following:

    • Show specification: Determines whether the attribute is displayed on the storefront.
    • Use as filter: Defines whether the attribute can be used as a filter in the product search.
    • Top menu link: Defines whether the attribute is displayed as a clickable link in the top menu of the site.
    • Side menu link: Defines whether the attribute is displayed as a clickable link in the site's side menu.
  7. Click Create.

Once this is done, the confirmation message "Attribute created" will be displayed.

Editing attributes

To edit an attribute, follow the steps below:

  1. On the Attributes page, hover over the name of the attribute you want to edit and click the pencil icon that will be displayed.
  2. In the side drawer, change the attribute settings as desired. For more information on Settings or Storefront, see the section Adding attributes.

The attribute type is the only setting that can't be changed.

  1. (Optional). This step doesn't apply to the Free text and Large text attribute types. However, for Single selection and Multiple selection, there's the Values section, in which you determine the exact values for the attribute.

    • 3.1 To create a value, click the + icon, or click the down arrow next to Values and select Add first value.
    • 3.2 Enter the text of the value and then click somewhere on the screen outside the value row.
    • 3.3 The value is created as active, identified by the green icon next to the name. To deactivate it, leave the Active checkbox unchecked.
    • 3.4 The values are displayed in the order they were created. To change a value's position in the list, click the icon to the left of the attribute value name and drag it to the desired position.
  2. Click Apply.

Once this is done, the confirmation message "Attribute updated successfully" will be displayed.

Viewing attribute activation status and values

Both the attribute and its values can have two possible statuses, as shown in the table below:

StatusAttributeAttribute valueIcon color
ActiveThe attribute can be reflected on the storefront, displaying only the activated values.The attribute value can be reflected on the storefront if the attribute itself is active.🟢 Green
InactiveThe attribute isn't reflected on the storefront, regardless of the value status.The attribute value isn't reflected on the storefront, regardless of whether the attribute is active.⚪ White

To activate or deactivate an attribute or its values, see the section Editing attributes.

For more information on the icon that can be displayed next to the attribute's status, see the section Identifying groups and inherited attributes.

Hiding inactive attributes

A created attribute can't be deleted from your catalog, but you can hide it from the interface after deactivating it.

To do this, at the top right of the Attributes page, click the eye icon to Hide inactive attributes. To display the inactive attributes again, click the same icon.

Actions on variations

In beta, variations is the terminology for what used to be called SKU specifications — the SKU options in which products could be purchased. In Catalog > Categories, the Variations page allows you to:

To view its interface, see the section Interface overview of categories, attributes, and variations.

Adding variations

To create a variation, follow the steps below:

Once a variation has been added to a group, it can't be removed; it can only be edited, deactivated, or hidden in the interface. The variations' type can't be edited.

  1. On the Attributes page, after you've added a group, click the + icon next to the name of the group you want, or click the down arrow next to the name of the group and then click Create first variation.

  2. Click the desired type of variation:

    • Single selection: There are two or more predefined values, but the customer can choose only one option. Example: The appliance's voltage is 110V or 220V.
    • Multiple selection: There are two or more predefined values, and the customer can choose more than one option. Example: Defining the colors of a product (red, yellow, blue and/or black).
  3. In the side drawer, complete the title field with the name of the variation. This is the only required field.

  4. If you want to activate the variation you're creating, select the Active checkbox . To keep it deactivated, leave the option unchecked.

  5. In Settings, complete the following fields:

    • Required: Select this checkbox to make the variation required. Leave it unchecked to keep it optional. If the variation is required, the SKU can only be activated once it's completed.
    • Default value: Common value for the chosen variation type.
    • Description: Description of the variation and its values.
  6. In Storefront, all the fields refer to the customers' shopping experience, and you can select the options you want from the following:

    • Show specification: Determines whether the variation is displayed on the storefront.
    • Use as filter: Defines whether the variation can be used as a filter in the product search.
    • Top menu link: Defines whether the variation is displayed as a clickable link in the top menu of the site.
    • Side menu link: Defines whether the variation is displayed as a clickable link in the site's side menu.
  7. Click Create.

Once this is done, the confirmation message "Variation created successfully" will be displayed.

Editing variations

To edit a variation, follow the steps below:

  1. On the Variations page, hover over the name of the variation you want to edit and click the pencil icon that will be displayed.
  2. In the side drawer, change the variation settings as desired. For more information on Settings or Storefront, see the section Adding variations.

The variation type is the only setting that can't be changed.

  1. When editing, the Values section determines the predefined values for the variation.

    • 3.1 To create a value, click the + icon, or click the down arrow next to Values and select Add first value.
    • 3.2 Enter the text of the value and then click somewhere on the screen outside the value row.
    • 3.3 The value is created as active, identified by the green icon next to the name. To deactivate it, leave the checkbox unchecked.
    • 3.4 The values are displayed in the order they were created, which is reflected on the storefront. To change a value's position in the list, click the icon to the left of the name and drag it to the desired position.
  2. Click Apply.

Once this is done, the confirmation message "Updated attribute successfully" will be displayed.

Viewing variation activation status and values

Both the variation and its values can have two possible statuses, as shown in the table below:

StatusVariationVariation valueIcon color
ActiveThe variation is reflected on the storefront and only displays the activated values.The variation value can be reflected on the storefront if the variation itself is active.🟢 Green
InactiveThe variation isn't reflected on the storefront, regardless of the value status.The value of the variation isn't reflected on the storefront, regardless of whether the variation is active.⚪ White

To activate or deactivate a variation or its values, see the section Editing variations.

Hiding inactive variations

A created variation can't be deleted from your catalog, but you can hide it from the interface after deactivating it.

To do this, at the top right of the Variations page, click the eye icon to Hide inactive variations. To display them again, click the same icon.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Creating Collections (Beta)
« Previous
Store Overview (Beta)
Next »
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page
Still got questions?
Ask the community
Find solutions and share ideas in the VTEX community.
Join our community
Request support from VTEX
For personalized assistance, contact our experts.
Open a support ticket
GithubDeveloper portalCommunityFeedback