> 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/choose-product-list-template.md).

# Choose product list template

Decide whether filtered and searched products are shown using your theme's own product card design, or the app's built-in template.

## What this does

This decides which product card design shoppers see in filtered/searched results.

* **Theme template** — filtered and searched products use the exact same product card markup and styling as the rest of your storefront (your normal collection pages, homepage, etc.), so results look identical to browsing normally. Only available on [supported Shopify themes](/getting-started/supported-shopify-themes.md).
* **App template** — filtered and searched products use the app's own card design instead. It won't automatically match your theme's exact styling, but it unlocks the app's own card options: five **Card style** designs, products per row for each screen size, image ratio, typography and colors, and what each card shows (second image on hover, vendor, price, add to cart, quick view, rating, sold out and sale labels).

Choosing **Theme template** hides the card style, grid, and card content settings, because your theme controls those. The **Variants** settings ([show the matching variant](/product-grid/display-chosen-variant-image-after-filtering.md), [variant-specific product URLs](/product-grid/use-variant-specific-product-urls.md)) and the [custom product list template](/product-grid/customize-apps-product-list-template.md) work with either template.

## Steps

1. In the app, go to **Settings > Product grid** (under **Appearance** in the Settings menu).
2. In the **Card template** card, click **App template** or **Theme template**.
3. If you chose **App template**, pick a **Card style**: **Overlay**, **Carousel**, **Inline**, **Icon**, or **Static**. Hover a tile to see it animate.
4. Click **Save** in the bar at the top of the page.

![Settings > Product grid — Card template with App template / Theme template and Card style](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-9729fc9e2a031e9ee52848a569e765a109fab8cb%2Fsettings-product-card-template.png?alt=media)

If your theme isn't on the supported list, a notice appears under **Theme template** — use **App template** instead, or contact us.

## App template options

With **App template** selected, these cards appear on the same page:

* **Grid** — **Products per row** for **Desktop** (1280px and up), **Laptop** (1024–1279px), **Tablet** (768–1023px), and **Mobile** (under 768px), plus **Image ratio**: **Square**, **Portrait**, **Landscape**, or **Adapt to image**.
* **Product title** — font family, size, text transform, and colors.
* **Card content** — turn on or off and style each part of the card: **Second image on hover**, **Product vendor**, **Product price**, **Add to cart button**, **Quick view button**, **Product rating**, **Sold out label**, **Sale label** (shown as **Sale amount**, **Sale percentage**, or **Sale text**), and **Text alignment**.
* **Variants > Swatches on the card** — show option values as swatches under the image; see [Color swatch for filter option](/filters/filter-options/color-swatch-for-filter-option.md) for setting swatch colors.

## Related pages

* [Supported Shopify themes](/getting-started/supported-shopify-themes.md)
* [Customize the app's product list template](/product-grid/customize-apps-product-list-template.md)
* [Display chosen variant image after filtering](/product-grid/display-chosen-variant-image-after-filtering.md)