VevoCart Version 3.0.2
Design Guide
VevoCart.com
support@vevocart.com
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
Page | 1
Table of Contents 1.
Prologue............................................................................................................................. 3
2.
Browser Tools .................................................................................................................... 3
3.
VevoCart Design Layout..................................................................................................... 4 3.1 Header Section (LayoutControls/Header.ascx) ........................................................... 6 3.1.1 Logo.............................................................................................................. 6 3.1.2 Menu............................................................................................................. 6 3.1.3 Language Switching and Search................................................................... 6 3.1.4 Banner .......................................................................................................... 6 3.1.5 Login/Logout status....................................................................................... 6 3.2 Left Sidebar (LayoutControls/Left.ascx) ...................................................................... 7 3.2.1 Categories..................................................................................................... 7 3.2.2 Information .................................................................................................... 7 3.2.3 News and Announcements ........................................................................... 7 3.2.4 Special Offer ................................................................................................. 7 3.2.5 Free Shipping................................................................................................ 7 3.2.6 Secure Shopping........................................................................................... 7 3.2.7 Payment Symbol ........................................................................................... 7 3.3 Home Page (Default.aspx).......................................................................................... 8 3.3.1 Bestsellers .................................................................................................... 8 3.3.2 Featured Products......................................................................................... 8 3.4 Right Sidebar (LayoutControls/Right.ascx) ................................................................. 9 3.4.1 Today’s Special............................................................................................. 9 3.4.2 Mini Shopping Cart........................................................................................ 9 3.4.3 Currency ....................................................................................................... 9 3.4.4 Coupon ......................................................................................................... 9 3.4.5 Newsletter. .................................................................................................... 9 3.4.6 Featured Merchant........................................................................................ 9 3.5 Footer (LayoutControls/Footer.ascx) .........................................................................10 3.5.1 Sitemap and Link to us.................................................................................10 3.5.2 Copyright......................................................................................................10 3.5.3 Link message...............................................................................................10
4.
My Account .......................................................................................................................10 4.1 Login Page (UserLogin.aspx) ....................................................................................10 4.2 Account Details (MyAccount.aspx) ............................................................................11
5.
Box Design Layout ............................................................................................................12
6.
Other Design .....................................................................................................................13
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
Page | 2
6.1 Themes .....................................................................................................................13 6.2 Cascading Style Sheets and Skin (.css and .skin) .....................................................14 6.3 Images Folder............................................................................................................14
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
Page | 3
1. Prologue This document explains how to design and customize your VevoCart, step-by-step. This book describes the parts you can edit/add/delete to create your own unique website. The software uses CSS (cascading style sheet) to organize the style. We are confident that VevoCart will help you build great e-commerce stores!
2. Browser Tools To design web pages, it is necessary to understand interactions between CSS classes in the system. We highly recommend IE Developer Toolbar for Internet Explorer or Firebug Add-on for FireFox. For IE 6 and IE 7, you can download the IE Developer Toolbar in IE 7 from: http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511BB3E-2D5E1DB91038&displaylang=en. Firebug Add-on for FireFox can be downloaded from: https://addons.mozilla.org/en-US/firefox/addon/1843.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
Page | 4
3. VevoCart Design Layout
In the default layout, each page in the store front has 5 sections. The content in the middle (item 3.3 in the figure) can be edited from files with extension “.aspx”, e.g. Default.aspx. Other sections (3.1, 3.2, 3.4, 3.5) are stored in the folder called “LayoutControls”. There are four main files inside LayoutControls folder called Header.ascx, Footer.ascx, Left.ascx, and Right.ascx. This page will show you for structure of folder and file in VevoCart. Note: Free edition does not include code behind (*.cs) but you can still edit the ascx and aspx files.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
Page | 5
Folders in WebApp
•
App_GlobalResources – Store text and messages for Admin websites.
•
App_Themes – Css classes for Admin and Default pages.
•
ClientScripts – Store JavaScript to be used in the storefront.
•
Components – Store user controls (.ascx files) used in the storefront.
•
EmailTemplates – Templates for emails and newsletter.
•
Images – Images of the system.
•
LayoutControls – Contain the main sections of the storefront: Header, Left, Right, and Footer.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
Page | 6
3.1 Header Section (LayoutControls/Header.ascx)
The file Header.ascx contains the company logo, login/logout links, menus, language switching links, search box, and banner. 3.1.1
Logo You can change logo image in the Admin panel without editing the ascx file.
3.1.2
•
Classic Admin – Navigate the menu “Website Configuration > Logo Configuration”.
•
Advanced Admin – This menu is “Quick Start > Logo Configuration”.
Menu. A menu contains links to other pages. You can edit/add/remove the links and display text as necessary.
3.1.3
Language Switching and Search You can choose type of language switching by type dropdown or hyperlink. This can be configured in “Language Menu Display Mode” in the Admin panel menu as follows:
3.1.4
•
Classic – Website Configuration > Store Configuration
•
Advanced – Site Configuration > Storefront Config
Banner You can change the image or disable the banner in Store Config menu in the back office in the Configuration menu.
3.1.5
Login/Logout status ASP.NET controls LoginName and LoginStatus are used here. The controls are called “uxLoginName” and “uxLoginStatus”.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
Page | 7
3.2 Left Sidebar (LayoutControls/Left.ascx) Each item in this sidebar can be shown or hidden according to the settings in the Configuration menu in the admin panel. 3.2.1
Categories The categories can be displayed as normal list view, tree view, or cascade view. The container of all three views is Components/CategoryNavList.ascx. You can edit this file to change the styling of the overall box.
3.2.2
Information This section shows data from the “Contents” menu in Admin website. You may change the look by editing the file Components\ ArticleNavList.ascx.
3.2.3
News and Announcements This section shows the list of news from the “News” menu in Admin website. The file for this section is Components\NewsEvent.ascx.
3.2.4
Special Offer
3.2.5
Free Shipping.
3.2.6
Secure Shopping
3.2.7
Payment Symbol All four images from 3.2.4 to 3.2.7 can be changed or disabled in the admin panel.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
Page | 8
3.3 Home Page (Default.aspx)
The home page of your store can be changed by editing Default.aspx. This page contains two sections called Bestsellers and Featured Products. 3.3.1
Bestsellers This section shows your best selling products. You can edit the file Components\ProductBestSelling.ascx to change the look-and-feel.
3.3.2
Featured Products Featured Products section displays products randomly from your store. You can edit this section in the file Components\RandomProduct.ascx.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
Page | 9
3.4 Right Sidebar (LayoutControls/Right.ascx) Each item in this sidebar can be shown or hidden according to the settings in the Configuration menu in the admin panel. 3.4.1
Today’s Special. This section shows the list of products that was marked as “Today’s Special”. The file that contains the layout is Components\ProductSpecial.ascx.
3.4.2
Mini Shopping Cart. Display the summary of products inside visitor’s shopping cart. The layout file is Components\CurrentShoppingCart.ascx.
3.4.3
Currency Select the drop-down control to display product prices in different currency. It can be edited in Components\ CurrencyControl.ascx.
3.4.4
Coupon Customer can submit and validate a coupon here. It can be shown or hidden according to the setting in admin panel. The file for the layout is Components\VerifyCoupon.ascx.
3.4.5
Newsletter. This section is for subscribing newsletters on this website. The layout can be edited in Components\Newsletter.ascx.
3.4.6
Featured Merchant The images can be changed in the admin panel. The layout can be changed in Components\FeaturedMerchants.ascx.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
P a g e | 10
3.5 Footer (LayoutControls/Footer.ascx)
3.5.1
Sitemap and Link to us The Sitemap links to a dynamically generated sitemap page in StoreSiteMap.aspx. The Link to Us links to LinktToUs.aspx.
3.5.2
Copyright
3.5.3
Link message These messages can be changed directly in this file (Footer.ascx).
*Important: For users who download the Free edition of VevoCart software, do not remove “Shopping Cart Software for SME” nor the link to http://www.vevocart.com. This restriction has also been stated in “license.txt” file in the VevoCart application folder.
4. My Account Your customers can log in to your website with their user names and passwords. “My Account” page has links to information regarding customer details and their order history. 4.1 Login Page (UserLogin.aspx)
This page can be modified by editing in UserLogin.aspx.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
P a g e | 11
4.2 Account Details (MyAccount.aspx)
This page contains account information and order history. It can be edited or rearranged as necessary by modifying MyAccount.aspx.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
P a g e | 12
5. Box Design Layout Boxes in VevoCart 3.0 pages usually follow the common layout using several <div> tags. This design allows modifying the borders, colors, styles in CSS classes.
Examples of this box layout can be found in most of the boxes in home page, e.g. category menu list (Components\CategoryNavList.ascx), Bestsellers (Components\ProductBestSelling.ascx). For example, a login box also has the box layout using <div> tags as described above.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
P a g e | 13
We can divide each part of this login box using the same colors as the model above. Red is for top <div>; yellow and blue for middle <div>; green for the bottom <div>; with black for outer <div>.
6. Other Design 6.1 Themes
Above are the folders inside WebApp\App_Themes. These folders contain the CSS files for storefront and backoffice. •
Admin – is used Classic Admin panel.
•
AdminBlueTheme and AdminCommon – is used by Advanced Admin panel.
•
Default – is used by the storefront.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2
Design Guide
P a g e | 14
6.2 Cascading Style Sheets and Skin (.css and .skin)
Some folders, especially AdminBuleTheme and AdminCommon, contain both .css and .skin files. •
CSS files contain the regular CSS classes as in HTML standard.
•
SKIN files are ASP.NET files that are for controls with common appearance. Please see Microsoft ASP.NET documentation for more details.
•
Images folder inside the theme folder contains images that are used by CSS and SKIN files.
6.3 Images Folder
The folder “WebApp\Images” contains images in the storefront. There are several subfolders. The important ones are: •
Categories: Images for categories.
•
Configuration: For images that are uploaded from Configuration menu in the Admin panel, e.g. banner image.
•
Design: Images for general VevoCart look-and-feel.
•
Gateway: Symbols of the gateway payments.
•
Products: Images for products.
All Rights Reserved. Vevo Systems Co., Ltd.
Version 3.0.2