You automatically have the ability to set different styling to 'odd' and 'even' rows/columns in the software so you could do the following to alternate the background colours of products:
* switch to the 'Design' tab
* ensure that you have a product highlighted in the content tree
* click on the preview pane somewhere within the product
* use the 'navigate to parent' icon to move through your layouts until you see your product list layout in the 'layout code' window (it will be called something like 'Product List With Horizontal Dividers')
* you will see a link in the layout like:
* click on this link to open the 'List Layout Settings' dialogue window
* click on the 'Edit Rows and Columns' tab
* then click on the 'Odd/Even' sub-tab
* you can then enter the styling code you want to use to set the background colour - for example:
* this will alternate your products with red and green background.
If you would rather specify a different colour for every product then you can do the following:
1. go to 'Design | Library | Variables', right-click on 'Appearance Settings' and select 'New Variable'.
2. Give it a name of 'ProductBackgroundColor' and use a prompt of 'Background Color for Product'.
3. Under 'Place of Setting', select 'Site', 'Section' and 'Product' and set the 'Panel/Tab Name' to 'General'.
4. In 'Top Level Value', enter whatever you want to set as the default background colour to your products e.g. 'white' or '#ffffff'.
5. Click 'OK' and close the library.
Because the colour is to be set at product level we can't add the new variable into the list layout settings, so we will have to move part of the 'list layout' settings into the product layout:
1. click on the 'Design' tab
2. click anywhere on a product in the 'Preview Pane'
3. look for the 'Product List' layout on the layout breadcrumb at the bottom of the screen (v9 and above) and click on it to display the code in the 'Layout code' window
Alternatively, use the 'Navigate to Parent' icon in the layout code window until the 'Product List' layout is displayed
4. click on the link to edit the 'List Layout Settings' and then click on the 'Edit Rows and Columns' tab
5. on the 'First/Middle/Last' sub-tab you need to cut the code from the 'Before Row/Middle Rows' field and the 'First Item/Before' field
Note: the code in your list layout settings may be different to what is shown depending on the layout/theme being used
6. paste it into your product layout at the very beginning and click 'Apply'
7. add:
'style="background-color: <actinic:variable name="ProductBackgroundColour" />;"
to the '<td> tag, so it looks something like:
8. click 'Apply'
9. then go back to the list layout settings and cut the 'First Item/After' and 'After Row' code (remove any other code showing in other fields)
10. paste it into your product layout at the very end and click 'Apply' (Note, that this change should be made to all product layouts used in your store)
11. set a colour in the 'Background Color for Product' field on the 'General' tab of a product in the format of the colour name (e.g. red) or a hexadecimal number (e.g. #ff0000) and preview the page to see the effect.
* switch to the 'Design' tab
* ensure that you have a product highlighted in the content tree
* click on the preview pane somewhere within the product
* use the 'navigate to parent' icon to move through your layouts until you see your product list layout in the 'layout code' window (it will be called something like 'Product List With Horizontal Dividers')
* you will see a link in the layout like:
* click on this link to open the 'List Layout Settings' dialogue window
* click on the 'Edit Rows and Columns' tab
* then click on the 'Odd/Even' sub-tab
* you can then enter the styling code you want to use to set the background colour - for example:
* this will alternate your products with red and green background.
If you would rather specify a different colour for every product then you can do the following:
1. go to 'Design | Library | Variables', right-click on 'Appearance Settings' and select 'New Variable'.
2. Give it a name of 'ProductBackgroundColor' and use a prompt of 'Background Color for Product'.
3. Under 'Place of Setting', select 'Site', 'Section' and 'Product' and set the 'Panel/Tab Name' to 'General'.
4. In 'Top Level Value', enter whatever you want to set as the default background colour to your products e.g. 'white' or '#ffffff'.
5. Click 'OK' and close the library.
Because the colour is to be set at product level we can't add the new variable into the list layout settings, so we will have to move part of the 'list layout' settings into the product layout:
1. click on the 'Design' tab
2. click anywhere on a product in the 'Preview Pane'
3. look for the 'Product List' layout on the layout breadcrumb at the bottom of the screen (v9 and above) and click on it to display the code in the 'Layout code' window
Alternatively, use the 'Navigate to Parent' icon in the layout code window until the 'Product List' layout is displayed
4. click on the link to edit the 'List Layout Settings' and then click on the 'Edit Rows and Columns' tab
5. on the 'First/Middle/Last' sub-tab you need to cut the code from the 'Before Row/Middle Rows' field and the 'First Item/Before' field
Note: the code in your list layout settings may be different to what is shown depending on the layout/theme being used
6. paste it into your product layout at the very beginning and click 'Apply'
7. add:
'style="background-color: <actinic:variable name="ProductBackgroundColour" />;"
to the '<td> tag, so it looks something like:
8. click 'Apply'
9. then go back to the list layout settings and cut the 'First Item/After' and 'After Row' code (remove any other code showing in other fields)
10. paste it into your product layout at the very end and click 'Apply' (Note, that this change should be made to all product layouts used in your store)
11. set a colour in the 'Background Color for Product' field on the 'General' tab of a product in the format of the colour name (e.g. red) or a hexadecimal number (e.g. #ff0000) and preview the page to see the effect.