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

Creating Template Packages: Part 3 of 4

Now that we're familiar with the Template Package's directory and file structure, we can build our own Template Package for use in our Modular Merchant shopping cart.

The process covered in this tutorial is provided as a suggestion. The software and techniques you use may differ from those presented in this tutorial. With that in mind, let’s begin!
Build the Template Package's directory structure

First off, create the directories that will contain the Template Package's files. A Template Package is like a mini-website: it will have its own pages, CSS and image files, and perhaps even a dash of JavaScript (just to make things interesting).

Start with a directory with the name of the Template Package. The templates (example.tpl), CSS and JavaScript files will be saved in this named directory. Then, create an "images" subdirectory. Image files will be saved in this location.

Using this directory structure ensures my Template Package’s compatibility with the store, and will prevent me from needing to change the names or locations of my files later. It will also prevent the need for changing the paths to my images and other files after I upload the package, because the store’s template-rendering engine is designed to work within this file structure.

In this tutorial, the name of my Template Package is going to be the incredibly original name of sample_store.

The sample_store directory will contain all of my package’s HTML template, JavaScript and CSS files. It will also contain a subdirectory titled images which will contain the images used in the template.

Since the Template Package's files and directories are going to be used on the internet, it’s a good idea to stick with standard web-friendly naming conventions, which means no spaces or punctuation in directory or file names.
Good:   sample_store
Bad:    Sample Store
Horrid: Sample's Store!

Determine the number of templates
A Template Package will contain roughly 35 different templates, one for each section of the store's administration area.

However, new to MMv4 is the option to make an entire Template Package that consists of just one single template!
All MMv4 Template Packages must contain, at a minimum, a template titled universal.tpl. This universal template will be used in the place of any other template excluded from the Template Package.
The Store Home page uses a template named index.tpl. It is the template that is used by the home page of the store's public shopping area.

If my "sample_store" Template Package did not include index.tpl, then, when a customer view's my store's home page, the store will automatically be rendered using the contents of the universal.tpl template instead.

The universal template may contain any HTML content, just like any other template. However, it must also always include the {UNIVERSAL-CONTENT} QuickCode Tag. This QuickCode Tag will be translated into the default content for the storefront page being viewed.

The universal templating system allows an entire Template Package to be created using just one template. Some or all of the other 35 templates can also be included in my Template Package. If a storefront page's corresponding template file is present in my Template Package, then it will be used. Otherwise, the universal.tpl template will be used instead.

Construct the template files

Since Dreamweaver is the web design application that I happen to have installed on my computer, I’ll be using it in this tutorial. However, you can use any web design application you like… hard-core web developers could even write their HTML code directly in a text editor. The application used to design templates will have no affect on their compatibility with Modular Merchant. The shopping cart software can display any template that is built to web design standards.
To ensure that your Template Package includes all the required template files, and that they’re named correctly, start by making a copy of an existing Template Package, and work from that.

Here's an example of what a template may look like when loaded into Dreamweaver:

Note the presence of the QuickCode Tags in the template. The tags will be displayed as their text version within Dreamweaver. (ie: {THEY-LOOK-LIKE-THIS}) However, all of these tags will be translated into their HTML equivalent when I view them online in my storefront. For example, the {PRODUCT-NAME} QuickCode Tag will be translated into the name of that specific product.

A glossary of available QuickCode Tags is available at:

Design each template the same way you would design any web page. HTML, CSS, JavaScript and PHP code can all be used. Once all of the templates the Template Package will contain have been created, we're ready to continue to the next step.

Page 1 2 3 4

— Last Edited - 04/26/2013 8:47am 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