Feature Spotlight: Assigning Category Pictures Using the WebStore Manager

Franclin Foping 4 September 2013 • Features, News

We are pleased to announce the release of a new feature of the WebStore Manager (WSM) that enables you to assign pictures to product Categories in your WebStore. This blog post will walk you through it.

It can be found under Design & Content, then Departments & Categories from the menu at the top of the WSM.  The page that will be shown to you contains two panels: the store navigation on the left side and another one on the right side.

Figure 1: The Category Picture Assignment Page

In the Store Navigation panel, the list of departments and theirs related categories is rendered. In parentheses, you can see the name of the product whose image is currently used to represent the category. The first time you load this page, it will fetch this information from your current configuration specified in NSc Sync. This is located in NSc Sync > Setup > Categories. In case no picture is currently assigned to the category, the words ‘no picture set’ is displayed beside the category.

In order to change the image currently assigned to a category, click on the category itself, the right panel will be updated as shown in the next figure.

Figure 2: The updated Category Details panel

If you hover over the image, the Change button will be displayed at the center of the image and by clicking on it, the panel will now be shown in the next figure.

Figure 3: The Preview Panel

You will notice that right now the Save, located at the bottom of the page, is still disabled. In order to change the image you can EITHER select an item whose image will be used to represent the category from the drop-down menu OR upload a new image. The latter option can be done by either dragging and dropping an image into the provided box or by simply clicking on the box and selecting an image from your Computer.

Having done that, the Save button will now be enabled and all you will have to do is to click on it to save your current image. You should repeat this step for all your categories.

In order to visualize your assignments, you should navigate to your store in the corresponding department. The next picture shows you an example. Notice that the image displayed at the top of the page for the Sedan Category is the one that was provided in Figure 3.

Figure 4: Our store with the images assigned to the Category.

Editing the Category Picture Assignments Panel

So far, we have only dealt with the case when the images are displayed in the default page and can therefore not be customized. You can however change that behaviour by using a dedicated template: the Category Pictures Assignments Panel.

You should enable it by navigating at the bottom of the Category & Department page as shown in the next graph:

Figure 5: Enabling the Category Picture Assignments panel

The default layout of this template is shown in the next figure:

Figure 6: The default layout of the category pictures assignments panel

You can now edit your template to suit your needs and off you go!

Closing Notes

When uploading an image, please bear in mind that your image must abide by the following rules:

  • It must be in the format of JPEG, JPG, PNG, or GIF
  • It must not exceed the size of 2MB
  • The dimensions of the picture must be within 500 X 500 pixels

When editing the Category Pictures Assignments Panel, please note that the following variables are available to you:

  • ‘category_name’ which represents the name of the current category. This can be accessed in the following form: {categorypicture[‘category_name’]}. For instance in the Figure 4, this variable will be equal to Jeeps in the first iteration and Sedan in the second iteration
  • ‘category_image’ which is the html code of the image representing the current category. This is typically the content of the SRC attribute of the IMG HTML tag
  • ‘category_link’ which denotes the URL of the current category. This value is usually included in the HREF of an anchor tag in HTML as shown in Figure 6

Questions / Comments / Feedback

This feature is currently only available on the beta channel of the WebStore.

We hope you find this new feature useful. Should you have any questions, or if you encounter any problems, please feel free to contact our Customer Services team through live chat, or by support ticket, on our Partner Portal.

Leave a Reply

Your email address will not be published. Required fields are marked *