# 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.

<figure><img src="https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2FcvdnlBxTnaSmapHaSsAS%2Fimage.png?alt=media&#x26;token=1c58ef65-8c71-43e3-a647-81a9a8f5015c" alt=""><figcaption></figcaption></figure>

### ⚡️**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.​

<figure><img src="https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fc3ONnpRacg5sn96G5Sld%2F2025-04-24_16-10-32.png?alt=media&#x26;token=1b5808b8-96b5-4b63-b096-3dadfeb727e6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fk9iueEu2eaJyyLMiCZwu%2F2025-04-24_15-53-28.png?alt=media&#x26;token=d791176a-e9c1-4bce-b28c-b59f90174793" alt=""><figcaption></figcaption></figure>

* 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:**

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

```liquid
{%- 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 -%}
```

6. 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 **<contact@globosoftware.net>** – we’re happy to assist! 😊