Website > Themes and Display Pages > Setting Themes and Display Pages

In this Topic ShowHide

Setting Themes and Display Pages

The Themes and Display page allows you to select your theme and default display pages for your store.  If you want to customize a theme or create a new one, please see Managing Theme Files.  For an in-depth view of how you can modify AbleCommerce software, you can also reference the AbleCommerce 7 Customization Guide .

Keep in mind that the values you select here are simply defaults that will be used if there is no alternate display page or theme specified for the individual store page.  If you so desired, you could create individual themes and custom displays for every page in your store.  

Themes

The files that make up a theme are located in the corresponding sub-folders of the \App_Themes\ directory.  After selecting the theme you wish to use for your store, you may want to make a copy of the theme before making changes.  You can do this by using the Themes File Manager.

A theme is composed of Cascading Style Sheets (.css) and Asp.Net Skin (.skin) files which allow you to customize the look and feel of your store.  The purpose of this documentation is not to explain skinning or style sheets in detail.  So, if you are not familiar with .CSS files or .SKIN files, you may want to search on Google for some more information.

An AbleCommerce theme also includes the images used throughout your store.  This includes the logo, add to cart buttons, and much more.  You can view the \images\ folder for your selected theme to see which images are available.  Replace these images with your own for a custom store appearance.

Display Pages

In the root folder of the AbleCommerce program, there are about 35 Asp.Net Server Pages (.aspx) files.  These are called scripts.  The script file is nothing more than a collection of settings.  Each one of the scripts has settings in it to determine which scriptlets will be used when constructing the page.  The settings are tied to that file, NOT to a particular catalog object.  So, if you wish to have a variety of display options for your products, you may need to create additional display pages.

The target script uses it's settings to decide what scriptlets to use in constructing the page.  Here is an example of the code that you would see in a display page:

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="PageContent">

    <cb:ScriptletPart ID="ContactUs" runat="server" Layout="Left Sidebar" Header="Standard Header" LeftSidebar="Our Departments" Content="Contact Us" Footer="Standard Footer" Title="Contact Us" AllowClose="False" AllowMinimize="false" />

</asp:Content>

Notice that the enlarged text within the code above is simply a designation to determine which scriptlets will be used for the layout, header, sidebar, content, and footer.   

In order to achieve variation (different display styles), AbleCommerce has produced multiple script files out of the box.  Each script file has a different default scriptlet setting.  That way, when editing products and categories, you will be able to easily select different displays pages to choose from.

Customized Pages

After you modify a display page so that it is using a different layout or scriptlet, it will automatically show up on the Website > Customized Pages menu.  This page was designed so you can view any display page changes.  It was also created in case you accidentally select two incompatible scriptlets that break the display page.  If that happens, click the delete icon next to the display page file and it will revert to the original settings.

Setting the Store Theme

AbleCommerce provides fifteen built-in store themes.  Most of the themes are very similar in layout and design.  The main differences are the colors and styles used.    

1. From the Themes page, or from the top-menu, go to Website > Themes and Display Pages.

2. Find the Default Themes section as shown below.
   
   

3. The default selected Store Theme will be displayed.  Click here to view a sample of all AbleCommerce store themes.

4. Select a theme and click the SAVE CHANGES button when finished.

Setting the Admin Theme

If you create your own merchant administration theme, you can select it here.

1. From the Themes page, or from the top-menu, go to Website > Themes and Display Pages.

2. Find the Default Themes section as shown below.
   
   

3. The default selected Admin Theme will be displayed.  In the default installation, there is only one Admin Theme available.

4. If you want to customize the look and feel of the merchant administration, you may create your own theme and select it here.  

5. Click the SAVE CHANGES button when finished.

Setting the Default Display Pages

For the categories, products, and webpages in your catalog, you can specify the script that should be used to generate the display page. You can override this default setting for any item in your catalog.  When the display page is not specified, the default display page you select here will be used.

For each category, product, or webpage, you can individually select a Theme or Display page by going into Edit mode from the retail side.  In the example below, the default values will be used.  However, you will be able to individually change the Theme and/or the Display page for any page in your store.

1. From the Themes page, or from the top-menu, go to Website > Themes and Display Pages.

2. Find the Default Display Pages section as shown below.
   
   

3. Select the default Category Display Page:
   The following display pages have been created to utilize each of the available category content scriptlets.

   • Category Grid (Deep Item Display) (Category.aspx):
     Displays products for the selected category and all of it's sub-categories. Items are displayed in a grid format with breadcrumb links, sorting, page navigation, and sub-category link options.

   • Category Grid (Shallow Item Display) (CategoryGrid2.aspx): Displays products for only the selected category. Items are displayed in a grid format with breadcrumb links, sorting, page navigation, and sub-category link options.

   • Category Grid (Deep Item Display) With Add To Basket (CategoryGrid3.aspx): Displays products for the selected category and all of it's sub-categories. Items are displayed in a grid format, each with a quantity box so user can purchase multiple items with one click. Includes breadcrumb links, sorting, page navigation, and sub-category link options.

   • Category Grid (Shallow Item Display) With Category Data (CategoryGrid4.aspx): Displays categories, products, webpages, and links for only the selected category. Items are displayed in a grid format with breadcrumb links, sorting, and page navigation.

   • Category Details Page (CategoryDetailsPage.aspx): Displays categories, products, webpages, and links for only the selected category. Items are displayed in a left-aligned, row format, with descriptions and images.

   • Category List (CategoryList.aspx): Displays products for only the selected category. Items are displayed in a row format with columns for SKU, manufacturer, and pricing. Includes breadcrumb links, sorting, page navigation, and sub-category link options.

   • Category Search (CategorySearch.aspx): Displays a search panel to narrow and expand results based on category, manufacturer, and keyword. This can only be used with certain content scriptlets (Search Page, Category Grid, and Category Grid Page with Basket).

4. Select the default Product Display Page:

   • Basic Product (Product.aspx): Uses the Right Sidebar Layout
     A product display page that shows the basic product details.

   • Basic Product 2 (Product2.aspx): Uses same content as the Basic Product, uses the Three Column Layout
     A product display page that shows the basic product details.

   • Product with Options Grid (Product3.aspx):
     A product display page that shows all variants of a product in a grid layout. This display page should not be used with products having more than 8 options.

5. Select the default Webpage Display Page:

   • Basic Webpage (Webpage.aspx):
     A basic display handler for webpages. It shows the webpage content with standard headers and footers.

6. Click the SAVE CHANGES button when finished.

Back to Top

Go to Site Map