I am trying to create a professional filter menu, which hopefully will contain a ‘Sort By’ dropdown, and then a filter menu for customers to choose a specific Brand/Design. I’m not sure where I’m going wrong (but I’m not an expert!) I found some code on another site which looked to be the sort of thing I’m going for, but now I’m struggling trying to change it so it works for my site, and it fits in with my theme.
Any help would be much appreciated!
<div class="collection-listing mt-3 mt-lg-5">
<div class="container">
<div class="row">
<div class="col-12 col-md-3 col-xxl-2">
<div class="filter-container">
<div class="row no-gutters">
<div class="col-6 col-md-12 pr-2 pr-md-0">
<div id="bc-sf-filter-top-sorting"><label class="label--hidden">Sorting</label><select class="collection-sort__input"><option value="best-selling" selected="selected">Most Popular</option><option value="price-ascending">Price, Lowest to Highest</option><option value="price-descending">Price, Highest to Lowest</option><option value="title-ascending">Alphabetically, A-Z</option><option value="title-descending">Alphabetically, Z-A</option><option value="created-descending">New Arrivals</option><option value="created-ascending">Date Oldest to Newest</option></select></div>
</div><!-- col -->
<div class="col-6 col-md-12 pl-2 pl-md-0">
<h3 class="filter-title">Filters <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-down" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></h3>
</div><!-- col -->
</div><!-- row -->
<div class="filter-sidebar">
<div id="bc-sf-filter-tree-h"></div>
<div id="bc-sf-filter-tree-mobile"><button id="bc-sf-filter-tree-mobile-button" type="button">Refine By</button></div>
<!-- <div id="bc-sf-filter-tree"><div id="bc-sf-filter-options-wrapper"><div class="bc-sf-filter-option-block bc-sf-filter-option-block-list bc-sf-filter-option-block-category bc-sf-filter-option-hidden" data-id="pf_pt_category" data-type="product_type" data-display-type="list" data-select-type="multiple" data-title="Category" data-block-id="bc-sf-filter-option-block-category" data-collapse-pc="false" data-collapse-mobile="false" data-show-search-box-pc="false" data-show-search-box-mobile="false" data-show-more-type="scrollbar"><div class="bc-sf-filter-block-title"><h3><span>Category</span></h3></div><div class="bc-sf-filter-block-content"><ul class="bc-sf-filter-option-multiple-list"><li><input type="checkbox" onclick="onInteractWithFilterOptionValue(event, this, 'product_type', 'list', 'multiple', 'false')" class="" data-id="pf_pt_category" data-value="Pyjamas" data-parent-label="Category" data-title="Pyjamas" data-count="13" rel="nofollow">
</div><!-- filter-sidebar -->
</div><!-- filter-container -->
</div><!-- col -->