AbleCommerce is designed so that a store can be created and customized by anyone who can use a web browser. This includes the ability to customize the look and feel of the retail web pages. Page customization is accomplished using a combination of web based administration tools: wizards, themes, and style sheets.
This chapter is a tutorial on how to customize the storefront using the web based tools and features. It assumes that you have either imported the Sample Data or added your own data to your store.
The starting point to website customization is the website menu. Access this menu from the Merchant Administration by clicking the “Website” menu item. This will display the sub-menu shown below with four choices: File Manager, Site Map, Style Sheets, and Themes.
Click on the File Manager option to open the screen shown below. The File Manager shows the files and folders in your store directory. From here you can add, edit, and delete files. You can also manage and navigate your folders.
At the top of the list are the folders found in the current directory (as indicated on the title bar). Next to each folder is a delete icon. You can click this to delete a folder and everything it contains. Clicking on either the folder icon or the linked folder name will open it and display the contents.
After the folders come the files in the current folder. On the far left of each line are the action icons: Edit, Copy, and Delete. Next comes the file icon and file name. Finally the line shows the last modified date and size of the file.’
At the bottom of the screen, the total number of files and folders and the total size of all files are shown. There are also three buttons to create new folders, new files, and to upload existing files.
From the File Manager listing, locate the product1.aspx file. Click on the name to open the “Update Wizard Preferences” screen shown below.
This screen is the primary editing interface for any web page that uses a wizard to display output. In the “File Info” section at the top of this page, the path and name of the file are shown. This is followed by the name of the wizard currently being used to output the page and a link to change it. Finally, the section lists the “Active Product”.
The Active Product only appears for wizards that display products. Depending on the type of wizards, different types of objects will show on this line. For example, a category wizard will have an Active Category and a webpage wizard will have an Active Webpage. This line simply identifies the object that will be used for display if the preview button is clicked.
Following the File Info section, a form full of settings and options appears. The choices on this form will change – all wizards set their own. An example of the form choices is shown below.
The format of each wizard option is always the same. At the top left of each row, the option name or header appears in bold. For example, “Show Category Tabs?” is the name of the first option in the image above. Below the option name is a description. This should explain the function of the option.
To the right of the name and description is an input control that allows you to set the option. The type of input control is dependent on the data that the option needs to collect. This might be a radio button, a select box, a text input box, etc. The “Show Category Tabs?” option above uses a radio button to collect a yes or no answer. The “Tabs Per Line” option uses a text input box to collect a number.
From the Update Wizard Preferences screen, click the Preview button to show the output of the wizard. The content window should display something similar to the image below. The page probably also includes headers, footers, and side navigation, which aren’t shown.
The output of the preview page uses the current settings from the Update Wizard Preferences screen. These settings are only shown to you, not to anyone who might be otherwise viewing the page. Only when the settings are saved will they be published for all to see. This lets you adjust the settings and get the look just right before you commit the changes.
From the preview screen, click the back button on your browser to return to the Update Wizard Preferences screen.
The best way to learn about the options available on the wizard is to
experiment. You can use the following
steps to try the various options:
1) From the Update Wizard Preferences screen, make adjustments to the wizard option settings.
2) Click the Preview button to see the page output using your modified settings.
3) Click the Back button on your browser to return to the wizard form.
4) Repeat steps 1 to 3 until you are done adjusting the settings
5) Click Save to publish your new settings, or Cancel if you change your mind.
Most websites have a common set of elements that are shared across all pages, such as headers, footers, and side navigation. In AbleCommerce, these common elements are defined by a Theme.
A theme contains Header and Footer content for your web page. A theme also lets you specify how the primary navigation will be displayed. You can change the wording for each navigation link. The extra side bar features for Specials, What's New, Search, etc. can also be turned off and on, or easily moved around on the page.
Themes can be applied to the entire store, a wizard page, or even to a specific category, product, or other content object.
For example, when you edit the wizard settings for a web page the Applied Theme setting will appear near the top of the form. This specifies which theme the file will use for the output.
You can create any number of Themes. For example, you can setup a different Theme for each season of the year and apply to any single page or the entire website. Or, you could create a different Theme for each main category in your website.
To access the themes available for your store, click “Themes” from the Website menu. This will display the Themes menu, with the existing themes listed and buttons to add, edit, copy, and delete them. Editing an existing theme will take you to the screen shown below.
In the retail web pages, CSS is used to customize the look, feel, and style of the content. Within a CSS file, you can specify options like fonts, colors, margins, borders, and more. When used correctly, the look of your web site can be completely transformed by switching from one style sheet to another.
You can access the style sheets in your store by clicking the “Style Sheets” option on the Website menu. This will open the style sheets menu shown below.
All of the style sheets in your store will be displayed in the list. From this menu you can add, edit, copy, or delete style sheets. You can define any number of CSS pages, limited only by the amount of disk space available for your store.
When you edit a style sheet, it will display the contents of the file in a simple text editor. An example of the file contents is displayed below.
/*
The Body style is the default text for pages.
*/
body {
font-size: 10px;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
In the text above, you can see the definition for the “body” element. This represents the settings applied to the body of the page. The font size, color, and family are given, along with the margin settings. The style would produce text that looks something like this: Sample Text
We could easily change the default text settings for the page by making some quick changes to the style:
body {
font-size: 12px;
color: #ff0000;
font-family: Courier;
margin: 0px;
}
This would make the text appear like this: Sample Text
It is important to understand how AbleCommerce decides what theme to use for a display page. Themes can be applied to the entire store, to a wizard page, or to a specific content object. When loading, the page searches from the most specific to least specific setting and uses the first theme it finds:
1) If a content object (e.g. category, product, webpage) is being displayed, check if a theme has been applied to the content object.
2) Check if a theme has been applied to the page in the wizard settings.
3) Get the theme that has been applied to the store.
In most cases, themes will need to be set at the store level. This will result in the same theme being used for all of your web pages, and the theme only needs to be set in one place (on the store settings page).
With this in mind, you can use themes and CSS together to easily change the look and feel of your store. For example, you could define two style sheets, “redgreen” and “orangeblack”, with color schemes indicated by the name. Then you could define two themes, “Christmas” and “Halloween”. The Christmas theme would link to the redgreen style sheet, while Halloween would link to orangeblack.
After the two themes were defined, you could quickly set the Default Theme for the store to Halloween in October. Then for any page that was not set specifically otherwise, the new theme and CSS settings would appear.
Then come December, you could again quickly switch the Default Theme to Christmas. Instantly your color scheme, headers, footers, and navigation would switch.
On the Internet, many users find what they are looking for through a search engine. For online merchants, being high on the list of search results can help to drive traffic to your site. Unfortunately, most search engines may not be capable of indexing dynamic content, such as that provided by an AbleCommerce store.
To ensure that your store gets the highest ranking possible in all search engines, AbleCommerce 5 introduces the site map generator. This tool creates a static page for each dynamic content object in your store. The pages are composed of standard HTML and use self-reinforcing links to leverage the best search engine optimization (SEO) technologies.
The site map generator is very simple to use. Starting from the Manage Website menu, click on the Site Map menu item. This will display the form below.
In the Directory field, enter the name of the directory where the pages of your site map will be created. Below this, a checkbox indicates that the directory should be cleared before generating the new pages. It is recommended that you use this option to keep the amount of required disk space to a minimum. Be sure to choose a directory that is not used for anything except for the generated pages.
Once the form is filed in, click Next to begin the generation process. You should see a series of progress indicators as the process is running. If you have a large number of categories, products, and/or web pages this process could take a few minutes. When it is complete, the page will print out the URL to the index page for your new sitemap. An example of the generator output is displayed below.
After generating the sitemap, you can submit the URL to the search engines of your choice. Since the site map is static, all search engines should be able to index all of your dynamic products, categories, and webpages.
You can browse the site map by clicking on the URL provided. You will see that all of the static pages also include a link to the dynamic content. This is so that customers can purchase a product or view the contents of a category. It provides a pathway to the dynamic portion of your store.
Note that the more products and categories you have, the longer the generation will take and the more disk space it will require. However, with the expense of disk space you should dramatically improve the ranking of your store within search results. Be sure to regenerate the site map whenever you make significant changes to your categories, products, or web pages. This is the only way to keep the static content current.