Home | FAQs | Learn | Design | Blog | See Pricing and Plan | Promo
We are hiring! (Software Engineers, Mobile App Develoer and Sales Executive)

Design Integration

Home > Learn > Design Centre > Design Integration

Integrating your design with webShaper Stores Template System

A good foundation of HTML & CSS knowledge is required for this section.


First step is, you need know all the template design component

On admin panel, under Design menu, you will see :

  1. Static Pages
  2. Template Files
    Under this menu, contain :

  3. Theme Files
    Under this menu, contain:



The second part, we can divide into these 3 sections

  1. Dynamic & Non-dynamic
  2. webShaper special tag
  3. skin.xml



Dynamic & Non-dynamic

  1. Dynamic part
    Means, must follow system’s structure when designing the layout,
    and these two are dynamic :
    • Plug-in Component
    • Main Content Part

  2. Non-dynamic part
    Means, can freely design it with your creativity,
    and these two are non-dynamic :
    • Header
    • Footer



Styling Dynamic Part

  1. Styling Plug-in Component
    100% style it with CSS
    • Header background image in CSS
    • Body background image in CSS
    • Footer background image in CSS

      • Example: Category list component structure
      Component Structure

      Example designed component :
      Example designed Component


  2. Styling Main Content part
    100% style it with CSS

    • Front page
      To style the main content part on front page, you need to style it inside
      Design > Static pages > index.html

    • Category page
      To style this page, have to follow its structure, and style it with CSS

    • Product details page
      To style this page, have to follow its structure, and style it with CSS


  3. List of Dynamic pages
    Dynamic pages consist of the following pages (stored under /webshaper/store):

    1. addressBilling.asp
    2. addressBook.asp
    3. addressRegister.asp
    4. addressShipping.asp
    5. advancedSearch.asp
    6. bestSellers.asp
    7. browseByCustomField.asp
    8. cancelpayment.asp
    9. changePassword.asp
    10. contactUs.asp
    11. createAccount.asp
    12. cust_createNewShipAddr.asp
    13. cust_editShipAddr.asp
    14. cust_modifyInfo.asp
    15. cust_modifyShipInfo.asp
    16. custHome.asp
    17. custOrderList.asp
    18. emailFriend.asp
    19. forgetPassword.asp
    20. manufacturer.asp
    21. message.asp
    22. newProducts.asp
    23. news.asp
    24. newsletter_subscribe.asp
    25. newsletter_unsubscribe.asp
    26. orderSummary.asp
    27. payment.asp
    28. ProductMap.asp
    29. registerLogin.asp
    30. searchProd.asp
    31. shipping.asp
    32. sign_in.asp
    33. specials.asp
    34. thankyou.asp
    35. theme.asp
    36. verifyAccount.asp
    37. viewCart.asp
    38. viewCat.asp
    39. viewProd.asp

    These pages do not generate the HTML directly to the browser. Instead, it generates XML data, which are combined with their respective XSL, to generate the content part of the website, which is then merged with the template files.



Styling Non-dynamic Part

You can freely style it with your creativity with HTML, CSS, Java, or Flash.

  1. Header Part
    You can put your HTML or Flash inside header.html, ( Design > Template Files > Header.html )
    and your styling css inside default.css ( Design > Theme Files > Default.css )

  2. Footer Part
    You can put your HTML or Flash inside footer.html, ( Design > Template Files > Footer.html )
    and your styling css inside default.css ( Design > Theme Files > Default.css )



webShaper Special Tag

These tag must be included inside HTML in its respective part, such as :

  1. <ws_companyLogo/>
    This code will generate company logo, (website logo) dynamically from admin panel (Backend).
    (Mostly we put this inside Header.html)

    Example code : 
    ...
<div id="companyLogo">
	<a href="/index.asp">
		<ws_companyLogo/>
	</a>
</div>
...


  2. <ws_companyName/>
    This code will generate company name, (website name) dynamically from admin panel (Backend).
    (Mostly we put this inside Footer.html)

    Example code : 
    ...
Copyright © 2010 <ws_companyName/>  
...


  3. <ws_companyURL/>
    This code will generate company URL, (website URL) dynamically from admin panel (Backend).
    (Mostly we put this inside Footer.html)

    Example code : 
    ...
