|
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:
/httpdocs/store/template_packages/arlington_red/
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.
|
