Images White Paper

High-quality, professional images are critical to the success of any listing. This is because buyers may be hesitant to purchase something they cannot physically touch and good images overcome this hesitancy. ChannelAdvisor Merchant contains powerful tools that allow you to easily manage and edit your images.

This document discusses how to use ChannelAdvisor Merchant to upload images into your account, manage those images, and use them effectively in your ads.

ChannelAdvisor Merchant provides a complete image hosting solution so that you can store and serve all the images you require.

Getting images into your account is a simple 3-step process. First, decide on a naming convention and name your images. Second, upload your images via FTP to ChannelAdvisor. Third, scan your images from your FTP folder into your Merchant account.

To manage your images efficiently, you must first decide on a naming convention and stick to it. If you name your images in an understandable and consistent way, you will be able to manage them much more easily in Merchant especially once your account contains hundreds of images.

First, each of your image names must be totally unique. If you use Merchant’s naming convention, then your images will be associated automatically with your existing inventory items. You can also use your own naming convention, however, you will have to do a little extra work to associate your images with your inventory.

• Use Merchant’s naming convention

Naming your images with Merchant’s naming convention is easy. The naming convention is:

SKU__abbreviation.extension (SKU double underscore abbreviation.extension)

The abbreviation for an image can be found in the column labeled “Abbreviations” on the Image Hosting page (Settings > Image Hosting) under the “Image Placements” heading. While you can create any abbreviation, we recommend using numbers (e.g. for ITEMIMAGEURL1, the abbreviation would be “1”).



Example: You have a SKU numbered 567YZ that uses 2 images for its ad. You want to automatically associate an image in jpeg format with that SKU as the second image (ITEMIMAGEURL2). Assuming the abbreviation you used for the second image was “2”, the image name would be 567YZ__2.jpg

Note: For image associations to happen automatically, the SKU must already exist in inventory BEFORE you upload the image. Additionally, you must name your images appropriately BEFORE you FTP them into your account.

• Use your own naming convention

If you choose not to use Merchant’s naming convention, you may use your own. Technically, you can use any file name but using a coherent naming convention will greatly simplify your image management. Once you have named your images, you can associate them with an inventory item one of two ways: individually from within Merchant or when you upload your inventory.

Uploading your images is simple. First, you will need to have and understand how to use FTP client software. Most likely, you already have an FTP client but if not, there are many inexpensive FTP packages available from many different software vendors.

Before you can upload images, you must have configured a FTP prefix for your account. You should have been prompted to do this when you setup your account. To create, view or change a FTP prefix, go to Settings > Image Hosting. Under “FTP Integration,” your prefix is set in the “Login Prefix” box and can be up to 6 characters long.

To upload images with your FTP client, do the following:

1. Create a new connection in your FTP client to ChannelAdvisor’s image server. The address is ftp.channeladvisor.com
2. Your login name is “prefix:MerchantUserName”. For example, if my FTP prefix was sbc and my Merchant account login name was jdoe@company.com, my FTP login name would be sbc:jdoe@mycompany.com
3. Your FTP password is your Merchant password
4. Connect. Your software should tell you if your connection attempt was successful.
5. Make sure your FTP client is not in PASV mode (see your FTP software documentation)
6. Select and upload your images

Once you have uploaded images via FTP to ChannelAdvisor, the images must be scanned into your account. This can be done either automatically or manually.

Merchant automatically scans images into your account once you have uploaded the files to ChannelAdvisor. The frequency of these scans is set by the “Automatic Scan Frequency” on the Image Hosting page (Settings > Image Hosting).

If you want images scanned into your account immediately, go to Tools > Images and select the “Bulk Upload My Images Using FTP” link. This will start a scan of your FTP folder that may take a few minutes depending on the size and number of the images.

Once you have upload images into your account, you need to associate them with your inventory items. Each inventory item can have up to 20 images associated with it. If you used Merchant’s image naming convention, your images are associated with your inventory automatically. Otherwise, you must associate your images manually from within Merchant or in bulk when you upload your inventory.

