Layout and Design
Pearl has been designed to allow you to create an eye-catching, unique website that will maximise your conversion rate and reflect your store or brand in the best possible way.
The use of templates and stylesheets means that you can use tables for layout or CSS techniques.
Templates
A template is a collection of files that make up the appearance of your site. These template files are combined with information from your database to create the page that the website visitor will see.
The templates are frameworks, into which are inserted modules of content. Inserting the text %STATIC_MENU% into your template, for example, will show a menu when the website is viewed. For a complete listing of modules, see the list of drop down options in the template editor.
- File : index.html
- This file defines the overall look of your website.
- File : product_listing.html
- This file defines the way in which lists of products are displayed.
- File : product.html
- This file defines the way that information is displayed when the user is viewing an individual product.
To edit your template files click Website->Edit Template Files from the main menu. You can enter HTML directly by clicking the HTML icon. This HTML can be created in a different web editor if required, such as Dreamweaver or FrontPage. You can also create and change the design of the template using the inline Pearl editor.
Multiple Templates
You can create multiple templates (each template contains the three files above) and choose to display certain categories on your site with different templates. Choose the template used for each category when editing the category details.
For pages that are not defined by category (contact and registration pages, shopping cart, checkout pages, user account pages), Pearl will remember the last template used by the customer to keep a consistent appearance throughout their visit.
To view your templates or create a new template click Website->Manage Templates from the main menu.
Stylesheets
Anywhere in your templates you can define areas set to a certain class or id. There are a number of classes used by Pearl for displaying items within tables, but otherwise you have free control of your styles.
All styles should be added to the file “styles.css”, a copy of which will exist for each template. To get a copy of the styles file for a template, click Website->Upload Template Files, choose the template and click on the filename required.
To upload a new styles.css file, click Website->upload template file from the main menu, and choose the template for which you are uploading a new stylesheet. This stylesheet is linked to from all pages on your site.
There is also a file “calendar.css” which defines the styles used for your online calendar. Upload new copies of this file as described above.
Dynamic Menus
Pearl uses the SmartMenu javascript functions to generate a hover-over dynamic menu. To upload styles for the menu, click Website->upload template stylesheets from the main menu. The menu requires the following files:
- c_config.js
- This file contains all the colour and styling information for the dynamic menu.
- c_smartmenus.js
- (do not change this file)
- h_arrow.gif / h_arrow_over.gif
- Arrow / pointer graphics optionally used by c_config.js when the menu is in horizontal configuration.
- v_arrow.gif / v_arrow_over.gif
- Arrow / pointer graphics optionally used by c_config.js when the menu is in vertical configuration.
Languages
Almost all the text displayed on your website can be changed by editing the language file, so for instance “Shopping Cart” may be changed to “My Basket”. Request a copy of the language file from Pearl, edit it as required then upload to your site using the Website->Upload Language File screen.
Interested? Click here for access to the FREE demo
