Creating a ShopSite template from a pre-designed html page does not need to be too complicated but it can be if you want lots of variability on your pages.
Essentially you would take your html page and add
[-- Define Page --]
to the top of the page before your doc type and <html> tag
Next add [-- End_define page --] after your closing </html> tag.
That is the most basic template. It will allow ShopSite to publish your page (although nothing on the page would change from your original html.)
(Note: template tags are not case sensitive so [--DEFINE PaGe --] is the same as [--define page --] or [--Define Page --] etc. Comments can be added in the template by putting a # as the first character on the line)
Now decide what on your page will change depending on the products, links, page text etc. that you will have on the page.
Let say that you want to display the page name on each page. Find the spot in your html where you have the page name and replace that with the tag [-- page.name --]. The value for page name will come from the ShopSite database. You enter the page name for each page under Pages > Add a Page or Pages > Edit Page Info.
If you have a standard header or footer on each page you can use the tags [-- header --] and [-- footer --] in place of the information that is currently in your html. Just copy the content of that section of the html and put it in the Preferences > Page Layout > header and footer sections in the backoffice of your store.
If certain blocks of text will change from page to page you can replace those blocks of text with [-- page.text1 --], or [-- page.text2 --] or [--page.text3--]
In the section where you want to have links to other pages you would replace the links you have with
[-- Loop Links --]
[-- link --]
[-- end_loop Links --]
If you do use ShopSite to generate the links you need a section that defines how the links will look. So you would add a section like this above the [-- Define Page --] tag.
- Code: Select all
[-- DEFINE LINK_TO_PAGE --]
<a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">
[-- IF PAGE.LinkGraphic --][-- PAGE.LinkGraphic --]<br>[-- END_IF --]
[-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name --][-- END_IF --]</a>
[-- IF PAGE.LinkText --]<br>[-- PAGE.LinkText --][-- END_IF --]
[-- END_DEFINE LINK_TO_PAGE --]
What that code does is for each time a link is to be displayed on the page it outputs and <a href to the html page and displays either a graphic, the link name or the link text that you have assigned to the page which is being linked to.
In the section where you want your product information to display you replace your html with
[-- loop products --]
[-- product --]
[-- end_loop products --]
That would be most of what you would need to do for a page template. Note that it could be more complicated than that by replacing other elements of your html with ShopSite tags that will insert the data from your store at publish time but it doesn't need to be more complicated if you aren't changing things on each page.
You would also need to create a product template that would be used in the [-- loop products --] section when the [-- product --] tag is encountered.
The process for creating the product template would be similar to the page template. You take the basic layout for a single product from your html and replace variable parts of the html with the ShopSite tag that represents that information.
Say for example that you want to display the product image,name, sku, price and add to cart and view cart buttons. Your product template would be like this
- Code: Select all
[-- define product --]
[-- product.graphic --]<br>
[--product.name --]<br>
[-- product.sku --] [--product.price --]<br>
[-- PRODUCT.OrderCheckout --]
[-- end_define product --]
That would give you a simple product layout that would be repeated for each product assigned to the page and would be place in the location where the [-- loop products --] code is found.
You can also create a more information page template that will create an individual page or each product explaining in more detail about the product. If you have already created the html for such a page you would convert it similar to how you did the page template but would use [-- product.---- --] tags instead of [-- page.---- --]tags.
I hope that gives you more information to go on. You mentioned that you have reviewed some of the tutorials have you checked out the ones on this page?
http://www.shopsite.com/templates/cookb ... ates.shtml
Also the over view of what how the database fields relate to the fields in the template might give you a little more insight.
The video tutorials off of
http://www.shopsite.com/templates/tutorial/index.html Will give you good information on how ShopSite works.
In particular you might want to look at the video here
http://www.shopsite.com/tutorial/mercha ... plates.htm
All the Shopper facing screen use custom templates so when you get around to your shopping cart, customer registration etc. you would use similar methods as for the page template for the basic layout, just replace the html code in your page layout with the appropriate ShopSite template tags.
If you have further questions feel free to post them.