!"#$%&&'()'*$+,-%&"./-"%0*1+"2'* Interspire Pty. Ltd.

Transcription

1 !"#$%&&'()'*$+,-%&"./-"%0*1+"2'* Interspire Pty. Ltd. Editin 1.0 August 2009

2 Written by Chris Bultn. Cpyright 2009 Interspire Pty. Ltd. (ACN ); All rights reserved. All trademarks and registered trademarks used are the prperties f their respective werrs. DISCLAIMER: The infrmatin in this user s guide is accurate at the time f writing. This guide is prvided as is withut express r implied warranty f any kind. Neither Interspire Pty. Ltd. nr its agents ssume any liability fr inaccuracies in this guide, r lsses incurred by use r misuse f the infrmatin in this guide.

3 Table f Cntents!"#$%&&'($')$*+,%&"-.,"%/)#*"0') 3* Intrductin... 5* Structure Of This Dcument... 5* Template Structure... 6* Template File Types... 6* Layut Files... 6* Panels... 6* Snippets... 6* Page Structure... 7* Template Directry Structure... 9* Mdifying Yur Stre Design...11* Mdifying Template Files Via Design Mde...11* Custmizing Yur Stre With Design Mde...11* Mdifying Template Files via Quick Edit...13* Custmizing Template Files and Stylesheets via Quick Edit...13* Cmparing & Managing Template Files...15* Cmparing Custmized Template Files...15* Mdifying Templates via FTP...17* Mdifying and Custmizing Template Files via FTP...17* Allwed File Types...18* Custmizing Built-in Template Images...18* URLs fr Accessing Upladed Cntent...19* Maintaining a Mdified Template...20* Template Variables...21* Glbal Variables...21* Language Variables...21* Panel References...22* Snippet References...22* File Includes...22* Custmizing Stylesheets...24* Cascading Stylesheets...24* Stylesheets in BigCmmerce...24* Stylesheet Guide...25* Basic Elements...25* Page Cntainer...28* Header...28*

4 4)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Cntent...31* Page Fter...32* Page Breadcrumbs...33* Categry Listing...33* Sub Categry Listing...33* Recent News...33* Prduct Listings...34* Prduct Lists (List View Mde)...35* Prduct Details...36* Prduct Reviews...37* Currency Cnverter...37* Prduct Cmparisns...38* View Cart Page...38* Mini Cart Cntents Panel...39* Suggestive Cart Mini Cart Cntents...39* Create Accunt & Lgin Pages...39* Express Checkut...40* Example Stylesheet Custmizatins...41* Bld Rt Level Categries...41* Different Star Rating Images fr Side Clumns...41* Restyled and Alternating Clr Prduct Reviews...42* Mving Prduct Images t the Right...43* List View Based Prduct Listings...44* Mre Infrmatin and Resurces...46* (X)HTML, Design and Web Standards...46* Cascading Stylesheets...46* Develpment Tls...46* Appendixes...47* Appendix 1: Layut Files and Panels...47* Appendix 2: Sample Layut Files...55* 1 Clumn Layut File...55* 2 Clumn (Left + Cntent) Layut File...55* 2 Clumn (Right + Cntent) Layut File...56* 3 Clumn Layut File...56* Appendix 3: Stre Wide Glbal Variables...57*

5 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 5* Intrductin BigCmmerce cntains a pwerful template system that can be used t cmpletely custmize the lk and feel f yur stre t yur needs t integrate it with an existing website design. BigCmmerce templates are entirely HTML based and make use f extensive CSS t style page designs. Due t the flexible design f the HTML templates in BigCmmerce, it s pssible t create brand new stre designs nly thrugh custmizatin f the stylesheets and little HTML mdificatin. This guide serves as an intrductin t the methds available fr yu t custmize the appearance f yur BigCmmerce stre, and an intrductin in t hw the BigCmmerce template system is structured. Structure Of This Dcument The BigCmmerce Custmizatin Guide is divided in t several smaller parts, fr easier reference and navigatin. Template Structure deals with the basics in hw the template & stre design system in BigCmmerce wrks and hw the structure f a page is placed tgether. Mdifying Yur Stre Design runs yu thrugh all f the available methds fr custmizing yur BigCmmerce stre, including Design Mde, Quick Edit and direct FTP access t yur template files. Maintaining a Mdified Template cntains all f the infrmatin yu need t knw as well as sme advice n hw t keep yur stre running and up t date with a custm stre design. Template Variables cntains an verview f the different kinds f variables (placehlders) that are used by the BigCmmerce template system. Custmizing Stylesheets intrduces the stylesheets used within yur template, used t apply presentatinal infrmatin (fnts, clrs and page layut) t yur stre and includes sme example custmizatins. Mre Infrmatin and Resurces cntains sme f ur favurite web resurces fr learning HTML, CSS and design as well as links t must have utilities fr template designers.

6 6)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Template Structure Template File Types Layut Files Layut files are the files yu see in the rt directry f a page. Each layut file crrespnds with a page that s shwn in BigCmmerce. Fr example, prduct.html refers t the page that s shwn when a custmer is viewing the details f a prduct in yur stre. The majrity f layut files cntain nthing mre than references t individual panels t be shwn n a page. These panels are cntained in <div> tags that generally define left, center, r right clumns f the page. Having references t panels in the files is the functinality that allws the drag and drp design mde feature t rerganize the cntents f the pages. A list f template layut files and their purpse can be fund in Appendix 1: Layut Files and Panels. Fr sample layut files fr different clumn cmbinatins can be fund in Appendix 2: Sample Layut Files. Panels Panels generally indicate a blck r sectin n the page. Each panel file builds ne f the separate blcks shwn n pages shwn in BigCmmerce. Fr example, the SideCategryList panel builds a list f categries t be shwn thrughut the stre. As mentined abve, panels are generally referenced directly frm the layut files they define which cntent shuld be shwn n a particular page and handle the generatin f that specific cntent. Sme panels cntain strictly static cntent (such as the stre name) whilst thers need t dynamically generate cntent. These dynamically generated panels (such as the panel that builds the list f prducts in a categry r the list f categries n the stre) make use f panel lgic files lcated in the BigCmmerce applicatin. A list f the panel files and their purpse can be fund in Appendix 1: Layut Files and Panels. The panel files in this list are brken dwn t the page they re n (sme panels are nly available n certain pages) in the default stre template. Snippets Snippets are templates cntaining HTML that can be used multiple times n ne page either by being used in different parts f the template r being part f a lp that fr example builds a list f prducts n the page (each prduct in the list being a repeated versin f the same snippet)

7 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 7* Snippets (fund in the Snippets directry) are generally repeated inside dynamic panel files (utlined abve). Fr example, HmeFeaturedPrductsItem will refer t an individual prduct in the HmeFeaturedPrducts panel. Page Structure As utlined abve, there are three types f template files within BigCmmerce. These three types f files are what BigCmmerce uses t build the layut f a page in the stre. The image belw shws a break dwn f hw layut files, panels and snippets wrk tgether t build a page: 8/9%+-* :";'* </0';* </0';* </0';* =0">>'-* =0">>'-* =0">>'-* =0">>'-* As yu can see, ne layut file references many panels that may reference many individual snippets.

8 ?)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * A breakdwn f the hme page f a default installatin f BigCmmerce in t the layut file, panels and snippets wuld lk similar t the fllwing: In the image abve: The layut file is the entire page. The layut file cntains all f the snippets and panels n a page nce it s all put tgether. Panels are represented by the range sectins. The panels cntain the snippets (fr example, each prduct in the new prducts list) Each individual snippet is represented by the green sectins. The entire layut f a page can be brken dwn in t separate blcks. Try visualizing the hme page f the stre. Yu ll ntice there are clearly defined sectins. At the mst basic level these are the header, left clumn, cntent (center) clumn, right clumn and the fter.

9 If yu break the layut dwn even mre, yu ll ntice that each f these sectins cntain separate sectins s fr example n the left menu, the categry list, ppular prducts and the newsletter. Each f these items is cnsidered a blck. These blcks are used t create a mdular system fr cntent t be easily mved between different prtins f the layut and have it restyled t fit that sectin autmatically (such as when a prduct list is n the left side bar, it des nt cntain any prduct images as ppsed t when it s in the center f the page and des cntain prduct images) Template Directry Structure The files that apply t yur BigCmmerce stre design are rganized in t several different directries, depending n the type f file. The structure this flder is utlined belw: images Cntains the images fr this template. [clr] A directry fr each f the clr schemes in this template shuld be created. Any clr specific images fr this template shuld be placed in this directry. Panels Cntains the panel HTML files used fr this template. An verview f panels can be fund belw. If a particular panel HTML file is nt fund in this directry, it is laded frm the master panels directry as utlined in the next sectin. Snippets Cntains the snippet HTML files used fr this template. An verview f snippets can be fund belw. If a referenced snippet is nt fund in this directry, it is laded frm the master snippets directry as utlined in the next sectin. Styles styles.css Cntains the primary layut stylesheet fr this template.

