Catalog Machine provides full customization for your product and price lists.

You can easily configure a catalog with standard options using Product List editor. Continue reading if you need more advanced configuration or customization.

You can find here a few scenarios that you can use in your catalogs. Read more details about possible fields and operations in Smart Layouts. View video how to use price lists.

Read about using background colors based on category and collection colors.

Read How to create multi-dimensional Product, Comparision, Datasheet or Feature tables.

Sections:

Simply insert these examples into a text box in the catalog. You can format text as usual.

Format: {{Products}}…{{/Products}}

Examples:

1. Display all products name, description and price
​{{Products}}
​{{Name}} - {{Description}} - ${{Price}}
​{{/Products}}

2. Display top 10 products with images where category equals Clothing ordered by Price in decreasing order.
​{{Products: Category = Clothing : LimitBy = 10 : OrderBy > Price}}
​{{Image}} {{Name}} - ${{Price}}
​{{/Products}}

3. Display all products with images where field Description has word Sale and order by Category.  Show images with Fit positioning, with maximum width 100px and height 200px

4. Display 20 products from position 41 ordered by price in increasing order. This example could be useful for displaying product lists on multiple pages.

Format: {{Categories}}…{{/Categories}}

Examples:

1. Simple iteration displaying category name
​{{Categories}}
​{{Name}}
​{{/Categories}}

2. Iteration displaying category name, thumbnail, description and product count where product count is more than 0.
​{{Categories: ProductCount > 0}}
​{{Thumbnail:Fit:50:50}}  {{Name}} ({{ProductCount}}) {{Description}}
​{{/Categories}}

3.  Display categories with substring Shoes sorted by name with positive product count.  Show full category name (includes parent name)
​{{Categories: Name ~ Shoes: ProductCount > 0 : OrderBy > Name }}
​{{FullName}}
​{{/Categories}}

4.  Display product names with prices grouped by categories.
​Note: Products inside {{Categories}} iterator will be automatically limited to this category.
​{{Categories}}
​{{Name}}
​{{Products}}
​{{Name}} - ${{Price}}
​{{/Products}}
​{{/Categories}}

5.  Display categories with parent category Clothing
​{{Categories: Parent = Clothing }}
​{{Name}}
​{{/Categories}} 

Format: {{Variants}}…{{/Variants}}

{{Variants}} iterator can be placed inside {{Product}} iterator or in any text box linked to the product.

Examples:

1. Simple iteration displaying variants first option and price
​{{Variants}}
​{{Option}} - ${{Price}}
​{{/Variants}}

2. Iterator with named options (e.g. Color and Size) and price more than 10
Note: you can reference options by name or index – Color or Option:1 (same as Option), Size or Option:2. It could be convenient for categories with different options sharing the same template.
​{{Variants: Price > 10 }}
​{{Color}} / {{Size}} - ${{Price}}
​{{/Variants}}

same as

3. Display all products with variants. Separator will show symbols (or string) between options.

4.  Display product names with prices grouped by categories.  Products inside {{Categories}} iterator will be automatically limited to this category.

Tables will make your text aligned automatically.

In order to make edits, click to edit text box, open text box in popup and switch to Code mode.
​

Basic example – copy into Code view. Switch after adding this code into Normal view and format as needed. You can add columns for any field or keep them empty.
​
​<!--{{Categories}}-->
​{{Name}}
​<table>
​<tr>
​<td>Code</td><td>Name</td><td>Price</td>
​</tr>
​<!--{{Products}}-->
​<tr>
​<td>{{Code}}</td><td>{{Name}}</td><td>{{Price}}</td>
​</tr>
​<!--{{/Products}}-->
​</table>
​<!--{{/Categories}}--> 

Note: <!–… –> is hiding text in normal view (used for comments in HTML)

Use AltRow flag for styling even columns

<table>
<tbody>
<!--{{Products}}-->
<tr style="background-color:{{If AltRow}}#efefef{{Else}}#ffffff{{/If}};">
<td>{{Name}}</td>
</tr>
<!--{{/Products}}-->
</tbody>
</table>

Use {{If condition}}…{{Else}}...{{/If}} to show text if condition is true.

Examples

{{If Price > 100}} High price {{/If}}
{{If Price > 100}} High price {{Else}} Low price {{/If}}

{{If Description}} {{Description}} {{/If}}
{{If !Description}} {{Category.Description}} {{/If}}
{{If Description}} product: {{Description}} {{Else}} category: {{Category.Description}} {{/If}}

{{If Tag~sale}} Sale: {{Sale Price}} {{/If}}

You can use it inside any iterator

{{Products}}
{{Name}} – {{If Price}} ${{Price}} {{Else}} N/A {{/If}}
{{/Products}}