Screen: ShopSite > Merchandising > Custom Templates
Creating a Custom Page Template
A page template defines the layout and elements of a page in a store. You can use the same page template for all pages in your store, or choose different page templates for different pages. For example, a store's welcome page might use one template, product pages might use another template, and customer service or "about us" pages might use a third template.
To Create a Page Template:
If you are familiar with creating pages in HTML, creating a custom page template is quite easy. Basically, you create an HTML page, and then put in custom template tags where you want to use information from the ShopSite databases. You can even create the page entirely in HTML until you get the look that you want, and then go back and replace elements with custom template tags. If you already have an HTML page layout that you like, simply replace the hard-coded content with custom template tags.
1. Get Acquainted with ShopSite
If you do not have experience with ShopSite, you should become somewhat familiar with it before designing a page template. Spend time configuring and viewing the ShopSite demo stores from both the merchant and customer perspectives. You need to have a fairly solid understanding of what information is stored for pages and products, and how the built-in templates present that information.
- Use the merchant interface to look at the page contents and page layout information for a page.
- Publish the store, then click the My Store button to see how ShopSite used the page information to produce the pages that customers see.
- Change some of the page contents and layout settings, then Publish the store again and look at the page.
- Assign some products and page links to a specific page, then publish the store and view the results. Change the assigned items, and change the order of the items, then publish the store again and look at the results.
- View the source of some of the pages to better understand the relationship between the information in the pages database and the HTML tags that ShopSite generates.
2. Study the Examples
Look over the custom template specification to see the tags that are available. It will be one of your primary references while creating templates, or you can use the short version once you have the hang of it.
Study these example page templates and resulting HTML pages. Each example shows a different aspect of page templates. You can even copy any parts of these examples and paste them into your own template.
3. Create Your Template
Use an HTML authoring program or a text editor to create a page template.
- Give the template file a descriptive name. The file name does not need an extension.
- If you use an HTML authoring program, enter the ShopSite custom template tags as plain text.
- Some authoring programs might complain about the DEFINE and END_DEFINE tags being outside the <html> and </html> tags, but they must be outside for the ShopSite parser to create pages correctly.
4. Upload Your Template
Once you have your template complete (or at least ready for testing), you need to upload it into your store.
- From the ShopSite back office, click on Merchandising > Custom Templates.
- On the Custom Templates screen, click Upload Template in the Page Templates section.
- Use the Browse button to locate your template, then click Upload File to upload the template to your store.
You can also use FTP to upload the template to the correct directory. Keep these points in mind:
- Transfer the files using ASCII mode transfer, so that the line break characters get converted from the operating system of your computer to the operating system that ShopSite is running on. Do no just copy the files over a network or via floppy.
- To make the template available to a single store, copy it to the /templates/pages directory under the store's data directory. Create the directories if they don't already exist.
- To make the template available to all stores in a mall, copy it to the /templates/pages directory under the ShopSite shopping cart (sc) directory.
5. Test Your Template
You probably don’t want to test your template on pages from a live store. Create test pages that will test all of the layout and custom template tags that you put in your template.
- Add a test page to a store. When you are filling in the page information, scroll down to the Layout Info section and select your template from the list in the Page Template field.
- Enter values for all the fields used by the template.
- Publish the store and review the Publish Results page for any error messages.
- Go to the store and view the page in a browser. Verify that all the page elements are there and that the layout looks the way you planned.
- View the page using other browsers that customers might use, to make sure the page looks okay in all browsers.
- Delete the values for some of the fields used by the template, then publish the store again and make sure the pages still look okay.
- Check the HTML of the page by running it through an HTML validator, such as http://www.htmlhelp.com/tools/validator or http://validator.w3.org.
- View the source of the page. If the ShopSite parser did not recognize a tag, or if a database field was empty, it replaced the custom template tag with an HTML comment tag containing information about the problem, like this:
<!-- VAR ASPARAGUS IS NOT DEFINED -->
Make any necessary changes and test the template again, then tell the merchant that it is available. The merchant should be able to select the template from the Add a Page screen (advanced editing version) or the Edit Page Layout screen.
