> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/product-grid/customize-apps-product-list-template.md).

# Customize the app's product list template

For stores that need layout control beyond the built-in options, expose the app's product list template for direct customization.

## What this does

For stores that need layout control beyond the built-in options, this hands a developer the exact Liquid markup the app uses to render each product card, as an editable file that lives in your own theme — instead of being limited to the settings in **Settings > Product grid**. Nothing changes on your storefront the moment you turn on the switch by itself: the app generates a starting-point template and an include snippet for you 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 the setting as if it were off.

## 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 [Choose product list template](/product-grid/choose-product-list-template.md) options first.

## Steps

1. In the app, go to **Settings > Product grid**.
2. In the **Advanced** card, turn on **Custom product list 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.product.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:

   ```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 -%}
   ```
5. Save the theme file, then click **Save** on the app's Settings page to keep the switch on. Once `snippets/globo.filter.product.liquid` exists in your theme, the app picks it up automatically.

While a custom template is on, the card content, image size, and swatch settings on the Product grid page stop applying — your template controls them instead.

![Settings > Product grid — Custom product list template switch with the Copy template / Copy code steps](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-8d02d54aaeaf9bcdc97ada34524284c9a28bc801%2Fsettings-product-card-customize-template.png?alt=media)

## Related pages

* [Choose product list template](/product-grid/choose-product-list-template.md)
* [Customize filter sidebar template](/filters/filter-sidebar-design/customize-filter-sidebar-template.md)