Spreadshirt Layout 101

| June 12, 2009 | 6 Comments

spreadshirt101

Spreadshirt has a great system to work with as long as you know xHTML/CSS as I stated in a past article. Even with very little knowledge in these fields you can make a decent looking website. In this post I’m going to go over how things are broken down and how to get your custom layout up and running at Spreadshirt.

First if you don’t have a layout I would recommend checking out the following post at the Spreadshirt.com forums called Example Code for left, right, and top navigation.

The kind folks at Spreadshirt have listed five (5) different basic down-loadable layouts to get you headed in the right direction. All you need to do is create a custom header image and change the styling around.

Lets jump forward and say that you already have a design and you’re ready to go. The way the Spreadshirt system works is you have a header and a footer field. This means that you must divide your template into two (2) parts. The cut off is going to be where your main content gets pulled in to the layout.

Example:

<html>
<body>
<div id=”header”></div>
<div id=”leftcolumn”></div>
<div id=”maincontentcolumn”>
From here up is going to go into your header area.

Spreadshirts information gets pulled into the center here.

From here down is going to go into your footer area.
</div>
<div id=”footer”>
</body>
</html>

Once you have your template divided and in place you can begin to edit your styles. In order to so do you need to make sure links are included in your header area or the path is correct when using Spreadshirts basic layouts from above.

Example:

<link rel=”stylesheet” href=”/Public/Shop/Styles/checkout.css” type=”text/css” />
<link rel=”stylesheet” href=”/Public/Shop/Styles/print.css” type=”text/css” />
<link rel=”stylesheet” href=”/Public/Shop/Styles/icons.css” type=”text/css” />
<link rel=”stylesheet” href=”/Public/Shop/Styles/buttonset-1.css” type=”text/css” />
<link rel=”stylesheet” href=”/Public/Shop/Styles/navigationset-5.css” type=”text/css” />
<link rel=”stylesheet” href=”/Public/Shop/Styles/1/xxx/structure.css” type=”text/css” />
<!– change xxx to the size of your layout. options are 600 660 828 –>

<!– replace the x’s below with your structure links. This can be found at the top of the shop layout page called headers and footers. The page you should be on now.
example: <link rel=”stylesheet” href=”/users/121000/120474/30220/color.css” type=”text/css” /> –>
<link rel=”stylesheet” href=”/users/xxxxxx/xxxxxx/xxxxx/color.css” type=”text/css” />
<link rel=”stylesheet” href=”/users/xxxxxx/xxxxxx/xxxxx/shop.css” type=”text/css” />

Now if everything has gone correctly, and I can almost guarantee it hasn’t if this is your first time, you can add your CSS to the CSS link which is referred to above as shop.css.

Under the Headers and Footers link is a CSS link. In here you are going to paste all the CSS code that comes with your layout or provided by Spreadshirts layout if you’re using theirs.
If you’re using one of Spreadshirts layouts you can proceed to the Colors & Fonts section to change button colors, text link colors, backgrounds and etc. If you’re using your own template then everything is going to already be set or should be set for you from the information added to shop.css on the CSS page.

When it comes to your graphics such as a header image or background image you will need to upload these by going to the Graphics link and uploading each image. Once you have uploaded your images you need to make sure they are linked to correctly in the template. This means anything that was once <img src=”images/myimage.jpg” /> will now look like <img src=”/users/xxxxxx/xxxxxx/xxxxx/img/xxxxx_myimage.jpg” />. The x’s are the same information we used above to determine correct style linking in your header. The x’s in xxxxx_myimage.jpg will always be your account number. Example: <img src=”/users/121000/120474/30220/img/30220_back.jpg” />

This is basically how the Spreadshirt system is setup and isn’t an exact how-to guide but it should allow you to better understand what’s going on and/or what to expect. I get asked a lot if it’s hard to setup and use the site with custom layouts. The answer is always no. Once you understand what’s going on it becomes second nature.

You can also use iframes, SOAP api, or link off to your spreadshirt site directly (I use this method but blend both my domain and Spreadshirt shop together).

Example: NekkidTees.com

Some common problems you may run into and need to be aware of when creating your custom template are:

  • You must upload your images to the graphics section and correctly link to them.
  • CSS background images may not be linked to the right place in your CSS.
  • You forgot to change the code in your header section that link styles to your account.
  • You are trying to link images and styles externally (you can’t do this).

Incoming search terms:

  • css t shirt template
  • spreadshirt template
  • spreadshirt shop templates
  • spreadshirt css template
  • spreadshirt layouts
  • spreadshirt
  • spreadshirt shop template
  • spreadshirt background template
  • spreadshirt css layout
  • spreadshirt layout

Tags:

Category: Spreadshirt Talk

Comments (6)

Trackback URL | Comments RSS Feed

  1. NR says:

    Thanks for your help. I was able to decipher the header and footer information. I don’t know if it’s your focus, however a step by step might work for some of your instructions. There’s a lot already but what comes to mind is, where is the graphic link, and, what do I do with it. Things like that.

    My abilities are fairly good with site building however I am a person who does not want to focus on the code. That may sound selfish but looking at “what it is” for me getting it done easily without “tutorial learning” is my preference. I say that because your page offered a quick answer. Keep up the good work. Cheers NR

  2. 247Swag says:

    I’m trying to do this for the 247swag.com shop page. I’m going to have to send it to the guy who coded our website and he can figure it out. lol

  3. Andrew says:

    Is there a way to embed your own fontface fonts or even link to google fonts api with spread shirt?

Leave a Reply

Your email address will not be published. Required fields are marked *