Tips for Creating an Online Store

You can use our custom CSS feature to create a unique design for your store. This document explains how to install a custom CSS file and how to upload images to use with your CSS.

The Learning Curve
Developing with CSS has a significant learning curve. New users should do some reading and go through an online tutorial before attempting anything. Users with basic
CSS knowledge should experiment with modifying the default CSS provided in the Headquarters. Intermediate and advanced users should be comfortable using our CSS reference to create complex new designs and layouts.

If you are having trouble getting your CSS to look right, there are lots of online reference materials.

Updating a CSS File

1. In your store Headquarters, go to the Store > Custom CSS tab.
2. Check the box to “Use custom CSS as defined below”.
3. The default CSS that appears in the editing window is the CSS used in our Standard template. You can begin editing from there, or you can paste in your own file.
4. Click “Update CSS” to save your changes.
5. View your store to see the new design in place. You may have to reload the page and/or press CTRL-F5 (in Windows) to see the changes.

Uploading Images to Use with your CSS

You may be interested in using background images, button images, or other types of images with your CSS file. We make it easy and let you host these images on our servers.

1. In your store Headquarters, go to the Store > CSS Images tab.
2. To upload an image, click on the Browse button and find the image that you would like to upload.
3. Click Upload to upload the image.

All the images that you upload will be accessible in the directory http://yourstorename.flyingcart.com/mytemplates/images, with the original filename of the file that you uploaded. For relative links, you should use mytemplates/images/ as the relative path.

For example, if you have an image called myimage.jpg that you want to set as a background, you would use the following CSS in the body tag: background-image: url(“images/myimage.jpg”).

Tips

Make sure you check your site in different browsers. Some CSS tags look very different in different browsers, and some are not universally supported. Invalid CSS may cause your customers difficulty using the site. We recommend that you check your site in Internet Explorer 6 and 7, Firefox, Safari, and on a Mac and PC to make sure it looks like you expect.

Tags: css, design

---

This entry was posted on Friday, December 28th, 2007 at 12:46 pm and is filed under Help & Support, Store Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.