Page status: Up to date | Application version: From 1.3.5.4

Create & edit category

Before creating any product, you have to create the category where that product will be displayed.
The most important and the only mandatory field in creating a category is its name. You can assign an image or even an icon to that category, as well as a description, but all these are optional.
The name of categories are the ones which will build the navigation menu for all your products.
The categories are built as side bar menu and this menu is dedicated to products classification only.

The category tree allows an unlimited number of categories and you can create unlimited numbers of subcategories (branches), but you should keep it simple for your customers. The categories tree should be practical.
Also, your customers will expect to see more than one product per category. Keep the number of your categories at minimum.

Note:
Any category to appear in FRONEND should have at least one product to display.
The empty categories will not be displayed in FRONTEND.

All categories will be managed from this area in exclusivity. Here you can create categories or subcategories and you can edit any of existing categories.
To edit or create a category you should be in Categories list. Click Categories option under the Products in left side menu.

All field in this area are automatically saved once you leave the field, except the text editor which require save from the green SAVE button at the bottom left of the editor.
The saved fields will turn light green background.
Any error in saving a field will be marked by a light red background. Check the content of that field (red field) and alter it if necessary.

Add category

To add category you need to be in Categories list. Click Categories option under Products in side menu.

You can add a category as top level category. Follow the steps:
1) To add a top level category make sure that in the Categories tree selector is selected TOP option.
2) Click the Add category button on top right corner of Categories list.
3) Once you click the Add category button, the Create category window will open and ask you to input the category name.
- Input the name and click the green Save button to add the category
- Click the close button on top right to abandon.

You can add a subcategory. Follow the steps:
1) To add a subcategory make sure that in the Categories tree selector is selected the category under which the new subcategory will be added. This category can be a top category or a subcategory by itself.
2) Click the Add category button on top right corner of Categories list.
3) Once you click the Add category button, a pop-up window will ask you to input the category name.
- Input the name and click the green Save button to add the category
- Click the close button on top right to abandon.

The difference between creating a category or a subcategory is only there the option selected under the Categories tree selector.

The name of category is a mandatory field. You cannot have a category without name.
If you fail to input category name in Create category window, a warning message will be displayed. Click the Ok button or close the warning and continue with the new category.

After you press the Save button, the Create category window will close. The new created category is isolated in search to allow you easy access to it and continue editing it. See below.
To edit category click the category's icon or category's name or edit icon at the end of the row.

Note:
You can create categories with same name. Avoid this though because you will confuse your customers.

View / edit category

You can view or edit any existing category, inclusive the new created one. From the Categories list, choose the category you want to edit and click one of the following to get the View / edit category window:
- click on category's icon
- click on category's name
- click the edit icon button

Once you click on one of the above, the View / edit category will open and you can make any changes.
The View / edit category window has three collapsible areas: Basic details, Description, SEO. If you click on the name of one of these areas, the area will expand if it is closed or will collapse if it is opened. You can open / close multiple area in same time. The collapsible areas will help you to manage well your working space.

If you do not see the category you want to edit into Categories list means you applied the wrong filter or search and the list is incomplete. Release the filters and search and try now.


Window name

The window name is an informative field. It will tell you where you are. In this case is the View / edit category and follow the name of current category you are editing and the id no.

Basic details area

Category name

The Category name will have the text you input when you created the category. This name can be changed at any time, but not deleted. To change the category name, just overwrite the Category name field. The new name will be automatically saved when you leave the name field.
In case you want to change it back to initial name, copy and paste the name in window name.
Each category must have a name. It is the only mandatory field for a category.
The name will be displayed under category menu in FRONEND.


Enabled

The Enabled field refers to the status of current category. Its effect is instant.
Only enabled category is displayed in FRONTEND. If the category is disabled it will be ignored till is made enabled no matter of number of product it contains.
You can make disable an category for different reasons like: not finalized setting the category, you do not want to show the product from disabled category.

To enable a category, just choose the YES radio button.
To disable the category, choose the NO radio button.

Note:
If a category has no products (is empty) it will not be displayed in FRONTEND, no matter its status.


