ModularMerchant
Knowledge Base
Shopping Cart Software Online Manual
The difference between templates and web pages
Require service agreement when a specific product is purchased Troubleshooting Missing Images
Location Home > Shopping Cart Software Components > Administration Area > Design > FAQs & Tutorials

The difference between templates and web pages

templates vs. web pages
I'm trying to add an "About Us" page to our store. I've created a new template in my Template Package named about_us.tpl. I would like to view this new page and add a link to it. But, when I go to www.mywebsite.com/about_us.tpl, I get a "Page Not Found" error. What is the URL of the new webpage I've added by creating this template?

This is an excellent question. In order to answer it, we must first clarify the difference between templates and web pages. Both serve a specific purpose in the shopping cart software, but they do not function the same as each other.
 

key concept: web page
For the purpose of this tutorial, a web page is any page in the shopping cart software that is publicly viewable when you visit its URL.

For example, the web address of a storefront's home page may be something like this:
http://www.mystore.com/index.php

The shopping cart software includes roughly three-dozen web pages, which are the pages one sees when viewing the storefront: the storefront's product pages, category pages, search results, checkout pages, the customer account area, etc.


The source code of these web pages is not available for editing. This is because these pages are full of scripting code that's busy making database queries, formatting variables and error-checking data. There's no HTML code present in the source code of any of the cart's web pages!


Huh? If the cart's web pages don't contain any HTML code, then what controls their design? The design of a web page's content is controlled by a template.
 

key concept: template
The design (the layout, color scheme, images, etc.) of each of the shopping cart's roughly 36 pages is controlled by a template. Each page of the cart has a corresponding template associated with it.

A set of templates, one for each of the store's webpages, is called a Template Package. (Click here for a list of available templates for use in Template Packages.)

Templates contain the HTML and CSS code that is applied to its corresponding web page. These templates are what's editable within the Design section of the store's Administration Area.

Templates are never viewed directly by a user. The template's corresponding web page is viewed instead. When a page is viewed in the storefront, that page's template is applied to it.


Another way to think of it is that there's several steps that take place when a store page is viewed in a web browser:

  1. First, before any content is displayed to the user, the web page retrieves information from the store's database.
  2. Then, the template for that store web page is loaded by the shopping cart software.
  3. Finally, the database information obtained in step one is inserted into the template loaded in step two. The resulting HTML code and page content is then rendered in the user's web browser.
example
For example, a store's home page is http://www.mystore.com/index.php

When the index.php web page is loaded, the shopping cart software first runs the series of commands that the index.php file contains, such as connecting to the store's database to obtain the information for the products that need to be displayed on that page.

After the index.php page runs all its commands and loads all of its data into memory, it then says to itself, "Okay, now that I've obtained all my data. Now I'm ready to render this page in the user's web browser."

The software then goes and looks up the index.tpl template file from the live Template Package. (If the Template Package does not contain that page's template file, it defaults to using the universal.tpl template in its place.)

The server then uses a series of complex algorithms and hand gestures to mash all of the product data it has stored in memory into the appropriate locations in the index.tpl template.

After the page's data has been spliced into its template, the completed amalgam is then rendered in the user's web browser.

The result: The content obtained by the web page is displayed in the design established by that page's template.
 
So, how do I add more web pages to my store?

There are several tools available to add more custom-made pages to a store. It's recommended that additional pages be added to the store by using one of these two methods:

1) Use the Custom Web Page Editor
The Custom Web Page editor is located in the store's administration area at [Design > Add a Custom Web Page]. This tool allows additional pages to be added to the store's website. The pages created with this tool will have SEO-friendly URLs, and they have the option to either have custom-made templates applied to them, or stand on their own with no template applied to them. See the Custom Webpage Editor article for more details.

-OR-

2) Upload additional pages to the site via FTP
Silver and higher account plans provide the option to set up a hosting account for a store. This provides a means for a user to create as many web pages as they like using a web design program, such as Dreamweaver, and then upload those pages directly to the website using FTP. See the
connecting to a website using SFTP article for more details.

— Last Edited - 06/7/2013 9:27am 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 Merchant.com 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