> 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 toggles and fields in **Settings > Product card**. Nothing changes on your storefront the moment you check the box 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 card**.
2. Check **I want to customize the product list template**. Two steps appear:
3. **Step 1 — 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. **Step 2 — 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. Once `snippets/globo.filter.product.liquid` exists in your theme, the app picks it up automatically — there's nothing to save on the app's own Settings page beyond checking the box.

![Settings > Product card — "I want to customize the product list template" checkbox and copy-template/copy-code steps](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-9004c8a81927bb82f859a21cd5442b0cc6db829d%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)