Customize app's product list template

Customizing the product list template in your Shopify store allows you to tailor the appearance and functionality of your collection pages to better align with your brand and enhance the shopping experience. The Smart Product Filter & Search app facilitates this customization. Here's how to proceed:

1. Enable File Editing in the App Settings

Open the Smart Product Filter & Search app from your Shopify admin panel.
Navigate to the Settings section.
Ensure that the option to allow file editing is enabled. This setting permits you to customize the app's files directly.

2. Access Your Theme's Code

From your Shopify admin, go to Online Store > Themes.
Locate the theme you wish to edit and click on Edit code.

3. Create a new file

In the Snippets directory, create the globo.filter.product.liquid file.

Copy the code as screenshot below, then insert it into this new file.

Proceed to make your desired customizations within this file.

4. Save Your Changes

After completing your edits, click Save to apply them.

5. Add Code to the theme.liquid for customization to take effect

After customizing the template, you need to insert the following code into your theme.liquid file to ensure your changes render properly.

How to Add the Code:

In your Shopify admin, go to Online Store → Themes.
Click Actions → Edit Code.
Open the theme.liquid file.
Scroll to the bottom and find the </body> tag.
Paste the following code right above the </body> tag:

{%- capture productTemplate -%}{% render 'globo.filter.product', themeTranslation: shop.metafields.globoFilter.themeTranslation.value[request.locale.iso_code] %}{%- endcapture -%}{%- unless productTemplate contains 'Liquid error' -%}<script id="gspfProduct" type="template/html">{{- productTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%} 
{%- capture treeTemplate -%}{% render 'globo.filter.tree' %}{%- endcapture -%}{%- unless treeTemplate contains 'Liquid error' -%}<script id="gspfFilterTree" type="template/html">{{- treeTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%} 
{%- capture sortTemplate -%}{% render 'globo.filter.sort' %}{%- endcapture -%}{%- unless sortTemplate contains 'Liquid error' -%}<script id="gspfFilterSort" type="template/html">{{- sortTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%} 
{%- capture searchTemplate -%}{% render 'globo.filter.search' %}{%- endcapture -%}{%- unless searchTemplate contains 'Liquid error' -%}<script id="gspfSearchResult" type="template/html">{{- searchTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%} 
{%- capture paginationTemplate -%}{% render 'globo.filter.pagination' %}{%- endcapture -%}{%- unless paginationTemplate contains 'Liquid error' -%}<script id="gspfPagination" type="template/html">{{- paginationTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%} 
{%- capture YMMTemplate -%}{% render 'globo.filter.form' %}{%- endcapture -%}{%- unless YMMTemplate contains 'Liquid error' -%}<script id="gspfForm" type="template/html">{{- YMMTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%}

Click Save

⚠️ Important Notes:

Preventing Overwrites: The Do not edit this file comment ensures that the app does not overwrite your customizations when settings are changed within the app.
Editable Product Attributes: When customizing, you can utilize various product attributes, including:
- product.available
- product.collections
- product.compare_at_price
- product.description
- product.featured_image
- product.first_available_variant
- product.handle
- product.id
- product.images
- product.options
- product.price
- product.price_max
- product.price_min
- product.price_varies
- product.tags
- product.template_suffix
- product.title
- product.product_type
- product.url
- product.variants
- product.vendor

💬 Need Help? Contact us at [email protected] – we’re happy to assist! 😊

PreviousUse app product list layout NextProduct variants under product card

Last updated 15 days ago

{%- capture productTemplate -%}{% render 'globo.filter.product', themeTranslation: shop.metafields.globoFilter.themeTranslation.value[request.locale.iso_code] %}{%- endcapture -%}{%- unless productTemplate contains 'Liquid error' -%}<script id="gspfProduct" type="template/html">{{- productTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%} {%- capture treeTemplate -%}{% render 'globo.filter.tree' %}{%- endcapture -%}{%- unless treeTemplate contains 'Liquid error' -%}<script id="gspfFilterTree" type="template/html">{{- treeTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%} {%- capture sortTemplate -%}{% render 'globo.filter.sort' %}{%- endcapture -%}{%- unless sortTemplate contains 'Liquid error' -%}<script id="gspfFilterSort" type="template/html">{{- sortTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%} {%- capture searchTemplate -%}{% render 'globo.filter.search' %}{%- endcapture -%}{%- unless searchTemplate contains 'Liquid error' -%}<script id="gspfSearchResult" type="template/html">{{- searchTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%} {%- capture paginationTemplate -%}{% render 'globo.filter.pagination' %}{%- endcapture -%}{%- unless paginationTemplate contains 'Liquid error' -%}<script id="gspfPagination" type="template/html">{{- paginationTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%} {%- capture YMMTemplate -%}{% render 'globo.filter.form' %}{%- endcapture -%}{%- unless YMMTemplate contains 'Liquid error' -%}<script id="gspfForm" type="template/html">{{- YMMTemplate | replace: "script>", "scripttag>" -}}</script>{%- endunless -%}