You can manually associate images with inventory items in Merchant. However, we recommend associating images in bulk when you upload your inventory. To create associations manually, do the following:

1. Go to the All Items view (Inventory > All Items)
2. Click on a SKU
3. At the bottom of the Edit Inventory Item page, click either the “Upload an Image” or “Select an Image” link beneath the Select Images heading. If the image is not already in your account, choose to “Upload an Image.”

4. Choose an image your image library or one to upload.
5. From the “Image Placement” dropdown list, select a placement and click the Save button (or the Continue button if uploading).

The most efficient way to associate images with inventory is to enter the image file names in the “Picture URLs” column in the inventory spreadsheet. To associate multiple images with a particular SKU, separate the image names with commas. There are two ways to associate file names in the spreadsheet.

Method 1: If you use Merchant’s default item image placement tags (i.e. ITEMIMAGEURL1, ITEMIMAGEURL2, etc.), you can simply enter the image filenames separated by commas and they will be associated in order with the placement tags.

For example in the Picture URLs column, enter the following line:

itemPic1.jpg, itemPic2.jpg, itemPic3.jpg, itemPic4.jpg

Placement Name	Image File Name
ITEMIMAGEURL1	itemPic1.jpg
ITEMIMAGEURL2	itemPic2.jpg
ITEMIMAGEURL3	itemPic3.jpg
ITEMIMAGEURL4	itemPic4.jpg

Method 2: If you created your own custom placement tags (e.g. myPlacementTag), you must explicitly associate the images with the placement tags in the spreadsheet.

For example in the Picture URLs column, enter the following line:

myPlacementTag=itemPic1.jpg, ITEMIMAGEURL1=itemPic2.jpg, ITEMIMAGEURL2=itemPic3.jpg, ITEMIMAGEURL3=itemPic4.jpg

Placement Name	Image File Name
ITEMIMAGEURL1	itemPic2.jpg
ITEMIMAGEURL2	itemPic3.jpg
ITEMIMAGEURL3	itemPic4.jpg
myPlacementTag	itemPic1.jpg

Note: The images themselves do not have to be in Merchant at the time you upload your inventory spreadsheet.

