Adding Statcounter to your store

Most store keepers will benefit from having a good understanding of who is visiting their store and where they are coming from. This is where Statcounter or Histats come in. Both of these sites allow you to have them record a wide array of information about your visitors.

Both of these services have a free level of service, and both of them require that you insert a little piece of javascript code into your Base HTML codeof your store. Go through the registration at either of these sites and you will receive at the end, the relevant javascript code to make it work.

Depending on if you want a visible or invisible counter, you can place the Javascript in a couple of different locations on your template. Firstly, it must go into the Base HTML so that all pageloads are recorded. If you have an invisble counter, the code can go anywhere. For a visible counter, you will want to post it in either the Footer TD or Menucol TD:

<TD id=footer colSpan=2>Put your counter code here</TD>

or

<TD id=menucol vAlign=top>##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
<DIV id=prop></DIV>Put your counter code here</TD>

Visible Counters in the footer may also require you to add a line of CSS to your custom CSS to make it sit right:

#footer {vertical-align: top; padding-top: 5px}

 

Comments (0) 15.05.2007. 05:19

Rough Guide: Editing the new templates Part 1

There has been a bit of discussion on the forum about what we can and cannot do with the new templates. The simple answer is anything , nothing or somewhere n between. This multi-part guide is designed to help you safely make change to your template and understand the various parts. 

The 3 wise HTML pages

 The first thing you will see when you enable HTML customization is that you have three boxes for HTML - Base HTML, Home Page HTML and Content Page HTML. Each area plays a part in displaying your site. 

Base HTML

This is the HTML that appears on every page of your store. Think of it as the dinner plate for your store. If you add anything to this HTML it wil be relected on every page of your store. This is where things like your statcounter code should be placed, or links that you want on every page. Depending on which page your shoppers are at, will depend on what ##content## they see on their "plate".

Home Page HTML 

This is the ##content# that gets displayed inside the Base HTML on your main page only. For example you may wnat a welcome message that only appears on the first page and not deeper down in the sections. This is the place for that. 

Content Page HTML

This is where all the other pages come from as ##content## for the Base HTML page. You are less likely to want to edit this section, but if you had something that you didn't want on the home page, but did want on every other page, that would go here. 

Base HTML - going deeper

Lets look at the various areas of the Base HTML from the top down. Each theme has some subtle differences, however the same naming applies, so you should be able to follow easily enough.

<DIV id=topbar></DIV>

Not all the themes have this section, however if it is there, it is the lage block of solid color at the top of your page. In Crestone for example it is full width, behind the main content area of your page. You can style this in various ways, background, border, etc for different looks. To make it dissapear altogether, set the CSS to #topbar{background: none !important}.

<TD id=header vAlign=center colSpan=2>
<DIV id=logo><A  title=##storename## href="##storeurl##">##logo## </A></DIV></TD>

 

This is the area directly behind your store logo. Again it can be customised by CSS in anyway you like. The Store logo lives in here as well in its own div. You can adjust the alignment of the logo by setting some CSS: #logo {text-align: center} or left or right. You may also notice that the logo has an anchor around it which means that clicking on the logo will take you back to the stores home page.

<TD id=menucol vAlign=top>##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
<DIV id=prop></DIV>You can put additional links buttons or banners here in the sidebar</TD>

This is the menu column of your store. You can add additional links here, or perhaps put your statcounter code in here, particularly if you want a visible counter.

Part 2 Coming Soon

Comments (0) 18.04.2007. 05:13

Edit your theme: Right Hand Menu

Some people like it to the left and some to the right. Of course I am talking about your menu at your printfection stores. All of the currently available themes have a left hand menu. Here I will describe the process of getting your menu on the right.

1. Log on to your Printfection Account and go to the store settings of your chosen store.

2. Click on the Themes tab and select a theme that you like

3. Once you have selected the theme that you like, click on the Display Options Tab

4. Ensure that Customize the HTML: is checked, then Save the display options.

5. Click on the Custom HTML tab.

6. Have a look at the Base HTML Windows. Each template is different here, however the core HTML is similar and the changes you need to make are essentially the same.

7. There are two Cells (<td>)that hold either the menu or the content:

<TD id=menucol vAlign=top>##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
<DIV id=prop></DIV></TD>
<TD id=maincol vAlign=top>##content##
<DIV id=prop1></DIV></TD>

8. Edit the code as follows so that the maincol appears before the menucol

<TD id=menucol vAlign=top>##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
<DIV id=prop></DIV></TD>
<TD id=maincol vAlign=top>##content##
<DIV id=prop1></DIV></TD>

9. Save your HTML and Voila !!

Comments (0) 15.04.2007. 05:09

<< First < Previous [6 / 6] Next > Last >>