ShopSite Forums

by **Nfiniti99** » Wed Jan 09, 2008 9:20 pm

Hello

I've created a custom product template in Dreamweaver and i've uploaded it to use on my site/store. The problem is when I preview the template, the images aren't showing. I've uploaded the images that i'm using as well. What am I doing wrong?

by **Jim** » Wed Jan 09, 2008 9:39 pm

What does your template look like? If it isn't too large post it here so we can see what the problems might be. If it large post the first 50 lines or so of it.

by **Nfiniti99** » Wed Jan 09, 2008 10:07 pm

Thanks, but how would I post it here for you to see?[/img]

by **Jim** » Wed Jan 09, 2008 10:12 pm

Just copy the text from the Dreamweaver template (what you uploaded into ShopSite) that you made and past it into your message. You can click the "Code" button (about the input field) before and after your text to put into in a text box that keeps the formatting like you have it, otherwise it may wrap.

by **Nfiniti99** » Wed Jan 09, 2008 11:01 pm

Thank you. I am trying to design a template with a "page listing" links on the left. I would also like to display images with 6 rows and 4 images in each row.

<html>
<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="100%" bgcolor="#666666"> </td>
</tr>
<tr>
<td> 2008
Valentines Collection

</td>
</tr>
</table>
<div align="left"> </div>
<table width="102%" border="0" cellspacing="4" cellpadding="2" align="center">
<tr valign="top">
<td width="137" align="center" rowspan="5">Valentines
Collection 
Fanstasy Costumes
Hosiery
Lingerie
Leather
Contact Us
Size Chart
 </td>
<td width="628" bgcolor="#CCCCCC">  </td>
</tr>
<tr>
<td> <table width="125%" border="1" cellspacing="2">
<tr>
<td><img src="Templates/mm/stationery/DetailA/15vnew.jpg" width="150" height="187"></td>
<td><img src="Templates/mm/stationery/DetailA/0850.jpg" width="150" height="225"></td>
<td><img src="Templates/mm/stationery/DetailA/1218.jpg" width="150" height="225"></td>
<td><img src="Templates/mm/stationery/DetailA/2250.jpg" width="150" height="161"></td>
</tr>
<tr>
<td><img src="Templates/mm/stationery/DetailA/2320.jpg" width="150" height="162"></td>
<td><img src="Templates/mm/stationery/DetailA/2406.jpg" width="150" height="108"></td>
<td><img src="Templates/mm/stationery/DetailA/2716front.jpg" width="150" height="186"></td>
<td><img src="Templates/mm/stationery/DetailA/2735r.jpg" width="150" height="225"></td>
</tr>
<tr>
<td><img src="Templates/mm/stationery/DetailA/2978.jpg" width="150" height="106"></td>
<td><img src="Templates/mm/stationery/DetailA/3465.jpg" width="150" height="225"></td>

by **Jim** » Thu Jan 10, 2008 11:24 am

What you have posted is just part of an html page it is not yet a ShopSite template. To make it a ShopSite template you need to add special template tags At the top of the page you need to add the tag [-- DEFINE PAGE --] and at the very end of your page you need to add [-- END_DEFINE PAGE --]

Then in the places where you want the variable information you need to add the tag to pull the data from the ShopSite database for that particular place. For example it looks like the page name may be 2008 Valentines Collection based on this section of the html in your page

Code: Select all: <td> 2008 Valentines Collection

You would replace "2008 Valentines Collection" with the tag [-- PAGE.NAME --] so you would have

Code: Select all: <td> [--PAGE.NAME --]

It looks like the page listing is in this section

Code: Select all: Fanstasy Costumes Hosiery Lingerie Leather Contact Us Size Chart

If that is where you want the listing and it will change based on the particular page in the store you will want to make it changeable base to the page links assigned to the page. this would be done by changing the code in that section to look like this

Code: Select all: <tr valign="top"> <td width="137" align="center" rowspan="5">Valentines Collection [-- LOOP LINKS --] [-- Link --] [-- END_LOOP LINKS --] <td width="628" bgcolor="#CCCCCC">  </td> </tr>