Show order

The Show order field is to order your categories based on this field.
Smallest number means that the category will be shown on top of the listing (FRONTEND & BACKEND).

It is recommended to use sequences of 10s, 100s and so on, because in future you may need to insert a new category between two existent ones. In this way, you do not need to reorder the categories, just assign to the new category a number in between the two existent categories numbers.

The Show order field is not mandatory.

Top bar icon

The Top bar icon will appear only if you set Yes for Use top icons categories (shortcuts - easy navigation) under the Global area in Shop Configuration -> Settings & layout.
In case you want to use the icons on top of the page to navigate between the categories you will need to use the Top bar icon to assign the icon image and set their display order.


Enabled

This field refers to enable (showing in FRONTEND) the icon.

Set Yes if you want to display the icon image in top bar icon menu (FRONTEND).
Set No if you want to the icon image to not be displayed in top bar icon menu (FRONTEND).


Show order

This Show order field is to order your icons in top bar icon menu (FRONTEND).
Smallest number means that the icon will be shown first in top bar icon menu (FRONTEND).

It is recommended to use sequences of 10s, 100s and so on, because in future you may need to insert a new icon between two existent ones. In this way, you do not need to reorder the icons, just assign to the new icon a number in between the two existent icons.

The Show order field is not mandatory.

Images

The second half or the View / edit category in Basic details area is the place reserved for images: The category image and the icon image if applicable.

A category can have assigned a category image which is referred as MAIN.
If you use the top bar icon menu, you can assign a second image which will be the icon. This image will be displayed under the Main image.

The image category is displayed in frontend in category description.
If a category has subcategories, when a user in frontend clicks on that category, the subcategories images will be displayed for each subcategory.
If the subcategories have not set an image, the first product image of each subcategory will be displayed in place of the subcategory image. In this way is avoided the no image available.

Note:
You can choose not to display any image for your categories.
To do that, set No for Show product image when category has no image under Shop configuration -> Settings & layout -> Product listing.

The top categories images are displayed only in category description (FRONTEND).


The icon image is displayed in Top bar icon menu.

Add image button

At the left of no image icon, is a light blue Add image button. Click this button to add an image and replace the no image icon.

When you click on Add image button, a pop-up window will give you two options:

  • To Upload image from your device
  • To Browse images existing on server

Upload image

Most likely that you need to upload the image of the category from your device. The image manager prompt you this option.

You have two ways to upload the image from your device:

  • Click Upload from local device red button and choose the image you want to upload: an explorer will open to assist in find the image on you device. When you find the image on your device, click on it and then click open button from your explorer.
  • Drag and drop the image into this section: Find the image on your device and drag it over the upload rectangle (where the red Upload from your local device button and surrounding area marked with a rectangle)

The system will do following operations at once if there are no uploading errors:

  • upload the image
  • will close the image manager window
  • will assign the image uploaded to current category
  • if you are working on first image of the category, it will make it automatically main image

Uploading errors

There are some restrictions for images uploaded as mentioned under the Upload from your local device button

  • File extensions allowed: jpeg,jpg,png
  • File size allowed up to: 20Mb

This extensions file are cleaner and safer (website security concern). The file size will more than enough for big nice images and will protect you against wasting the space on your server.


Browse image

If you already uploaded the image of the current category before, then you want to find it on server and assign it to this category.

Click the Browse image tab in image manager.

In Browse image tab you will find following:

  • The page title appears on top left and includes the page title Add / change image for Category: followed by the category name and its ID.

  • Showing Images only (Files are not included, see File section for files).
    Top left on Browse image tab

  • The areas where the images was uploaded. Default is showing the Product categories as your current area now. You can choose another area from dropdown menu.
    Top left second position on Browse image tab

  • The Search area where you can search the image based on its name.
    Top right on Browse image tab

  • The Images listing will be displayed under this tab, showing the first 50 images in chronological order (first image shown is the last image uploaded).

  • Show more button will display a bunch of 50 images each time you click it.
    Show more button appears on the bottom left. It appears only the Image listing has more than 50 images.

  • Show all button will display all images.
    In case you have many images (hundreds or thousands), the list may be too long and may take a while to be displayed. You may be happier with the results of Show more button.
    Show all button on the bottom left. It appears only the Image listing has more than 50 images.

  • Close button will close the image manager canceling the add image process.
    Close button is a cross on right top opposite to the page title.

