Making the Sale by Optimizing Product Pages using Magento 1.3

Exclusive offer: get 50% off this eBook here
Magento 1.3 Sales Tactics Cookbook

Magento 1.3 Sales Tactics Cookbook — Save 50%

Solve real-world Magento sales problems with a collection of simple but effective recipes

£18.99    £9.50
by William Rice | March 2010 | Cookbooks Content Management e-Commerce Open Source

There are several things you can do to optimize product pages for selling. In this article by William Rice, author of Magento 1.3 Sales Tactics Cookbook, we will look at these techniques:

  • Add custom options
  • Add videos, links, and other HTML to product pages
  • Optimize product images

When shoppers land on a product page, you want that page to present the product in the best possible way. The product page should entice, inform, and entertain your shoppers.

Adding custom options

In Magento, a custom option is a field that enables your customer to specify something that he/she wants customized. For example, suppose you sell sports trophies that can be engraved with the name of the event and the winning team then you would add a custom option to that product, where the shopper enters the text to engrave. If you offer a style of shirt in different sizes and each size is a different product with its own stock number, then that is a configurable product. If you offer a style of shirt that is custom-made on demand, and the customer chooses the measurements for that shirt (chest size, sleeve length, neck size, and so on), then that is a simple product with custom options.

In the following example, the customer can add his/her initials as a custom option. Selecting any of the options adds a product, with its own SKU, to the customer's order.

Magento 1.3 Sales Tactics Cookbook

How to do it...

Let's begin with adding the custom option:

  1. Log in to your site's backend or Administrative Panel.
  2. Select Catalog | Manage Products. The Manage Products page displays. You will see a list of the products in your store.
  3. For the product that you want, select the Edit link. The Product Information page displays. The General tab will be selected for you.
  4. Select the Custom Options tab.
  5. Click the Add New Option button. A new option appears. You will need to fill in the fields to complete this option.
  6. Magento 1.3 Sales Tactics Cookbook

  7. In the Title field, add text that will appear next to the option. The text that you see in the example above, "This is an expensive machine..." and "Extra filter cups...", was entered into the Title field.

Selecting the input type:

  1. Select the input type for this option. Based upon the type you select, other fields will appear. You will be required to fill in these other fields.
  2. Magento 1.3 Sales Tactics Cookbook

    If you select this Input type...

    You will also need to specify...

    Text

    The maximum number of characters the shopper can enter into the text field or text area.

    File

     

    The filename extensions that you will allow the shopper to upload. For example, you might supply the shopper with a detailed form to fill out using Adobe Acrobat Reader and then have them upload the form. In that case, you would specify .pdf as the filename extension.

     

    Select

     

    Each of the selections that they can make. You add selections by clicking on the Add New Row button.

     

    Date

     

    Nothing. This just adds a field where the shopper enters a date and/or time.

     

Selecting the remaining options:

  1. The Is Required drop-down menu determines if the customer must select this custom option to order the product. For example, if you're selling custom-made shirts, then you might require the customer to enter measurements into the custom option fields.
  2. The Sort Order field determines the order in which the custom options are displayed. They appear from lowest to highest.
  3. The Price is a required field. If you set it to zero, then no price will display.
  4. Price Type is Fixed if you always charge the same for that option. Setting it to Percent calculates the price for the option based on the price for the product.
  5. SKU is not required, but if the option is another product (like extra parts), then you will want to use it.
  6. Save the product, and preview it in your store.

How it works...

Both custom options and configurable products give your customer a choice. But they are not the same. When a customer chooses a configurable product, the customer is ordering a separate product with its own stock number, price, and inventory. When a customer chooses a custom option, the customer is not choosing a different product. Instead, the customer is choosing an additional feature or part for the product. These custom additions can be free or they can have their own price. Each custom option has its own SKU number.

There's more...