10 AB)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * ie.css Cntains any Internet Explrer stylesheet verrides fr this template. [clr].css Fr each f the clr schemes available, a CSS file shuld be included with the name f the clr scheme. This file shuld cntain all clr infrmatin fr the template. Several HTML files (als called layut templates) als exist within the base directry fr each template. Their purpse is utlined belw. Layut files that are referenced by the stre and d nt exist in this directry will be laded frm the master layut files directry as described in the next sectin.

11 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') AA* Mdifying Yur Stre Design Mdifying Template Files Via Design Mde Design Mde in BigCmmerce allws yu t make simple drag-and-drp layut changes t yur stre, t rearrange r remve pieces f cntent frm pages n yur stre. This is by far the mst simple way t begin custmizing the appearance f yur BigCmmerce stre, hwever as nted abve, is limited t changing the rder f r remving items frm pages. T enable Design Mde n yur BigCmmerce stre: Lgin t yur BigCmmerce Cntrl Panel and click the Stre Design link at the tp f the page. Click the Design Mde tab t view the ptin t enable r disable Design Mde n yur stre. Tick Yes, enable design mde and then Save t enable the design mde functinality n yur stre. T disable design mde, simply untick the Yes, enable design mde ptin and click Save. Design Mde will then be disabled. Nte: With the Design Mde feature enabled, yu must be lgged in t the BigCmmerce Cntrl Panel befre visiting yur stre t see the design tlbar and drag and drp ptins. Yur custmers will never see the tlbar nr will they be able t make any changes. Custmizing Yur Stre With Design Mde After yu ve enabled Design Mde using the steps utlined abve, when yu next visit yur stre (Click the View Stre link in the tp f the cntrl panel), yu ll nw see a flating tlbar that appears at the tp f each page. With the Design Mde tlbar: Click Save t save any changes yu ve made t the layut f the page yu re currently viewing.

12 AC)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Click Cancel t und and revert any changes t the layut f the page yu re currently viewing. Click Enabled t temprarily enable r disable the drag and drp design mde features n the current page. This is useful if yu need t interact with elements such as text r check bxes that are n the page. T change the rder in which a particular panel is shwn r t mve it t anther clumn: 1. Enable Design Mde n yur stre using the steps abve. 2. Navigate t the page that cntains the panel/sectin that yu wish t mve. 3. On that clumn, mve yur muse ver the clumn until yu see the crss-hair muse pinter. 4. Hlding the left buttn dwn n yur muse, drag the panel t the apprpriate psitin r cntainer. 5. When the panel is psitined crrectly, release the left buttn n yur muse. 6. Repeat as necessary t adjust ther items n the page. 7. Click the Save buttn t save yur changes. Remving a panel frm a page: 1. Enable Design Mde n yur stre using the steps abve. 2. Navigate t the page that cntains the panel that yu wish t remve. 3. With yur muse ver the panel, right click t display the ppup menu. 4. Click Remve Panel t remve the panel frm the page. 5. Click the Save buttn t save yur changes. Tip: Still nt fllwing? We have a cmprehensive vide that shws ff hw t use the drag-and-drp mde, as well as edit language variables n pages and remve panels frm pages. T watch the vide, lgin t yur BigCmmerce Cntrl Panel, and frm the Dashbard, lcate Design Mde 101 in the list f Vide Walkthrughs.

13 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') A3* Mdifying Template Files via Quick Edit Quick Edit is the template and stylesheet editr integrated in t BigCmmerce. Using the Quick Edit editr, yu re able t make HTML and CSS changes t the template files that are applied t yur stre. The editr is designed fr pwer users wh have knwledge f HTML/CSS. T pen the Quick Edit editr n yur BigCmmerce stre: Lgin t yur BigCmmerce Cntrl Panel and click the Stre Design link at the tp f the page. Click the Brwse Template Files buttn t pen the Quick Edit editr in a new windw. Custmizing Template Files and Stylesheets via Quick Edit After pening the Quick Edit editr, yu ll be presented with a windw similar t the ne belw. The tlbar acrss the tp f the editr cntains several buttns: Save will save the changes yu ve made t the template that s currently laded in t the editr. Cancel clses the QuickEdit editr and returns yu t the previus page/brwser windw yu had pen. Clse & Update allws yu t save any custmizatins yu ve made t the file laded in t the editr then autmatically clse the editr and return yu t the previus page/brwser windw yu had pen. Tggle Editr allws the syntax highlighting feature f the Quick Edit editr t be enabled r disabled.

14 A4)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Recent Files cntains a drp dwn menu f all f the files yu ve recently edited in the Quick Edit editr. If yu ve custmized the particular template file yu re editing, a Revert buttn will als appear n the tlbar. This will allw yu t und any changes yu ve made t the current template file. Dwn the left f the Quick Edit editr, tw sectins shw different lists f template files: The first Files used by this template sectin will shw yu any template files that are referenced by the template file laded in t the editr. The secnd sectin, Other Template Files shws a full list f all f the template files fr this template. These template files are gruped by type, explained in Template File Types belw. T the right, is the actual Quick Edit editr. This is where yu ll make any HTML r CSS mdificatins t template files. If enabled via the Tggle Editr buttn, a syntax highlighted versin f yur template file will be shwn, therwise a plain text versin f yur template file will be shwn.

15 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') A5* Cmparing & Managing Template Files BigCmmerce has a built in interface t allw yu t navigate, view, edit and easily cmpare any f the template files that apply t yur stre. T access the list f template files: Lgin t yur BigCmmerce Cntrl Panel and click the Stre Design link at the tp f the page. Click the Template Files tab. The template file list will be shwn. The template file list will shw all f the files and flders that apply t yur current stre design. Rws are highlighted accrding t the type f file & custmizatins applied t the file: Custm files r flders yu ve upladed t yur stre that d nt exist in ur master template will be shwn with a green backgrund. Master template files that yu ve made changes t, are shwn with an range backgrund. Depending n the type f file, varius actins can be perfrmed: Click Edit next t a file t pen the file in the Quick Edit editr and make changes t it. Click Cmpare next t a file that has had ne r mre changes made t it t pen it in the template cmparisn windw. Click Revert next t a custmized template file r a file yu ve upladed t yur stre t revert it t the riginal state where yur custmizatins have been deleted. Cmparing Custmized Template Files Frm the list f template files n the Template Files tab f the Stre Design page, fr any template file that yu ve custmized n yur stre, yu ll see a Cmpare link. Click the link t pen a side-by-side r inline cmparisn f yur changes and ur master template.

16 A6)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Side-by-Side Cmparisn Side-by-side cmparisns are enabled by default when yu pen the cmparisn windw and shw ur template n ne side and yur custmized versin f the template n the ther. The left side f the template cmparisn shws the BigCmmerce master versin f the file (withut any f yur custmizatins applied), and the right side shws yur custmized versin. Lines and sectins changed are highlighted accrding t the type f change yu ve made: Changes - If yu ve made a chance t an existing blck f cde, yur change will be highlighted in yellw. S that it s bvius what change yu ve made, the actual changes in that blck f cde are highlighted in a different clr. Additins Any new blcks f cde that yu ve added yur custmized template file are shwn with a green backgrund clr. Deletins Any blcks f cde that nce existed in ur master template that n lnger exist in yur mdified template file will be shwn with a red backgrund. Inline Cmparisn The inline cmparisn feature can be enabled by changing the View differences ptin t Inline and clicking Save. The inline cmparisn shws bth ur template and yur custmized versin in the same view. Lines and sectins changed are highlighted accrding t the type f changes yu ve made. Sectins r lines f cde that yu ve mdified frm ur master template are shwn with ur versin in red, and yur custmized versin is shwn in green.

17 Mdifying Templates via FTP!"#$%&&'($')$*+,%&"-.,"%/)#*"0') A7* Nte: FTP access is recmmended nly fr pwer users that have previus experience using FTP t mdify a website. At Big Cmmerce, we believe yu shuld have the ability t fully custmize the appearance f yur stre. Fr this reasn, we're allwing FTP access t a special directry that allws yu t apply any template custmizatins yu may require, utside f mdificatins yu can make using the built in design mde r template editr features. T cnnect t yur BigCmmerce stre via FTP: Lgin t yur BigCmmerce Cntrl Panel and click the Stre Design link in the menu. Under Current Stre Design, click Edit Yur Template Files via FTP t view yur FTP cnnectin details. Nte: The FTP passwrd fr yur stre will always be the passwrd fr the BigCmmerce admin user. Prceed t cnfigure yur FTP client f chice using the supplied settings. Once cnnected via FTP, navigate t the template directry. This is the directry where yu uplad yur stre design mdificatins. Mdifying and Custmizing Template Files via FTP After yu ve cnnected t yur stre via FTP, yu ll immediately ntice that as yu navigate between the directries that initially, they re empty. This is because yur BigCmmerce stre is currently inheriting all template files and stylesheets frm yur selected master template (the selected design n the Stre Design page). As yu uplad files, yu ll ntice yur BigCmmerce stre will start lading these files instead f ur versins. Tip: Yur template custmizatins and changes t, need nly cntain the template files that yu wish t custmize this means that any new updates released by the BigCmmerce Develpers will autmatically apply t the layut n yur stre. T get started with template mdificatins, we ve made it easy fr yu t grab a ZIP archive cntaining all f the template files that are currently in use f yur stre. Yu can

