4.3 Add Product Labels, Tags and Specifications

Adding product labels, tags and specifications can greatly increase sales by providing customers with more information about your products. Labels and tags are also useful for creating additional categories of products based on changeable factors such as being temporarily on sale or temporarily featured or added to a favorites category in addition to being permanently placed in categories based on subjects you create like Clothing, Cars or assign such as dividing products based on the manufacturer of the product. In this section, we will review the differences between labels and tags and specifications and how to create and assign new labels, tags and specifications to products. Then in the next chapter, we will review how to create product options, attributes and fields and assign them to products.

Differences between Product Labels, Tags, Specifications, Options, Attributes, Fields and Parameters

Phoca Cart is unique among all of the shopping carts in its ability to help you easily add custom labels, tags, specifications, options, attributes, fields and parameters to products. Phoca Cart is such a powerful tool that beginners can become bewildered with all of the options they have in terms of providing information about products to their customers. It is important to understand that, if you only have a couple of products, you do not need to use any of these tools. However, if you have a growing online store with more than one thousand products, you may want to use all of these tools.

The difference between the three tools we discuss in this section and the tools we discuss in the next section is that product options, attributes and fields can affect your inventory or Stock Keeping Units (SKUs) while labels, tags and specifications do not affect your product inventory. In the next chapter, we will spend more time on how to control product inventory with Phoca Cart.

Product Labels and Tags are the first tool we will review. They are very useful for drawing attention to a particular group of products. Product Labels and Tags appear above the product image on Category pages. For example, Volkswagen Gulf below is shown with the tags Super Deal and On Sale.:

01

Click on this product and you will see that, on the Product page, the tags are displayed both above the image and below the Product.

02

Go back to the Volkswagen category and note that the Passat has two labels, Our Favorites and Holiday Special above the product image.

How to Create Product Tags and Labels

An important feature of Product Tags and Labels is their ability to be linked to a Product Category. Therefore, before we create a Product Tag or Label, we should first create the product category we want to connect the tag or label to. But before we create a new Product Category, we should create an image for that product category. In your website images folder, create a folder called category-images. Then create a new Libre Draw document to use to create our category image.

For example, when creating a new category called On Sale Now!, we should create a Libre Draw document called On Sale Now. Then give the document a background color and add some text and a border. Then use a screen capture tool to create an image. Paste this image into a Writer document to compress it. Then save the image to your Label Images folder with the name sale.jpg.

 

In Section 4.1, we created a new images folder with our Joomla Media Manager to hold our Label images. Go to Content, Media and click on the PhocaCartCategories folder to open it.

03

As we noted earlier, do not load 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.

04

Give the category a title. Then click on Select Image. When you click Select Image, this screen will appear:

05

Click Upload and select the category image by navigating to your website images/label-images folder. When you are done, the image will appear in the screen above the Image Loading tool:

06

Click on the sale.jpg image to select it.

07

Then give the category a very short description and click Save and Close. Now that we have the On Sale Now category, we are ready to create the On Sale Now tag.

Create a New Product Tag or Product Label

To create either Product Tags or Product Labels, from the Phoca Cart Control Panel, click on Tags. Then click New:

08

Give the tag a title and select the category we just created to form a connection between products we assign to this tag and the tag category. Type can be either Tag or Label. Tag will display tags below the bottom of the product on the Product page and be searchable with the Product Search tool. Labels will not display tag lines on the product page. They will only display a label above the product image and help link special products to special categories. For Display format, you generally want Title Only unless you are using Icons for Tag images. Then give the tag a short one sentence description and click Save and Close. Here is our Tag Table showing two tags and two labels.

09

We have also created special categories for all four of these tags/labels. Here is what these special categories look like on the All Categories page:

10

Click on the Favorites category to view products assigned to this category.

11

Click on the Audi A5 Product page to see that only the On Sale tag is shown at the bottom of the product page.

Assigning a Product to a Label Category and a Matching Label

To assign a product to one or more of our special label or tag categories, click on the Product to open it. Then on the General Options tab, click on Category to bring up a list of categories.

12

You can assign a product to as many categories as you want. However, the label or tag will not appear on the Product page unless you also click on the Publishing Options tab and add the Labels to this product:

