Customize filter sidebar template

Hand a developer the app's own filter sidebar markup as an editable theme file, for layout control beyond the built-in style options.

What this does

For stores that need layout control beyond Change filter tree style's built-in options, this hands a developer the exact Liquid markup the app uses to render the filter sidebar/tree, as an editable file that lives in your own theme. Turning on the switch by itself changes nothing on your storefront: the app generates a starting-point template and an include snippet to copy, but a developer still has to create the file, paste the template in, and wire it into your theme before anything takes effect. Until that file actually exists in your theme, the app falls back to its normal built-in filter sidebar.

This customization is only used on the storefront when the filter being displayed has the same layout as your store-wide Filter layout setting — if a specific filter has its own different layout override, the custom template is skipped for that filter and the built-in layout is used instead.

Prerequisites

• Comfortable editing Liquid and adding a file to your theme (or a developer to do this for you). This is a developer-facing customization, not something most stores need — try the built-in Change filter tree style options first.

Steps

1. In the app, go to Settings > Filter panel.

2. In the Advanced card, turn on Custom filter tree template. Two steps appear below it:

3. Create custom template file. Click Copy template to copy the generated starting-point markup, then in Shopify's code editor, create a new file at snippets/globo.filter.tree.liquid in your theme and paste it in.

4. Include custom template file to your theme. Click Copy code, then paste it into your theme's theme.liquid file, right before the closing </body> tag:

   {%- capture treeTemplate -%}{% render 'globo.filter.tree' %}{%- endcapture -%}{%- unless treeTemplate contains 'Liquid error' -%}<script id="gspfFilterTree" type="template/html">{{- treeTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%}

5. Save the theme file, then click Save on the app's Settings page to keep the switch on. Once snippets/globo.filter.tree.liquid exists in your theme, the app picks it up automatically.

While a custom template is on, the Design settings on the Filter panel page no longer apply to the filter tree — style it in your template instead.

Settings > Filter panel — Custom filter tree template switch with the Copy template / Copy code steps

Related pages

• Change filter tree style

• Customize the app's product list template