Store Customization - TeePlates by Australele

One thing that many people have asked for is a simple way to add a page of links to their Printfection Store. There is no built in way to do this, however by using the built in store structure and a little HTML / CSS magic, you can have a full page of links to your other stores, your friend's stores and even offsite places that don't contravene the Printfection Term of Service or good common sense..

1. Once you have logged in to your Printfection Account, go to the Sections & Products menu for your store

2. Add a new Section called "Links" or whatever you would like it to be called

3. You can add an image and a teaser just as you would for any other section in your store. Do not add a description at this stage.

4. Click on View Section to enter the empty Links Section.

The following steps can be repeated for each link that you wish to create.

5. Create a new section for your link. Name it whatever you like

6. Do not add an image for the new section.

7. Edit the section info and go to the section teaser. This is where we are going to put the link, image and link teaser. For this example, I will add a banner image and link to the Ukulele Shirt World store.

8. At this point, we need to add some simple HTML to the teaser, change the image location and link href for the link that you wish to set up.


<a href="http://www.printfection.com/ukulele" title="Ukulele Shirt World" target="_blank" border="0px">
<img src="http://www.australele.com/usw/USWBanner.jpg" border="0px" alt="" />
</a>
<br>

9. If you like, you can add text to describe the link for your visitor in the Section Teaser after the <br> tag . You will not be able to enter much, as the Teaser has a limitation of 256 characters.

10. Save the Section Info and go and have a look at your store at your shiny new links page.

11. You will notice that each link has the name of the section on top that actually links to within your store. To make this dissappear we need to do one final thing. Go back to the Links Section infor mation and add the following to the description:


<style>
.sectionTitleLink {display: none}
</style>

12. Save the Section info for the links section

Repeat steps 5 to 10 to add more links.

Let me know if you end up using this tutorial to create an onsite links page, and perhaps think about giving Teeplates a link on you links page by using the following Teaser:


<a href="http://teeplates.australele.com" title="Ukulele Shirt World" target="_blank"><img src="http://www.australele.com/teeplates/themes/teeplates/images/logo.png" border="0"/></a><br><br>Custom Printfection Stores

You can see this style of links page in action at the following stores:

Rough Guide: Editing the new templates Part 3

Now that you understand (hopefully) the main template layout of your store in Part 1 and Part 2, its time to have a look at the Content Page HTML. As we learnt in part 1, this is the content that is shown on all pages other than the actual home page of your store. Typically this will be when a vistior goes into a section of your store. The code looks something like this for most of the stores:

<DIV class=clearfix id=content>
<DIV id=cImage>##currentsectionimage## </DIV>
<DIV id=cName>##currentsectionname## </DIV>
<DIV id=cDesc>##currentsectiondescription## </DIV></DIV>##sectionswrapper## ##sections## ##sectionswrapper## ##products##

Styling the top part.

The Section Image, Name and Description all sit in this code. The first thing you will probably want to style is the #content DIV. You can set a background or border that will be seen behind or around your Section Image, Name and Description.

Name, Rank and Serial Number.

Next you can look at the Section details - #cName, #cImage and #cDesc. Each of these can be styled with fonts and colors.You may even wish to alter text alignments as well. You can even move the section image from right to left by changing the float and margin appropriately. For a left aligned cIimage, you would use:

Adding a Menu to your store

So you've started using one of the Printfection Themes for your store, Youve read the Rough Guides (Part 1 and Part 2) and now you would like to go deeper and find out how to add a menu that points to some external links or maybe even a featured product. How do you then make it look the same as the Store Categories or Shop by Price menu? Keep reading, it is really simple to do.

Tops or Tails?

The first thing you need to decide is where on the sidebar you want the extra menu to go above the current menu or below. Lets have a look at the standard menu column HTML:

<TD id=menucol vAlign=top>
Put the new menu code here for on top
##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
Put the new menu code here for down low
<DIV id=prop></DIV></TD>

Make sure you dont delete any of the other tags around these areas. In this demo, I will add the menu to the bottom.

Adding the Title

OK , now we need to add a title for our menu. It can be whatever you want. For this, I will call it "Links". All I need to add to my menu column is a H4 heading as below, good ole CSS does the rest.

What's on the Table?

The standard Printfection menus that get generated by the server for categories end up as a table. So for us to keep things simple and let CSS work for us, all we need do is create our own table full of links with the right IDs and classes. Some very simple HTML is all we need.

<TD id=menucol vAlign=top>##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
<H4>Links: </H4>
<table width=100% cellpadding=0 style='border-collapse:collapse' class='menuTable'>
</table>
<DIV id=prop></DIV></TD>

Row your Menu Home

So now you have an empty table ready to add links to. Each link needs to be in its own cell (td) on its own row (tr).

If you are not familiar with HTML, all you need to do to change where the links go to is to change the href= to where you want to go.
For more links, just add more rows.

Open Links Externally

If your links are for external sites, away from your store, you may want them to open in a new window. Just add a target to the link:

<a href="http://teeplates.australele.com" class="menuLink menuLevel1" target= "_blank">TeePlates by Australele</a>

This will open the link in a new browser window and keep your store open in the background for your visitor.

TeePlates by Australele - Tshirt Store Design

Adding a links page to your Printfection Store

Rough Guide: Editing the new templates Part 3

Styling the top part.

Name, Rank and Serial Number.

Adding a Menu to your store

Tops or Tails?

Adding the Title

What's on the Table?

Row your Menu Home

Open Links Externally

Categories:

Search:

Featured Books

New Articles: