Easy Catalog Images is an add-on that helps create image thumbnails for product categories and child categories on your website and uses it to simplify store browsing experience.
Navigate to SYSTEM > CONFIGURATION, scroll to the Sitebiz tab on the left-hand navigational column, and select Easy Catalog Images. Expand the General tab.
Here are the general configuration settings for Easy Catalog Images. Configure the following:
- Enabled- Make sure this function is enabled or else Automated Image Assignment won't work and images won't be available.
- Use Category Image When Thumbnail Is Not Available- This will prevent products from not having a picture shown on their product page by replacing the product image with the image that is assigned for that product's category.
- Use Image Helper To Resize Images- This is recommended to keep the photos within the size parameters while keeping the quality of the photos.
- Background Colors- This will fill the blank space behind images when the actual image may not fill the thumbnail correctly. Your most used background colors will be white and black, which have their color codes listed below the Background Color field.
Expand the Category Page tab.
This page of settings controls the display of the categories and their images:
- Enabled for Default Categories- Should be set to Yes.
- Enabled for Anchor Categories (Child Categories)- This allows the child categories to be visible in the parent category with images.
- Hidden When Filter or Pagination is Used- Easy Category Images will not be shown customers use search filters or sort through products by page number.
- Number of Categories to Show- You can choose to show all of your product categories or a select number.
- Columns Count- The number of columns that will be used to display the categories.
- Show Images- Should be set to Yes if you would like the images to be visible to your customers.
- Image Width & Image Height- Size images will be defaulted to, to be displayed as the thumbnail.
- Number of Subcategories to Show- If you have parent categories that contain children categories, you choose how many, if not all, of those children categories you wish to display when a customer clicks into a parent category.
Add Category Thumbnail
( **NOTE: Ensure that all Categories have an image for Thumbnail. )
There is one way you can assign thumbnails to categories.
- Manual Image Assignment
- This requires images to be saved and manually uploaded via Manage Categories.
Here's a quick look how to manually assign thumbnails to categories:
(**NOTE: Make sure you already have images saved, appropriately labeled and in a folder that is easy to access so your image assignment goes smoothly.)
Navigate to Catalog > Manage Categories. Select the category you wish to manually assign a thumbnail to.
Click Choose File for the Thumbnail Image and choose the photo you wish to use for that category.
Repeat steps for all categories you wish to have thumbnails for.
Adding the Widget to Page
For the Easy Catalog Images add-on to function properly, you must add the widget to a page on your website.
It is recommended to add the widget to the default category page rather than the homepage since the HTML on the homepage is sensitive, but you can add the widget in any of these locations:
- CMS > Pages
- CMS > Static Blocks
- CMS > Widgets
- Any pages that utilize the Insert Widget button.
For this example, we will use CMS>Pages.
Navigate CMS > Pages, select the default category page and open the Content tab.
Select Insert Widget. A window will now open with a field to select which widget you would like to insert. Select Easy Catalog Images from the drop-down menu and the window will now expand to show all of the details from the settings you had configured earlier.
You can make last minute changes here, or keep the settings as is.
Select Insert Widget once you reviewed and approved of the configuration.
You will now notice that there is some HTML coding now inserted in the content tab. This means the widget has been applied correctly.
Now you'll need to flush the cache and reindex:
SYSTEM > CACHE MANAGEMENT. Select Flush Cache Storage at the top right of the page.
SYSTEM > INDEX MANAGEMENT. Select All, Submit next to Reindex Data at the top right of the page.
Here are examples of what the completed result can look like:
Child Categories (After clicking into Fishing):