18 A?)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * use files in this ZIP file as a reference fr yur custmizatins, and nce yu ve custmized a particular file, uplad it via FTP and refresh yur BigCmmerce stre t see the changes. T dwnlad the template ZIP file: Lgin t yur BigCmmerce Cntrl Panel and click the Stre Designs link in the menu. Click the Dwnlad Template Files buttn under the Current Stre Design sectin t begin the dwnlad. Allwed File Types Fr security reasns, BigCmmerce nly allws yu t uplad certain types f files t yur stre via FTP. These file types include: HTML/Stylesheets:.html,.htm,.css,.xml Images:.gif,.jpg,.jpeg,.jpe,.png Javascript:.js Multimedia:.swf,.fla,.jre,.flv,.xap Custmizing Built-in Template Images While custmizing the appearance f yur stre, yu may wish t verride ne r mre f ur default images (such as backgrund images, Add t Cart buttns etc). Nte: As sn as yu create the images directry utlined belw, BigCmmerce will begin lading all images frm that directry. Yu must uplad ALL f the images in the dwnladable template ZIP file in t the images directry t ensure all images exist n yur stre. T verride ur images with yur wn custm versins: 1. Lgin t yur stre via FTP. 2. Navigate t the template directry. 3. Create a new directry called images. 4. Uplad the images fr yur stre design in t this directry. 5. Edit the Styles/styles.css and Styles/[clr].css files and change any references t../[template]/[clr]/ t../ custm/[clr]. Where [template], will be the name f the template yu currently have selected as yur BigCmmerce stre design. [clr] will be the selected clr scheme.

19 URLs fr Accessing Upladed Cntent!"#$%&&'($')$*+,%&"-.,"%/)#*"0') As previusly mentined, the FTP access prvided t BigCmmerce is a virtualized FTP envirnment. Yu uplad yur custm stylesheets, images and media files in t the template/ directry, hwever they must be accessed thrugh a specific URL when used in stylesheets r referenced n web pages. The full URL t files upladed t the template/ directry is custm/. Where is the URL t yur stre. Fr example, if yu upladed a file titled lg.gif t the template/ directry and yur stre was yu wuld reference it in yur stylesheets r n yur web pages as fllws: custm/lg.gif

20 CB)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Maintaining a Mdified Template When a new versin f BigCmmerce is made available, yu ll have the chice f upgrading yur stre t the new versin. When yu lgin t yur cntrl panel, yu ll receive message asking if yu if yu want t schedule a time fr an upgrade. Due t the nature f BigCmmerce with changes we re making and custmized templates yu may have, yu may need t revert yur custm template changes r update them when yu schedule an upgrade n yur stre, t ensure that new features are wrking crrectly and existing features cntinue t wrk as expected. Nte: Befre scheduling an upgrade n yur live BigCmmerce stre, we recmmend yu set up anther stre just t ensure that yur template custmizatins still wrk crrectly. Yu can set up a test r develpment stre by signing up fr the free BigCmmerce plan via ur website. Fr ease f maintenance between different releases f BigCmmerce, we recmmend that if pssible, the majrity f stre design/template custmizatins be perfrmed entirely with CSS. CSS is a pwerful mechanism fr applying presentatinal infrmatin t pages and all template files in BigCmmerce has been built frm the grund up t allw limitless custmizatin via CSS mdificatins. There are a few recmmended ways t mdify and maintain a custm template: Take nte f template files mdified and changes made as yu make them. As a custm template is develped, if nly a small amunt f changes are t be made it may be wrth keeping a separate dcument that cntains a list f files that have been changed and what was changed in them. This means n newer releases, the custm template can be redevelped ff the new versin f it and a simple list f instructins be fllwed t re-apply any custm mdificatins. Use a differences prgram such as WinMerge r BeyndCmpare t merge changes. (Changes n Mac OS X) Using a differences prgram, the cntents between the new versin and custmized versins f template files can be analyzed and in mst cases merged acrss. Keep mdificatins as CSS/stylesheet mdificatins as much as pssible. Add custm CSS rules t the bttm f the existing stylesheets r create a new clr scheme (which des nt just cntain clr infrmatin cntains actual CSS verrides fr the template) f an existing template. On a new release, the custm clr scheme r additinal CSS rules can simply be mved acrss t the new versin f the template.

21 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') CA* Template Variables Each f the layut, panel and snippet files in BigCmmerce uses variables (als called place hlders) t shw external cntent, r cntent fetch frm the database (such as the name f a prduct) Template variables are enclsed within %% tags. There are varius types f variables, each with their wn purpse that s utlined belw. Glbal Variables Glbal variables are generally used t swap cntent frm the database in t a specific template file. Fr example, the name and descriptin f a prduct are set as glbal variables and then referenced in the template files. Glbal variables are referenced in template files as fllws:! ""#$%&'$()*+,-./0+1.2!3,4.5""! Fr example:! ""#$%&'$( ,4.""! The availability f specific variables differs n the template file that s being edited (fr example, the variable fr the descriptin f a prduct is available n the prduct details page, but nt n the categry view/prduct listing page). There are als glbal variables available thrughut the entire stre (such as the stre name r stre URL). An verview f these can be fund in Appendix 3: Stre Wide Glbal Variables. Language Variables Language variables display text that s lcated within the language files in the /language/[name f the language in use f the stre]/frnt_language.ini file. All text cntent used n BigCmmerce can be fund within these files fr the purpse f making the applicatin translatable in t ther languages. Language variables are referenced in the template files as fllws:! ""$9#():,2;,<+.!3,4.5""! Fr example:! ""$9#('11=0>,28""!

22 CC)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * This language variable wuld refer t a string in the frnt_language.ini file by the name f AddTCart. Language variables can als be edited using the design mde functinality f BigCmmerce. Panel References Panels (as utlined abve) are the different blcks used by BigCmmerce t build a page. Panels are referenced bth inside layut files and inside ther panel files. Panels are referenced in templates as fllws:! ""6,3.+?)*,3.+!3,4.5""! Where [panel name] is the name f a file in the template s Panels directry. Fr example:! ""6,[email protected]., B""! This panel reference will lad in the cntent frm the Panels/HmeFeaturedPrducts.html panel file. Snippet References Snippets are templates cntaining HTML that can be used multiple times n ne page either by being used in different parts f the template r being part f a lp that fr example builds a list f prducts n the page (each prduct in the list being a repeated versin f the same snippet) Snippets are referenced in templates as fllws: ""C9D66E=()B3;**.8!3,4.5""! Where [snippet name] is the name f the snippet as referenced in the PHP cde that generates it. In mst cases, this will crrespnd with a similarly named file in the template s Snippets directry. Fr example: ""C9D66E=(@04.A., B""! This snippet reference will cntain a repeated cpy f Snippets/HmeFeaturedPrductsItem.html, ne fr each featured prduct t be shwn in the list. File Includes It s als pssible t include anther file within a template. This can be accmplished using file include variables. This is extremely useful if external files such as banners, site-netwrk headers r ther cntent need t be included.

23 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') C3* File includes can either be lcal (relative t the template/includes/ directry), cntain abslute file system paths, r be remte includes by specifying the full URL t a file t be included. Includes are referenced in the template files as fllws:! ""D3-+71.?)F;+.!*,8/5""! Fr example:! ""D3-+71.?2.+,8;:.(F;+.?/84+""!! ""D3-+71.?/8*GHHIII?.J,4*+.?-04H2.408.(F;+.?/84+""!

24 C4)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Custmizing Stylesheets BigCmmerce makes extensive use f a web design language called CSS (Cascading Stylesheets) t define the appearance (clrs, fnts, placement f items) fr stre designs. Cascading Stylesheets CSS (Cascading Stylesheets) is a stylesheet language that s used t describe the presentatin (appearance) f dcuments written in a markup language such as (X)HTML r XML. CSS files (als referred t as stylesheets) cntain a series f instructins n hw text and ther elements shuld appear n a web page. Mre infrmatin n CSS and stylesheets as well as varius resurce sites and develpment tls can be fund in Mre Infrmatin & Resurces. Stylesheets in BigCmmerce As mentined previusly, BigCmmerce uses cascading stylesheets t define the appearance f pages thrughut the stre. This allws cmplete custmizatin f stre designs t be perfrmed entirely via CSS stylesheet changes with little r n architectural changes t the page.

25 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') C5* The stylesheet files fr yur BigCmmerce stre design can be fund in the Styles directry fr yur template. By default, yur BigCmmerce stre will inherit these files frm yur selected stre design, unless yu ve specifically upladed yur wn t the Styles directry: styles.css Cntains the primary stylesheet rules fr this template. [clr].css This stylesheet file will exist fr each f the clr schemes that are available fr this specific template. This file cntains all f the clr related stylesheet rules (clrs, backgrund clrs, brders, etc) ie.css Cntains any Internet Explrer specific stylesheet verrides. custm.css Cntains any stylesheet verrides that shuld verride any f the existing stylesheets. If yu have small layut mdificatins yu need t make t yur stre via CSS, it s recmmended yu make them t this file as ppsed t editing the styles.css r clr CSS files. Stylesheet Guide The stylesheet guide prvides an verview f the stylesheets fr yur BigCmmerce stre as well as the varius sectins f cntent that can be styled. This is by n means a cmprehensive listing f the classes and selectrs available but is mre f a starting guide t the mst cmmnly custmized items. Using Mzilla Firefx and the Firebug extensin (see Mre Infrmatin and Resurces fr URLs), it s pssible t brwse/navigate the HTML surce f the dcument in a tree view, which prvides a fully detailed structure and utline f the dcument. It s als pssible t discver hw t target additinal nn-dcumented elements using CSS and the class names/selectrs available. Basic Elements Glbal Reset CSS Style: * A glbal reset can be fund at the tp f mst dcuments. The purpse f the glbal reset is t reset the margins and padding f all elements in the dcument t 0. Each element then defines it s wn margins and padding t avid incnsistencies between different web brwsers. Page Bdy CSS Style: bdy

