Introduction to product styles
What is a Product Style
Product styles are simple HTML files that typically contain a HTML table which defines how a product will look on the generated web site.
What's the difference between Brief and Detailed product styles?
A brief product style is used on category pages. A category page typically has more than one product in it, so the Brief style is repeated X times, where X is the number of products in the given category.
The screenshots below demonstrates a category page with three repeated brief product styles...
A detailed product style is used on Detailed Product Pages. Detailed product pages only contain information about a single product, so the style is not repeated.
The screenshot below demonstrates a product page with a single detailed product style...
Real examples of product styles
The screenshot below is a brief style...
The screenshot below is a brief style with a column based layout - These are slightly more complicated to create but the results can look good...
Where are the product style files stored?
There are two separate locations where product styles can be stored. If you have created a custom theme and wish to modify the default brief and detailed style used by the new theme then you need to edit these two files...
These two files will be used when you have selected 'Default' in the Product Styles section of ezimerchant...
If you wish to make product styles generally available regardless of the theme then they should be stored in the following location...
Styles listed in the above folders will be visible within ezimerchant for you to select in the Product Layout section...
Editing the Style
Style files are simple html files (but with a .tbl extension). The style file contains one or more tables with various tags. You can manipulate the HTML in your favourite HTML editor to achieve the desired outcome. You can remove font and other style tags and replace with your own - you can even wrap tags in css - As the product style HTML code will end up in the middle of the generated site it will have access to any css that you defined when making your custom template.
Column based brief styles
If you wish to create a column based brief style (like the example pictured above) I would recommend using the attached example code as a starting point.
Below is a screen shot of a column based style being edited in Microsoft Expression Web...
This is a screenshot of the source code...
Notes
Optional Tags:
- <#productcode> - this will display the product code.
- #productcode1# , #productcode2# etc - This will display the product code - Used in column based styles only.
Obsolete Tags:
- <#IntPrice>and the column based style equivalent: #IntPrice1# , #IntPrice2# etc
- <#IntTaxInfo>and the column based style equivalent: #IntTaxInfo1# , #IntTaxInfo2# etc
Comments
0 comments
Please sign in to leave a comment.