|
AmeriCommerce store designs are based on Themes. A Theme is a collection of settings, graphics, cascading style sheets (CSS) and HTML that can be created, modified and applied to different stores quickly and completely within the Theme Designer. It requires little or no HTML knowledge.
You can use one of the pre-existing themes as a base to start from and customize it to your needs or if you have a design you'd like to implement, you can create the theme based on your design elements.
Three core components of implementing a theme are:
Part I: Defining the Layout
- Understanding the 5 key areas of the theme
- Defining the Layout settings of the 5 key areas
- Layout widths
- Basic Color Settings
Part II: Designing and Adding Components and Content within the Layout
- Page Header Design
- Horizontal Navigation
- Left & Right Column - Navigation, Featured Items, Search Box
- Content Area - Home Page, About Us, Content Pages
- Footer
Part III: Styling the Pages
- Customizing appearance using Global CSS Settings
- Page Specifc Styles - Category Pages, Product Details Page, Manufacturer Pages, Checkout Page
- Custom CSS
- Custom META tags, CSS links, Javascript, etc. (used globally)
Part I: Defining the Layout
The first step is to set up the base layout of your site.
Understanding the 5 Key Areas of the Theme:
AmeriCommerce themes have 5 key areas at the global level. Most of these can be toggled on/off for the complete site or on a page type basis. Example, you can enable the Right column at a Global level and then choose to display it on the Home Page but disable it on the Category Page and Product Details Page.
All 5 areas are completely customizable. You may add content using the available snap-ins or you could use the Custom HTML snap-in to add your own code.
What are the 5 Key Areas ?
-
Header
This area will typically contain the logo, links for shopper's login, view shopping cart, checkout, etc. You may also include a horizontal navigation menu here and/or a search box.
-
Left Column
The left column typically contains a navigation or multiple navigation sets along with such images as you deem necessary. For example, you could place a "Sale" or other important announcement graphic/link at the top of this area.
-
Content Area
This is your main content display area. Your catalog/products along with all miscellaneous content pages that you create will be displayed here. Advertisement banners may also be included in this area if you wish.
-
Right Column
If your design is based on a 3-column template then the right column can be used. You have the ability to turn off the Right column for specific page types. Example, if you did not want the right column for the Category pages, you have the option to disable it at the category page level.
-
Footer
Typically contains copyright notices, a navigation menu, and in some cases links to associate companies, logos for BBB, VeriSign or other important links.
All of the above are commonly used elements within each area. The examples given above are only to give you an overview of each area. You may customize those areas with any design and navigation elements of your choice.
Defining the Layout Settings of the 5 Key Areas:
 Select your active theme by going to Themes > {Theme Name} [Active]. Your store can have multiple themes but only one theme is active at a time; that theme is identified via the [Active] suffix.
You may rename your theme in the Theme Settings section.
Next, note the second and third sections.
In these sections you can define the global parameters for your store. You will set the widths for the various areas of your design and also specify colors related to page background, text color, link color, link hover color, and so on.
|
Page Background
|
this is the background color that will show in the entire web browser window |
 |
