4.1 Set Up Your Shop Categories

We are now ready to review some essential processes for adding products to our online store. These processes include setting up product categories, labels, tags and attributes. This is Step 7 in our online store building sequence:


The Importance of Shop Categories

One of the most important steps in creating an online store is setting up your shop product and services categories. While categories can always be changed later, setting up your initial categories should be done before adding products because every product should be assigned to one or more categories. In this section, we will review the process for creating product categories. Then in the next section, we will review the process for adding Products to those categories.

Help Your Customers and Think Like a Search Engine
When your customer visits your online store for the first time, they likely arrive after doing a search for a product with a search engine. Search engines in turn like a well organized website that has placed products into unique product categories. How you can help your customers is by placing your product categories in plain sight by showing your product categories in a top level menu.

Categories are also important in the back end of your website. After you create categories, you create folders for each category on your home computer. Eventually, we will create identical folders for our products or services in our website back end file manager. We will also create identical product categories for our product images. And we will also create identical menu items for all of our categories.

Phoca Cart Sample Data Categories… Brands versus Function
Phoca Cart Sample Data comes with 9 models of cars divided into three categories – which are the three makes or manufacturers or brands of the cars – with 3 models of cars in each brand. But dividing products up among brands is only a good idea if buyers are looking for a brand first and model second. If you visit an online clothing store, products are nearly always divided up first by gender and second by function. There will be a category called Womens Clothing and a category called Mens Clothing. Then Mens Clothing parent category will have child categories called Shirts and Pants. Shirts in turn may be further divided into Long Sleeve and Short Sleeve shirts.

Online clothing stores will also have a category called Sale where discontinued items are offered at a discounted clearance price. They may also have a category called New Products and a category called Favorites to feature some of their most important products.

One of the biggest mistakes is to place too many products in the same category. Forcing customers to scroll through 100 items to find what they want may cause the customer to leave and shop somewhere else. Whatever system you create to organize your products, you should give it some thought so you can help your customers find the product they are looking for as quickly as possible.

Use Free Products to Increase Traffic to your Website and Build a Customer Email List for your Store Newsletters
The most important thing we can learn from Google is to offer your customers a free service that they will want, use and tell others about. All online stores should therefore have one or more categories for free products and services. Ideally, these free products and services should not have a significant ongoing cost to your business.

Step 1: Create Your Categories… Our Demo Store Categories
In order to demonstrate how to set up categories for an online store, we will have two main product categories called Cars and Books. Cars will have a subcategory based on Brands and Books will not have a sub-category. We will also set up five special categories: Free Stuff, On Sale Now, Favorites, Holiday Specials and Super Deals. This is how these categories will be displayed in our store:


Step 2: Create Your Category folders on your Home computer

In the Home folder of your computer, create a new folder called My Online Store. Inside this folder, create 7 folders called admin, articles, Categories, extensions, images, Services and videos.


Then open your categories folder and create categories called Free Stuff, Products and Services.


Then open your Products folder and create folders called Books and Cars.


Then open your Cars folder and create three folders called Audi, Skoda and Volkswagen. In the next section, we will place product descriptions for each model of car in these brand folders.


Next, click on My Online Store and then click on the images folder. It is important that all images and images folder use names with lower case letters and no spaces. Create 4 folders called category-images, free-stuff, products and services.


Open your products folder and create folders called books and cars. Then open the cars folder and create three folders called audi, skoda and volkswagen.


Step 2 Create Your Category Images

Each category should have its own image. While you may find images online or take images with your camera or phone, here we will review the steps for using Libre Draw to create category images. We will create a category image for our Free Stuff category.

Open a new Libre Draw document with File, New Drawing. Give the drawing a file name with File, Save As. Then type in Free Stuff. Then click on the Home folder and click on My Online Store Folder. Then click on the images folder. Then click on the category-images folder and save this file in your category images folder.

Next, click on Page, Properties, Page tab. Change the Orientation from Portrait to Landscape. Then click on the Background tab. Click on Color and choose or create a light background color. Then click OK. Then insert a couple of shapes and type text into the shapes.


Click on each box and change the background color to a lighter color so the text will be easier to read.


Then select the text for each box and increase its font size and perhaps make it a different font family. Take a screen shot with a huge border around it and paste it in a Libre Writer document.:


Then right click on the image and compress it to a 150 resolution. Right click on it again and change its anchor point to Paragraph. Then right click again and save the file as free-stuff.jpg in your images/category-images folder.


Hopefully the image will have a size of less than 100 kB. Repeat this process to create category images for all of your categories.

Add your Category Images to your website Media Manager

Log into your Joomla control panel and click Content Media. Then click on the phocacartcategories folder to open it. Then click Create New Folder and name it labels.


But do not load your category images directly to this labels folder! Once you have your category image and your labels images folder, then from the Phoca Cart Control Panel, click on Categories, New.

How to Create a New Phoca Cart Category

Click on Components, Phoca Cart, Categories, New. Give the category a title Free Stuff:


Then click on Select Image.

Note: While with Joomla articles, you load the images first and then create a new article, with Phoca Cart categories and Products, you create the category or product first and then add the image directly to the category or product. The reason for this change in order is because when you load a category or product image directly to the product or category, Phoca Cart will automatically resize it to a consistent size and create a consistent thumbnail image of it. So please allow Phoca Cart to add images for you rather than loading them yourself.

When you click Select Image, this screen will appear:


First, click on the labels folder to open it. Then click Upload. Select the image. Then click Start Upload.

While you can drag images into the box, it is more precise to click Upload and select the category image by navigating to your website images/category-images folder. When you are done, the image will appear in the screen above the Image Loading tool:


Click on the free-stuff.jpg image to select it.


Phoca Cart will flash a yellow window telling you that it created thumbnail images of this image. It will then go back to the previous screen confirming that the image was loaded.


Then give the category a very short description and click Save and Close. In a later section, we will show you how to create a Free Stuff Product Label and in a later chapter, we will show you how to set up a Downloads tool for your online store. Below are our online store categories:


What’s Next?

In our next section, we will review how to add products to these categories.