Knowledge Base
Shopping Cart Software Online Manual
Creating Template Packages: Part 2 of 4
Creating Template Packages: Part 1 of 4 Creating Template Packages: Part 3 of 4
Location Home > Shopping Cart Software Components > Administration Area > Design > FAQs & Tutorials

Creating Template Packages: Part 2 of 4

The structure of a Template Package

A Template Package is a set of files that control the look and feel of your storefront. Template Packages typically include: a set of HTML templates plus the images, buttons, Cascading Style Sheets (CSS) and JavaScript files used in its templates.

Your store’s Administration Area includes a set of tools for managing your Template Packages.

When on the web server, Template Packages use the directory structure shown in the diagram below.

template packages & ftp
If you’re making your own Template Package, then you can expedite the development process by setting up an FTP connection to upload & download the Template Package's files directly to your store.

Using FTP will install the Template Package directly in your store, bypassing the need to install and/or edit the Template Packages using the tools in the Design section of your store’s Administration Area.

FTP is an available option for activated Modular Merchant Silver and higher account plans (not available for the Bronze plan or Trial period).

common pitfall: linking to files in a template package
Template Packages are located within a template_packages subdirectory in your shopping cart's website. For example, a Template Package named "arlington_red" would be located on the web server in a location similar to:

However, my store's web pages, such as the storefront's Home Page, are located in the /httpdocs/store/ directory. So, does this mean that I need to use this subdirectory structure in any links I add to my templates?

For example, if I'm working on my storefront template, and I want to add an image that's located in my Template Package's "images" directory, does that mean that I would need to link to it with an "absolute" path like this?
<img src="/store/template_packages/arlington_red/images/example.jpg" />

The answer is: No, that's not necessary!
That image should be linked to using this "relative" path instead:
<img src="images/example.jpg" />

But, since the Template Package files are installed in a subdirectory, won't using the "relative" path to the image break the link when the page is viewed on my website? The answer, again, is nope. And here's why...

The Modular Merchant shopping cart software was designed with this in mind, and is specifically designed to auto-correct paths such as this when the website is viewed in a web browser.

Why was the cart designed to do that?
This was done so that Template Packages could be worked on independently in HTML Editors such as Dreamweaver.

For example, this method would allow the entire "arlington_red" Template Package directory to be downloaded, and then opened in Dreamweaver. Dreamweaver has no way of knowing that the "arlington_red" directory is actually a subdirectory of the "template_packages" directory on my website. If "absolute" paths were used in the templates to link to the images, JavaScript and other content, then they would all appear as broken within Dreamweaver.

For that reason, we designed the shopping cart software to allow "relative" paths to be used in the templates, therefore allowing Dreamweaver to display everything correctly. The shopping cart software is expecting this, so it will automatically and invisibly correct the relative paths when the storefront pages that use those templates are viewed in a web browser. (This auto-correction doesn't actually alter the contents of the template files, it just corrects the rendering within the web browser.)

This method allows what is seen in Dreamweaver's WYSIWYG interface to match what is seen when the pages are viewed in a web browser, without the need to edit the templates' source code back and forth depending on where it's being viewed!

For demonstration purposes, the examples in this guide will not be using FTP to manage templates. Instead, this guide will demonstrate working with templates using the store’s built-in Design tools.

Page 1 2 3 4

— Last Edited - 06/12/2013 4:48pm PDT
Rank and add a comment to this article
Only logged in users may leave comments and rank articles. Log in to have your say!
  Knowledge Base Home

  QuickCode™ Tag Glossary

  Modular Homepage

Not Logged in.
Either Log in or create a User Account.

Other articles in this category...

Add "Search by Price" links to the storefront

Add a "Terms of Service" agreement to a store page

Add a favicon

Add images to an email template

Adding a Company Name field to the storefront

Can QuickCode Tags Be Used in PHP Statements?

Can QuickCode Tags be used on non-store webpages?

Common customizations for the Order Receipt email

Copy a template package

Create a custom version of any QuickCode Tag

Create reusable headers/footer with Custom QuickCode Tags

Creating a Customer Registration Form

Creating templates with content viewable only by specific Customer Groups

Customize the category template to display subcategories in a grid

Customize the navigation header of a responsive template

Customize the navigation header of a responsive template

Customize the tabbed content area of a responsive product template

Disabling featured product display

Display a message if a customer has already purchased a product

Display a slideshow on any store page

Display sale prices in red text

Have your store match a website that links to it

Introduction to editing responsive template packages

Link your company logo to a different website

List of available Templates for use in Template Packages

Playing Flash video instead of downloading it

Require service agreement when a specific product is purchased

The difference between templates and web pages

Troubleshooting Missing Images

Untranslated Red QuickCode Tags

Using "Add to Cart" links on your website.

Using comments in Custom QuickCode Tags

Using the Custom Webpage Editor to add links to your Storefront

Your storefront on smartphones & mobile devices

Creating Template Packages: Part 1 of 4

Creating Template Packages: Part 2 of 4

Creating Template Packages: Part 3 of 4

Creating Template Packages: Part 4 of 4