26 C6)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * The page bdy (cntrlled by bdy) utlines the general frmatting ptins (such as text clr, page backgrund clr and fnts as well as sizes) fr the entire dcument. Headings CSS Style: h1, h2, h3, h4 Varius heading levels are used thrughut the stre. The <h1> tag will cntain the name f the stre whilst <h2> tags are used fr the titles f each sectin in the left, right and center clumns. <h3> and <h4> tags are used thrughut the dcument in ther lcatins where deeper nested headings are required. Blcks CSS Style:.Blck Each blck (r panel) n the stre is wrapped in it s wn cntainer. (<div class= Blck >). If the blck has a title, the title is an immediate child f the cntainer (generally a <h2> tag) and the cntent f the blck (such as lists f prducts, reviews r general page cntent) is enclsed within a separate DIV with a class name f BlckCntent. K1;:!-+,BBLM&+0-NMO!! K/PO&+0-N!=;8+.KH/PO!! K1;:!-+,BBLM&+0-N>038.38MO!!! K*O>038.38KH*O!! KH1;:O! KH1;:O! Frms & Frm Cntainers CSS Style:.HrizntalFrmCntainer,.NarrwFrmCntainer,.VerticalFrmCntainer All frms are enclsed within frm cntainers. These frms (fr users t enter data) are cnstructed with definitin lists (dl, dt and dd) and are styled in ne f three manners: Hrizntal Frm Cntainers (.HrizntalFrmCntainer) Used when there is enugh hrizntal space n the page fr the frm field labels (dt) and the frm fields (dd) t fit beside each ther.

27 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') C7* Narrw Hrizntal Frm Cntainers (.NarrwFrmCntainer) Used when there is slightly less hrizntal space and the frm labels (dt) and values (dd) shuld still be stacked next t each ther. Used nly in places with shrt labels. Vertical Frm Cntainers (.VerticalFrmCntainer) Used when there is nt enugh hrizntal space fr the frm labels and values t be stacked next t each ther r the labels (dt) and values (dd) shuld be stacked underneath each ther. The submit buttns and any ther assciated links fr a frm are t be in the frm cntainer and be enclsed within a paragraph with the class name f Submit. (<p class= Submit >). This allws fr the submit buttns t be aligned depending n the type f frm cntainer. Status Messages CSS Style:.SuccessMessage,.ErrrMessage,.InfMessage Varius status messages may be shwn thrughut the stre when an actin is perfrmed r an errr message needs t be shwn. There are three types f status messages. All status messages are shwn within an individual paragraph (<p>) with a class name applied. Successful actin messages -.SuccessMessage

28 C?)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Errr messages -.ErrrMessage General infrmatin messages and warnings -.InfMessage General Tables CSS Style: table.general, table.general thead, table.general th, table.general tbdy, table.general tbdy td All tables shwn thrughut the frntend f the stre have a similar style. They re styled using a class f.general. The header f the tab is separated frm the bdy by using a table header (<thead>) and the bdy f the table is enclsed within a table bdy tag (<tbdy>). Tabbed Navigatin CSS Style:.TabNav,.TabNav li,.tabnav li a Tabs are used t navigate between different views n a single page. Each tab refers t a different piece f cntent, usually shwn directly belw the tab when it is selected. Tabs can be fund n prduct pages, when the tabs feature is enabled, as well as when the custmer chses t ship their rder (if they wish t ship t ne address, r items t different addresses) The tab list is cnstructed using an unrdered list (<ul>), with each tab being a list item (<li>). Each list item must cntain a link (<a>). Page Cntainer CSS Style: #Cntainer The page cntainer (#Cntainer) cntains the entire page f the stre. All cntent n the page shuld be psitined within this cntainer. Header CSS Style: #Header The stre header cnsists f varius subsectins (utlined belw) including the tp navigatin menu, the stre lg, the search bx, and the pages menu)

29 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') Tp Navigatin Menu CSS Style: #TpMenu The tp menu, shwn n every page f the stre is cnstructed with an unrdered (<ul> - #TpMenu ul) list. Each list item (<li> - #TpMenu li) cntains a different link (#TpMenu li a) pinting t a different page f the stre. Stre Lg CSS Style: #Lg h1, #LgImage Depending n the tp f lg in use n the stre, the stre lg can either be styled by: Text Based Lg - #Lg h1 Image Based Lg - #LgImage Search Bx CSS Style: #SearchFrm The header f the stre cntains a search bx that can be quickly used by custmers t find prducts n the stre. Results are either shwn inline (See the quick search sectin belw) r n a search results page. The search bx cmprises f a frm, textbx and a submit buttn (in this case, an image) as well as text links. Each item in the search bx can be targeted using CSS (#SearchFrm input.textbx fr the textbx, #SearchFrm.Buttn fr the buttn, #SearchFrm p fr the text links etc)

30 3B)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Quick Search CSS Style:.QuickSearch The prduct quick search, perfrmed autmatically via AJAX when using the simple search bx in the page header, is cnstructed using a table with a class f.quicksearch. The title f the search results ( Prducts ) is enclsed within a table rw with a class name f.quicksearchtitle. Each result cnsists f an additinal table rw (class name.quicksearchresult) cntaining the prduct thumbnail image cell (.QuickSearchResultImage) and the title, price and rating f the prduct in the adjacent cell (.QuickSearchResultMeta) If there are mre matching results than what s shwn, an additinal rw at the end f the table will be present cntaining the link t view all search results. This table rw has a class name f.quicksearchallresults. Pages Menu CSS Style: #Menu The pages menu is cnstructed using a nested unrdered (<ul>) list. The nested list is used s that pages existing under the tp level menu items can be shwn as a drpdwn menu. Each list item cntains a link t the page, and fr tp level menus that cntain child menus, a nested unrdered list. The first item in the menu has a class f First and any tp level menu item that has a submenu has a class f HasSubMenu. The submenus are dynamically shwn and hidden when the muse is ver them using CSS. (See #Menu li:hver styles)

31 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 3A* Cntent Cntent Wrapper CSS Style: #Wrapper All cntent n the bdy f the page (what immediately fllws the header) is within a wrapper div (#Wrapper). Left and Right Clumns CSS Style:.Left,.Right The left and right clumns f the stre (different clumns are available n different pages depending n the amunt and type f cntent shwn) cntain all secndary page navigatin and cntent. Each left and right clumn cnsists f a series f blcks (as utlined abve with.blck) t cnstruct the cntent. The cntent f these blcks will change it s appearance (using CSS) if using design mde and the blck is dragged in t the middle cntent area f the page. (Fr example, prduct images are generally nt shwn n the left and right clumns but if yu drag a prduct listing in t the middle f the page, the prduct images will be shwn) Cntent Clumn CSS Style:.Cntent,.Cntent.Wide,.Cntent.Widest The cntent clumn (where the actual bdy cntent f the page belngs) has three different states: Nrmal -.Cntent Used whenever there are bth left and right side bars n the page.

32 3C)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Wide -.Cntent.Wide Used if there is a single side bar (left r right) n the page with the cntent clumn. Additinally, if the side bar is n the left, a WideWithLeft class is als appended. Full Width (Widest).Cntent.Widest Used when there are n left r right clumns n the page and the cntent clumn shuld span the entire width f the page. Page Fter CSS Style: #Fter The stre fter is enclsed within it s wn sectin that clears all existing cntent. Inside

33 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 33* the page fter are paragraphs (and smetimes lists fr menu items) with the fter cntent. Page Breadcrumbs CSS Style:.Breadcrumb Breadcrumb trails shwn thrugh the stre are structured using an unrdered (<ul>) list. Each list item (<li>) will cntain a link t parent pages r, if the active page, simply the text fr the current item. Categry Listing CSS Style:.CategryList The list f categries shwn n the stre is structured using an unrdered list (<ul>). This is enclsed within a cntaining panel with a class name f.categrylist. Each categry is shwn as a list item (<li>). If ne r mre subcategries are t be shwn in the list, these are als nested list unrdered lists/items f the parent categry item. Sub Categry Listing CSS Style:.SubCategryList If a categry cntains ne r mre sub categries, when viewing the categry view fr that particular categry, the list f sub categries is shwn. This is enclsed within a DIV with a class name f.subcategrylist and structured using an unrdered list (<ul>). Each categry is structured using a list item (<li>). Recent News CSS Style:.RecentNews The list f recent news items n the stre (shwn n the hme page by default) has a class name f.recentnews. The actual news items are cnstructed using an unrdered list (<ul>) with each news item being an individual list item (<li>)

