This area enables you to define, and subsequently modify, the 'look and feel' of your store. You choose your store design from a series of templates, and then fine-tune the results to taste. To select any of the following areas, click the 'Go' button adjacent to the menu title.
Select your logo image using the Folder and Image drop down lists. Make your logo visible by checking the visible checkbox. If you have the visible box checked but no image selected, the company name entry in the Personal Details section will be displayed.
The menu Items are the navigation links that will be displayed to shoppers. Enable the link by checking the relevant Item Visible box. If you want to use an image instead of a text link choose an image from the folder and image drop downs and check the Image Visible checkbox.
User Text pages will be added to the item list as they are created and they will not be visible by default. Refer to the Site Page Administration chapter for more information.
Note: Links that refer to text pages that have no content will not be displayed even if Item Visible is checked.
To define the border elements of your page layouts, which determine where your company logo/name and menu appear on the screens within your store, select one of the layouts displayed and click the Use this layout button below it. The shop layout will be updated and a red outline will appear around the layout that you have selected. If the store is only using graphics for its navigational menu, you may wish to also include a text menu at the foot of the store's pages. Checking the box labeled Include Text Links at Foot of Page and clicking the Update button will activate the text links
This section sets up the basic colours displayed on the pages within
your store. Select one of the schemes displayed and click the Use
this Scheme button below it. The store's colour scheme will be
updated and a red outline will appear around the layout that you have
selected.
You may use the Fine
Tune Colour Scheme menu to refine your colour choice or you can
use Fine Tune to create your colour scheme from scratch with considerably
greater control.
Background Image
You a have the option to use a background image for your store,
this is achieved by simply entering in the appropriate image ID number
(if known) or selecting the name of the image from the drop down folder
and image lists.
Changing Colours
To change a colour, select the item to change use the radio buttons, then
using either the colour picker palette to choose a colour, the colour
name or the Hex or RGB values to input the required colour. To use a Hex
or RGB value, enter the value then click either Use
Hex Code or Use
RGB as appropriate. If you have a Javascript enable browser, when
you select any colour, a preview box appears which displays a sample of
all of the currently selected colours.
When you have selected a colour from the palette, you will notice that the colour is highlighted with a flashing dotted box, and the Hex Code and the RGB numbers are automatically updated. An entry will appear in the Use Colour box only if you have chosen a colour for which there is a corresponding name. Named colours are Web Safe and further information about them is given in Appendix E.
The five choices in the Standard Setting menu enables you to choose the default text colours used in your store (these can then be changed in areas using Site Text Styles as outlined below). The choices are:
Background Colour, which need not be selected if a background image, has been selected (above)
Standard Link Colour, defines the colour of the hyperlinks displayed in the store, except those that are set up in the text type section. Design Tip: Using a different colour from the default text colour makes identification of un-clicked links easier for your shoppers.
Active Link Colour, defines the colour of hyperlinks when they are clicked.
Visited Link Colour, defines the colour of a hyperlink once the user has clicked it once.
Default Text Colour, defines all entered textual content, except those that are set up in the text type section.
Design Tip: Keep your colour choices simple and complementary, green text on a red background will not encourage your shoppers to stay in your store for long. Similarly, using very similar colours will render your text invisible on some displays. By mirroring the real life shopping experience, lessons can be learnt from global franchises, whose stores that are clean and uncluttered, are a pleasure to shop in.
Text Type
Once you have selected your store colours, you can further refine text
areas in your store using the style selector. This will allow you to override
in areas the text colours (which will use the default settings made above
unless changed), change fonts (typeface), sizes and style. To change a
text style, select the type by clicking the radio button, select the font
and size from the dropdown lists, then check Bold or Italic styles as
appropriate. The choices for the font type are deliberately limited, (compared
to the pre-installed sets on most computers) in the interests of viewing
similarity across the wide range of browsers and operating systems. The
font sizes displayed in the drop down list are those used by your browser,
and do not relate to point sizes that may be displayed in other software
such as Word Processors; size 7 is the largest and size 1 the smallest:
Example Size 1 Font
Example Size 2 Font
Example Size 3 Font
Example Size 4 Font
Example Size 5 Font
Example Size 6 Font
Example Size 7 Font
Design Tip: Font size 3 is usually the browser default, but size 2 is sometimes preferable to save space, be careful with sizes 7 and 1. Be sparing with emboldening and italicising styles, as they should only really be used to emphasise a point here and there. There is no underline option as underlined text can be very easily confused with hyperlinks.
The styles that can be modified are as follows:
|
Normal Text: |
The default
text that is used throughout the store unless overridden |
|
Category Link: |
Category hyperlinks |
|
Company Name: |
Company name,
which is only displayed if no company logo is uploaded |
|
Discount Text: |
Discount text |
|
Main Header: |
The main header
on store screens |
|
Sub Header: |
Sub-headers
on screens with more than one header |
|
Label: |
Text that
describes input boxes, images, buttons etc. in your store |
|
Navigation: |
Store navigation
hyperlinks |
|
Product Links: |
Product hyperlinks |
Design Tip: To highlight discounts within your store, use a different colour for discounts to the rest of your text. You may wish to embolden the text and increase its size too.
Simply click the Update
button at the foot of the form to update your choices.
Note: More than one text style can be changed prior to clicking
the Update button.
Categories are the top level of your product catalogue that shoppers will view, a top level product menu in effect. The Product Catalogue Layout section defines the arrangement of these Categories on the page. Options are available for graphics only navigation using image buttons, Image with text links or a drop down list. Text links only, are achieved by not specifying an image when creating the Category. Your categories need not all fit on a single page, as TecknaShop will automatically create additional pages if needed with forward, backward navigation for the shopper.
Select one of the layouts displayed and click the Use this layout button below it. The store's catalogue layout will be updated and a red outline will appear around the layout that you have selected
The brief product layout is the next level down of the product catalogue designed to give the shopper enough information to identify a product. Although each example shows two products on each page this is an example only. Choose the number of products you wish displayed per page in the Product displayed per page field and click the Update button.
Design Tip: Don't make this number too high as images (for which there will in all likelihood, one for each product), take longer than text to display and if you have too many on one page, it may cause your shoppers to abort the loading of the page.
To define the layout that your shoppers will see when they have clicked a category; select one of the layouts displayed and click the Use this layout button below it. The store's brief product layout will be updated and a red outline will appear around the layout that you have selected.
Note: your shoppers can access the long product areas by clicking either the product name, or thumbnail image, therefore the ability to use a more graphical method of navigating the shopper to the product detail page can be achieved. This method is similar to making the catalogue layout more graphical (see above).
Clicking on the product name or image in the Brief Product Layout for a product will take the shopper to the Long Product Layout. This will usually have a larger product image and a fuller description of the product. See Catalogue Options for more detail upon the product detail fields. If you wish to use just use the brief product pages, turn off the long product pages by un-checking the box labelled Allow Long Product Pages In The Shop? and clicking the Update button.
Defining the Long Product Layout is identical to defining Brief Product Layout (above).
The shopping list appears to shoppers once they have placed the first item in their shopping basket and it can display a list of items in the basket, cost of each item and the total cost.
Layout
To choose the shopping list format, simply check the radio button next
to format name, and click the 'Update
Shopping List Options' button.
Type A Full Listing - The item description, item cost and total cost,
Type B Reduced Listing - The number of items in the basket and the total cost.
To choose the shopping list format simply check the radio button next to format name, and click the 'Update Shopping List Options' button.
Changing Colours
To change a colour, select either Shopping
List Colour, the Text Colour
or the Cell Colour
using the radio buttons, then either use the colour picker palette to
choose a colour, choose the colour name or input the Hex or RGB values
if you require a specific colour. To use a Hex or RGB value, enter the
value then click either Use Hex
Code or Use RGB
as appropriate. If you have a Javascript enable browser, when you select
any colour, a preview box appears which displays a sample of all of the
currently selected colours (the preview does not show the listing type
i.e. Full or Reduced)
When you have selected a colour from the palette, you will notice that the colour is highlighted with a flashing dotted box, and the Hex Code and the RGB numbers are automatically updated. An entry will appear in the Use Colour box only if you have chosen a colour for which there is a corresponding name. Named colours are Web Safe and further information about them is given in Appendix E.
Font and text settings
You can change the font used on the shopping list by selecting the font
from the drop down list. (See the Fine Tune Colour Scheme section of Look
and Feel for more information on Fonts). Once you have selected a font,
you can change any of the text displayed on the list by modifying the
appropriate text box. The alignment of each of these can also be changed
using the adjacent radio buttons.
Once you are happy with the look and feel of the shopping list click the Update Shopping List Options button to save the changes.
To view the table of content when viewing this help file in an early browser version click here
©2003-4 Teckna Ltd. All
rights reserved.
For further information and support refer to our Contact
Details.