Creating Template Packages: Part 1 of 4

Introduction

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:

Install a pre-made Template Package in your store and then use it as-is or customize it.
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.

Prerequisites

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.

Storefront
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.

Template
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

Follow @modularmerchant

Rank and add a comment to this article

Only logged in users may leave comments and rank articles. Log in to have your say!