While ChannelAdvisor Merchant contains a complete image hosting solution, you may occasionally want to host images locally on your own servers. Merchant gives you the ability to include these local images in your image library and associate them with your inventory. To use images from your own server, they must be accessible from the web and you must know the full URL path to each image (e.g. http://www.mycompany.com/images/SKU_image1.gif).

You can associate these images with inventory either individually or in bulk.

Method 1: To associate a local image with inventory individually, simply insert the image’s URL on the Edit Inventory Item page. If you use this method, the image URL will appear in your image library but without a thumbnail.

The following steps explain how to do this.

1. Go to the All Items view (Inventory > All Items)
2. Select a SKU
3. At the bottom of the Edit Inventory Item page under the Select Images heading, type or paste the image URL for the appropriate placement tag as shown below.

Method 2: To associate locally hosted images in bulk, enter the image URLs in the “Picture URLs” column in the inventory spreadsheet. This process is described above in section about associating images in bulk. For your local images, this process differs slightly from above because you must enter the entire URL instead of only a file name.

For example in the Picture URLs column, enter the following line:

http://www.mycompany.com/images/itemPic1.jpg, http://www.mycompany.com/images/itemPic2.jpg, http://www.mycompany.com/images/itemPic3.jpg, http://www.mycompany.com/images/itemPic4.jpg

With this method, Merchant will also create thumbnails in your image library for these images. We recommend that you use this method if you choose to host images locally.

Managing your images in Merchant is very similar to the way you manage your inventory. There is a primary view used to manage your image library and a separate view to resolve any imaging problems.

You manage your image library primarily from the Images view (Tools > Images). This view displays your entire image library and from it, you can import, export, resize and delete images. Additionally, this view displays how much storage space remains in your account.

Image Folders

Once your account contains many images, you may want to consider organizing your images into folders so that they will be easier to find and manage.

To add images to a new or existing folder:

1. Place check marks by the images you want to group.
2. Click
3. On the folder page, you can either create a new folder or select an existing one from the dropdown menu.

To remove an image from a folder or change folders:

1. Select the image and click the edit icon ()
2. From the Folders dropdown menu, either select a new folder or choose “Select one” if you do not want to use any folder.

Delete Images

To free up room in your account, you should periodically remove images from your image library. However before you delete anything, you should check to see what, if any, inventory items are associated with the image. To see these associations, look in the “Items” column of the Images view and click on the numeric blue link. If you see a ‘0’ in this column, then the image is not associated with any inventory items.

To delete images:

1. Check the files you want removed.
2. Click

To restore deleted images:

1. Click the “View Deleted Images” link at the top of the page to see recently removed images.
2. Click

Files remain in the Deleted Images view for 30 days or until you delete them manually. Once an image has been deleted from the Deleted Images view, it is permanently removed from the system.

The Image Alerts view (Tools > Image Alerts) shows any problems with images uploaded to your account.

Cause:
In most cases, image errors were caused by files that were corrupt, invalid images, or too large. Additionally, if in Settings > Image Hosting you have “Automatic Overwrite” set to “Do not automatically replace existing images,” then you will get an image alert if you try to upload an image with the same name as an image already in your library.

Solution:
Generally in the case of an error, you should correct the error and upload the file again. However if the alert was due to a duplicate filename, select and you will then have the option to overwrite the existing file. If you wish to rename the image file, you must do so outside of Merchant and upload it again.

While you should usually edit your images outside of Merchant, you can resize your images from your Merchant image library. This is particularly useful if you have many images of different dimensions that you want to resize in bulk to all be a certain height or width.

To resize images:

1. Put checks beside the image you want to resize.
2. Click
3. You can then enter a new pixel height, width, or both.




Note: If you enter only a width or height, Merchant will preserve the aspect ratio of you image. If you enter both dimensions, the aspect ratio of your image will not be preserved so the image may get distorted.

Any size changes you make to an image will take a few minutes to propagate throughout our servers. Therefore, you will not see a size change if you attempt to view an image immediately after you resize it.

In most cases, you do not need to resize your images because you can specify the exact image dimensions in your HTML code. However if you use either enlargeable images or the image chooser, you cannot control the image size with HTML so you have to resize the images within Merchant.

Once your images are in your image library, it’s time to use them in your ad templates. As you probably know, ad templates define the “look and feel” of your listings. Essentially, ad templates contain the HTML for your ads with special “template tags” that allow you to re-use a template for multiple ads. This section explains how to insert both static and dynamic images into your ad templates.

Creating ad templates does require some knowledge of HTML or a familiarity with an HTML editor. We suggest using a “WYSIWYG” editor such as Microsoft FrontPage or Macromedia Dreamweaver.

Static images are images that should remain constant from ad to ad. For example, your company logo or other graphics that you want to appear in all ads that use a particular ad template. These images should be inserted into your HTML code as traditional static URLs (e.g. https://secure.images.channeladvisor.com/Images/myPicture.jpg). The only trick is determining what the URL is for your image.

To insert a static image into an ad template, do the following:

1. Go to your image library (Tools > Images).
2. Put a check mark by the image or images you want to use and click
3. For each image you selected, you will see the URL for the image in top Image URLs box and the basic HTML needed to use the image in the lower HTML box.
4. Highlight either the URL or HTML code and copy it (Ctrl-C).
5. Go to your ad’s HTML code and paste the information in (Ctrl-V) at the appropriate location. If you copied only the URL, you will need to enclose it in an <IMG SRC> tag in your HTML code.

All images you have referenced with static URLs will appear in all ads that use that ad template.

Dynamic images are ones that vary from ad to ad depending on the item. These images are associated with a specific inventory item and are inserted into ad templates with “template tags.”

If you are unfamiliar with template tags, they are special tags that tell our software when and where to insert certain information about the item. For example, the {{IMAGE(ITEMIMAGEURL1)}} tag tells Merchant to insert the first image associated with an inventory item.

There are 4 types of template tags you can use for individual images in your ad templates: normal image, secure image, thumbnail image, and enlargeable image.

The actual template tags can vary based on the Image Placement name. Therefore for these examples, we will assume that the image placement name is “ITEMIMAGEURL1”. You can see your image placement names in your Image Hosting settings (Settings > Image Hosting).

1. Normal image - This tag simply inserts the URL to the image for that inventory item.

Tag Name:	ITEMIMAGEURL1
Tag:	{{IMAGE(ITEMIMAGEURL1)}}
HTML example:	<img src=” {{IMAGE(ITEMIMAGEURL1)}}”>



2. Secure image - This tag inserts a secure URL (“https” instead of “http”) to the image. Secure images should be used for SSL (Secure Shell) pages because a normal, insecure image may cause security errors for people viewing the page.

Tag Name:	ITEMIMAGEURL1(secure)
Tag:	{{SECUREIMAGE(ITEMIMAGEURL1)}}
HTML Example:	<img src=” {{SECUREIMAGE(ITEMIMAGEURL1)}}”>



3. Thumbnail image - This tag inserts a small thumbnail version of an image. You can insert both normal and secure thumbnail images.

Normal thumbnail:

Tag Name:	ITEMIMAGEURL1(thumbnail)
Tag:	{{THUMB(ITEMIMAGEURL1)}}
HTML Example:	<img src=” {{THUMB(ITEMIMAGEURL1)}}”>

Secure thumbnail:

Tag Name:	ITEMIMAGEURL1(thumbnail)
Tag:	{{THUMB(ITEMIMAGEURL1)}}
HTML Example:	<img src=” {{THUMB(ITEMIMAGEURL1)}}”>




4. Enlargeable image - This inserts a thumbnail sized image that is a link to a pop-up window containing the full sized image. This tag does not actually enlarge the original image. However, it is a good way to display a large image that would normally be too big for the ad.

Tag Name:	ITEMIMAGEURL1(enlarge link)
Tag:	{{ENLARGE(ITEMIMAGEURL1)}}
HTML Example:	{{ENLARGE(ITEMIMAGEURL1)}} Do not enclose this template tag with other HTML tags.




The Image Chooser

The image chooser is a good way to display multiple images for an item. The image chooser displays up to 16 images in the “iPix format” where one image is displayed full-size in a viewing window along side small thumbnails of the other images. If you click on a thumbnail, it is displayed full-size in the viewing window. The thumbnails are displayed in two columns either to the right or left of the viewing window.

Tag Name:	Right-side Image Chooser
Tag:	{{IMAGECHOOSER(R)}}
HTML Example:	{{IMAGECHOOSER(R)}} Do not enclose this template tag with other HTML tags.





This example of the Image Chooser displaying 4 images with the central window on the right. There is also a Left-side Image Chooser that will place the viewing window to the left of the thumbnails.

The images that are used by the image chooser are configured on the Settings > Image Hosting page in the “Image Placements” section under the “Display in the Image Chooser” column. The image chooser will use all images placements marked with a check.

Before you post an auction to the marketplace, you should preview your images, ad templates, and ads to be sure they conform to your expectations.

To view individual images:

1. Go to your image library (Tools > Images)
2. Click the small thumbnail of an image under the “Click to Preview” column heading. This will open a pop-up window containing the full-size image.

To preview an ad template:

1. Go to the Ad Templates view (Inventory > Ad Templates)
2. Select the preview icon () in the Ad Templates view or click the Preview button at the bottom of the Edit Ad Template page. This will open a pop-up containing the ad template.

Any static images in the template will appear normally but data for template tags will not be inserted. Instead, you will see any template tags as text in the preview window.

To preview a complete ad and see exactly how it will appear in the marketplace:

1. Go to the Ads view (Inventory > Ads)
2. Click the preview icon ()

This will again open a pop-up window containing the ad but unlike the ad template preview, all template tags will be replaced with relevant data about the item. We recommend that you preview all ads before scheduling them to post to the marketplace.