3 Legs InternetDomain
Names
Hosting
Packages
Website
Packages
Custom
Websites
Content
Management
E-Commerce
Services
 

Support

Setting the Master Header & Footer Files

In order to match the look of the product catalogue and E-Com pages to your website you need to create and set masters header and footer HTML files.

Before we look at how to set these files you first need to understand how these work. When the Security-Payment.com system generates a page in will insert the html code from the appropriate header file before the content of that page and the footer file code below. In order for this code to be HTML valid it must include certain elements.

Prod Cat Header

This file includes all the HTML layout code before the content of the page. This must include the <head></head> section and the opening <body> tag. You also need to link to the style sheet used for your website design and the style sheet for the product catalogue. The default directory for the product catalogue is /prod_cat/ with the style sheet being name shop.css, Therefore the header file must include the following code within the Head Tags:

<link href="/prod_cat/shop.css" rel="stylesheet" type="text/css">

Prod Cat Footer

This file includes all the HTML layout code after the content of the page. It must include the </body> tag.

E-Com Header

This file includes all the HTML layout code before the content of the page. This must include the <head></head> section and the opening <body> tag. You also need to link to the style sheet used for your website design and the style sheet for the product catalogue. Unlike the Prod Cat Header file all the images used in this HTML must be in the file manager of your control panel and any links back to your site should be the full URL path. You must also include a copy of the style sheet for you main site design in the file manager, we will use style.css for the purposes of the code below. The style sheet for the E-com pages is called shop.cs by default. Therefore the header file must include the following code within the Head Tags:

<link href="/retailer_files/XX/uploads/style.css" rel="stylesheet" type="text/css">

<link href="/retailer_files/XX/uploads/shop.css" rel="stylesheet" type="text/css">

Where XX is your retailer ID number.

All images should be pathed with the following path:

/retailer_files/XX/uploads/

Where XX is your retailer ID number.

Since the e-com header and footer files are used on secure pages you must NOT use images or style sheets located on a different website to the Security-Payment File Manager. This will cause an SSL error so all images used must be in your file manager.

E-Com Footer

This file includes all the HTML layout code after the content of the page. It must include the </body> tag. Like the header file any images must be pathed to the file manager and links back to your website should be the full URL path.

Since the e-com header and footer files are used on secure pages you must NOT use images or style sheets located on a different website to the Security-Payment File Manager. This will cause an SSL error so all images used must be in your file manager.

Below are the instructions for setting the headers and footers.

  1. Use the File Manager to upload the header and footer HTML files and Style Sheets to your file manager.
  2. Go to the Retailer Control Panel and select “Headers and Footers”from the right hand menu.
  3. In the page that appears use the drop-down menus to choose the e-com header and footer files for the Header, Footer, Secure Header, and Secure Footer options. Choose the Prod Cat header and footer files for the Product Catalogue Header and Footer options.
  4. Choose Submit to save these settings.