This is the FUN part! Y.E.S.! makes designing your web site as easy as typing some text, and choosing your favorite colors. You can now easily design and customize your own website, and be selling your goods and services online, in a short amount of time, WITHOUT knowing HTML or any other programming language.
Note: This tutorial assumes you have already entered your Inventory into the Y.E.S.! database. This will be crucial to viewing your complete website as it is being customized.
1st: Develop a Mission or Overall Image for Your Web Site
The most important step to efficiently developing your web site is to establish the basic idea for the site. You have a good grasp on the structure of your existing business, the products and services you offer, and what your customers want to see. In order to easily develop a great website, use your understanding of your business to structure the image or character of your web site in the same way.
Knowing what image you want your website to convey to your online viewers will provide the cornerstone to quickly and successfully building it. For the above example, the business owner is obviously looking for a "clean" and simple website layout. A few, crisp pictures on the home page, and the use of colors which match their company logo will produce the desired look.
General Rule of Web Site Design: Develop your website for what works best for your business.
Always remember when building your web site, that your web site is simply an extension of your business, and that the general purpose of the site is to persuade the online viewer to eventually BUY something from you! Your customers, both in your store and online, want their shopping experience to be fast and enjoyable. Traditionally, by inundating the viewer with vast numbers of flashy graphics and animations, not only makes the viewer wait longer for the website to load in their browser, but could possibly convey the wrong message. Depending on your specific business (and the ultimate goal of your web site), the use of colors/graphics/animations may or may not be appropriate for your web site. The Y.E.S.! Software Suite allows you to easily add as many images, graphics, and animations as you wish.
Remember: With Y.E.S.!, you are in complete control of your online destiny.
You have probably already completed the first step to designing your web site in the "Getting Started Wizard", by selecting a template. You can select a different template for your website at anytime from the main menu by clicking on "Website", and choosing the "Select a New Template" option. This will display a small screen which lists the various templates you can use. Clicking on the template in the left hand listing displays a screen shot of the template on the right. A short description is also displayed which illustrates the common uses and features the specific template. Once you have selected the template you wish to use for your website, click the "OK" button. This template will now provide the basic structure and layout for your website.
Warning: Selecting a NEW template will load the standard template. Any changes you have made to your existing template (such as fonts and colors) will be lost, and you will need to customize the new template as well.
From this point forward, this tutorial will assume you have developed the general idea or image of your website and selected the template which best fits your desired image. We will now walk you through the process of customizing your website from the beginning.
2nd: Establish the Basics of Your Web Site
Clicking on the "Website Design" menu button on the top tool bar displays the screen where you will be able to completely customize all areas of your website. The "Home/Startup Page" tab screen is used to customize the appearance of the initial page that an online viewer will see when visiting your website.
NOTE: When you change any property of your website, the preview in the right-hand window will reflect the change immediately.
On the left of the screen are several buttons, listed vertically, which are used to customize the appearance of the home page and the border and menu listings on the rest of your website.
Insert Your Logo (optional): If you have your company logo in a .jpg, .jif, or .jpeg graphic file format, and you wish to display it in the header of your web site, click on the "Select Logo" button, and choose the "Select an Image to Use" option. You can now browse to the file's location, and select it.
Note: It may be necessary to resize your logo to fit into the logo area of your web site. This can be done using most graphics software programs.
Now use the following buttons on this screen to customize your website to your liking:
Clicking on any of the Font buttons will open a standard font selection dialog box from which the font name, style and size may be selected.
Clicking on any of the Color buttons will open a standard color selection dialog box. The currently selected color is shown in the small square just to the right of this button.
Clicking on the "Define Custom Colors" button will change this dialog box to the following from which you can select virtually any color you wish:
3rd: Customize Your Home Page
Now that you have established the basic font and color scheme for your web site, click on the "Edit Home Page" button. This opens the YukonSoft Custom Page Editor, from which you can edit your "Home Page." The Home Page is the page that is currently shown in the preview area in the right-hand window on this screen. The preview will be updated with any changes that you have made as soon as you close the Custom Page Editor. (Further help on how to use the Custom Page Editor is available while in the Custom Page Editor program.)
Once you have completed customizing your "Home Page," you are now ready to further customize your "Items" pages.
4th: Customize Your Item Pages
Now click on the "Item Pages" tab. The Item Page tab screen is used to customize the appearance of the pages that display your inventory items on your web site. Changes will be applied to all items shown on your website.
On the left of the screen are several buttons, which are used to customize the appearance of your website. In the same manner as on the Home Page, use the following button to customize how your Items Pages will appear:
By clicking in the combo box in the upper right of the screen, next to "Which Item to View " you are able to select which item to view as you make changes to the item pages of your web site.
Once you have completed customizing the actual Item Pages, you are now ready to further customize your "Category" pages.
5th: Customize Your Category Pages
Now click on the "Category Pages" tab. The Category Pages tab screen is used to customize the appearance of the pages that display the Categories of your inventory items. Using the hierarchy you established when setting up your inventory, Y.E.S.! has already developed the structure of your categories and items for your web site.
DEFINITION: "Categories" are unique menu items that may be used to group similar items together for easy site navigation for your online customers. When your online customer clicks on a Category menu item, a listing of all of the available items from your inventory within that category will be displayed in the main area of your website. Each item shown within that category may be selected, which displays the detailed description of that particular item.
On the left of the screen are several buttons, which are used to customize the appearance of the category pages of your website.
By clicking in the combo box in the upper right of the screen, next to "Which Category to View " you are able to select which category page to view as you make changes to the web site.
Once you have completed customizing the Category Pages, you can customize your "Shopping Cart" page.
6th: Customize Your Shopping Cart
Now click on the "Shopping Cart" tab. The Shopping Cart tab screen is used to customize the appearance of the Shopping Cart on your website. A Shopping Cart is the screen that shows the online shopper what items have been selected for purchase.
On the left of the screen are several buttons, which are used to customize the appearance of your shopping cart.
Once you have completed customizing the Shopping Cart, you can further enhance your web site by adding/creating your own custom pages.
7th: Add Custom HTML Pages (Optional)
To add custom pages to your web site, click on the "Custom Pages" tab. Custom Pages are website pages which you create with the YukonSoft™ Custom Page Editor, or one that you have previously created and have in ".html" file format. The contents of your Home Page is also a Custom Page, and can also be edited from this screen.
The large window on the right-hand side of the screen will show you a preview of each Custom Page as you select it from the list on the left.
To Use an Existing HTML File as a Custom Page:
Click on the "Add a New Page" button. This will display a tab oriented screen prompting you to determine whether to create a new, "Blank HTML Page", or to browse to and select an existing page to be inserted. Click on the "Existing" tab, and either type in the actual location of the file, or click the "Browse" button to browse to the file's location. Now click the "OK" button. This creates the new page containing the existing HTML file, and highlights it in the listing, under the temporary title "Custom Page" followed by a number ("Custom Page 1").
To Add/Create a NEW Custom Page:
Click on the "Add a New Page" button. This will display a tab oriented screen prompting you to determine whether to create a new, "Blank HTML Page", or to browse to and select an existing page to be inserted. Click on the "Blank HTML Page" icon, and click the "OK" button. This creates the new blank page, which is now highlighted in the listing, under the temporary title "Custom Page" followed by a number ("Custom Page 1").
Now that you have created the new page, you can change the page title. The title will appear as a menu item on your website. To rename the page title, highlight the new custom page in the listing, and click on the "Edit the Page Title" button. This will open a small dialog box in which you can edit the Title of the Custom Page to any descriptive name. When you have finished, click the "OK" button. Your new page name will now appear in the listing of custom pages.
Now that you have created and renamed your new custom page, it is time to develop the page contents. Click on the "Edit This Page" button. This will open the YukonSoft™ Custom Page Editor with the selected Custom Page as the current document.
Note: Additional help on the use of the YukonSoft Custom Page Editor is available while in the editing environment. The YukonSoft Custom Page Editor can also be run as a stand-alone program. When run in the stand-alone mode (not initiated from the Y.E.S.! system), you will be able to create web pages that are not menu items on your website. The typical reason for doing so is to be able to create pages that are accessible as linked documents from a web page that IS a menu item. By doing so, you can create a larger website, without having a large, difficult-to-navigate menu structure.
Once you completed adding your custom pages, you can now determine the order in which your custom pages are listed on your web site (menu). By selecting (highlighting) the page title from the list box, and clicking the UP or Down arrow button, the selected page will be moved one corresponding position.
8th: Preview Your Work
You have now built your very own customized web site. Now click on the "Preview" button to see your website. This will create a local copy (located on your computer's hard-drive) of your complete website, and will start your default Internet browser displaying your website as it will appear on the Internet. This is EXTREMELY useful to view your actual web site before uploading it to the Internet.
NOTE: You can click the "Preview" button at any time to view your latest changes.
From the Preview Mode, your web site will be fully functional on your screen. Be sure to examine and proof-read all aspects of your website including making sure that there are no spelling errors, that the general look and feel of the website is what fits your company best, that the graphics appear correctly, that any links that you have made from custom pages are correct, etc. You can always change any part of your website. To make a change to your website, simply close your browser, and return to the Y.E.S.! Website Design screen.
Y.E.S.! Building your own eCommerce enabled website is now that simple.