34 34)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Prduct Listings CSS Style:.PrductList All prduct lists (bth in side bars and the cntent clumn) are cnstructed using an unrdered list (<ul>) and cntain a class name f PrductList. Each item in the prduct list (a list item - <li>) cntains structural elements fr the image f a prduct (.PrductThumb) and the details fr a particular prduct (.PrductDetails). Prduct images in the side bar (by default) are hidden using CSS and when mved t the center, the images autmatically appear. Prduct prices are displayed in <em> tags whilst the name f the prduct is wrapped in a <strng> tag. Varius ther elements such as ratings (.Rating) and cmparisn checkbxes (.PrductCmpareButtn) may als be present when apprpriate. Prduct listings that require paging (such as categries cntaining large amunts f prducts) are structured frm an unrdered list (.PagingList). If a srt bx, t srt the display rder f prducts is present then it is enclsed within a cntainer with a class f.srtbx. New Prducts List CSS Style:.NewPrducts (and.prductlist) Listings f new prducts (rdered by the time they re created) have an additinal class f NewPrducts applied t them. Featured Prducts List CSS Style:.FeaturedPrducts (and.prductlist) Listings f featured prducts (thse cnfigured in the cntrl panel) have an additinal class f FeaturedPrducts applied t them.

35 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 35* Ppular Prducts List CSS Style:.PpularPrducts (and.prductlist) Listings f ppular prducts (based n their ratings/reviews) have an additinal class f PpularPrducts applied t them. Tp Selling Prducts List CSS Style:.TpSellers (and.tpsellers) Listings f tp selling prducts (based n the nymber sld) have an additinal class f TpSellers applied t them. The tp selling prducts list als cntains additinal styles/items fr each prducts t shw their psitin (#1, #2 etc -.TpSellerNumber) and allw different styling fr the tp seller frm the ther tp selling prducts (.TpSeller1 in the case f the tp selling prduct) Prduct Lists (List View Mde) CSS Style:.PrductList.List,.PrductList.List PrductImage,.PrductList.List.PrductDescriptin When enabled, the prduct list mde as a list f prducts shws each prduct in a categry n it s wn rw when the image n the left and the prduct details n the right. The list f prducts, similar t the standard prduct layut, is cnstructed with a series f list items. The parent cntainer hwever (<ul>), has an additinal class f.list. Prduct images are enclsed within each prduct (<li>) and have a class f.prductimage whilst the descriptin and ther details carry a class f.prductdescriptin.

36 36)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Prduct Details CSS Style:.PrimaryPrductDetails,.PrductDescriptinCntainer The prduct detail page displays all f the actual infrmatin abut a prduct t the custmer. This can be brken dwn in t a few sectins the prduct thumbnail, if it has ne, the details abut the prduct and the descriptin f the prduct. The tp half f the prduct details, cntaining the prduct thumbnail and prduct infrmatin is enclsed within a DIV tag with a class name f.primaryprductdetails. The thumbnail fr a prduct, lcated in the primary prduct details DIV is nested in it s wn DIV with a class f.prductthumb. The actual infrmatin fr the prduct, including the prduct title can be fund in a sibling DIV f.prductmain. The detail rws (price, SKU, brand, rating etc) are cnstructed using a series f DIV tags as the cntainer items fr a rw, the title fr a rw and the value fr a rw. The prduct descriptin cntains a class name f.prductdescriptincntainer. This will nly be present if the prduct has a descriptin assigned t it.

37 Prduct Reviews!"#$%&&'($')$*+,%&"-.,"%/)#*"0') 37* CSS Style:.PrductReviewList,.PrductReviewPaging,.PrductReviewFrm Prduct reviews are structured using an rdered list (<l>) with each individual prduct review being a list item (<li>). The list f reviews cntains a class name f.prductreviewlist. If paging (t navigate between multiple pages f prduct reviews) is t be shwn, this is enclsed within a cntainment <div> tag with a class name f.prductreviewpaging. The prduct review frm (class name f.prductreviewfrm) t pst a new review fr a prduct is cnstructed using a vertical frm cntainer (as utlined in the frms sectin clser t the tp f the style guide) Currency Cnverter CSS Style:.CurrencyList The currency cnverter shws a list f currencies available within the stre. This list is cnstructed using a definitin list cntaining dcument definitins (<dd> tags). Each definitin tag then cntains a link which als cntains a span with a class f Flag cntaining the currency flag image and a span cntaining a class f Text cntaining the text based name f the particular currency.

38 3?)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Prduct Cmparisns CSS Style:.CmparisnTable Prduct cmparisns are built using a table with a class name f.cmparisntable. The header rws (cntaining the prduct details label and remve links) have a class name f.cmparefiedtp whilst the feature labels dwn the left have a class name f.cmparefieldname. Each prduct in the cmparisn table is structured using a series f table cells (<td>). View Cart Page CSS Style:.CartCntents.,.PrceedTCheckut,.KeepShpping, #SideCupnCdeBx, #SideGiftCertificateBx

39 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') The yur shpping cart page shws a list f items in the custmer s shpping cart as well as prvides links t begin the stre checkut prcess. The list f items in the shpping cart is structured using a table with a class name f.cartcntents. The table headings are cnstructed using <th> tags whilst each individual item in the cart is cnstructed using table rws and table cells. The calculated ttal rws at the bttm f the table have a class name f.subttal. The prceed t checkut buttns n the cart page have a class name f.prceedtcheckut whils the keep shpping link has a class f.keepshpping. If the cupn cde and gift certificate entry bxes are shwn n the page, these have IDs f #SideCupnCdeBx and#sidegiftcertificatebx respectively. Mini Cart Cntents Panel CSS Style:.SideCart If ne r mre items are placed in a custmer s shpping cart, a small side panel is shwn with a list f items in the custmer s cart. This panel cntains a class name f.sidecart and cntains an unrdered list (<ul>) with each individual item in the cart cnstructed frm a list item (<li>) Suggestive Cart Mini Cart Cntents CSS Style:.MiniCart If the suggestive cart functinality is enabled and there are ne r mre recmmended prducts t be shwn t a custmer after they add a prduct t their shpping cart, a mini versin f the shpping cart is shwn in the side bar. This panel has a class name f.minicart. The first prduct in the list cntains the prduct that was just added t the custmer s shpping cart. This item is cnstructed using a DIV with a class name f.justaddedprduct. It cntains the same child elements as a nrmal prduct listing as utlined abve. Any subsequent items in the custmer s shpping cart are in a standard prduct list frmat (unrdered list with a class name f.prductlist) The prceed t checkut buttn has a class name f.prceedtcheckut, the subttal f the custmer cart has a class name f.subttal and the View yur entire cart link has a class name f.viewcartlink. Create Accunt & Lgin Pages CSS Style:.CreateAccunt,.AccuntLgin

40 4B)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * The Create a New Accunt sectin n the lgin page has a class name f.createaccunt applied. The Sign in t Yur Accunt sectin n the right f the lgin page has a class name f.accuntlgin applied and cntains a narrw frm cntainer with the lgin frm. Express Checkut CSS Style:.ExpressCheckutBlck,.ExpressCheckutBlckCmpleted,.ExpressCheckutBlckCllapsed,.ExpressCheckutTitle,.ExpressCheckutCntent The express checkut page (als referred t as single page checkut) cnsists f a series f blcks fr each step f the checkut prcess. Each f these blcks is cnstructed using a DIV tag with a class f.expresscheckutblck. Once an express checkut step is cmpleted,.expresscheckutblckcmpleted is appended t the list f class names fr the step. Whenever an individual step is cllapsed, it cntains anther additinal class name f.expresscheckutblckcllapsed. The title f each f the express checkut steps is structured using a heading level 3 tag (<h3>) with a class name f.expresscheckuttitle. Once the step is cmpleted, any user selected details are shwn inside a nested SPAN with a class f.expresscheckutcmpletedcntent and if a Mdify link is t be shwn, the link cntains a class name f.changelink. The cntent fr each f the express checkut steps is enclsed within a DIV tag with a class name f.expresscheckutcntent.

