RTD-Catalog / Customizable Product Menu Tutorial
The RealTimeDesigner includes a full featured menu/catalog systemcalled RTD-Catalog which you can use to power your entire website. Once your RTD-Catalog is built within the RealTimeDesigner, a simple link from your homepage will unlock the power of the RTD-Catalog for your site visitors.
The RTD-Catalog is HTML/CSS enabled to allow your web designer to customize the look and feel of the RealTimeDesigner catalog. The catalog consist of several pages which your users can "drill down" to get to their desired product. The RTD-Catalog is displayed in this order:
CATEGORY GALLERY ---> PRODUCT GALLERY ---> PRODUCT SIZES/STYLES ---> TEMPLATES PAGE
The structure of the RTD-Catalog looks like this:
Product Category A
-------- Product A1
---------------- Size/Style A1a
---------------- Size/Style A1b
---------------- Size/Style A1c
--------Product A2
---------------- Size/Style A2a
---------------- Size/Style A2b
Product Category B
--------Product B1
---------------- Size/Style B1a
---------------- Size/Style B1b
--------Product B2
----------------Size/Style B2a
----------------Size/Style B2b
...
For a sign company your menu might look like this:
Yard Sign
--------Coroplast
----------------18x24
----------------24x36
----------------48x96
--------Aluminum
----------------18x24
Banners
--------Paper
----------------12x12 up to 48x120
--------Vinyl Banners
----------------12x12 up to 48x120
--------Mesh Banners
----------------12x12 up to 48x120
Vehicle Magnets
--------Cut Vinyl (1-12 pcs)
----------------4x6 up to 24x48
--------Screen Printed (12+ pcs)
----------------4x6 up to 18x36
--------Digital Printed - Full Color
----------------4x6 up to 24x48
Sidewalk Signs
--------Small A-Frame
----------------35" Tall
--------Large A-Frame
----------------48" Tall
For a shirt company your menu might look like this:
Aludlt T's
--------100% Cotton
----------------S to 4X
--------50/50
----------------S to 3X
Kid's T's
--------100% Cotton
----------------Y4 to Y16
--------50/50
----------------Y4 to Y16
Polo Shirts
--------Mens
----------------S to 3X
--------Womens
----------------S to 3X
Hats
--------Polyfoam
--------Twill
Organizing your RTD-Catalog
Organizing your products into this type of structure will allow you to make better use of the RTD-Catalog system. There is no limit to the number of Categories, Products or Sizes/Styles within the RealTimeDesigner. We recommend rather than having one Category of 20 products that you instead create 3-4 categories with 4-5 products in each.
Screen Setup
The RTD-Catalog pages consist of 4 basic areas:
• Header - your logo and any link to pages outside RTD
• Footer - copyright, links, whatever you desire
• Side Menu - This customizable area allows you to create a side bar menu with various links
• Main Body - This area changes as you navagate throught the RTD-Catalog
Main Body
To make maintenance easy, the RTD-Catalog Main Body is set up to automatically include all new categories, products and sizes/styles that you add. You can "hide" products from appearing in your catalog MAIN BODY by clicking on the MAKE IT HIDDED button on the MANAGE / DEFINE PRODUCTS screen. Hiding products is useful when developing new products or if you have certain products which are sold only to certain customers. To access hidden product, you can give these clients direct links to those hidden products.
Including Images and Descriptions in the Main Body
The RTD-Catalog was designed to be a colorful, intuitive interface for your users. Including pictures and descriptions when you define your categories and products will greatly enhance the appearance of your site. If you already have built your catalog and did not include pictures or descriptions, you can do so by using the EDIT command from the "DEFINE" screen. Small images and short descriptions are shown when viewing a gallery of options. Once you have drilled down large images and long descriptions are shown. Typically an image size of 150x150 for small images and 400x400 for large images works well, but you can use whatever sizes you feel look best.
The Side Menu
The contents of the Side Menu is controlled totally by you. Generally the Side Menu will include 3-4 sections each containing a handful of links. If your product range is fairly small, you may want to include direct links to each and every product. If you sell from a large catalog of products, perhaps a section containing links to each category, but not each product is appropriate. Remember, once the user selects the category, the Main Body will show the listing of products in that category.
Setting up the Side Menu
From the Admin Panel, click on SYSTEM OPTIONS button followed by the CONFIGURE RTD-CATALOG button. This will display the RTD-Catalog setup page. Toward the bottom of the screen you will see an area for MENU LINKS. This is where you define the Menu Links. Each Menu Link requires a Name or Text Label. Unless the link is just a place holder or heading, you will need to also insert a link URL. The Side Menu will be displayed in order of the numeric value of the SHOW ORDER. Generally you should number the links counting by fives similar to 5, 10, 15..., so that you can insert links between others later without having to renumber all of them. If you want to temporarily hide a link on the Side Menu, set the SHOW ORDER value to a negative number and it will not appear. When you wish to redisplay the menu item, reset the SHOW ORDER value to a positive number.
Side Menu Link Categories
Beside direct links to the products and categories in a normal list, you can add Menu Link Categories for NEW PRODUCTS, MOST POPULAR, SEASONAL or any links you can imagine, drawing special attention to them. This is very typical among shopping sites - you now have all that power within the RealTimeDesigner. You can also add links to pages outside of the RealTimeDesigner here. If you want to highlight a link to a certain red shirt with a specific design for Christmas - no problem, just create a link on the Side Menu. Read up on GETTING DIRECT LINKS TO PRODUCTS if you are not sure how to obtain the link for a specific product.
Customizing the Appearance of the RTD-Catalog
At the forefront of developing the RTD-Catalog, it was our goal to provide ultimate flexibility of graphics, colors and styles. Using a web technique known as Cascading Style Sheets (CSS). Customization can be as simple as providing a few simple graphics or as elaborate as redefining the entire style sheet. Using CSS, you can move the menu from the left side to the right side or show products as 2-up instead of 3-up. You are really only limited by your imagination. Any web developer well versed in CSS can create a totaly new look for your RTD-Catalog. Click on the STYLE SETUP link of the CONFIGURE RTD-CATALOG screen to access the CSS file for your RTD-Catalog.
In the near future we hope to provide some detailed instructions explaining how to configure the CSS file. Feel free to tinker with the settings in the CSS file. If things don't go as planned, use the REVERT TO DEFAULT button to restore the original CSS file. Soon we will upload new CSS files which you can use as provided or modify to you desire.
CSS References:
CSS ZEN GARDEN:
http://www.mezzoblue.com/zengarden/alldesigns/ an excellent site showing how much variation can be achieved by simply changing the CSS code for a page.
Web Design Group CSS Reference:
http://htmlhelp.com/reference/css/
You can also work directly with our CSS coder for custom solutions on an hourly basis.
As always, we appreciate your support of the RealTimeDesigner.
Mark, Alex & Team.
Edited 2 time(s). Last edit at 06/16/2008 11:03AM by Admin.
