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.

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. 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.



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:

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. Clicking on the Embed video link selects the code that we need to put on our product page.
3. Select and copy the code.
4. Log in to Magento’s backend, and go to the Product Information page, General tab.
5. Paste the copied code into either of the description fields.



6. 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:

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.