How to generate well designed price tags for your online store products

After reading the brief for Catman Shopping Catalog, I’ve realized that it’s needed to create some widgets and “sparkles” for this website so the clients and visitors will notice the simple but nice-looking details. It was required to display a product’s price in a white and clean page layout, but it also needed to stand out from the other elements on the website. We thought that the first thing to a woman  will look after choosing a nice shoe or nice dress is (because it is a site for women mostly) the price tag so we tried to figure out how to display this price tag in it’s own form.

In the next few steps I will try to show you how we accomplished this using PHP and a transparent image.

1. First we’ve created the image

You can design whatever you want to display the price for your products, we used a price tag because we are showing mostly clothing and accessories on the website.

Mostly the price of the product is displayed on the right side of the product’s image, or even under it, but the best practice is to place it on the top right or on the top of the product, because that is the most important place to display an important message.

After you have finished designing the price tag (in harmony with the overall look and feel of the website, of course…) you will need to generate the price on the tag. You can do this by getting the product price from a database or even from a textfile-based product list, depends on what technology do you use for storing information. We used a MySQL database for storing products and PHP as the programming language.

2. You choose a font face you like or the one you’ve used sitewide and put it in the same folder with the image

We used Trebuchet MS sitewide and Verdana for the price tag.
So if you choose for example Verdana as your price tag font-face, then you have to copy Verdana.ttf from you OS Fonts directory to the directory where you want this to work.

3. Writing some PHP to dynamically display the price on the price tag

You have to create a php file to handle the product price, named pricetag.php (this will reside in the same directory as the above files), and insert the following code in it:

< ?php
header("Content-type: image/png");
$image = imagecreatetruecolor(250, 250);
$string = $_GET['price'];
$im = imagecreatefrompng("price_tag.png");
$color = imagecolorallocate($im, 255, 255, 255);
$bg_color = imagecolorat($im,1,1);
imagecolortransparent($im, $bg_color);
$font = 'verdana.ttf';
imagettftext($im, 14, -14, 90, 42, $color, $font, $string);
imagepng($im);
imagedestroy($im);
?>

4. Some explanations about the above code:

This is the whole code, but I want to break it up and explain it to you so you can use it anyway you want.

header("Content-type: image/png");

This is the first line in which we set the header to image type. This is needed to let PHP generate an image instead of sending you some weird characters or even send you the file it generates. If this header is met the script will display an image when you access it.

$image = imagecreatetruecolor(250, 250);

With the following line we set a variable ($image) to create a truecolor image with the maximum width and height of 250px.
You can play around with this if you want a bigger image to be generated.

The following three lines are the most important for the dynamic generation of prices:

$string = $_GET['price'];
$im = imagecreatefrompng("price_tag.png");
$color = imagecolorallocate($im, 255, 255, 255);

The first variable ($string) is defined to accept $_GET data from URL to generate and set the price shown on the image.

The second ($im) is defining the image you want to show the price on. This has to be located in the same folder as the script (pricetag.php) or you can put it anywhere you want but then you have to specify the path to the image (ex. /path/to/price_tag.png).

The third variable ($color) is to define the color of the generated text on the image. This has to be defined in RGB color code, so if you take our example (255, 255, 255) the color of the generated text will be WHITE.

$bg_color = imagecolorat($im,1,1);
imagecolortransparent($im, $bg_color);

These two variables define the transparency of the generated image, so the background will be transparent and you can place it on product images also.

$font = 'verdana.ttf';

This is where you set the font-face of the generated text. You can figure this out by yourself.

imagettftext($im, 14, -14, 90, 42, $color, $font, $string);

This function is creating the image and generating the text on, so I will explain all the variables in it:

imagettftext (Background IMAGE, FONT-SIZE, FONT ANGLE, TEXT X Position, TEXT Y Position, Text Color, Font-Face, TEXT TO BE DISPLAYED);

You can play around with these variables to position and dipsplay the text posted by $_GET on an image.

imagepng($im);
imagedestroy($im);

The last two lines generate and destroy the image so it won’t be saved on the server. This technique is used to generate images on-the-fly without caching or saving the generated files.

5. The USAGE of this script on a web page:

The most common usage of this script is to include it as an image in your page:

For the SUM you put the price and the Currency displays the Currency you want, this is very basic.

That’s all there is to generate well designed price tags for your online store products. I hope it will help many of you out there who don’t know how to do this.

Please don’t hesitate to post your ideeas or modifications of this script and tell me what you think about the overall look of the Catman Shopping Catalog website.

• View Sample
• Download: Dynamic price-tag generation

Thanks for the upcoming diggs

• How to achieve the new and trendy letterpress effect with Photoshop
• FancyPlayer Revisited – jQuery Fancybox and Flowplayer Complete Integration
• The SEO series: HTML Header – SEO & usability
• FancyPlayer – jQuery Fancybox and Flowplayer Integration Tutorial
• jQuery Kwicks and CSS Image Sprites Tutorial