You can get especially creative with the custom option that allows customers to upload files. For example, you can:

  • Enable customers to upload a graphic that you add to the product, such as a graphic that is silkscreened on a laptop's case.
  • Sell a picture printing and framing service. The customer uploads a digital picture, and you print it on high-quality photographic paper and frame it.
  • Supply customers with a detailed form for specifying a product, and then have the customer upload the form as part of their order.
  • Run a contest for the best picture of a customer using a product. Customers upload the picture under the product. You then add the best pictures to a static page on your site.

Adding videos, links, and other HTML to product pages

You enter the description for a product on the product page under the General tab:

Magento 1.3 Sales Tactics Cookbook

While these fields appear to accept only text, they will accept HTML code. This means that you can add almost anything to the product description that you can add to a standard web page. For example, let's embed a video into the Short Description field.

How to do it...

  1. Navigate to the video site that contains the video you want to embed. In our example, we're embedding a video from YouTube:
  2. Magento 1.3 Sales Tactics Cookbook

  3. Clicking on the Embed video link selects the code that we need to put on our product page.
  4. Select and copy the code.
  5. Log in to Magento's backend, and go to the Product Information page, General tab.
  6. Paste the copied code into either of the description fields.
  7. Magento 1.3 Sales Tactics Cookbook

  8. Save the product.

How it works...

The HTML code that you enter into the description field is displayed when the customer views the product. Any valid HTML code will work. In our example, we embedded the video in the Short Description field, which placed it near the top of the page, under Quick Overview:

Magento 1.3 Sales Tactics Cookbook

There's more...

Using HTML, you can:

  • Embed videos in your product page
  • Add links to your product page
  • Add the manufacturer's graphic to the product description

Just remain aware of how much space the Magento layout gives you for the items that you want to put on the page. For example, the code that we copied from www.youtube.com above makes the video 400 pixels wide which is too wide for our Magento page, so we had to change it to 300 pixels.

Magento 1.3 Sales Tactics Cookbook Solve real-world Magento sales problems with a collection of simple but effective recipes
Published: March 2010
eBook Price: £18.99
Book Price: £30.99
See more
Select your format and quantity:

Optimizing product images

The default Magento template uses three sizes of pictures: Base Image, Small Image, and Thumbnail. These are uploaded on the Product Information page under the Images tab. Magento uses these different sizes in different places:

Size

Pixels

Where it's Used

Base

265 x 265 (or larger)

On the product page

Small

135 x 135

In catalog listings

Thumbnail

75 x 75

On the checkout page

The easiest thing to do is upload a large, square product picture and let Magento generate the other sizes. However, this doesn't always give the best results. At small sizes, your product might not be recognizable. Consider this catalog page, where the product images appear at a size of 135 x 135 pixels. The following page is at the actual size:

Magento 1.3 Sales Tactics Cookbook

At the small size, these products might not be immediately recognized by a shopper. If you're using the default template, you would need to change the template files to change the default picture sizes. However, you can crop and zoom the images to make your products more recognizable and appealing at the default size. Notice the following image of the coffee press pot:

Magento 1.3 Sales Tactics Cookbook

Once our shopper is on the product page, Magento displays the base image at 265 x 265 pixels. If you've uploaded an image larger than that, then Magento also enables the shopper to display a larger size. In the following screenshot, you can see that the shopper has doubleclicked on the product image, and Magento now displays the product at its maximum size:

Magento 1.3 Sales Tactics Cookbook

Getting ready

Before you begin, you should:

  • Have at least one large graphic for the product.
  • Have a graphics program that enables you to crop and resize graphics.

How to do it...

Let's begin by checking the size of your catalog listing graphics:

  1. Navigate to your site, and display one of the catalog pages. A category home page is usually a good choice. You want to view any product listing like this:
  2. Magento 1.3 Sales Tactics Cookbook

  3. Right-click on one of the product images. From the pop-up menu, select Properties.
  4. The Element Properties window will display. Take note of the image dimensions. For the default Magento installation, these are 135 x 135 pixels. Yours might differ. If they do, then for the rest of these instructions, use the dimensions for your site.
  5. Magento 1.3 Sales Tactics Cookbook
  6. Close the Properties window.