| Layout Background |
in case your design background color is different from the page background color you can specify it here |
| Page Headers |
this is the color for the headers in your store pages |
| Body Text |
this is the default color of all the content that will appear on your store pages |
| Links |
default color for the links (effects like bold, underline, highlight will be specified in CSS Settings) |
| Link Hover |
default color when the mouse pointer hovers over a link |
| Left Column Background |
background for the left column (leave blank if it is the same as the page/layout background color) |
| Right Column Background |
background for the right column (leave blank if it is the same as the page/layout background color) |
| Snap-In Background |
background color for all snap-ins you implement in your design |
| Snap-In Text |
default color of text that appears in the snap-ins |
| Snap-In Links |
color of the links within snap-ins |
| Snap-In Link Hover |
color of snap-in links in hover state |
| Shopping Cart Header Text |
color of the header text that appears when a user clicks on "View cart" |
| Shopping Cart Header Background |
background for the above header |
Note about background colors: In case you are using an image as a background then make sure that all background colors are left blank. You can also use different image backgrounds for the header, left column, content area, right column, and footer.
Click on the Save button at the top-right corner to save your changes.
All of the above settings are defined at the global level and can be further customized at page and element levels. We will cover those in the third part 'Styling Pages'.
The basic structure of your store website is now complete. Next you have to fill in this structure with 'content' and then style the pages.
Part II: Designing and Adding Components and Content within the Layout
What to know before you start implementing your design elements
There are some key tools within AmeriCommerce that can add quick functionality to your site design and navigation.
Merge Codes are like variables. You can define what the value of the merge code will be and then display that value using the merge code in different areas of your website. When the webpage is rendered in the browser, the variable (merge code) shows the value it contains.
For e.g., the merge code ##STORENAME## will display the name of your store wherever it is used.
Merge codes are applicable to certain kinds of pages within the template. To review the merge codes available and the pages they are applicable on, please read the knowledge base article: What merge codes are available?
Snap-In Modules are pre-built sections of the page which perform specific functions. Examples are the Search Box, Browse by Category, Browse by Manufacturer, Side Column Shopping Cart, Sale Products, and even Custom HTML. You can use a snap-in module to add quick functionality to different areas of the website.
Some snap-ins are typically only used in side columns, others in category or manufacturer pages, while others are used only on the home page. You can view a list of snap-in modules available on each page type within the Themes area. Browse to Themes > Active Themes and select any page type (Home Page, Category Page, Manufacturer Page etc) and you can view a complete list of snap-in modules available for that page type.
- Adding a few categories and products before designing your store
To be able to preview your site design and layout, it is recommended you setup a few products and categories so you can ensure the layout of products and categories fit in with the design. It is important to plan your category structure at this time. A category structure helps with organizing your products well for navigation and usability as well as with planning your category structure correctly for multiple and micro stores. Please review the knowledgebase article "Planning the Category Structure" for more information on this.
Adding Content and Functionality to the different content areas:
Page Header Design
Select your active theme in the admin console: Themes > {Theme Name} [Active].
Select Page Header in the left menu under Theme Settings.
The header design typically consists of the logo and tagline on the left and a few links on the right. The header design is completely customizable and you can add any design and navigation elements of your choice.
For example, take a look at the following design:
The above design results in a header that looks like this:
In the same interface you can add a background image like this:
causing the header to display as:
You will notice that two merge codes are used in the above design:
- ##STORENAME## - places the name of the store as specified in Store Settings to be displayed.
- ##SEARCHBOX## - places a search box along with the GO button to appear
There are, of course, many ways in which you can create the header design for your online store. The above was to give you a simple overview. Check out the featured sites on AmeriCommerce to see how other store owners have implemented their designs.
Horizontal Navigation
Adding a horizontal navigation is optional. If you would like to add a horizontal navigation to your store, please review the knowledge base article "How do I setup horizontal navigation and drop down submenus?" The article provides step by step help on adding horizontal navigation to your site.
Left & Right Column - Navigation, Featured Items, Search Box
Select your active theme in the admin console: Themes > {Theme Name} [Active].
Select Left Column/Right Column in the left menu under Theme Settings
The left and right columns are typically used to display navigation elements, featured items and the search box. You can place any design elements of your choice.
This section can be designed with a combination of custom content and Snap-ins for ready functionality such as browse by category, search boxes etc.
Tools in these areas allow you to:
- Create custom content with a WYSIWYG editor or your own html code
- Use snap-ins for ready functionality for navigation, search etc.
- Create custom snap-ins. AmeriCommerce provides many useful snap-ins but if you need something unique for your stores that may not already be available, you can create it and add it to your site using a custom snap-in
Some of the commonly used snap-ins within your layout are:
- Browse by Category
Creates a single level list of categories (sorted alphabetically) for navigation purposes. Categories will be listed from the level you specify. You can specify Root or some Parent category; all parent categories below that level will be displayed by the Snap-In.
- Browse by Manufacturer
Creates a list of manufacturers (sorted alphabetically). The snap-in typically added for enhanced navigation.
- Customer Login
Creates a login area with input boxes for email address and password along with a button.
- Featured Items
Creates an area that lists products marked as Featured. You can specify how many products to display at one time and how many products per row. The Snap-In will automatically create paging that allows users to browse through all featured products.
- Mailing List
Provides users with an option to subscribe to your store's mailing list.
- Search Box
Creates a search box. You can achieve the same with the merge ##SEARCHBOX## but that does not allow you to customize the appearance of the contents.
- Blog/RSS Feed Reader
You can link up the reader with any blog/feed service of your choice to show updates on your store.
- Tree Navigation
Creates a Windows Explorer folder list style of navigation for categories. You can change the expand/collapse icons, automatically expand up to a specified level, and so on.
Content Area - Home Page, About Us, Contact Us, Privacy Policy
The content area also provides similar tools as the Left and Right Column areas:
- Create custom content with a WYSIWYG editor or your own html code
- Use snap-ins for ready functionality for featured items, hot sellers or custom product lists
- Create custom snap-ins. AmeriCommerce provides many useful snap-ins but if you need something unique for your stores that may not already be available, you can create it and add it to your site using a custom snap-in
To add content to the Home Page:
Select your active theme in the admin console: Themes > {Theme Name} [Active].
Select Home Page in the left menu under Theme Settings. You can add custom html snap-ins in this area to add content to your home page.
To add new Content Pages like About Us, Contact Us, Privacy Policy pages:
Please review the knowledge base article "Creating and Modifying Content Pages"
Footer
Select your active theme in the admin console: Themes > {Theme Name} [Active].
Select Page Footer in the left menu under Theme Settings.
You can add any content or design elements of your choice to the footer. You have the same tools available in this area as the Header.
Part III: Styling the Pages
Customizing appearance using Global CSS Settings
Your pages can be styled at the Global Level. You also have the option to override global settings at page specific levels all the way to the element level.
To define your global Style/CSS settings browse to your active theme: Themes > {Theme Name} [Active]
On the left hand side under Theme Settings Select CSS Settings
 Note! make sure that every time you access this page it has finished loading completely before you start making changes. This also applies when you click on Save. The web browser's loading animation should not be playing when you are working on this page.