Search image

Enter into the search box what you are looking for and press Enter key or click on green magnifier icon.
The system will look to match your search string in name of the images. It is an autocomplete search box, it means:
- once you start typing will be automatically shown in a drop down all available options
- you can select one of available options and click green button or press Enter key; The selected option only will be shown in listing as search result.
- or you can anytime press Enter key or click on green button and you will get in search results all images that match your search string.


Images listing

In Images listing you can sort the images by clicking one of the following headings:

  • File name alphabetical sort
  • Size ascending sort
  • Date chronological sort
  • # ascending sort

You can sort listings ascending and descending for all fields that has headers in blue with underlined text when click on it once and after that once again.


Edit file

If the thumbnail or the name of the image is not enough clear, you can edit the image to view it before deciding if it is the correct image to be assigned to the current category.

If you click on image thumbnail, image name or the edit icon in image list you will Edit image (view) that particular image.
A new pop-up image will display you the image with all three images that the system create every time you upload an image to optimize the image display in FRONTEND (optimizing the time to load a page).
The light blue download icon button (at right side of the images) will open a new tab on your browser displaying the original image you uploaded on server. Here you can save the image on your device.
You can close the Edit file from one of the close buttons: a cross on top right of the window or the Close white button on the right bottom.


Assign image to category from Browse images

At the right of each image row in Images list is an green + button. Click on it in chosen image row to assign that image to the current category.

In case that image was already assigned to the current category you will get on screen an error massage: Image is already assigned. Click the blue OK button or close the window from the cross top right. Choose another image by clicking the green plus symbol button.

After you click on the green plus symbol on Brows images tab, three things happen:

  • the Browse images tab closes
  • the image is assigned to the category
  • the image thumbnail is replacing the no image icon

Change image button

If you need to change an existing image with a new one, click the light blue Change image button from the right of the image you want to change.

When you click on Add image button, a pop-up window will give you two options:

  • to Upload image from your device
  • to Browse images existing on server

After you uploaded the image or you click the plus symbol in browse images tab of an image, the following will happen:

  • upload the image if applicable
  • the image manager will close
  • the image will be assigned to current category and will replace the changed image
  • the initial image will lose its assignment to the current category

Delete image from category button

Delete button from each image will have as effect unassigned that image from the category, but will not delete the image from the server.


Set main button

Set main button makes the current image as main image of the category. Use this button only if you need to switch the category image with the icon image.
The main image is the category image.
The image displayed under the MAIN image is the icon image. It will be displayed in Top bar icon menu.

Description area

The Description area has an text editor. Everything you write here will appears under the Category description page (FRONTEND).
In this editor you should present the category for your customers. The description will help the users, but also the search engines consider more a category with description.

After finishing to add category description, click the green SAVE button from the bottom of the text editor to save it. A message will appear for few moment under the green button, telling you that Description was saved.

If a category will have no description at all, the category description will not be shown in FRONTEND.

Click on Description button at the top of description area to close it and fold the page. Click it again when you want to open it.

SEO

Click the SEO button placed under the Description. The SEO window will open under.

The SEO metatags are automatically completed with the category name, in case you will not want or you do not know how to touch this area. It is a small step to search engine optimization.

The meta tags are valuable for search engines because they are written in code header and give them brief information about current page (what is about this page). For user these tags are mainly invisible.


Meta title

The meta title is the title of your (category) page.
You ca alter the auto-text filled in the text field.
Alongside the text field you have a counter of characters used in text field and instructions on how many characters are recommended for this tag.

Most of search engines use only the first 60 characters (including spaces) of Meta title.


Meta keywords

Meta keywords are SEO metadata and represents the keywords based on which the current category will be found by search engines.
You ca alter the auto-text filled in the text field.
Alongside the text field you have a counter of characters used in text field and instructions on how many characters are recommended for this tag.

