Designing a store interface
The "Interface Designer" section of eShox can be accessed via eShox Admin. Open a Web browser and enter the following URL: http://your-domain-or-ip/shop/admin/. Click on "Interface Designer" under "Interface Setup" on the left "Administration" window. To make changes to an interface element: select the interface element from the list, choose a file to be uploaded, then click "Update". To add an interface element, choose "Add Element", select a file to be uploaded, then click "Insert".
The purpose of the "Interface Designer" is to tailor the eShox interface to a design of your choosing. It is suggested that the interface element images be in GIF file format to allow for transparency. Elements of the interface that can be modified with the "Interface Designer" include:
template.shtml
The "template.shtml" interface element is used to define the layout of shop pages. This file can be edited with Dreamweaver, GoLive or virtually any other HTML editor. This file should contain 8 different interface element tags:
[pagetitle] defines where the title of shop pages is displayed
[logo] defines where the store logo is displayed
[find] defines where the quick find feature is displayed
[headercolumn-left] [headercolumn-right] defines where the header column menus are displayed
[navbartitle] defines where the navbar title is displayed
[navbarcontents] defines where the navbar contents are displayed
[wintitle] defines where the window titles are displayed
[wincontents] defines where the page contents are displayed
[privacy] defines where the privacy policy link is displayed
[returns] defines where the returns policy link is displayed
[contact_us] defines where the "contact us" link is displayed
[year], [month], [day], [weekday], [monthname] and [date] are used to display date information
[store_name] is used to display the name of this brand/store affiliate
[welcome] is used to display the 'welcome to ' (store name) message[navbar_shopping_cart] is used to display the small shopping cart
[navbar_shopping_categories] is used to display the category tree
[navbar_manufacturer] and [navbar_manufacturer_info] are used to display information about products manufacturers
[navbar_new_products] is used to display a random new product (one added within the last month)
[navbar_specials] is used to display random products on special
[navbar_currencies] is used to display the currencies pop-up list
[navbar_languages] is used to display the language selections
[navbar_search] is used to display the product quick find search field
All of the interface element tags are optional, if they are not included, their respective contents will not be displayed.
product_info.shtml
The "product_info.shtml" interface element is used to define the layout of product information shop pages. This file can be edited with Dreamweaver, GoLive or virtually any other HTML editor. This file should contain the same tags as the "template.shtml" file and can also include:
[wincontents] displays all of the product information fields (not suggested)[form_start] defines where the "buy" form starts, it should be before the "[buy]" and "[quantity]" tags
[product_manufacturer] defines where the manufacturer name is displayed
[product_name] defines where the product name is displayed
[product_model] defines where the product model name is displayed
[product_description] defines where the product description is displayed
[product_options] defines where the product option pop-up menus are displayed
[customer_options] defines where the customer option fields are displayed
[product_image] defines where the product image is displayed
[product_price] defines where the products price is displayed
[product_price_table] defines where the product price table is displayed (for multiple-unit pricing)
[quantity] defines where the quantity field is displayed
[buy] defines where the "add to cart" button is displayed
[also_purchased] defines where the "customers also purchased" information is displayed
[product_webpage_link] defines where the web link URL is displayed (to link to additional product pages)
[form_end] defines where the "buy" form ends, should be after the "[buy]" and "[quantity]" tagsIf music features are enabled, additional tags include:
[artist_name] defines where the artist/band name is displayed
[artist_bio] defines where the artist/band bio is displayed
[artist_pic] defines where the artist/band image is displayed
[artist_tour_dates_header] defines where the tour dates header is displayed
[artist_tour_dates] defines where the tour dates are displayed
All of the interface element tags are optional, if they are not included, their respective contents will not be displayed.
column_bg.gif & column_bg_selected.gif
The "column_bg.gif" and "column_bg_selected.gif" interface elements are used as the backgrounds for product and order lists. The product lists may be sorted by price, name or model. The "Selected Column Background" image is used as the background for the sort column that is currently selected. It is suggested that the "Column Background" and "Selected Column Background" interface elements be 17 pixels in height.
Button themes
The "Button Themes" section of eShox can be accessed via eShox Admin. Open a Web browser and enter the following URL: http://your-domain-or-ip/shop/admin/. Click on "Button Themes" under "Interface Setup" on the left "Administration" window.
eShox includes 3 unique button themes. Each button theme is available in all languages currently supported by eShox. The default theme is "Classic", which is designed to be non-specific to any particular overall design. To enable a button theme, select the theme and click the "green" button.
