Advanced customisation of your shopping cart design

The FoodStorm shopping cart allows you to apply you own look & feel by creating a custom template. Custom templates require a good knowledge of HTML, CSS and general web design principles (in other words, you pretty much need to be a web designer to do this). If this all sounds too hard, then you can still pick from one of our pre-designed templates, and customise it to suit you.

The shopping cart template format

A shopping cart template is just a HTML document, which can also contain CSS styles. The only requirement is that you include a few HTML tags so that FoodStorm can insert content in the right places.

The following tags must be included in your template:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> . The underlying styles of the FoodStorm shopping cart adhere to the XHTML 1.0 Transitional DTD. If you omit this tag, or use a different DTD, pages may not render correctly.
  • <head>…</head> & <body>…</body>. Any valid HTML document will contain these tags anyway.
  • <div id="content"></div>. This tag identifies where the main content of each page will appear.
  • <div id="customerbar"></div>. This tag identifies where the customer links will appear, such as Sign In, Your Account & Checkout. Typically you'll want these links to appear somewhere in your page header, which is why a separate tag is provided.

There are also a few optional tags that you way also want to use, but it's up to you:

  • <div id="footer"></div>. A footer will always be added to the bottom of each page, which contains links to your privacy policy and terms & conditions – but sometimes you may want the footer to be nested within a particular parent tag. If this is the case, you can use this tag.
  • <div id="cartsummary"></div>. This tag renders a count of items currently in the customers shopping cart and links to the View cart page. For example: "12 items".
  • <div id="pages"></div>. This tag renders a menu of pages, as defined in the Shopping cart pages setting in FoodStorm Settings. For example: Home, About Us, Contact Us & FAQ. If your shopping cart is linked to your existing website, you may opt not to use this tag.

V1 and V2 templates

The current shopping cart layout is version 2.0, which has additional functionality than the 1.0 format. To provide legacy support for version 1.0 shopping carts, a number of features are hidden by default in the default stylesheet.

However, we have provided an additional stylesheet which enables the new functions – we highly recommend you include this in the <head> of your template:

<link href="/public/content/assets/v2styles.css" rel="stylesheet" type="text/css" />

A basic example

Below is a basic example of a shopping cart template, which includes all of the tags described above, and the v2.0 stylesheet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="/public/content/assets/v2styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        /* Put any custom styles here */
    </style>
</head>
<body>
    <div id="header">
        <p>Now in your cart: <div id="cartsummary"></div></p>
        <div id="customerbar"></div>
    </div>
    <div id="pages"></div>
    <div id="content"></div>
    <div id="footer"></div>
</body>
</html>

Writing & testing your template

When writing your template, we highly recommend you create the HTML file locally on your PC or Mac, and use a good HTML editor with syntax highlighting to make your life easier.

To test your template you need to have Administrator access to FoodStorm. Login to FoodStorm, then go to Settings > Shopping Cart > Design.

Click on the Advanced tab. From here you can copy & paste your template from your HTML file and the Preview panel below will update to display your template.

To assist you in identifying specific element styles on each page, we recommend you use a HTML inspection tool like Firebug, Google Chrome developer tools (press F12 in Chrome) or for the adventurous, the Internet Explorer developer tools (press F12 in IE). Using these you can click on a page element to inspect it, which will tell you the CSS class or ID you can add to your template.

Adding styles

You can add CSS styles to your template by including them within a <style> tag in your template (see the example above). If you prefer, you can reference an external stylesheet file – however you’ll need to host this file yourself as FoodStorm does not provide a file hosting facility.

Adding images

You can upload image files into FoodStorm and then reference them via an <img> tag, or within your CSS styles.

To upload an image you need access to the image uploader which is available in any of the standard FoodStorm templates. Click on the Templates tab and pick a standard template, then click on the Customise tab and click on the Logo element to customise.

Click Add, then upload an image into FoodStorm. Take note of the filename and click Save. You can then reference the image in your template using the following URL:

/images/image?name=your_file_name_here

For example: <img src="/images/image?name=logo.png" />

Adding other external content (Javascript, Fonts etc)

You can add any other external content you like, however you need to host it yourself as FoodStorm does not provide a file hosting facility.

Publishing your template

Once you’re happy with your shopping cart template and want it to go live, click the Publish button on the Shopping cart design page. We recommend you always keep hold of your original template html file.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk