Help Search our knowledge base:

Index - FAQ - Cart Help Buttons - Extra Features - Custom Layout
 Where is this feature?
1. Log In
2. Extra Features
3. Custom Layout

 Related Items
1. 'Header' And 'Footer' Template
2. Can I use style sheets in my custom HTML?
3. Multi-language Image
4. WARNING: Your header/footer does not support a color/layout feature

 Details
Frequently Asked
Question (FAQ)
Document Number: 865

Optimize for Printing
E-Mail This Link
 Feedback
This document ...
helps resolve my question or problem.
does not apply to my question or problem.
is inaccurate for my question or problem.
Upload Custom Header/Footer/Images

Use the custom files to display your own custom menus, images, colors, or layout.

This feature requires knowledge of creating HTML files. Normally the shopping cart will display it's own header and footer for every page. This option will allow you to change the template that is used.

Using images
In order to avoid warning messages in your customers browser you will need to have all your images on a secure server. We offer the ability to upload several images using the Upload Custom Images feature. The path to these images on the web server will be:

Relative path
/userpages/USERNAME/images/FILENAME

Full URL
https://gripleash.cartmanager.net/userpages/USERNAME/images/FILENAME

custom.html
This is the HTML that appears around the shopping cart itself. This includes <html>, <body>, and nearly any other HTML tags you want at in your custom header/footer. Simply create your own web page titled "custom.html" and type the phrase "put cart here" (without the quotes) wherever you want the shopping cart to appear.
Click here for a simple example custom.html file, or here for a slightly more advanced example.

Note: for a mobile version of the template upload a custom_mobile.html file instead.

style.css
If your custom.html page uses style sheets you can upload a style sheet definition using this filename.

The URL would appear as:
https://gripleash.cartmanager.net/userpages/USERNAME/images/style.css

In addition to normal HTML, you can add certain pre-defined shopping cart variables to allow further integration into your shopping cart. These variables begin and end with "##".

Once you have uploaded the files be sure to select "custom" from the 'Header' And 'Footer' Template setting in "Color/Layout Settings" in the "Cart Settings" section of the cart.

Here is a list of the current variables available to you:
##Copyright##The shopping cart copyright notice. This must appear somewhere in your custom.html file. If you do not add one, the shopping cart will automatically append it to the end of pages.
##HTML.PageTitle##The title of the current page.
##HTML.JavaScriptAllowed##Some portions of the shopping cart (such as outbound email) may have problems if your header/footer includes any JavaScript. You can prevent these problems by encasing any JavaScript that you use inside of an if statement

#IF ##HTML.JavaScriptAllowed##
<script>
// your script here
</script>
#ENDIF
##HTML.JavaScript##The cart occasionally uses minor JavaScript. Use this variable to include the scripts in your custom.html:
#IF ((##HTML.JavaScriptAllowed##)&&(##HTML.JavaScript##))
<script language="JavaScript" type="text/javascript">
<!-- Hide script
##HTML.JavaScript##
// End script hiding -->
</script>
#ENDIF
##HTML.OnLoad##The cart occasionally needs to use the javascript "onLoad" event in the body tag. Use this variable to include the event:
<body
#IF ##HTML.OnLoad##
onLoad="##HTML.OnLoad##"
#ENDIF
>
 
##HTML.FontFace##Text Font
##HTML.BgColor##Background Color
##HTML.TextColor##Text Color
##HTML.LinkColor##Link Color
##HTML.ALinkColor##Active Link Color
##HTML.VLinkColor##Visited Link Color
 
##HTML.TitleTextColor##Title Text Color
##HTML.TableBackgroundColor1##
##HTML.TableBackgroundColor2##
##HTML.TableBackgroundColor3##
##HTML.TableBackgroundColor4##		Customer Info Divider
##HTML.TableTextColor1##Table Text Color 1
##HTML.Background##Background Image
 
##Company.Name##Company Name
##Company.Logo##Company Logo
##Company.Slogan##Slogan
##Company.Phone##Phone Number
 
##Bill.Name##Customers name (if they have entered it).
##Bill.FirstName##Customers first name.
##Bill.LastName##Customers last name.
##SSLImage##Display the SSL secured site logo


In addition to the variable, you also have these basic programming options. Each option must be the first, and only thing on the line.
#IF
#ELSEIF
#ELSE
#ENDIF		Simple logic abilities, you can use these to decide on whether or not to display a portion of your template.
#IF ##Bill.Name##
    Welcome back ##Bill.Name##.
#ELSE
    Please login for a custom greeting.
#ENDIF