Now, let's crop and size the small product image:

  1. In your favorite graphics editor, open the product image.
  2. Decide which part of the image is most visually compelling for a potential shopper.
  3. Question

     

    Example

     

    Is a part of this image visually striking? Especially beautiful? Surprising? Or provocative?

     

    Magento 1.3 Sales Tactics Cookbook

    For example, these eyeglasses have a distinctive shape on their outer rims, and a striking color on their earpieces.

     

    Does a part of this image show something that I know my shoppers want?

     

    Magento 1.3 Sales Tactics Cookbook

    For example, this multi-tool for snowboarders has a bit that enables you to unscrew and adjust snowboard bindings. For a snowboarder, this bit is the most important part of the product.

     

    Does a part of this image make the product instantly recognizable?

     

    Magento 1.3 Sales Tactics Cookbook

    In this example, if you display the image at a size of 135 x 135 pixels, the blood pressure cuff will be so small that you cannot recognize it. In the catalog listing, you will probably want to display the cuff large enough so that shoppers can see the markings on the cuff. If a shopper can read the SYS, DIA, and Pulse that are printed on the cuff, he/she will probably recognize it instantly as a blood pressure device.

  4. Using your graphic application's cropping tool, select the area of the image that you decided upon in the previous step. Remember, this will be displayed at 135 x 135 pixels. You don't need to make your selection 135 pixels because you can resize it. However, you should try to make the selection as square as possible.
  5. Magento 1.3 Sales Tactics Cookbook

  6. In the previous screenshot, notice that Paint Shop Pro tells us the selection is 208 x 208 pixels. When we upload this to Magento, and select it as the small size image, Magento will generate a graphic that is 135 x 135 pixels.
  7. Save the graphic as a .jpg or .png file.

Uploading the image to Magento:

  1. Log in to your site's backend or Admin Panel.
  2. Select Catalog | Manage Products. The Manage Products page displays. You will see a list of the products in your store.
  3. For the product that you want, select the Edit link. The Product Information page displays. The General tab will be selected for you.
  4. Select the Images tab.
  5. Select the Browse Images... button.
  6. A dialog box pops up. Navigate to where you saved the small graphic, and select the file.
  7. Magento 1.3 Sales Tactics Cookbook

  8. In the dialog box, click the Open or OK button.
  9. You will be returned to the Images page. Click the Upload Files button.
  10. After the file uploads, roll over it to display the image. Make sure this is the image that you intended.
  11. Next to the image, select the radio button for Small Image.
  12. Magento 1.3 Sales Tactics Cookbook

  13. Save the product.

How it works...

Whenever Magento displays this product in the product listings (such as a category home page or product comparisons), the optimized image that you just uploaded will be used.

Summary

This article took you through the various techniques to optimize product pages such as adding custom options, adding video, links, other HTML to product pages, and optimizing product images.

Magento 1.3 Sales Tactics Cookbook Solve real-world Magento sales problems with a collection of simple but effective recipes
Published: March 2010
eBook Price: £18.99
Book Price: £30.99
See more
Select your format and quantity:

About the Author :


William Rice

William Rice is an e-learning professional who lives, works, and plays in New York City. He is the author of books on Moodle, Blackboard, Magento, and software training. He especially enjoys building e-learning solutions for small and mid-sized businesses. His greatest professional satisfaction is when one of his courses enables students to do something that makes their work easier and more productive.

His indoor hobbies include writing books and spending way too much time reading slashdot.org. His outdoor hobbies include practicing archery within sight of JFK Airport, and trying to keep up with his sons on the playground.

William is fascinated by the relationship between technology and society: how we create our tools, and how our tools in turn shape us. He is married to an incredible woman who encourages his writing pursuits, and has two amazing sons.

You can reach William through his website at http://williamrice.com

Books From Packt


Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia

CMS Made Simple 1.6: Beginner's Guide
CMS Made Simple 1.6: Beginner's Guide

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

Grok 1.0 Web Development
Grok 1.0 Web Development

Magento: Beginner's Guide
Magento: Beginner's Guide

Plone 3.3 Products Development Cookbook
Plone 3.3 Products Development Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software