All Collections
Designing your catalog
Using colors in your catalog design
Using colors in your catalog design

How to use block colors in your catalog design for categories, collection, product lists, headers and footers

Updated over a week ago

Catalog Machine lets you use block colors in catalog design:

  • Add colors for your product categories and collections and use them in design

  • Design product price list sections

  • Define colors for catalog headers and footers

  • Use colors in template design including directly in text HTML styles

Add categories and collection colors

Assign colors on the edit screen for categories. Go to https://www.catalogmachine.com/app/products/categories and choose your category.
​ 

A collection color can be assigned from the collections page https://www.catalogmachine.com/app/products/collections in opened edit popup.

Use colors in the product price list design

You can assign colors for many elements in a product price list design section. 

Assign colors for

  • Groups (categories, collections). Select 'Use Categories background color' checkbox to replace a color with a category / collection color (if assigned ).

  • Product list header

  • Product rows

  • Grid border

Define colors for catalog headers and footers

Assign header and footer colors for all headers or footers in the catalog properties popup. 

You have an option to override a color with a category / collection color (if assigned). A header will use a category or collection of the first product on the page and footer of the last product.

Each page can redefine a header or footer color (from Page Settings tab) and assign a page background color.

Use colors in template design

Add background element and assign background color. Select a color source if you want to use category, collection or catalog prime theme color.

If product category / collection has assigned color, it will be used instead of the default. Check this in a template preview mode: 

Finally, you can use direct text edit of your product text box HTML. 

1. Open a full editor

2. Switch to HTML mode and add or edit HTML style attribute for color. You can use
{{Collection.Color}} or {{Category.Color}} expressions. (Please switch back to text mode after to store your HTML changes.)

Preview results

You can even use conditional expression to define what color to use if it is not assigned
{{If Collection.Color}}{{Collection.Color}}{{Else}}#cccccc{{/If}}
Read more here about product expressions.

Did this answer your question?