Wanna spruce up your Shop? Add some pictures and attract more customers!

How to add images to your Zlio Shop:

1. Image Source Location

The picture you wish to integrate into your Zlio Shop should be already stored on your computer, from where you will upload it onto your Zlio Shop.

If the image is not stored on your computer, but rather on the internet, you can right click on it and choose the “save image as” option. Choose the location on your computer where you want the image to be saved.

2. Inserting the Image in your Zlio Shop

There are several spots within your Zlio Shop, in which you can add images:

• The easiest spot is the designated Image Space found under store display > display parameters > image. Click on the “browse” button and find the image location on your computer.

An image added here will appear on the top left side of every page of your store.

• Your Store’s Header and Footer. Go to Store Display > Header & Footer. Here you must enter the URL of the image in order for it to be displayed correctly. Please note that you must first upload the image from your computer to an online image hosting service. You can use a service like www.photobucket.com to host an image online.

You must then insert the Direct Link from the hosting Service into the Header or Footer of your store. Note that the Direct Link needs to be imbedded in the correct “img src” Tag.

For Example: <img src=”Image URL”>

An image added in the Shop’s Header will be displayed on the Homepage of your Shop, on the top right corner above the products. An image added in the Shop’s Footer will also be displayed on the Homepage of your Shop, but at the lower right corner underneath the products.

• The Store Description. Go to Store Identity > Store Description. Also here, you must embed your picture’s Direct Link which was produced by your online image hosting service inside the “img src” Tag. An image added in the Store Description will also be displayed on the Homepage of your Shop, but at the very bottom of the page.

• The Store Freetext. Go to Store Identity > Store Freetext. The image will appear at the bottom of the page, right underneath the products.

Here are some useful HTML Codes, which you can use to edit your embedded images.

The basic HTML Tag is : <img src=”Image URL”>

If you want your image to be centered, you need to use the <center> Tag.

For Example : <center><img src=”Image URL”></center>

If you want your image to appear on the left and the text to surround the image, you need to use this Tag: <div style=”float:left”></div>

For Example: <div style=”float:left”><img src=”Image URL”></div>

If you want your image to appear on the right, and the text to surround the image, you need to use this Tag: <div style=”float:right”></div>

For Example: <div style=”float:right”><img src=”Image URL”></div>

If you want to add a description to each image, which will be visible when you hover with your mouse above the image, you will have to use the “alt” Tag.

Search Engines cannot “read” your pictures, which means that plain pictures will not be included in Search Engines’ results. By adding the “alt” Tag, you are allowing the Search Engines to “read” and therefore index your images, improving their chances to appear in Search Results.

This is how you use the “alt” Tag:

<img src=”Image URL” alt=”Image Description”>

This entry was posted on Monday 14 July 2008 at 3:35 pm. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.