STEP FOUR: Customizing the Shopping Experience
OK, this is the fun part. The look and feel of the shopping cart software is extremely customizable. You can keep it simple with just a background color and your logo at the top or you can create your own custom header and footer along with a background color or wallpaper. The thing to remember is that your customer's experience says a lot about who you are as a company so it is important to make your shopping cart look as much like the rest of your website as possible.
- Background wallpaper - upload any background image to use as wallpaper
- Custom header - a small amount of HTML which is included at the top of every page
- Custom footer - a small amount of HTML which is included at the bottom of every page
- Cascading Style Sheets - change typefaces, buttons, links, text, almost every element of every page
- Custom templates - many parts of the shopping cart software are based on customizable templates
|
Background Wallpaper
We will begin with the simplest customization: adding background wallpaper. So, let's take a look at how to upload your wallpaper to the shopping cart system. If you are still on the shopping cart settings screen, click the "Cart Wallpaper" icon in the left icon menu.
This will bring up the Wallpaper Upload Screen
Notice the "Browse" button. This allows you to search on your own computer to find the image you wish to upload. Click this button to bring up the "File Open" dialog box and use it to navigate to the image on your computer that you want to use as your background.
NOTE: The image file that you choose MUST be either a .jpg, .gif, or .png file. Although you may have your logo as a .bmp file, these will not render correctly in all browsers so it is important not to use them.
Once you have selected the image (and its name appears in the form field), click "Update". This will upload your image file and set it as the background for your shopping cart.
Notice the "Show Wallpaper" checkbox. This will be checked by default. The purpose of the "Show Wallpaper" checkbox is to allow you to define background wallpaper, but choose to not show it.
|
Custom HTML Header
A header is a small html page which is included at the top of all pages in the checkout process. You create it yourself, host it on your web site, and enter its full URL (starting with http://) into the settings screen.
What goes in a header?
Your header should start with your company logo. Add basic site navigation links. How about some information like your phone number, store address, or hours? You can also include javascript, java applets, flash movies, custom software, anything you want!
To add a header to your shopping cart, write the html, upload it to your web site, and link to it in the shopping cart settings. Click the Shopping Cart Software Settings Reference link at the top right of this page to see where and how to add the link to your header.
The <body> tag
All pages throughout the system include an HTML Body tag unless you specify a body tag within your custom header. If you do specify a body tag, then the system will suppress its own body tag. This can cause confusion since the background wallpaper is loaded by the body tag. If you specify your own body tag and try to upload wallpaper through the administrator, it will not appear in your cart pages. To solve the problem, either include a background specification in your own body tag or remove the body tag from your custom header.
|
Custom HTML Footer
A custom footer is just like a header except that it is included at the bottom of every page. Some things that might go in your footer include links to things such as your privacy policy or terms of use as well as a copyright statement.
To add a footer to your shopping cart, create the html footer, upload it to your web site, and link to it in the shopping cart settings. Click the Shopping Cart Software Settings Reference link to see where and how to add the link to your footer.
|
Cascading Style Sheets
Using cascading style sheets, you can affect the look of virtually every element of the shopping cart software including the text font, text color, form input fields, font weight (bold or normal), submit buttons and more. These elements have been assigned special names within the software. For example, the labels that you see next to each form field on the shopping cart checkout screen are assigned the name "form-label". This is the power of CSS - the ability to change almost any element on many pages while keeping all of the style definitions in one centralized location. To add CSS to your custom HTML header, sign in to the administrator, click the code generator icon and you will see the CSS style names icon in the left menu. Click this icon to go to the CSS screen. Then, you will see a Sample Style Sheet icon. Click it. Here you will see a duplicate of the style sheet used for CustomCart. To override the settings, change the values within the sheet.
Finally, upload your style sheet to your web site and enter its full URL (starting with http://) into the "Head Code" field on the Shopping Cart Software Settings screen as shown here:
Note that the proper format for the Style Sheet reference URL is:
<LINK REL="stylsheet" TYPE="text/css" HREF="http:/www.your_site_url.com/css/your_style_sheet_name.css">
|
Custom Templates
|
Many parts of the shopping cart software can be customized any way you like using templates. These templates are custom built for you by our Support Team. We take your design and create a matching template. Most templates incur a small design/implementation fee. Remember, the shopping experience is the customer's view of your company so make it count!
|
iFrames
Many developers are tempted to use iframes in order to completely control the user experience in customizing our applications. This is not a good idea for two reasons:
- Some browsers won't correctly carry over the browser variables within iFrames. Especially older versions of Internet Explorer
- When the customer is checking out, and are in the secure pages, the browser will not show the lock icon indicating that the page is secure. This can discourage the customer from completing their order.
Always avoid using iframes when creating a custom design. Our software allows maximum flexibility for design so you should not need to use iframes anyway.
|
|