Copyright © 2010 <ws_companyName/> | <ws_companyURL/> |   
...


  4. <title/>
    This is standard HTML element, but in the final output, the values for it, would be replaced with
    SEO-Friendly title between the title tags like <title>Product Name</title>.
    (Can find this inside Template.html)

    Example code : 
    ...
<?xml version="1.0" encoding="UTF-8"?>
<html doctype="XHTML 1.0 Transitional" >
<head>
	<title/>
	<description/>
	<keywords/>
	<googleAnalytics/>  
	<theme/>
   	<link rel="shortcut icon" href="/theme/images/favicon.ico"  />
	<link rel="shortcut icon" href="/theme/images/favicon.gif"  />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
...


  5. <description/>
    This will print out <meta type="description " content="…" >
    (Can find this inside Template.html)

    Example code : 
    ...
<?xml version="1.0" encoding="UTF-8"?>
<html doctype="XHTML 1.0 Transitional" >
<head>
	<title/>
	<description/>
	<keywords/>
	<googleAnalytics/>  
	<theme/>
   	<link rel="shortcut icon" href="/theme/images/favicon.ico"  />
	<link rel="shortcut icon" href="/theme/images/favicon.gif"  />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
...


  6. <keywords/>
    This will print out <meta type=”keywords” content=”…” >
    (Can find this inside Template.html)

    Example code : 
    ...
<?xml version="1.0" encoding="UTF-8"?>
<html doctype="XHTML 1.0 Transitional" >
<head>
	<title/>
	<description/>
	<keywords/>
	<googleAnalytics/>  
	<theme/>
   	<link rel="shortcut icon" href="/theme/images/favicon.ico"  />
	<link rel="shortcut icon" href="/theme/images/favicon.gif"  />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
...


  7. <googleAnalytics/>
    This will print out the Google Analytics Web Site Statistic Tracking code.
    More on Google Analytics at http://www.google.com/analytics/
    (Can find this inside Template.html)

    Example code : 
    ...
<?xml version="1.0" encoding="UTF-8"?>
<html doctype="XHTML 1.0 Transitional" >
<head>
	<title/>
	<description/>
	<keywords/>
	<googleAnalytics/>
	<theme/>
   	<link rel="shortcut icon" href="/theme/images/favicon.ico"  />
	<link rel="shortcut icon" href="/theme/images/favicon.gif"  />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
...


  8. <theme/>
    This will print out <link href="/theme/default.css" rel="stylesheet" type="text/css">
    (Can find this inside Template.html)

    Example code : 
    ...
<?xml version="1.0" encoding="UTF-8"?>
<html doctype="XHTML 1.0 Transitional" >
<head>
	<title/>
	<description/>
	<keywords/>
	<googleAnalytics/>
	<theme/>
   	<link rel="shortcut icon" href="/theme/images/favicon.ico"  />
	<link rel="shortcut icon" href="/theme/images/favicon.gif"  />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
...


  9. <header/> , <footer/> , <leftbar/> and <rightbar/>
    You can further divide the template into 4 major sections, header.html, footer.html, leftbar.html,
    and rightbar.html. To call up that section of HTML, just insert the above tags.
    (If not, you can always have only one template file -> Template.html)

    Example code : 
    ...
<body onload="initPage()">
	<div id="wrapper">
	  <header/>
	    <div id="MainContent">
	      <leftbar/>
	        <div id="col1">		
	          <div class="col1Wrapper">
	            <content/>
                  </div> 
		</div> 
      	      <rightbar/>
	    </div>
          <footer/>
	</div>
</body>
...


  10. <content/>
    This section is the center section which prints the content of pages excluding those printed by
    <header/>, <footer/>, <leftbar/> and <rightbar/>.
    (This will generate main content dynamic pages)

    Example code : 
    ...
<body onload="initPage()">
	<div id="wrapper">
	  <header/>
	    <div id="MainContent">
	      <leftbar/>
	        <div id="col1">		
	          <div class="col1Wrapper">
	            <content/>
                  </div> 
		</div> 
      	      <rightbar/>
	    </div>
          <footer/>
	</div>
</body>
...


  11. <statCounter/>
    This will print out the Statcounter Web Site Statistic Tracking code.
    More on Statcounter at http://www.statcounter.com

    Example code : 
    ...
</div>	
	</div>
<statCounter/>
</div>
</footer>
...


  12. Webshaper Plug-In component tag
    These are the code for all our Plug-In webshaper component tag,

    Category Listing Component <categoryListing/>
    Price Range List Component<priceRangeList/>
    Manufacturer List Component<mfcComponentList/>
    Theme List Component<themeComponentList/>
    Browse by Custom Field Component<customFieldList code="1" title="Shop by Brand" />
    News Component <newsComponentList/>
    Currency Component<currencyList/>
    Cart Component<cartComponentList/>
    New Product Component*<newProductsComponentList/>
    Special Component*<specialsComponentList/>
    Best Sellers Component*<bestSellersComponentList/>
    Featured Products Component*<featuredProductsList/>

    * Plug-In component which can inserted in both template files and static files, the tags are case sensitive.



webShaper Skin.xml

Skin.xml is your layout configurator. Inside this skin.xml,
You can change buttons,components, and also dynamic pages layout.

  1. How to change button inside skin.xml?
    Let say you want to change 'Add To Cart' button, search for 'add to cart' wording, and you will find this : 
    
<ws_button id="btnAddToCart" src="btnAddtoCart.gif" margin="2px 3px 0 0" />
    And then, upload your new button inside images folder ( Design > Theme files > Images )
    and replace this btnAddtoCart.gif source image button with your new button name.


  2. How to customize components inside skin.xml?
    We will use category component as example here. 
    
<ws_component id="categoryList" >
	<header>
		<text><![CDATA[
			Categories
			]]>
		</text>
	</header>
	<body>
		<categoryLevelDepth>1</categoryLevelDepth>	
	</body>		
</ws_component>

    • Change Componnet's header wording
      Simply change the wording to your prefered wording. (See below example code)
      From : 
      ...
<header>
	<text><![CDATA[
		Categories
		]]>
	</text>
</header>
...

      change to : 
      ...
<header>
	<text><![CDATA[
		Browse by Categories
		]]>
	</text>
</header>
...

      Result:
      Example changed component header text


    • Display sub category in category list component
      If you have sub category / second level category, and you want to display it in category list component,
      Simply change the category level depth to '2'.
      From : 
      ...
<body>
	<categoryLevelDepth>1</categoryLevelDepth>	
</body>
...

      change to : 
      ...
<body>
	<categoryLevelDepth>2</categoryLevelDepth>	
</body>
...

      Result:
      Example displaying sub category


    • Display leftbar or rightbar or just both
      You can also configure whether you want your design to display
      either leftbar or rightbar, or you can choose to display both
      From : 
      ...
<ws_page id="viewProd" >		
	<pageInclude>	
		<header>yes</header>
		<footer>yes</footer>
		<leftbar>no</leftbar>
		<rightbar>yes</rightbar>
	</pageInclude>
...

      change to : 
      ...
<ws_page id="viewProd" >		
	<pageInclude>	
		<header>yes</header>
		<footer>yes</footer>
		<leftbar>yes</leftbar>
		<rightbar>no</rightbar>
	</pageInclude>
...

      Result:
      Example display left or rightbar


    • Customize page header and sub header
      You can customize every page header and its sub header inside this skin.xml
      From : 
      ...
<pageHeader>		
	<imageSrc></imageSrc>	
	<text><![CDATA[	
		<h1>View Product Details</h1>
		]]>
	</text>	
</pageHeader>		
<pageSubHeader>		
	<text><![CDATA[	
		More information on product
		]]>
	</text>	
</pageSubHeader>
...

      change to : 
      ...
<pageHeader>		
	<imageSrc></imageSrc>	
	<text><![CDATA[	
		<h1>Product Details</h1>
		]]>
	</text>	
</pageHeader>		
<pageSubHeader>		
	<text><![CDATA[	
		More information..
		]]>
	</text>	
</pageSubHeader>
...

      Result:
      Example change page header



Important: HTML and CSS knowledge is required for editing the template. Before editing, please make sure to copy all the text (Ctrl A) and paste into notepad (or any documents) and save it as backup.
Read Why Us , Take a tour or Compare Pricing & Sign up
Start selling online

Sell Fashion Online

Online Payment
Customer Service

Partners

Don't miss this!
Let's Connect


eNewsletter

Subscribe now for latest updates on ecommerce, payment and more!


paypal platinum webStore partner
e-commerce secured site

Copyright © 2013  Sell More Online - webShaper™