Horizontal filters provide an alternative layout for presenting filter options, offering a streamlined and space-efficient approach. This documentation guides you through the process of transforming vertical filters into horizontal filters within Merchandising Cloud's (formerly Findify's) app for Shopify merchants.
Instructions
Step 1: Configure findify-grid-search.liquid
- In the
findify-grid-search.liquid file, locate the div#findify-search-main element. - Add the attribute
data-template='horizontal' to this element. - Wrap filter and sorting into the
div.findify-filters_horizontal section.
Example:
JSX
<div id="findify-search-main" data-template="horizontal" class="findify-search-main"> <div class="findify-loader-overlay"> {% render 'findify-loader' %} </div> <div class="findify-filters_horizontal"> {% render 'findify-filters' , component_id: findify_filters_component_id, , active_filters: active_filters , color_layout: color_layout %} <!-- Sorting Block --> <div> {% render 'findify-sorting', options: sort_options, default: default_sort_by, selected: sort_by, is_modal: false %} </div> <!-- End Sorting Block --> </div> <!-- Product Grid Section --></div>
Step 2: Adjust findify-toolbar-desktop.liquid
Remove the below sorting block code from the findify-toolbar-desktop.liquid file.
JSX
<div> {% render 'findify-sorting' , options: sort_options , default: default_sort_by , selected: sort_by , is_modal: false %}</div>
Step 3: Update CSS Styles
In the findify-grid.css file, add the below CSS code.
CSS
.findify-search-main[data-template="horizontal"] { flex-direction: column;}
In the findify-filter.css file, add the below CSS code.
CSS
/* horizontal filters */.findify-filters-checkbox-item-value > span,.findify-filters--checkbox-nested-value > span { text-overflow: ellipsis; overflow: hidden; white-space: normal;}.price-range-input { max-width: 45px;}@media (min-width: 768px) { #findify-search-main[data-template="horizontal"] { width: 100%; } #findify-search-main[data-template="horizontal"] .findify-filters-wrapper { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; } #findify-search-main[data-template="horizontal"] #shopify-section-findify-filter-group { width: 210px; position: relative; } #findify-search-main[data-template="horizontal"] .findify-filters--body { position: absolute; background: white; z-index: 10; top: 100%; width: 100%; padding: 14px 0 5px 0; border-bottom: 1px solid #eee; } #findify-search-main[data-template="horizontal"] .findify-filters--body-wrapper { max-height: 220px; } #findify-search-main[data-template="horizontal"] .findify-filters--body-wrapper::-webkit-scrollbar { width: 4px; } #findify-search-main[data-template="horizontal"] .findify-filters--body-wrapper::-webkit-scrollbar-thumb { background: #000000; border-radius: 2px; } #findify-search-main[data-template="horizontal"] .findify-filters-container { border-bottom: none; } #findify-search-main[data-template="horizontal"] .findify-filter-group { border-bottom: 1px solid #d7d9d6; height: 46px; justify-content: flex-end; } .findify-search-header-toolbar .findify-search-header-toolbar-actions { display: none; } .findify-filters_horizontal { display: flex; } #findify-search-main[data-template="horizontal"] .findify-sorting-body { white-space: nowrap; } .findify-search-header-toolbar { justify-content: center; margin-bottom: 26px; }}
Step 4: Update findify-filter-group.liquid
- Change the
aria-expanded attribute from "true" to "false" in div.findify-filters-body. - Add the class
.findify-filters-container to the .findify-filter-group element. - Update
collapseFilterfunction
JSX
<script> const collapseFilter = () => { const element_id = "{{ element_id }}"; const filterGroupElement = document.getElementById(element_id); const [header, body] = filterGroupElement.querySelectorAll('div'); const horizontalContainer = document.querySelector(".findify-filters_horizontal"); const filterGroup = ".findify-filters-body"; const headerClickHandler = (e) => { e.preventDefault(); horizontalContainer .querySelectorAll(filterGroup) .forEach((filter) => { if (filter !== body) { filter.setAttribute("aria-expanded", ('false').toString()); } }); const isOpen = body.getAttribute("aria-expanded") === "true"; body.setAttribute("aria-expanded", (!isOpen).toString()); }; header.addEventListener("click", headerClickHandler); }; collapseFilter();</script>
By following these steps and integrating the provided code snippets, you can seamlessly transform vertical filters into horizontal filters, enhancing the usability and aesthetics of your Shopify store.
For further assistance or inquiries, feel free to contact us on YourFriends@Findify .io.