Knowledge Base
Shopping Cart Software Online Manual
Creating Template Packages: Part 1 of 4
Your storefront on smartphones & mobile devices Creating Template Packages: Part 2 of 4
Location Home > Shopping Cart Software Components > Administration Area > Design > FAQs & Tutorials

Creating Template Packages: Part 1 of 4


What's the purpose of this tutorial?
The purpose of this Working with Template Packages guide is to demonstrate the process of designing a set of HTML templates for use with the Modular Merchant shopping cart software.

Change the look of your entire store with just a click by using Template Packages!

This guide will focus on the design and layout of the storefront web pages. (For a definition of "storefront" and other terms we'll be using, see the "Key Concepts" section below.) Information on the software’s administrative, shipping and fulfillment options are not included in this guide. Information on those topics can be found in other sections of the Knowledge Base.

When it comes to designing your store, two options are available:
  1. Install a pre-made Template Package in your store and then use it as-is or customize it.
  2. Design your own templates from scratch and upload them to your store.
This guide will cover option two listed above. It will discuss the steps involved in designing your own custom templates from scratch.

This guide assumes that the reader already has a basic understanding of how to build a webpage; including working with HTML source code, and creating links, tables, CSS styles and images.

A tutorial on these prerequisites is outside the scope of this guide. However, if you require instruction on these items, many free resources and tutorials are available on the Internet, and a variety of books are available in the computer section of your local bookstore.

key concepts
Following is a list of common phrases that will be used throughout this guide.

Checkout Pages
Refers to just the storefront pages involved in the checkout process. The store uses a one-page checkout configuration by default, but it can accommodate an unlimited number of checkout pages. For example: You may collect all of the customer’s contact information on one checkout page, or collect shipping information on page one, billing information on page two, etc.

List Pages
This refers to storefront pages that display a list of products that match certain criteria. Examples of List Pages include pages that list search results, products in a category, or products by a vendor.

Product Details Page
The storefront's product details page displays detailed information about the selected product.

QuickCode™ Tag
A QuickCode Tag is a pseudo HTML tag that contains advanced HTML, PHP or JavaScript code. QuickCode Tags were developed by Modular Merchant to simplify the management of complex code in store templates.

A QuickCode Tag is formatted like this: {SAMPLE-QUICKCODE-TAG}. When viewed in a web browser, QuickCode Tags will be translated into the appropriate content. For example, {COMPANY-NAME} will display your company’s name. Many QuickCode Tags are available for displaying such things as product prices, customer information, the contents of the shopping basket, etc.

"Add to Cart" Link
An "Add to Cart" link can be used on any webpage, social media or email message to perform special functions. For example, "Add to Cart" links can be used to create a button on your website that adds a product to the customer’s shopping basket and then automatically forwards them to your store’s checkout area. Each product has its own list of "Add to Cart" links. These "Add to Cart" links can be found on the Search Products page in your store’s Administration Area.

Store Home Page
The Store Home page is the default starting page (Home page) of your public shopping area. The Store Home page is typically used to display new or featured products.

Refers to the entire public shopping area of your cart software. This includes the store home, product details, checkout, manufacturer, search results, basket, customer account, download, receipt, and all other pages that are accessible by your customers. Each storefront page is designed to perform a specific function.

A template is a file contained within a Template Package. Templates control the design of each storefront page. Templates may contain HTML, CSS, JavaScript, QuickCode Tags and PHP code. A template file is named something like: example.tpl

Each storefront page has a corresponding template. For example, the default template for the storefront's product pages would be product.tpl

If a storefront's corresponding template is not present in a Template Package, then the template named universal.tpl will be used instead. Therefore, it could be possible to make an entire Template Package consisting only of one universal.tpl template, which would be used by every storefront page.

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

Page 1 2 3 4

— Last Edited - 03/21/2013 10:18am 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