41 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 4A* Example Stylesheet Custmizatins Belw are a few example custmizatins that can be perfrmed entirely thrugh stylesheet mdificatin. Bld Rt Level Categries If shwing mre than ne level deep f categries n the left categry menu (cnfigurable n the Settings > Stre Settings > Display Settings page) it may be desirable t have the tp level categries bld. This can be accmplished by adding the fllwing CSS t the bttm f styles.css:?>,8.q02r$;b8!+;!,!s!! F038TI.;Q/8G!<0+1U! V!!?>,8.Q02R$;B8!+;!+;!,!S!! F038TI.;Q/8G!3024,+U! V! Different Star Rating Images fr Side Clumns If a template cntains left r right side clumns that are f a darker clr, the standard GIF frmatted star rating images fr prduct ratings may nt lk nice n the dark backgrund. (Fr example in the default Fashin template) It s pssible using entirely CSS t replace the images in the left r right clumns with a versin f the images designed t be used n dark backgrunds. This can be accmplished by adding the fllwing CSS t the bttm f styles.css:?$.f8!b*,3?w,8;3qx!?w;q/8!b*,3?w,8;3q!s!! 1;B*+,RG!<+0-NU!! /.;Q/8G!YP*JU!! I;18/G!Z[*JU!! <,-NQ20731G!72+\]??H;4,Q.BH^,2ND-0W,8;3Q[?Q;F]_!30T2.*.,8U! V!!?$.F8!B*,3?W,8;3QYX!?W;Q/8!B*,3?W,8;3QY!!S!! <,-NQ20731T;4,Q.G!72+\]??H;4,Q.BH^,2ND-0W,8;3QY?Q;F]_U! V!!?$.F8!B*,3?W,8;3QPX!?W;Q/8!B*,3?W,8;3QP!!S!! <,-NQ20731T;4,Q.G!72+\]??H;4,Q.BH^,2ND-0W,8;3QP?Q;F]_U! V!!?$.F8!B*,3?W,8;3Q`X!?W;Q/8!B*,3?W,8;3Q`!!S!! <,-NQ20731T;4,Q.G!72+\]??H;4,Q.BH^,2ND-0W,8;3Q`?Q;F]_U! V!!

42 4C)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') *?$.F8!B*,3?W,8;3QaX!?W;Q/8!B*,3?W,8;3Qa!S!! <,-NQ20731T;4,Q.G!72+\]??H;4,Q.BH^,2ND-0W,8;3Qa?Q;F]_U! V!!?$.F8!B*,3?W,8;3QbX!?W;Q/8!B*,3?W,8;3Qb!S!! <,-NQ20731T;4,Q.G!72+\]??H;4,Q.BH^,2ND-0W,8;3Qb?Q;F]_U! V!!?$.F8!B*,3?W,8;3Q!;4QX!?W;Q/8!B*,3?W,8;3Q!;4Q!S!! 1;B*+,RG!303.U! V! Restyled and Alternating Clr Prduct Reviews Anther example shwing the flexibility prvided by CSS the appearance f prduct reviews can be cmpletely changed and alternating backgrund clrs implemented. This can be accmplished by adding the fllwing CSS t the bttm f styles.css:? w.:;.i$;b8x!? w.:;.i$;b8!+;!s!! 4,2Q;3G![U!! *,11;3QG![U!! +;B8TB8R+.G!303.U! V!!? W.:;.I$;B8!+;!S!! *0B;8;03G!2.+,8;:.U!! <021.2G!Y*J!B0+;1!c'EEYAAU!! 4,2Q;3T<08804G!Y[*JU!! <,-NQ20731G!cAPA'AAU! V!!

43 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 43*? W.:;.I$;B8!/a!S!! <,-NQ20731G!c^PEEAAU!! *,11;3QG!a*J!Z*JU!!! <021.2T<08804G!Y*J!B0+;1!c'EEYAAU! V!!? W.:;.I$;B8!*!S!! 4,2Q;3T80*G![U!! *,11;3QG!a*J!Z*JU! V!!? W.:;.I$;B8!?d.8,!S!! *0B;8;03G!,<B0+78.U!! 2;Q/8G![U!! 80*G!`*JU!! 8.J8T,+;Q3G!2;Q/8U! V!!? W.:;.I$;B8!/2!S!! 1;B*+,RG!303.U! V!!? W.:;.I$;B8!+;?'+8X!? W.:;.I$;B8!+;?'+8!/a!S!! <,-NQ20731G!cAaA^APU!! <021.2T-0+02G!c&>AP&[U! V!!? W.:;.I$;B8!+;?'+8!/a!S!! <,-NQ20731G!c^>Ae^bU! V! Mving Prduct Images t the Right Anther simple mdificatin that can be perfrmed using CSS is mving the details f a prduct t the left, and the image t the right n the prduct details page. This can be accmplished by adding the fllwing CSS t the bttm f styles.css:?62;4,2r ^.8,;+b!? =/74<!s! F+0,8G2;Q/8U!

44 44)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * V! List View Based Prduct Listings It s als pssible using entirely CSS t change the default grid based prduct listings in t a list based (ne prduct per rw) view. This can be accmplished by adding the fllwing CSS t the bttm f styles.css:?>038.38!? $;b8!+;!s!! 1;B*+,RG!<+0-NU!! F+0,8G!303.U!! I;18/G!,780U!! <021.2G![U!! <021.2T<08804G!Y*J!1088.1!c---U!! 4;3T/.;Q/8G!f[*JU! V!!?>038.38!? $;B8!+;!? D4,Q.!S!! F+0,8G!+.F8U! V!!?>038.38!? $;B8!+;!? ^.8,;+B!S! 4,2Q;3T80*G!Y[*JU!! 4,2Q;3T+.F8G!Y`b*JU!! F038TB;g.G!YYb"U! V!!?>038.38!? $;B8!+;!? ^.8,;+B!B8203Q!S!! 1;B*+,RG!<+0-NU!! 4,2Q;3T<08804G!Y[*JU! V!!?>038.38!? $;B8!+;!? ^.8,;+B!?W,8;3Q!S!! 4,2Q;3T80*G!Y[*JU!

45 V!!?>038.38!? $;B8!+;!? >04*,2.&78803!S! 4,2Q;3T+.F8G!Y`b*JU! 4,2Q;3T80*G!e*JU! 8.J8T,+;Q3G!+.F8U! V!!"#$%&&'($')$*+,%&"-.,"%/)#*"0') 45*

46 46)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * Mre Infrmatin and Resurces (X)HTML, Design and Web Standards W3 XHTML Wrking Grup W3Schls XHTML Tutrial Develping with Web Standards Web-Develpers Handbk SitePint FiftyFurEleven Web Develpment Resurces Smashing Magazine Cascading Stylesheets W3 Cascading Stylesheets Learn Web Standards Hands n CSS Tutrial CSS Based Design The benefits f Web Standards t yur visitrs, yur clients and yu! Develpment Tls EditPlus (Text Editr, Windws) TextMate (Text Editr, Mac OS X) Mzilla Firefx and the Firebug & Web Develper Tlbar Extensins Addns fr Mzilla Firefx prvide pwerful tls fr web develpers t explre the DOM fr generated web pages. Mzilla Firefx - Firebug - Web Develper Tlbar - CSSEdit (Mac OS X) Style Master CSS Editr (Windws and Mac OS X)

47 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 47* Appendixes Appendix 1: Layut Files and Panels Fr each f the layut files, the default panels (thse that shw cntent) are als listed. General Panels Panels used thrughut entire parts f the stre and available fr use n any page. HTMLHead Cntent shwn between the <head> tags f each page. This includes cde fr visitr tracking, RSS feeds etc. Header The header fr each page in the stre (includes the TpMenu, HeaderSearch panels) Fter The fter fr each page in the stre. SideCategryList A list f categries shwn in the stre t the cnfigured categry depth in the cntrl panel. SideNewPrducts A list f prducts recently added t the stre. SideNewsletterBx The newsletter subscriptin frm. SideShpByBrand A list f ppular brands (based n the number f prducts in each brand) n the stre. SidePrductRecentlyViewed A list f the prducts recently viewed by the custmer n the stre. SideTpSellers A list f tp selling prducts (based purely n the number f times the prduct has been sld) n the stre. SidePpularPrducts A list f ppular prducts (by average rating) n the stre. SideLiveChatServices Any live chat service cde that s been integrated in t the stre. SideCurrencySelectr The stre currency selectin bx cntaining the list f cnfigured currencies n the stre. SideCartCntents A list f items in currently in the custmers cart. TpMenu The tp navigatinal menu (Hme, My Accunt, Sign in r create accunt etc) PagesMenu A list f parent level pages cnfigured n the stre. HeaderSearch The search bx included at the tp f each page f the stre. 403.html Shwn when a custmer des nt have the permissins necessary t view a particular categry, prduct r web page.

48 4?)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * 404.html Shwn when a custmer accesses an invalid URL (such as an ld remved prduct) r there is a typ in the URL they re viewing. accunt.html The My Accunt welcme page with an explanatin n each f the sectins available fr the custmer. SideAccuntMenu The list f links/ptins available in the My Accunt sectin f the stre. SideAccuntStreCredit If the custmer has any stre credit, the amunt f stre credit their accunt cntains. accunt_addressbk.html A list f shipping addresses (fund under the My Accunt > Address Bk menu) that the custmer currently has as well as edit/remve links. ChseShippingAddress A list f shipping addresses fr the custmer t chse frm. accunt_dwnladitem.html AccuntDwnladItemsBreadcrumb The breadcrumb navigatin shwn when dwnlading digital items frm an rder. AccuntDwnladItems The list f dwnladable items in a digital rder. accunt_inbx.html The list f rder messages the custmer has assciated with any f their past rders and the new rder message frm fr submitting a new rder message. AccuntInbx A list f rder messages in the custmer s accunt. Als includes the frm t send a message relating t a past rder placed n the stre. AccuntInbxJavascript The Javascript validatin fr submitting a new message via the rder messages page. accunt_new_return.html The new return request/submissin page. AccuntNewReturnBreadcrumb The breadcrumb navigatin menu. AccuntNewReturnPrducts A table f prducts in the particular rder including chices t select the quantity f each item t return. AccuntNewReturnInf Frm fr entering details abut the new return request such as the reasn, actin and cmments. accunt_rder.html Shwn when a custmer is viewing the details f a past rder they ve placed n the stre. AccuntOrder The details f the rder (billing and shipping address as well as the prducts purchased) AccuntOrderLinks Links shwn n the right t submit a return request fr this rder r print a cpy f the invice fr this rder. accunt_rders.html A list f previusly cmpleted rders placed n the stre by the custmer. AccuntOrders The list f previusly placed rders n the stre by the custmer.

49 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') accunt_rderstatus.html A list f currently pending and cmpleted rders placed n the stre by the custmer. AccuntOrderStatus The list f pending rders placed n the stre by the custmer. accunt_recentitems.html A list f prducts recently viewed n the stre by the custmer. AccuntRecentItems The list f items that the custmer has recently viewed n the stre. accunt_returns.html A list f previusly submitted returns requests by the custmer. AccuntReturns The list f submitted returns requests. accunt_saved_return.html Shwn after a custmer successfully submits a new returns request n the stre. authrizenet.html The Authrize.net payment mdule frm. This frm is included n bth the multistep and express checkut pages. brands.html A list f prducts in a particular brand, r if n brand is specified, a list f brands cnfigured in the stre. BrandBreadcrumb The breadcrumb navigatin menu. BrandCntent The cntents f the brands page. Either the prducts in a particular brand r a list f brands in the stre. SideBrandTagClud A tag clud shwing the ppularity/density f brand names n the stre. SideShpByBrandFull A cmplete list f brand names n the stre rdered alphabetically. cart.html The View Cart page shwing the cntents f the current custmers cart. CartBreadcrumb The breadcrumb navigatin menu. CartHeader The header f the cart cntents page with the title and the tp Prceed t Checkut buttn. CartErrrMessage If an errr message is t be shwn, the errr message. CartStatusMessage If an alternate status message is t be shwn, the status message. CartFreeShipping A message explaining that the cart either qualifies fr free shipping r $X mre needs t be sent befre free shipping is available. CartCntent The cntents f the custmers shpping cart and the bttm Prceed t Checkut buttn. SideCupnCdeBx The cupn cde entry bx shwn n the side f the cart page. SideGiftCertificateCdeBx The gift certificate cde entry bx shwn n the side f the cart page. categry.html A list f prducts r sub categries that exist within a particular categry. SideCategryNewPrducts A list f new prducts in the categry currently being viewed.

50 5B)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * CategryBreadcrumb The breadcrumb navigatin menu. CategryHeading The heading (categry name) as well as the srt bx fr a particular categry view. CategryPagingTp If any paging (t brwse between the pages f prducts in a particular categry) is shwn, the list f paging links at the tp f the page. CategryCntent The list f prducts in the categry being viewed n the stre. CategryPagingBttm If any paging (t brwse between the pages f prducts in a particular categry) is shwn, the list f paging links at the bttm f the page. SideCategryTpSellers The list f tp selling prducts (based n the number sld) fr a particular categry. SideCategryPpularPrducts List f the ppular prducts (based n the ratings/reviews) fr a particular categry. SideCategryShpByPrice The price pint ptins fr brwsing items between different price ranges in the current categry. ccmanual.html The credit card (manual) payment methd credit card details frm. checkut.html The first page f the standard multi-page checkut shwn fr guests asking them t either lgin, create an accunt r checkut as a guest. checkut_address.html The billing/shipping address frm shwn as the secnd step f the checkut prcess. ChseShippingAddress If the custmer is lgged in, this panel is shwn cntaining the list f shipping addresses in their address bk. CheckutNewAddressFrm If the custmer is nt lgged in and checking ut as a guest this panel is shwn cntaining the fields t enter their billing/shipping address. checkut_cnfirm.html The rder cnfirmatin page (last page f the multi-page checkut) shwing a summary f the rder. CnfirmOrder The rder cnfirmatin and payment methd selectin frm. checkut_express.html The express single-page checkut. checkut_payment.html The payment details cllectin frm shwn in the multi-page checkut. This page will be shwn if the selected payment methd has an additinal frm (such as ne fr requesting credit card details) checkut_shipper.html The shipping prvider selectin page shwn fr the multi-page checkut. ChseShippingPrvider A list f shipping prviders allwing the custmer t chse which shipping prvider the rder will be shipped by. cmpare.html Shwn when a custmer chses t cmpare ne r mre prducts with each ther.

