Portal Home > Knowledgebase > *Website Manager (storeadmin) > Website Template > How to install your own website template.


How to install your own website template.




Installing a template into Pappa-Pak requires an html editing program such as Frontpage, Dreamweaver or an editor of your choice. You will need to add place holders to the design in order for the site to function correctly. The following tutorial explains what the place holder codes are all about and will give you a general idea of where to place them. There is a complete list of placeholder codes inside the storeadmin area. You can find this list by clicking on Template on the upper left hand side of your storeadmin and then clicking on the link called "site include codes".

 

Everything you put into the template itself will cover all pages of your site.

 

Note: Whether the template is being installed on a temporary URL or permanent URL you can use %DOMAIN% placeholder code within the html itself for all images. So, instead of using http://www.domainname.com/images/imagename.jpg or http://host.pappapak12.com/images/imagename.jpg you would use %DOMAIN%/images/imagename.jpg

 

Just upload your images for the template into the images folder and use that placeholder code as shown above. Then all images for the template itself will show up once the design is installed.

 

First lets look at the only place holder codes that actually go inside the html part of your design. Don't worry, you will not have to actually have to mess with the html portion of your design after these first three place holder codes. You cannot just put these three place holder codes at the top of your design. You actually need to access the html and add them there. They go in the head tag of your html code. The entire head tag code for your site will look like the example below when you're finished.

 

 

Title Tag (%TITLE_TAG%) - This place holder code goes in between the title tag portion of your html code. (no spaces). If you click on Site Settings inside of the admin area you will notice a "company name" written in the box provided. This title shows up in the title bar at the top of the web browser (it helps search engines when they come to crawl a site and index it).

 

Meta Tags (%META_TAGS%) - This place holder code is VERY important for search engine optimization. This tag takes care of whatever goes into the keyword and meta description boxes for your site and helps search engines crawl and index your site. This place holder code goes directly underneath the Title Tag code.

 

Style Sheet (%STYLE_SHEET%) - This place holder code allows you to use the fonts and colors portion of the storeadmin to control the default font, text size and color scheme of your site. It also helps our software to insert a script into the cart page that keeps the cart from bringing in your whole website (template included) into that page. And it helps to make the view of what is in the cart, accurate. This tag goes directly underneath the Meta Tag code.

 

If you have your design already laid out, you just need to add placeholder codes to make that template work with PappaShop's Website Manager. Let's move on to the placeholder codes and what they're for.

 

Site Logo (%SITE_LOGO%)

 

Every site has a logo, a menu and content area. The place holder code for the logo would go in the header portion of the design where ever you want the logo to appear.

 

 

The actual logo would be uploaded inside the admin area. Click on Images / Catalog Images / Update.

 

 

Where it says "logo", upload your logo using the Upload link. Then click Update at the bottom of the page. Note: If you make an "add to cart" or "order" image, this is where to upload that as well as a "view cart" image.

 

 

Page Title (%PAGE_TITLE%)

 

This goes where ever you want the title of the page to show up in the design. This will be a text page title by default but you can upload a "header image" for your pages and it will show up where ever this page title code is placed in the design. I generally put this place holder code in the center or left hand side at the top of the content area.

 

 

Category Description (%CATEGORY_DESCRIPTION%)

 

This is the first content place holder code that goes at the top of your content area. This place holder allows for the optional descriptions on catalog category pages to show up on the each category page.

 

Content (%CONTENT%)

 

The content place holder code is probably THE most important place holder code. Without it, nothing you put on your site will show up! The content place holder code will go directly after the category description code with no spaces in between just as seen below.

 

 

Categories (%CATEGORY_VERTICAL%)

 

There are quite a few place holder codes that will work for the categories portion of the menu. There are also different ways to set up a menu such as single menu with only the catalog link showing vs. the categories, split menu with categories showing in the "shopping" portion of the menu or categories showing and when clicked, sub-categories showing. There are different place holder codes that you can use for the catalog portion of your menu and different ways to set up a menu. It all depends on what you want to do. You will find a list of category specific place holder codes inside the admin area under Template.

 

For this tutorial, we will show you how to set up a "split menu" with the categories showing in one portion of it. The place holder code for this part of the menu is %CATEGORY_VERTICAL%.

 

 

Pages (%PAGES_VERTICAL%)

 

What would a website be without informational pages? This place holder code is used for the informational pages of your site so that they show up in your menu. Of course, there are variations just as there were for the categories. For example, if you wanted to split those informational pages into two menus, you would use "groups". For that you would add an _1% or _2% at the end of the place holder code and then assign certain pages to group number 1 or group number 2. For this tutorial, we're not using groups, just a straight forward menu.

 

 

Shopping Cart (%VIEW_CONTENT%)

 

If you are planning on selling products from your site, its a good idea to have a "view cart" link visible on all pages so that a customer can easily get to the cart and do any editing of their order and to check out. If you prefer to use an actual image for your cart link, you would upload that just as suggested above for the site logo.

 

 

Search Feature (%SEARCH_SITE% or %SEARCH_CATALOG%)

 

Lots of people like to put a search box on their site so customers can search for items based on keywords they have added when they listed a product for sale. There are two search place holder codes. One covers the catalog pages only (%SEARCH_CATALOG%) and the other covers the entire website (%SEARCH_SITE%).

 

 

Site Message (%SITE_MESSAGE%)

 

Some people like to join topsites lists and post link back buttons or add credit card or Paypal images on their site to show that they accept those forms of payment. Usually these are placed somewhere underneath the website's menu. Since not everyone understands html and wants to figure out how to insert snippets of html code into their template, the Site Message works perfectly for this option. To edit the Site Message on the website you would click on Site Settings in the storeadmin. Whatever you put in the WYSIWYG editor there will show up where the %SITE_MESSAGE% code was placed in the template.

 

 

Copyright & Powered by PappaShop (%COPYRIGHT%)

 

You may be designing and installing a website for someone else and want to add a link back to your site on the design itself. In that case you would simply write out your info and put your link on the bottom of the design. In order to get the remaining copyright info and required link back to PappaShop on the template, you would use the Copyright Place Holder code. That puts a line of text in automatically based on what the Site Title is in the Site Settings area of the storeadmin, along with the "powered by PappaShop" link. This place holder code is usually placed in the bottom center of the template.

 

 

Now the design is complete with all place holder codes and should be ready to actually install. Below is what the entire design looks like complete with codes.

 

 

Installation

 

To "install" a completely coded design, copy all the html for the design and log into the storeadmin portion of the website and click on Template in the upper left hand corner. Put your cursor in the html box and highlight all the html code you see there (shift-A). Then paste your new html code in place of that code you just highlighted. Then click Update.

 

Now you should be able to adjust the fonts and colors with the fonts and colors link on the lower right of the storeadmin and you're good to go! Below is what the above design looks like from the browser's point of view.

 



Was this answer helpful?

Add to Favourites Add to Favourites    Print this Article Print this Article

Also Read
How to edit a template (Views: 3635)