This live article has been redirected to V2 version. Please do not unpublish the article.
Please note below Manual Setup steps are only for Advanced Developer who is experienced in HTML, CSS, Liquid, Javascript.
Step 1: Upload asset files
1
Download and extract the Asset files from this Zip package: http://bit.ly/bcManualSetupSource
For setting up the filter feature only, use folders below:
Vertical Filter:
bc-filter-assets-vHorizontal Filter:
bc-filter-assets-h
For setting up both filter and the search feature, use folders below:
Vertical Filter:
bc-filter-search-assets-vHorizontal Filter:
bc-filter-search-assets-h
2
Upload the following files:
All files in snippets folder into Snippets folder.
All files in assets folder into Assets folder.
Step 2: Update theme.liquid file
1
Go to Layouts folder and open theme.liquid file.
2
Before the </head> tag, add the following script:
{% include 'bc-sf-filter-style' %}3
Before the </body> tag, add the following script:
{% include 'bc-sf-filter' %}Step 3: Update your collection template file (section/collection-template.liquid)
If your theme does not have this file, please use templates/collection.liquid instead)
1
Copy all content below and paste it to the bottom of the file.
Note: The usage of this script is to get Settings of your current theme and the translation texts from Liquid files, then use them in the Javascript file to rebuild the elements in the Collection page.
<script> // Declare bcSfFilterConfig variable var bcSfFilterConfig = { label: { sorting: {% assign temp = 'collections.sorting.title' | t %} {% unless temp contains 'translation missing' %} {{ temp | json }} {% else %} "Sorting" {% endunless %}, sorting_best_selling: {% assign temp = collection.sort_options[1].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Best Selling" {% endunless %}, sorting_featured: {% assign temp = collection.sort_options[0].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Featured" {% endunless %}, sorting_title_ascending: {% assign temp = collection.sort_options[2].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Alphabetically, A-Z" {% endunless %}, sorting_title_descending: {% assign temp = collection.sort_options[3].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Alphabetically, Z-A" {% endunless %}, sorting_price_ascending: {% assign temp = collection.sort_options[4].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Lowest Price" {% endunless %}, sorting_price_descending: {% assign temp = collection.sort_options[5].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Highest Price" {% endunless %}, sorting_date_ascending: {% assign temp = collection.sort_options[6].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Date, Old to New" {% endunless %}, sorting_date_descending: {% assign temp = collection.sort_options[7].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Date, New to Old" {% endunless %}, sorting_relevance: {% assign temp = 'collections.sorting.relevance' | t %} {% unless temp contains 'translation missing' %} {{ temp | json }} {% else %} "Relevance" {% endunless %}, sale: {{ 'products.product.on_sale' | t | json }}, sale_price: {{ 'products.product.sale_price' | t | json }}, sold_out: {{ 'products.product.sold_out' | t | json }}, vendor: {{ 'products.product.vendor' | t |json }}, regular_price: {{ 'products.product.regular_price' | t | json }}, items_with_count_one: {{ 'collections.general.items_with_count.one' | t | json}}, items_with_count_other: {{ 'collections.general.items_with_count.other' | t | json }}, current_page: {{ 'general.pagination.current_page' | t | json }}, }, custom: { // Add custom value here } }; </script>2
Add the Filter Tree block into the area you would like to display the Filter Tree:
<div id="bc-sf-filter-tree-mobile"></div> <div id="bc-sf-filter-tree"></div>
Note: bc-sf-filter-tree-mobile is used to render the Refine By button on mobile display.
3
Rebuild the Product list after filtering (See more at Step 4): put the id bc-sf-filter-products to the container of the product loop.
For example:
If your product list looks like this:
<div class="grid grid--uniform grid--view-items"> {% for product in collection.products %} {% include 'product-item' %} {% endfor %} </div>You could change it into:
<div id="bc-sf-filter-products" class="grid grid--uniform grid--view-items"> {% for product in collection.products %} {% include 'product-item' %} {% endfor %} </div>If your product list looks like this:
<ul class="product-list"> {% for product in collection.products limit: productsPerPage %} {% include 'product-item' %} {% endfor %} </ul>You could change it into:
<ul id="bc-sf-filter-products" class="product-list"> {% for product in collection.products limit: productsPerPage %} {% include 'product-item' %} {% endfor %} </ul>Note: After filtering, our app- Shopify Product Filter & Search app will render the products list by the Javascript code. This means you need to analyze the structure of the theme's product item in the file assets/bc-sf-filter.js and update the new data to bc-sf-filter-products. In order to analyze the structure of the product item, please refer to this document.
4
Build the Pagination block (See more in Step 5)
Replace the Pagination block of the theme by our block:
<div id="bc-sf-filter-bottom-pagination"></div> <div id="bc-sf-filter-load-more"></div>
Note: The default Shopify pagination and sorting of your theme do not work with our app. We need to replace the theme's pagination and sorting block by our blocks.
5
Build the Sorting block
Replace the Sorting block of the theme by our block:
div id="bc-sf-filter-top-sorting"></div>
Step 4: Rebuild the products list after filtering
1
Go to assets/bc-sf-filter.js file, find productGridItemHtml and you will see our sample of a product item's HTML template.
2
Rebuild the template based on the product item of the theme in the liquid file (usually in Snippets folder)
3
Go to buildProductGridItem function and apply our API data.
Step 5: Build pagination
1
Go to assets/bc-sf-filter.js file, find the Pagination Template as below:
previousActiveHtml : the previous button when it is active (current page is greater than 1)
previousDisabledHtml : the previous button when it is disabled (current page is greater than 1)
nextActiveHtml : the next button when it is active (current page is not the last page)
previousDisabledHtml : the next button when it is disabled (current page is the last page)
pageItemHtml : the page numbers when it is not selected.
pageItemSelectedHtml : the page numbers when it is selected.
pageItemRemainHtml : three dots to show that there are a lot of pages.
paginateHtml : the container of Pagination.
2
Rebuild the template to match the theme's Pagination.
Step 6: Build Sorting option
1
Go to assets/bc-sf-filter.js file, find the below Pagination Template:
paginateHtml : the container of Pagination.
2
Rebuild the template to match the theme's Sorting.
Step 7: Customize the styling
Go to assets/bc-sf-filter.scss.liquid file and add your custom css.
Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.