51 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 5A* CmpareBreadcrumb The breadcrumb navigatin menu. CmpareCntent The table shwing the prducts being cmpared. createaccunt.html The accunt creatin/signup frm where custmers can create an accunt n the stre. CreateAccuntBreadcrumb The breadcrumb navigatin menu. CreateAccuntFrm A frm cntaining the fields necessary t create a custmer accunt n the stre. createaccunt_thanks.html A thank yu page shwn after the custmer has successfully registered an accunt n the stre. default.html The default index page f the stre. HmeFeaturedPrducts A list f stre-wide featured prducts (prducts marked as featured in the cntrl panel) HmeNewPrducts A list f stre-wide new prducts (based n the date they were added t the stre) HmeRecentBlgs A list f recent blgs/news items psted n the stre (based n the date they were psted) HmeSalePrducts A list f prducts that are n sale (thse that have a sale price cnfigured that s less than the nrmal price f the prduct) editaccunt.html Shwn in the My Accunt sectin f the stre when a custmer chses t edit their accunt. EditAccuntBreadcrumb The breadcrumb navigatin menu. EditAccuntFrm Frm shwn allwing the custmer t change the details ( address, passwrd, name etc) f their registered accunt. errr.html A generic page that can be shwn whenever there is an errr message n the stre and n additinal cntent n the page needs t be shwn. eselectplusdp.html The payment details cllectin frm fr the eselect DirectPst payment mdule. eway.html Shwn when a custmer chses t pay via eway when making a purchase n the stre. frgtpasswrd.html The page shwn when a custmer clicks the Frgt yur passwrd? link n the lgin page. Used t reset their accunt passwrd. FrgtPasswrdBreadcrumb The breadcrumb navigatin menu. FrgtPasswrdFrm The frm shwn fr the custmer t enter their address t have their passwrd reset.

52 5C)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * giftcertificates.html Shwn when a custmer clicks the Gift Certificates link n the tp menu f the stre. Displays hw t purchase/use a gift certificate. PurchaseGiftCertificate Displays the frm used t make the purchase f a gift certificate frm the stre. giftcertificates_balance.html Allws custmers t check the remaining balance (and shws the remaining balance) f a gift certificate. GiftCertificateBalanceRemaining Shwn after a custmer enters their gift certificate cde and displays the remaining balance and expiry date. CheckGiftCertificateBalance Displays the frm asking fr the gift certificate cde t check the balance f. giftcertificates_redeem.html The page shwn cntaining instructins n hw t redeem a gift certificate during the checkut prcess. RedeemGiftCertificate Displays instructins n hw t redeem a gift certificate during the checkut prcess. invice_print.html A printable invice fr an rder that a custmer can print frm the frnt end f the stre. lgin.html LginBreadcrumb The breadcrumb navigatin menu. LginFrm The Create an Accunt and Sign in t Yur Accunt ptins shwn n the lgin page. message.html Shwn when a page simply needs t shw a particular message t the user. news.html The page that shws an individual news item n the stre. NewsBreadcrumb The breadcrumb navigatin menu. NewsCntent Used t display an individual news item n the news page. newsletter_subscribe.html The thank yu page shwn after a visitr subscribes t the stre newsletter. NewsletterBreadcrumb The breadcrumb navigatin menu. NewsletterCntent Shws a cnfirmatin message after the custmer has subscribed t the stre newsletter. rder.html The Thank yu fr yur rder page shwn after an rder is successfully placed n the stre. page.html The layut file shwn when viewing a web page created n the stre. PageBreadcrumb The breadcrumb navigatin menu. PageCntent Displays the title and the cntent f the web page currently being viewed.

53 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 53* SideSubPageList A list f pages that exist under (sub-pages) the page currently being viewed. Shwn n the left clumn by default. page_cntact_frm.html The frm shwn when a web page is cnfigured as a Cntact Frm allwing users t submit a questin/message t the stre wner. payflwpr.html The payment details (credit card entry) frm shwn when a custmer chses t pay via PayPal PayFlw Pr. price.html Displays a list f prducts in a particular categry between a specified price range. SideCategryShpByPrice The price pint ptins fr brwsing items between different price ranges in the current categry. PriceBreadcrumb The breadcrumb navigatin menu. PriceCntent Displays the prducts in the current categry in between the specified price range. prduct.html PrductBreadcrumb The breadcrumb navigatin menu. PrductDetails Cntains the details (price, brand, shipping infrmatin, prduct image and prduct name) t be shwn n the prduct view page. PrductDescriptin Cntains the descriptin f the prduct currently being viewed. PrductWarranty If the prduct has any warranty text/infrmatin set, it will be shwn in this panel. PrductOtherDetails Displays the custm fields cnfigured fr the prduct being shwn. PrductByCategry Shws a list f categries related t the prduct currently being viewed. PrductReviews A list f prduct reviews fr this particular prduct as well as the frm fr psting a new review fr this prduct. SidePrductAddTCart The buttn t add this prduct t the custmer s cart. If the prduct has variatins, the select bxes t chse the variatin cmbinatin will als be shwn. SidePrductAddTWishList The buttn t add this prduct t the custmer s wishlist. SidePrductRelated A list f prducts related t this prduct (either autmatically fetched r manually cnfigured) SidePrductAlsBught Shws a list f prducts that custmers have purchased wh have als purchased the prduct being shwn. prductimage.html The ppup windw used t display prduct images. PrductImagePpup Shws an individual prduct image in the prduct image ppup and the buttns t navigate between the prduct images.