Keywords can be one word or a short phrase and are comma separated.
The best practice is to focus on maximum three keywords per category.


Meta description

Meta description is SEO metadata and represents a short description of current category.
You ca alter the auto-text filled in the text field.
Alongside the text field you have a counter of characters used in text field and instructions on how many characters are recommended for this tag.

Most of search engines use only the first 160 characters (including spaces) of Meta description.


No char. box

This box will show a real time counter of the characters you input into each of the metadata. This feature is just informative to help you in keeping short, relevant meta tags.

Delete category and all its associated details

Click the Delete category and all its associated details button if you want to delete the current category.
A warning message will ask you to confirm you want to delete the category: Click OK to delete it or click Cancel or close the warning window to abandon.
The red Delete category and all its associated details button is placed at the bottom of View / edit category window.


Close

Close button will close the View / edit category window and you will be landing on Categories list.
You can close this window at any time as all data is already saved for you in the moment you leave a field. Exception from this rule is only for text editor. Click the save green button to make sure the entire content of text editor is saved.
You have two close buttons, use the one convenient for you:
- one is on top right corner of the View / edit category window on same line with the window name
- one blue Close button on bottom right corner

On this page

Snapshots / images

Categories list

Categories list

You will find all your categories created under Categories list.
To get to Categories list, choose Categories under Products in left side menu.

Add category

Add category

After you click the Add category button, a pop-up window (Create category) will open to allow you to input the name of the new category.
Under the category name box you are warning that your category will be created under the category which you selected in Category tree selector before clicking the Add category button.
Input the name of your new category and click the Save button.
In case you change your mind, you can abandon by simple closing the Create category window from the top right cross button.

Warning new category

Warning new category

It is mandatory to input a name for your new category. In case you click the Save button without inputting the category name, a warning will be displayed on your screen telling you what went wrong.
Click the OK button or close this pop-up and fill in the new category name and click the OK button to create the category.

Categories frontend

Categories frontend

The categories names appear in categories menu in sidebar in frontend.
The products listed under current category will populate the page.

View / edit category

View / edit category

The View / edit category will open with Basic details area open.

Edit category with Top bar icon

View / edit category with Top bar icon

In case you set Yes for Use top icons categories (shortcuts - easy navigation) under the Global area in Shop Configuration -> Settings & layout, the View / edit category window under Basic details will display the Top bar icon section.

Edit category description

Edit category description

Click on Description title to expand this area.
Click again the Description title to collapse.
The Category description has a full html editor to assist you in creating the category description.
Use the green Save button to make sure all your work was saved.

Category description

Category description (FRONTEND)

The category description appear when user is clicking the category if applicable.
Each category has two areas: one collapsed area which contains the description and one showing the category content: products or subcategories if applicable.
The description area can be configured to be open or closed from Category description area - open (show it) under Product listing in Shop configuration -> Settings & layout. No means the description will be close, Yes means the description will be open.
Also you can choose not to display at all the description for the categories. In Enable category description choose No (Shop configuration -> Settings & layout under Products listing area).

Edit category SEO

Edit category SEO

Click on SEO title to expand this area.
Click again the SEO title to collapse.
The Category SEO allows you to enter the meta data for current category.
The name of category will be filled up on all your SEO metadata fields.

Categories list with show icons

Categories list with show top icons

In case you set Yes for Use top icons categories (shortcuts - easy navigation) under the Global area in Shop Configuration -> Settings & layout, the categories list will contain more details:
- will have another selector, the Show top icon
- and will be displayed three more fields into the listing, top bar icons: enable, image an order of the icon.

Categories icons

Categories icons (FRONTEND)

The categories icons are displayed at the top of the page.

Delete category

Delete category

The warning message displayed when you click the Delete category and all its associated details button.
Click OK button to confirm deletion.
Click Cancel button or close the window to abandon deletion.

Add images to category

Add images to category

Click on Add image blue button. A pop-up window will appear to assist you.

Browse images tab

Browse images tab

Look for the image already uploaded earlier.

Headings