13

You do not want more than two or three special tags or labels assigned to any one product. Then click Save and Close and view the front end of your website to confirm that the label actually appears.

Customize the Label Background Color
By default, the label background color of all new labels will be light gray. To change the background color, use the class name as shown below (classes have a dot at the beginning). Then go to Extensions, Templates, Templates, Astroid One Template details and copy and paste these into the end of your template custom.css file.

.ph-corner-icon-our-favorites {

background-color: #ccf;}

.ph-corner-icon-super-deal {

background-color: #cfc;}

.ph-corner-icon-on-sale {

background-color: #fcc;}

Here is the final result:

14

How to Add Additional Product Information

Phoca Cart allows you to add Additional Product Information to the bottom of any product page. You can show as many tabs as you want and have different tabs showing for different products.

15

The settings for the six tabs in the above Product Information section are located in the following areas:

Description: This is the long description which is set on Products, General Options tab. The Long Description Editor is just below the Short Description Editor near the bottom of the page.

Features: Is also set on the Products, General Options tab. The Features Editor is just below the Long Description Editor.

Video: is also on the Products General Options tab just above the Short Description Editor. The video must be a full path URL link such as to a YouTube Video. It must include the https at the beginning of the URL.

Specifications: The key difference between specifications and product attributes and/or product options (both of which we will cover in the next chapter) is that Specifications merely describe a product. They should have no effect on Product Price and they should have no effect on product inventory.

Setting up product specifications is a two step process. First, you must add Specifications from the Control Panel by going to Specifications. Here are the three Sample Data Specifications Options:

16

There are no parameters for Specifications. They are simply fields that provide a place to put values. Let’s add a new specification called Power Windows.

The second step is to add these specifications to individual products. Click on the Skoda Rapid Product in the Products area. Then click on the Specifications tab.

17

To add a new specification, click on the green Plus sign. Then scroll to the bottom of the page and add our new specifications and put them in the Power Windows group:

18

To see Specifications on the front end, go to the shop and click on the Skoda Rapid.

19

Related Products: Click on Related Products to see the other two models of the Skoda Brand. Related Products are set on the Product page, Related Products tab:

20

Reviews are unique in that they are not set on the Products page. Instead, they are generally created by customers on the front end. You can then review and approve them on the backend. You can also create reviews on the backend simply by creating a fake customer and then writing a review in the Reviews, New area.

21

To view reviews on the front end, we would normally go to the Product page and click on the Reviews tab. However, we have previously hidden the Reviews tab with a Template Override. Currently, the only item shown on the Audi A5 Product page is a YouTube video:

22

Problems with General Display Parameters
If you go to the Phoca Cart Astroid Demo site and click on a Category. Then hover over any product, four icons will appear:

23

These four icons are called General Display Parameters. Clicking on the first icon will add the item to a shopping cart. The second icon will bring up the Product page in a pop up. The third icon will add the product to the customer’s wish list – but only if the customer is logged in. The fourth icon will add the product to a comparison table where it can be compared with other products added to the comparison table.

There are several problems with these icons. First, it is too easy for a customer to accidentally add a product to their shopping cart. This is especially a problem because some browsers fail to display the words Add to Cart when hovering over this icon. There is no popup asking if you really want to add this item to your cart. It just gets added. I therefore do not recommend displaying this icon. The second icon is redundant because if the customer really wants to see the Product page, they can click on the big View Product button. I therefore do not recommend displaying the second icon.

The third icon is a problem because folks may not realize they need to be logged in and may not want to be logged in just to add something to a wish list. I therefore do not recommend displaying the third icon. The fourth icon, Compare, can be very helpful for customers trying to decide between two similar products. I therefore highly recommend displaying the fourth icon.

To change the settings for these four icons, go to Options, Display tab and scroll down to General Display Options. Set the Compare Icon to Yes and the other three icons to No.

24

Here is the result:

25

What’s Next?
Hopefully, you now have a better idea of all of the ways Phoca Cart helps you customize the appearance of your online store. In the next chapter, we will look at Shop Processes. These include creating product categories, adding products to categories, creating product options and attributes and using all of these to automatically control your product inventory.