How to Experiment With Your Premium Shop

First: You don't need a web or HTML editor. They are certainly useful, but not necessary for the learning part. You can use Notepad or any plain text editor. If you can show text with bolds and underlines it is not a plain text editor. If you use Windows, search your computer for "Notepad," it is a plain text editor. The CP Tutorials page has more information.

What I did to get things clear in my mind:

Comment the Code

First I went into the custom html page.

1. Log into the shop account.
2. Choose Manage.
3. Choose Customize Shop Appearance
4. Choose Custom HTML

Then in each box I inserted comment codes.

1. Comment Code begin with <!--
2. then insert the comment text
3. end the code with -->

Often there are some comments already, but if I put them in then I'd recognize them. e.g.<!-- beginning of head box --> at the top of the head box and at the bottom of the same box <!-- end of head box --> - same thing for header, footer, extra sidebar and store description. Anything between the comment code will not print on the page. Comment code is also used to hide scripts, styles and other commands not understood by older browsers.

See the video demo on How to Insert Comment Code

Copy the Store HTML to a Local File

I went to the ordinary view of my store, copied the html source code and saved it to a local file.

1. Right click the web page. Do not have the cursor on an image. Put it on text or a blank space.
2. Select "View Page Source" ("View Source" in Internet Explorer).
3. Save the source to a file on my local computer.
   In Internet Explorer
   • If the View Source opens in Notepad skip to step 4. Otherwise, follow the instructions below for Firefox.
   In Firefox,
   • Right-click in the "View Source" window.
   • Choose Select All
   • Right-click, Choose Copy
   • Open Notepad
   • Paste the selection to Notepad.
4. Save the file with an "htm" extension, e.g."mystore.htm" (you might need to include the quotes when naming to prevent it getting saved as mystore.htm.txt). Do not close the file after saving it.

Leave the File Open, View the File in Your Browser

1. Open your internet browser.
2. Open your file browser.
3. Navigate to where you saved the "mystore.htm" (yes, even though it is open).
4. Drag the file from your file browser to your internet browser.

OR

1. Open Your internet browser
2. From the menu bar choose Open or Open File
3. Navigate to the file and open it.

See the video demo on How to Save Your Store HTML to a Local File

Make Changes to the Local File

Make changes to the local file like adding different colors and widths of borders to the tables. The point of doing this is to understand how the html is structured - what goes where.

To do that:

1. Find where a table starts <table

2. Look to see if there is an existing border attribute e.g. border="0". That attribute would be anywhere from the beginning of that tag
   <table
   and the end
   >
   e.g.
   <table width="100%" border="0" cellspacing="0" cellpadding="0" name="Main Table" bordercolor="#FF0000">

3. If there is an existing border attribute, change the number e.g. border="3". If there is not one, just type it in
   border="3"
   Remember, this is on your machine. You can't break your shop by experimenting here.

4. Look to see if there is an existing table border color attribute e.g. bordercolor="FF00FF" If there is an existing color you can leave it, or change it.
   
   For a list of colors and how to write them see HTML Color Names For experimenting you don't really need to know which color is which - just see what changes. Try, for example bordercolor="#00FF00" will be green. Experiment, it won't explode (and it won't hurt your computer).

That helped me see which table did what. And I could add a comment code to the beginning of each table e.g. <!-- sidebar table --> or <!-- main content table -->. And finally I could easily see what I could change, and what I couldn't. Those codes I put into the boxes on the HTML custom page - anything in between the box code comments was code I could change, anything outside those comments was code I couldn't change.

Look at your Header and Footer boxes. You will see that the last code of the Header (other than comments) is the beginning of a table cell. The first code of the Footer (other than comments) is the ending of a table cell. It is between these two that your store contents is placed. First is the store description, followed by the auto-generated sections/products. So when you are designing you need to keep that table that holds your store contents, and you need to keep that break between the Header and Footer boxes.

Correct References

Finally you may want to correct some of the link references in the code so that just about everything works. Most of the links work even when the file is on your machine because they use "absolute references." A few images, scripts and links have only relative links, meaning they don't contain the http://www.cafepress.com part of the address. The browser, therefore, won't look on the cafepress site for the file, it will look on your machine. It won't find it of course. So you can fix this by changing those relative links to absolute links in that notepad file.

An absolute reference has a full path
<a href="http://www.cafefpress.com/dogplay/1068695">
A relative reference does not have the http://
<a href="/dogplay/1068695">
Correct relative references by search and replace
Replace
href="/
with
href="http://www.cafepress.com/
Replace
src="/
with
src="http://www.cafepress.com/
Replace
background="/
with
background="http://www.cafepress.com/

See the video demo on How to Mark HTML to See Store Structure

Time to Play

Experiment to your heart's content. Remember you can always save your file to different names if you want to compare different changes. See the video demo on How to Experiment with a Premium Shop and Working Locally on Your Shop

OK - now before you put any changes you make in your live shop - back up the HTML in your shop.