In order for the links to be formatted like you have them you need to add a section to the template that says how the links will look this should be done at the very top of the template like this

Code: Select all: [--DEFINE LINK_TO_PAGE--] # This define is used to control how the link to this page will [--PAGE.LINKNAME --] [--END_DEFINE LINK_TO_PAGE--] [-- DEFINE PAGE --] the html part of your page is here

Next for your images I assume that they will be product images that link to the moreinfo page for each product
If that is the case then you would replace the code

Code: Select all: <tr> <td> <table width="125%" border="1" cellspacing="2"> <tr> <td><img src="Templates/mm/stationery/DetailA/15vnew.jpg" width="150" height="187"></td> <td><img src="Templates/mm/stationery/DetailA/0850.jpg" width="150" height="225"></td> <td><img src="Templates/mm/stationery/DetailA/1218.jpg" width="150" height="225"></td> <td><img src="Templates/mm/stationery/DetailA/2250.jpg" width="150" height="161"></td> </tr> <tr> <td><img src="Templates/mm/stationery/DetailA/2320.jpg" width="150" height="162"></td> <td><img src="Templates/mm/stationery/DetailA/2406.jpg" width="150" height="108"></td> <td><img src="Templates/mm/stationery/DetailA/2716front.jpg" width="150" height="186"></td> <td><img src="Templates/mm/stationery/DetailA/2735r.jpg" width="150" height="225"></td> </tr> <tr> <td><img src="Templates/mm/stationery/DetailA/2978.jpg" width="150" height="106"></td> <td><img src="Templates/mm/stationery/DetailA/3465.jpg" width="150" height="225"></td>

with the following. Note that the "4" in the tag [-- LOOP PRODUCTS 4 --] represents the number of columns to make

Code: Select all: <tr> <td> <table width="125%" border="1" cellspacing="2"> [-- LOOP PRODUCTS 4 --] <td> [-- PRODUCT --] </td> [-- END_LOOP PRODUCTS --] </table> </td>

The [-- PRODUCT --] tag displays the layout of the product defined in the product template that is assigned to each product. So at this point you need to create a product template with the layout that you need. It is a separate file from the page template. Here is the basic product template based on how you have your product images defined in your html page. Note that the code for displaying the product image in your html is <img src="Templates/mm/stationery/DetailA/2250.jpg" width="150" height="161"> and would be replaced by the tag [-- PRODUCT.GRAPHIC --] in the template. You will need to upload the images to your store's media directory for this to work and then assign the image to the product itself.

Code: Select all: [-- DEFINE MORE_INFO_PAGE --] # This defines how the more information page for the products # that use this template will look [-- END_DEFINE MORE_INFO_PAGE --] [-- DEFINE PRODUCT --] [-- PRODUCT.GRAPHIC--] [-- END_DEFINE PRODUCT --]

Note that you will need to create a link from the product image to the product's moreinformation page so you would replace the line [-- PRODUCT.GRAPHIC --] with something like <a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Graphic --]</a> to generate the linke. So the product template would be more like.

Code: Select all: [-- DEFINE MORE_INFO_PAGE --] # This defines how the more information page for the products # that use this template will look [-- END_DEFINE MORE_INFO_PAGE --] [-- DEFINE PRODUCT --] <a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Graphic --]</a> [-- END_DEFINE PRODUCT --]

In the DEFINE MORE_INFO_PAGE section you would define the layout of the page you want the link from the product image to go to.

Hope this help you under stand the process better.

by **Nfiniti99** » Thu Jan 10, 2008 6:57 pm

You are wonderful Jim! I don't know how to thank you. Your patience and understanding in this matter is greatly appreciated. Thank you for all of your help.

by **Jim** » Mon Jan 14, 2008 11:35 am

Glad to help.

ShopSite Forums

Dreamweaver template help, please

Dreamweaver template help, please

Who is online