Here you can learn how to create product filters for product lists in MyCashflow themes.

Adding product filter support to a theme

  1. Go to the admin panel's Products > Product attributes page.
  2. Define the necessary filters, their values and product features.

    Learn more about managing filters and assigning product features to products.

    Product filters won't be available in the online store if at least one of them is not visible.

  3. Add the <ProductListFilters supported="true"/> setting to the theme.xml file.

    The example below illustrates theme settings with support for product filters.

    ...
<Features>  
    <ProductListFilters supported="true"/>
    <BrandProductListFilters supported="true"/>
    <CampaignProductListFilters supported="true"/> 
</Features>
...

    If you'd like to use product filters on brand and campaign pages as well, you must also add the following settings:

    • <BrandProductListFilters supported="true"/>
    • <CampaignProductListFilters supported="true"/>

    Read more about theme settings.

  4. Add the {ProductListFilters} tag to the theme before product lists.

    The tag is available on all pages, but you may want to use it especially in connection with main product lists on product category, brand and campaign pages.

    See also the list of product filter tags.

    Within the same page, the {ProductListFilters} tags can be applied to only one product list.

    Product filters can be added only to product lists that have been created by using the {Products} tag.

    When you implement filters, you can also use search result page filters (if they have been implemented in the online store's theme).

    The tags on the search result page work in the same way. Simply change the tags' names to save time and effort during the implementation.

  5. Format filters according to your preferences.

Displaying product features on product pages

The internal default theme of MyCashflow includes built-in support for the feature.

You can set product features' values to be displayed on product pages by using the product filter Display as product feature on product pages setting.

In the product template, add the following markup to the location where you'd like to display product features:

{ProductFeatures(
  helper: {{
    {ProductAttributeValues(
      before: {{ <p class="ProductAttribute-{ProductAttributeId}"> }},
      after: {{ </p> }}
    )}
  }}
)}

See the individual parts of the example explained below:

  • The {ProductFeatures} tag creates a list that contains the product's features. The helper attribute defines how each feature should be displayed.
  • By default, {ProductAttributeValues} prints feature values as a comma-separated list.

    You can define the separator yourself by using the separator attribute or define the entire markup for each value by using the helper attribute.

  • For each feature, the {ProductAttributeId} tag adds their feature identifier, which is defined in the admin panel. This information can be used, for example, for writing CSS styles or scripts.