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

   {%- 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

Related pages

• Choose product list template

• Customize filter sidebar template