Complete example using separate filters. This example outputs each filter group in a separate tag pair rather than using the {list_groups}, {number_groups} etc. This is useful for customising the order, position and formatting of different filters.

reefine-seperate-filters-example.html

<div class="reefine" id="reefine">
	{exp:reefine filter:search:fields="title|product_type|colour"
	filter:search:type="search" filter:price:fields="price"
	filter:price:type="number_range"
	filter:fields="product_type|size|colour|store_availability"
	channel="clothes" parse="inward"
	url="/{segment_1}/{segment_2}/{product_type}/{size}/{colour}/{store_availability}/{price}/{search}/#reefine"
	seperate_filters="yes" }
	<div class="reefine_search">
		{search} {filters}
		<form method="post">
			<label for="{group_name}">Search</label> <input type="text"
				id="{group_name}" name="{group_name}" placeholder="search"
				value="{filter_title}" /> <input type="submit" name="submit"
				value="Go" />
		</form>
		{/filters} {/search}
	</div>
	<div class="reefine_sidebar">
		{if total_active_filters > 0}
		<div class="reefine_active_filters">
			<h3>Selected Criteria</h3>
			<ul>
				{active_groups} {if active_filters>0} {if type=='text'} {filters}
				<!--{url}{filter_quantity}{filter_min_value}{filter_max_value}{filter_min}{filter_max}-->
				{if filter_active}
				<li class="active"><a href="{url}">{filter_title}
						({filter_quantity})</a></li> {/if} {/filters} {if:else}
				<li class="active"><a class="remove-filter" href="{clear_url}">
						{filters} <!--{url}{filter_quantity}{filter_min_value}{filter_max_value}{filter_min}{filter_max}-->
						{if filter_active}{if active_index>0},
						{/if}{filter_title}{/if}{/filters}
				</a></li> {/if} {/if} {/active_groups}
			</ul>
			<p class="total_entries">{total_entries} products available</p>
		</div>
		{/if}
		<div class="reefine_filters">
			{product_type}
			<h3>Products</h3>
			<ul>
				{filters} {if filter_quantity > 0}
				<li class="{if filter_active}active{if:else}inactive{/if}"><a
					href="{url}">{filter_title} ({filter_quantity})</a></li> {/if}
				{/filters}
			</ul>
			{/product_type} {size}
			<h3>Size</h3>
			<ul>
				{filters} {if filter_quantity > 0}
				<li class="{if filter_active}active{if:else}inactive{/if}"><a
					href="{url}">{filter_title} ({filter_quantity})</a></li> {/if}
				{/filters}
			</ul>
			{/size} {colour}
			<h3>Colour</h3>
			<ul>
				{filters} {if filter_quantity > 0}
				<li
					class="{if filter_active}active{if:else}inactive{/if} colour_{filter_title}">
					<a href="{url}">{filter_title} ({filter_quantity})</a>
				</li> {/if} {/filters}
			</ul>
			{/colour} {price}
			<form method="post">
				<h3>Price between</h3>
				{if active_filters > 0} <a href="{clear_url}">Clear</a><br /> {/if}
				{filters} &pound; <input type="text" name="{group_name}_min"
					placeholder="{filter_min}" value="{filter_min_value}"
					style="width: 50px;" /> - &pound; <input type="text"
					name="{group_name}_max" placeholder="{filter_max}"
					value="{filter_max_value}" style="width: 50px;" /> {/filters} <input
					type="submit" name="submit" value="Go" />
			</form>
			{/price} {store_availability}
			<h3>Store</h3>
			<ul>
				{filters} {if filter_quantity > 0}
				<li class="{if filter_active}active{if:else}inactive{/if}"><a
					href="{url}">{filter_title} ({filter_quantity})</a></li> {/if}
				{/filters}
			</ul>
			{/store_availability}
		</div>
	</div>
	<div class="reefine_entries">
		{entries} {if entry_ids=='-1'}
		<p>No matching products found.</p>
		{/if} {exp:channel:entries entry_id="{entry_ids}"
		disable="categories|category_fields|member_data" dynamic="no"
		orderby="title" sort="asc" status="not closed" limit="8"
		paginate="yes"}
		<div class="reefine_product size_{size}">
			<div class="reefine_product_image">
				<img src="{product_image}" alt="{title}" />
			</div>
			<div class="reefine_product_caption">
				<a href="#"
					onclick="alert('You clicked ' + this.textContent);return false;">{title}</a>
				<div class="reefine_product_price">&pound;{price}</div>
			</div>
			<div class="reefine_product_links">
				<a href="#">Buy Now</a> | <a href="#">Read More</a>
			</div>
		</div>
		{paginate}
		<div class="paging">Page {current_page} of {total_pages} pages
			{pagination_links}</div>
		{/paginate} {/exp:channel:entries} {/entries}
	</div>
	{/exp:reefine}
</div>