54 54)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * search.html The page that either shws the frm t search fr prducts r prduct search results if a search is currently being perfrmed. SearchPageHeader The header cntaining the search frm and breadcrumb navigatin menu. SearchPagingTp If shwing search results that span mre than ne page, the page list shwn at the tp f the page. SearchPage If a search is being perfrmed, this panel will be shwn cntaining any results matching the search terms. SearchPagingBttm If shwing search results that span mre than ne page, the page list shwn at the bttm f the page. search_tips.html The page that shws tips and tricks fr using the prduct search. SearchTips Displays a list f tips and tricks fr using the prduct search. shippingaddressfrm.html Shwn when a custmer wishes t edit a shipping/billing address in their address bk frm the My Accunt sectin. AccuntBreadcrumb The breadcrumb navigatin menu. ShippingAddressFrm The frm cntaining the fields fr either editing r adding a shipping/billing address t the custmer address bk. suggestive_cart.html Shwn instead f the nrmal View Cart page when there are ne r mre prduct recmmendatins t be shwn (shwn immediately after a prduct is added t the cart) SuggestiveCartBreadcrumb The breadcrumb navigatin menu. SuggestiveCartHeader The header fr the cart suggestins page. CartFreeShipping A message explaining that the cart either qualifies fr free shipping r $X mre needs t be sent befre free shipping is available. SuggestiveCartCntent Displays recmmended prducts after a prduct was added t the cart. This includes prducts that custmers wh purchased this prduct have als purchased, related prducts and ppular prducts. SideCartMiniCart A small cndensed versin f the custmers cart shwing which prduct they ve just added and any ther prducts als in their shpping cart. wishlist.html The page shwn when any actin related t wishlists (adding items, managing wishlists etc) is shwn. WishListItems Used when displaying the cntents f a particular wishlist. WishLists Shwn whenever a list f wishlists the custmer has is t be displayed. WishListAddFrm The frm that allws creatin f a wishlist.

55 Appendix 2: Sample Layut Files 1 Clumn Layut File!"#$%&&'($')$*+,%&"-.,"%/)#*"0') 55* The HTML t generate a 1 clumn (cntent clumn) page wuld be as fllws: Kh^%>=i6E!/84+!6j&$D>!MTHHk`>HH^=^!l@=d$!Y?[!=2,3B;8;03,+HHE9M! M/88*GHHIII?I`?02QH=WHJ/84+YH^=^HJ/84+YT82,3B;8;03,+?181MO! K/84+!J4+3BLM/88*GHHIII?I`?02QHYmmmHJ/84+MO! ""6,3.+?@=d$@.,1""! K<01RO!! K1;:!;1LM>038,;3.2MO!! ""6,3.+?@.,1.2""!! K1;:!;1LMk2,**.2MO!!! K1;:!-+,BBLM>038.38!k;1.B8M!;1LM$,R078>0+743YMO!!!! )> !!! KH1;:O!! KH1;:O!! ""6,3.+?A008.2""! KH1;:O! KH<01RO! KH/84+O! 2 Clumn (Left + Cntent) Layut File The HTML t generate a 2 clumn page with a left side bar and a cntent clumn wuld be as fllws: Kh^%>=i6E!/84+!6j&$D>!MTHHk`>HH^=^!l@=d$!Y?[!=2,3B;8;03,+HHE9M! M/88*GHHIII?I`?02QH=WHJ/84+YH^=^HJ/84+YT82,3B;8;03,+?181MO! K/84+!J4+3BLM/88*GHHIII?I`?02QHYmmmHJ/84+MO! ""6,3.+?@=d$@.,1""! K<01RO!! K1;:!;1LM>038,;3.2MO!! ""6,3.+?@.,1.2""!! K1;:!;1LMk2,**.2MO!!!! K1;:!-+,BBLM$.F8M!;1LM$,R078>0+743YMO!!!!! )$.F8!> !!!! KH1;:O!!!! K1;:!-+,BBLM>038.38!k;1.!k;1.k;8/$.F8M! ;1LM$,R078>0+743PMO!!!!! )> !!!! KH1;:O!!! KH1;:O!! ""6,3.+?A008.2""! KH1;:O! KH<01RO! KH/84+O!

56 56)!"#$%&&'($')$*+,%&"-.,"%/)#*"0') * 2 Clumn (Right + Cntent) Layut File The cde t generate a 2 clumn page with a cntent clumn and a right side bar wuld be as fllws: Kh^%>=i6E!/84+!6j&$D>!MTHHk`>HH^=^!l@=d$!Y?[!=2,3B;8;03,+HHE9M! M/88*GHHIII?I`?02QH=WHJ/84+YH^=^HJ/84+YT82,3B;8;03,+?181MO! K/84+!J4+3BLM/88*GHHIII?I`?02QHYmmmHJ/84+MO! ""6,3.+?@=d$@.,1""! K<01RO!! K1;:!;1LM>038,;3.2MO!!! ""6,3.+?@.,1.2""!! K1;:!;1LMk2,**.2MO!!!! K1;:!-+,BBLM>038.38!k;1.M!;1LM$,R078>0+743YMO!!!!! )> !!!! KH1;:O!!! K1;:!-+,BBLMW;Q/8M!;1LM$,R078>0+743PMO!!!!! )W;Q/8!> !!!! KH1;:O!!! KH1;:O!!! ""6,3.+?A008.2""! KH1;:O! KH<01RO! KH/84+O! 3 Clumn Layut File The cde t generate a 3 clumn page with bth left and right side bars as well as a cntent clumn wuld be as fllws: Kh^%>=i6E!/84+!6j&$D>!MTHHk`>HH^=^!l@=d$!Y?[!=2,3B;8;03,+HHE9M! M/88*GHHIII?I`?02QH=WHJ/84+YH^=^HJ/84+YT82,3B;8;03,+?181MO! K/84+!J4+3BLM/88*GHHIII?I`?02QHYmmmHJ/84+MO! ""6,3.+?@=d$@.,1""! K<01RO!! K1;:!;1LM>038,;3.2MO!! ""6,3.+?@.,1.2""!! K1;:!;1LMk2,**.2MO!!!! K1;:!-+,BBLM$.F8M!;1LM$,R078>0+743YMO!!!!! )$.F8!> !!!! KH1;:O!!!! K1;:!-+,BBLM>038.38!k;1.M!;1LM$,R078>0+743PMO!!!!! )> !!!! KH1;:O!!!! K1;:!-+,BBLMW;Q/8M!;1LM$,R078>0+743`MO!!!!! )W;Q/8!> !!!! KH1;:O!!! KH1;:O!!! ""6,3.+?A008.2""! KH1;:O! KH<01RO! KH/84+O!

57 !"#$%&&'($')$*+,%&"-.,"%/)#*"0') 57* Appendix 3: Stre Wide Glbal Variables %%GLOBAL_StreName%% - The name f the stre. %%GLOBAL_ShpPath%% - The full URL t the stre withut a trailing slash. If n an SSL based page, this will be the HTTPS versin f the stre path. %%GLOBAL_AppPath%% - The path t the stre (full URL withut the dmain) including a trailing slash. %%GLOBAL_ShpPathNrmal%% - The nrmal (nn SSL) versin f the stre URL. %%GLOBAL_ShpPathSSL%% - The SSL versin f the stre URL. %%GLOBAL_StreAddress%% - The address f the stre (as cnfigured n the stre settings page) %%GLOBAL_Admin %% - The address f the stre administratr. %%GLOBAL_CurrentCustmerFirstName%% - The first name f the currently lgged in custmer. Fr guests, this is set t Guest. %%GLOBAL_CurrentCustmerLastName%% - The last name f the currently lgged in custmer. %%GLOBAL_CurrentCustmer %% - The address f the currently lgged in custmer. %%GLOBAL_SiteClr%% - The current template s active clr scheme. %%GLOBAL_template%% - The current template name. %%GLOBAL_StreLg%% - The stre lg (image r <h1> text lg) %%GLOBAL_DwnladDirectry%% - The name f the prduct dwnlads directry. %%GLOBAL_ImageDirectry%% - The name f the prduct images directry. %%GLOBAL_ThusandsTken%% - The thusands separatr currently active n the stre. %%GLOBAL_DecimalTken%% - The decimal tken currently active n the stre. %%GLOBAL_DimensinsDecimalTken%% - The dimensins (length & weight) decimal tken. %%GLOBAL_DimensinsThusandsTken%% - The dimensins (length & width) thusands separatr. %%GLOBAL_CartItems%% - A textual string representing the number f items in the cart (1 item, 2 items etc)