GiftSuite Support: (919) 477-2100 - press option 2 Support@Agenne.com
Page: 1   2   3   4   5   6   7   8

STEP SIX: Customization

OK, this is the fun part. There are a number of major systems that are used to customize GiftSuite ecommerce software to make your new catalog, cart, and registry system look like the rest of your website.

  1. Custom background wallpaper - upload any background image to use as wallpaper
  2. Custom page header - a small html page which is displayed at the top of every page
  3. Custom page footer - a small html page which is displayed at the bottom of every page
  4. Cascading Style Sheets - change typefaces, buttons, links, text, almost every element of every page
  5. Custom templates - many parts of the software are based on customizable templates
Custom Background Wallpaper
We will begin with the simplest customization: adding background wallpaper. Each application can have its own unique wallpaper or you can use the same for all. For an example, let's take a look at how to upload your wallpaper to the cart system. If you are still on the cart settings page, 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 wallpaper image you wish to upload. Click this button to bring up the "File Open" dialog box and use it to navigate to the wallpaper image on your computer.

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 your wallpaper (and its name appears in the form field), click "Update". This will upload your image file and set it as the background wallpaper for your cart pages.

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.

To upload the same (or different) wallpaper to the other applications, go to the settings screens for those applications, click the wallpaper icon, and upload the wallpaper image the same way you just did for the cart pages.

Custom Header
A custom header is a small html page which is included at the top of all pages in a particular application. You create this small page yourself, host it on your web site, and enter its full URL into the settings screens. Just like the wallpaper, you can have the same header for each application, or different headers.

What goes in a header?
Your custom header should start with your company logo. Add basic site navigation links. How about some basic information like your phone number, store address, or hours? GiftSuite ecommerce software includes a search feature called Smart Search. You can optionally hide the search box and include the search feature in your header. The code that you need to include is located in the code generator section. Click the code generator icon on the Catalog Management panel on the administrator main menu. You can include javascript, java applets, flash movies, anything you want!

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 catalog, cart, and gift registry 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 Footer
A custom footer is just like a custom header except that it is included at the bottom of every page. Some things that might go in your custom footer include links to things such as your privacy policy or terms of use.

Cascading Style Sheets
Using cascading style sheets, you can affect the look of virtually every element on every page of GiftSuite ecommerce software. These page elements have been assigned special names. For example, the labels that you see next to each form field on the Create New Gift Registry page are assigned the name "form-label". You can set the font size, typeface, color, background color, font weight (bold or normal), and other effects using styles. For an example of what a style sheet looks like, click the CSS icon in the code generator section of each of the application panels.

To link to the style sheet, include a link to the style sheet in the Head Tag Code field in the settings screen. You can create a separate style sheet for each application, or you can create one big one and link it to all of the applications. The link will look similar to this:

<LINK REL="stylesheet" TYPE="text/css" HREF="/mystyles.css">

Custom templates
Many parts of the software can be customized any way you like using page templates. These templates are custom built for you by our Support group. We take your design and create a matching custom product page template. Most templates incur a small design fee.

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:

  1. Some browsers won't correctly carry over the browser variables from page to page within iFrames. Especially older versions of Internet Explorer
  2. 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 applications allow maximum flexibility for design so you should not need to use iframes anyway.