How do I edit Product Styles? (Brief and Detailed Styles)

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