Many settings will be populated based on the settings you defined in Theme Settings. You can define and change global CSS settings in this area. Some of the page types and settings are explained below:
-
Page Settings
Here you can specify the background image (if any) for the entire page. This background spans across the entire page and you can set the Repeat value of your choice.
If you are specifying an image background the BG Color should be left blank or the image will not display.
Use the Font, Color, Size, and Weight field to set the default font family for your store. In subsequent sections, leave the font settings to Default if you would like the Page Settings to apply across the entire website.
The Custom field at the bottom of each section can be used to specify custom CSS settings.
-
Layout Settings
This is the main area of your design.
Center Alignment for Layout Area
In many cases the layout will not be 100% of the page area. So your screen resolution maybe set to a width of 1024 pixels and your design may be only 800 pixels wide. If you wish to center align your store pages:
- Under Page Settings set the Align field to center.
Set the Margin: field to a value of 0 auto.
- If your site is not center aligned in Firefox, please add the following settings as well:
Under Layout Settings set the Clear Floats: value to Both.
Set the Margin: field to a value of 0 auto.
-
Link Text and Link Hover Text
The colors for links and hover states will be populated from what you defined in Theme Settings. You can also use the Custom field to specify hover effects.
For e.g.: Under Link Text you could write text-decoration: none; and under Link Hover Text you could fill in text-decoration: underline;.
Alternatively, you could specify a BG Color in the Link Hover Text section along with padding-left: 2px; padding-right: 2px; in the Custom field to give a background highlight effect on mouseover.
-
Content Areas
.jpg) The layout image on the right shows the areas the 6 layout control settings affect:
- Top Page Layout
Applies to the header area; (1) in the image. By defaut it contains only padding and margins.
- Middle Page Layout
Applies to (2), (3), and (4) in the image.
- Left Column Layout
Applies to (2) in the image.
- Page Content Layout
Applies to (3) in the image.
- Right Column Layout
Applies to (4) in the image.
- Page Bottom Layout
Applies to (5) in the image.
In case you encounter problems like the background image not showing up, inexplicable pixel margins that are throwing off your design, or font setings that are not following global defaults then check the relevant section that matches the image above.
Remember that every child element (for e.g. (3) - Page Content Layout is contained within its parent element: Middle Page Layout) can override the defaults set by its parent element.
This is the parent-child relationship between the various layout areas:
This section allows you to configure the appearance and behavior of horizontal navigation, if you have it setup. Most commonly these will be Link Group snap-ins that rely on these settings.
This layout section consists of the following layout settings:
This section can be used to specify the overall appearance of the horizontal navigation including font details, color, width, height, background color/image, margins, and padding.
If you have multiple horizontal navigations then you can overwrite these defaults in the Link Group Snap-in when you include the navigtaion menu into your pages.
In this section there is a field labeled Display. It has the following options:
- Yes
- No
- Block
- InLine
- InLine-Block
In order to keep the navigation horizontal this option must be set to InLine.
This specifies the appearance of the links in their normal state.
Note! In case you use the Override Default in the Link Group Snap-in when including the horizontal navigation in your pages make sure that the Display under Snap-In Link is set to InLine.
On this page and in this section the Display for links is set to Yes. If you customize the horizontal navigaion anywhere else then the links should be set to Display as InLine. Otherwise the navigation will align itself vertically and not horizontally.
You can use the Custom field to set parameters like text-decoration or padding, etc.
This defines the appearance of the links in the horizonal navigation when the mouse hovers them.
You can define a seperator that will appear between the various links in the navigation. You may use a background image or specify a border in the Custom field. For e.g. border-right: 1px solid #e3b285 will make a pipe symbol type character to show between the links. For images, you can create a background image and define it along with the height and width of the separator.
Custom CSS
To add your own Custom CSS:
Select your active theme by going to Themes > {Theme Name} [Active].
On the left hand side under Theme Settings select CSS Settings.
Wait for the page to load completely and then scroll to the bottom. You will see a section titled Custom CSS Classes and Overrides with a large input box below it.
Enter all your custom CSS classes here. Note that this is part of the Global CSS Settings so whatever you enter here will apply to the entire store.
It is recommended that you try and work with the built-in controls as far as possible. Try to use Custom CSS only if there is no other way to accomplish what you want. The Header tags (h1, h2, h3, h4), HR tag, and P tags are already listed and can be defined with the built-in controls.
Custom META tags, CSS links, Javascript, etc. (used globally)
You also have the ability to add custom JavaScript, ActiveX, or Flash ActionScript at a global level to run on every page of your site.
Select your active theme in the admin console: Themes > {Theme Name} [Active].
Select Page Header in the left menu under Theme Settings.
Include your scripts/global components in the empty text area with the title HEAD Tags (Can be META tags, CSS links, Javascript, etc. Displays on every page.).
Any scripts/global components placed here will apply across your store.
|