[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore headless cms multiple page template in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-overview)

[Managing content with 'scopes' and 'requiredScopes'](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-managing-content-with-scopes-and-requiredscopes)

[Multiple page templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template)

[Previewing Headless CMS in development mode](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode)

[Widgets for Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-widgets)

[Customizing pages with Dynamic Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/dynamic-content-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-overview)

[Managing content with 'scopes' and 'requiredScopes'](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-managing-content-with-scopes-and-requiredscopes)

[Multiple page templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template)

[Previewing Headless CMS in development mode](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode)

[Widgets for Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-widgets)

[Customizing pages with Dynamic Content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/dynamic-content-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-overview)

Multiple page templates

Multiple page templates allow the creation of flexible layouts for Product Details and Product Listing Pages (PDPs and PLPs) in Headless CMS. This feature allows you to create and manage pages hierarchically, leveraging product information, user context, product type, brand specifications, and template hierarchy.

This document outlines the implementation details, usage instructions, and template hierarchy logic for integrating the templates into your FastStore project.

## Before you begin

To use this feature, update your FastStore project to `v3.0.17` or higher. To do this, follow these steps:

1. Open your project in a code editor.
2. Open a terminal and run the following command to update the FastStore packages to the latest version:

`1

yarn upgrade -L --scope @faststore

`

1. Run `yarn dev` to apply the changes to your project.

## Creating a multiple page template

To add multiple templates to your FastStore project, follow the steps below:

1. Go to the VTEX Admin and navigate to **Storefront > Headless CMS**.
2. Select your FastStore project.
3. Click `Create Document` and choose between `Product Page` and `Product List Page`.
4. Now that you have created the template, check the \[Template hierarchy logic\] section to learn how to use and edit the template.

> To learn how to edit the name, publish, duplicate, or delete the template, see the [Managing pages in the Headless CMS](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/managing-pages--3DO6rBhZ1p3zndnFu5BgRt) guide.

## Template hierarchy logic

Both PDPs and PLPs use a similar logic for selecting the appropriate template to render. This logic prioritizes templates based on various criteria, starting with the most specific and moving to more generic templates, like department or generic PDP/PLP.

Here's the difference between Product Details and Product Listing Page template hierarchy:

| Feature                         | PDP hierarchy logic                                            | PLP hierarchy logic                                        |
| ------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------- |
| Matching Criteria               | Slug, Subcategory, Category, Department, Generic.              | Slug (subcategory, category, department implied), Generic. |
| Reliance on Product Information | Considers product details (subcategory, category, department). | Ignores product details beyond the slug.                   |

### PDP template selection criteria

The template selection process follows a specific hierarchy, starting with the most specific template and progressing towards a generic one if no exact match is found.

FastStore checks for templates in the following order:

Start

SKU Template exists?

Yes

Use SKU Template

No

Product Slug match?

Yes

Use matching template

No

Product Subcategory match?

Yes

Use matching template

No

Product Category match?

Yes

Use matching template

No

Product Department match?

Yes

Use matching template

No

Use generic template

The system first searches for a template named after the product slug. For example, if the product slug is `/blue-shirts/p`, FastStore will look for a template named `/blue-shirts/p`.

1. If an SKU template is available, it takes precedence over the product template. For example, if a template is available for slugs containing the SKU ID (e.g., `/blue-shirts-99988212/p`), this template will take precedence over a more generic product template for `/blue-shirts/p`.
2. If no SKU template is available, the system searches for one template based on the product slug.
3. If no template matches the slug, FastStore searches for a template based on the product subcategory. For example, if the subcategory is `summer clothing`, the system might look for `/clothing/shirts/summer-clothing/`.
4. Following the subcategory, the system checks for a template matching the product category. For example, if the category is `shirts`, the system might look for `/clothing/shirts/`.
5. If no match is found at the category level, FastStore searches for a template based on the product department. For example, if the department is `clothing`, the system might look for `/clothing/`.
6. If none of the above criteria match, the generic Product Page template is used. This template has an empty Template section value in the settings.

![{"base64":"  ","img":{"width":2490,"height":1010,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":220218,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/pdplist___d6f00d8bcfc23aecc477c97d487eebca.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/pdplist___d6f00d8bcfc23aecc477c97d487eebca.png)

### PLP template selection criteria

PLP templates are selected in FastStore based on URL slug matching.

The PLP template selection process follows this order:

1. FastStore system first checks for a template that matches the exact requested slug, such as `/office/chairs`. If a match is found, this template is used.
2. If no exact slug match exists, the system checks for a template matching the main department template slug (e.g., `/office` applies to `/office/chairs`). If a department template is found, it applies to all subcategory under that department by default. (e.g., `/office/chairs`, `/office/desks`).
3. If no department or category template matches, the generic PLP template with an empty template value in Headless CMS is applied.
4. If no template is found at any of these levels, the system uses the first available PLP template.

For example, you define the following in Headless CMS:

If there is a category named `computers` in your catalog, and two subcategory under `computers` named `tools` and `accessories`:

* Template value `/computers`: applies to both `/computers` and any slug under it unless overridden (e.g., `/computers/tools`).
* Template value `/computers/accessories`: applies only to `/computers/accessories`.
* Template value left empty: default template used if neither previous options match.

Resulting behavior:

* Visiting `/computers` uses the department template.
* Visiting `/computers/accessories` uses the category template.
* Visiting `/computers/laptop` (with no template defined for it) inherits the `/computers` template.
* Any slug not matched by the above uses the generic PLP template.

The table below summarizes the template selection logic:

| URL slug               | Template Defined For   | Applied Template                                        |
| ---------------------- | ---------------------- | ------------------------------------------------------- |
| /computers             | /computers             | Department template (exact match).                      |
| /computers/laptops     | None                   | Inherits /computers (falls back to department).         |
| /computers/accessories | /computers/accessories | Category template (overrides main department template). |
| /unknown-slug          | None                   | Default template (no matches, uses fallback).           |

#### Using Rewrites with PLP template

FastStore allows you to create custom routes using [Next.js rewrites](https://read.calvincode.net/reader?url=https://nextjs.org/docs/app/api-reference/next-config-js/rewrites). It is possible to enable the multiple page template feature for the custom route as well by adding your rewrites function into the `discovery.config.js` file as suggested in the [Next.js documentation](https://read.calvincode.net/reader?url=https://nextjs.org/docs/app/api-reference/next-config-js/rewrites):

1. Add your rewrite function to discovery.config.js:

`` 1

async rewrites() {

2

 return [

3

 {

4

 source: '/my-office',

5

 destination: `/office`,

6

 },

7

 ]

8

},

 ``

This rewrites the URL `/my-office` to the existing route `/office`, effectively using the `/office` template without modifying the displayed URL. This allows you to map the template in the Headless CMS to the `/office` route.

1. Alternatively, use the extended format:

`` 1

async rewrites() {

2

 return {

3

 beforeFiles: [

4

 {

5

 source: '/my-office',

6

 destination: `/office`,

7

 },

8

 ],

9

 afterFiles: [],

10

 fallback: [],

11

 }

12

},

 ``

This format offers more flexibility for advanced rewrite scenarios.

From version `3.0.61` of the `@faststore/core` package, it's also possible to use the `source` route in the Headless CMS to map the template. To update your store's `@faststore/core` package to the `3.0.61`, run the following command:

`1

yarn add @faststore/core@3.0.61

`

### Key difference between PDP and PLP template selection criteria

To sum up, here's the difference between the two template hierarchies:

| Feature                         | PDP Hierarchy logic                                            | PLP Hierarchy logic                                                                           |
| ------------------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| Matching Criteria               | Slug, Subcategory, Category, Department, Generic.              | Slug, fallback to main department, generic/default, fallback to first available PLP template. |
| Reliance on Product Information | Considers product details (subcategory, category, department). | Ignores product details and uses URL slug only.                                               |

## Examples of template selection

The following examples illustrate different scenarios for selecting PDP and PLP templates.

### PDP template selection example

For this example, we will explore three template scenarios to render in Headless CMS for the Apple Magic Mouse product:

* [Slug](#slug-template): Matches the product slug, e.g., `/apple-magic-mouse/p`. It offers the highest level of specificity.
* [Department](#department-template): Applies to products within a specific department category, such as `/technology/`, if no slug template is defined.
* [Generic PDP Template](#generic-pdp-template): Fallback template used if no other specific template matches.

#### Slug template

When using PDPs, this type of page template is recognized by the slug pattern. In the example, we will use the [Apple Magic Mouse product page](https://read.calvincode.net/reader?url=https://starter.vtex.app/apple-magic-mouse/p), which has the slug `/apple-magic-mouse/p`.

![{"base64":"  ","img":{"width":1956,"height":748,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":127265,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/pdpslug___95ada5a5b24e23e34c04f4837d11ade7.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/pdpslug___95ada5a5b24e23e34c04f4837d11ade7.png)

Adding the slug to this template makes it specific, prompting FastStore to prioritize it for rendering on the product page.

#### Department template

Products in [catalog](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/catalog-overview--77M8ItLhDXs6aBdQTqToVe) fall under a [category tree](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-is-a-category--6HV4Q3E2FauUoOQoiCCgCg), typically `/department/category/subcategory/`. For example, the product we’ve been using is in the `Technology department`, allowing you to create a department-specific template.

![{"base64":"  ","img":{"width":1952,"height":728,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":123617,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/pdpdepartment___387cf641f675d05666afeafc65a3e56b.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/pdpdepartment___387cf641f675d05666afeafc65a3e56b.png)

If this product is under a [subcategory](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-is-a-subcategory--2cb0aRkG3i6AeiAMM24iwY?%26utm%5Fsource=autocomplete), you can create a corresponding template. The category tree is used in the template input, separated by slashes.

![{"base64":"  ","img":{"width":2404,"height":740,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":144953,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/pdpsubcategory___566be1fd3bba2db777dd18881933292c.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/pdpsubcategory___566be1fd3bba2db777dd18881933292c.png)

You can also see the category hierarchy through the breadcrumb.

![{"base64":"  ","img":{"width":2658,"height":1832,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1378886,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/breadcrumb___c9c12da51f685572dfb3a9403168b26a.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/breadcrumb___c9c12da51f685572dfb3a9403168b26a.png)

#### Generic PDP template

If no matches are found for the slug or department, the generic template will be used to render the PDP. In this case, create a Headless CMS document with the `Product Page` option, leaving the **Template** field empty in the **Sections** tab.

![{"base64":"  ","img":{"width":2392,"height":788,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":121611,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/pdpgeneral___cdeeaf6060b529aea029e2e5814efc50.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/pdpgeneral___cdeeaf6060b529aea029e2e5814efc50.png)

### Product Listing Page (PLP) template selection example

For PLPs, we will go over the following possible templates:

* [Slug](#slug-template-plp)
* [Generic PLP](#generic-plp-template).

When using PLPs, this type of page template is recognized by the slug pattern. In the example, we will use the [office/chairs slug](https://read.calvincode.net/reader?url=https://starter.vtex.app/office/chairs) to render the PLP template.

#### Slug template (PLP)

Products in the catalog are organized within a category tree, structured as `/department/category/subcategory`. If a slug template exists for any of these options, it will be rendered accordingly.

For example, if you want to render a specific template for products inside a [department](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-is-a-department--22rKjmYWVmmKAK8CWa8yKw?%26utm%5Fsource=autocomplete) without considering the category or subcategory, you can create a Department template [/office](https://read.calvincode.net/reader?url=https://starter.vtex.app/office/chairs).

![{"base64":"  ","img":{"width":2078,"height":738,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":109256,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/plpdepartment___4c520237721ca14a722215a93e8cd4c7.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/plpdepartment___4c520237721ca14a722215a93e8cd4c7.png)

If this product were under a `subcategory`, it would still be possible to create a template representing this scenario. The category tree is used in the template slug input, as in the image below.

![{"base64":"  ","img":{"width":2380,"height":698,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":124747,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/plpsubcategory___ac973acd0b5d1745e848f1a0a94c5988.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/plpsubcategory___ac973acd0b5d1745e848f1a0a94c5988.png)

> If a more specific template, such as `/office/chairs`, exists, it will take precedence when the slug matches the same pattern.

#### Generic PLP

If no matches are found for the slug, the generic template will be used to render the PLP. In this case, create a Headless CMS page with the `Product List Page` option, leaving the Template field empty in the **Sections** tab.

![{"base64":"  ","img":{"width":2030,"height":736,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":102881,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/plpgeneral___d5ecb7ef0a45bb0bfa6280ec719d9b80.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/plpgeneral___d5ecb7ef0a45bb0bfa6280ec719d9b80.png)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F11325562%3Fv%3D4%26w=64%26q=75)](https://github.com/eduardoformiga)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/headless-cms/multiple-page-template.mdx)

[Managing content with 'scopes' and 'requiredScopes'« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-managing-content-with-scopes-and-requiredscopes)[Previewing Headless CMS in development modeNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-previewing-changes-in-development-mode)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F11325562%3Fv%3D4%26w=64%26q=75)](https://github.com/eduardoformiga)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23before-you-begin)

[Creating a multiple page template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23creating-a-multiple-page-template)

[Template hierarchy logic](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23template-hierarchy-logic)

[PDP template selection criteria](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23pdp-template-selection-criteria)[PLP template selection criteria](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23plp-template-selection-criteria)[Key difference between PDP and PLP template selection criteria](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23key-difference-between-pdp-and-plp-template-selection-criteria)

[Examples of template selection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23examples-of-template-selection)

[PDP template selection example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23pdp-template-selection-example)[Product Listing Page (PLP) template selection example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23product-listing-page-plp-template-selection-example)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/headless-cms/multiple-page-template.mdx)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23before-you-begin)

[Creating a multiple page template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23creating-a-multiple-page-template)

[Template hierarchy logic](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23template-hierarchy-logic)

[PDP template selection criteria](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23pdp-template-selection-criteria)[PLP template selection criteria](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23plp-template-selection-criteria)[Key difference between PDP and PLP template selection criteria](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23key-difference-between-pdp-and-plp-template-selection-criteria)

[Examples of template selection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23examples-of-template-selection)

[PDP template selection example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23pdp-template-selection-example)[Product Listing Page (PLP) template selection example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-multiple-page-template/docs/guides/faststore/headless-cms-multiple-page-template%23product-listing-page-plp-template-selection-example)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore organisms image gallery in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/molecules-overview)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-overview)

[BannerText](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-banner-text)

[CartSidebar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-cart-sidebar)

[EmptyState](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-empty-state)

[FilterSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-filter-slider)

[Filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-filter)

[Hero](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-hero)

[ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery)

[NavbarSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-navbar-slider)

[Navbar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-navbar)

[Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-newsletter)

[OutOfStock](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-out-of-stock)

[PaymentMethods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-payment-methods)

[PriceRange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-price-range)

[ProductGrid](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-product-grid)

[ProductShelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-product-shelf)

[RegionModal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-region-modal)

[SearchInput](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-search-input)

[ShippingSimulation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-shipping-simulation)

[SlideOver](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-slide-over)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/molecules-overview)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-overview)

[BannerText](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-banner-text)

[CartSidebar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-cart-sidebar)

[EmptyState](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-empty-state)

[FilterSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-filter-slider)

[Filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-filter)

[Hero](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-hero)

[ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery)

[NavbarSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-navbar-slider)

[Navbar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-navbar)

[Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-newsletter)

[OutOfStock](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-out-of-stock)

[PaymentMethods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-payment-methods)

[PriceRange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-price-range)

[ProductGrid](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-product-grid)

[ProductShelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-product-shelf)

[RegionModal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-region-modal)

[SearchInput](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-search-input)

[ShippingSimulation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-shipping-simulation)

[SlideOver](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-slide-over)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/components-index)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-overview)

ImageGallery

Used when you want to display a series of photos in a gallery on a post or page.

[ Source code](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/components/src/organisms/ImageGallery)

The `ImageGallery` is used when you want to display a series of photos in a gallery on a post or page.According to the quantity of `Image` to be displayed, the `ImageGallerySelector` will be displayed.

> Add the `data-fs-image` attribute in all `<img>` tags to ensure they work as expected. You can find an example in the `Code` tab below for reference.

Example

Code

![Magicwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000)

![Magicwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000)

![magicbox](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190923/lena-de-fanti-nQ_j5d-klVU-unsplash.jpg?v=637867501523500000)

![magicblackwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)

![magiccombo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190925/maheshkumar-painam-GZdfLeL-MDk-unsplash.jpg?v=637867502064000000)

![magicback](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190926/math-0U9fBLGP3EY-unsplash.jpg?v=637867502325830000)

![magictable](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190927/marek-levak-YPeqMN_wfw0-unsplash.jpg?v=637867502641430000)

![magichand](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190928/mouse8.jpg?v=637867504048970000)

![magicstyle](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190929/harpal-singh-KuvEVL7lXYQ-unsplash.jpg?v=637867509459130000)

![magicscale](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190930/chris-hardy-182PzOtcmWc-unsplash.jpg?v=637867509778300000)

---

## Usage

### Import the component

`1

import {

2

 ImageGallery,

3

 ImageGallerySelector,

4

 ImageGalleryViewer,

5

} from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import "@faststore/ui/src/components/organisms/ImageGallery/styles.scss";

`

For details, see [Importing FastStore UI component styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles).

---

## Examples

### With Selector (More than 1 Image)

Example

Code

![Magicwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000)

![Magicwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000)

![magicbox](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190923/lena-de-fanti-nQ_j5d-klVU-unsplash.jpg?v=637867501523500000)

![magicblackwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)

![magiccombo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190925/maheshkumar-painam-GZdfLeL-MDk-unsplash.jpg?v=637867502064000000)

![magicback](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190926/math-0U9fBLGP3EY-unsplash.jpg?v=637867502325830000)

![magictable](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190927/marek-levak-YPeqMN_wfw0-unsplash.jpg?v=637867502641430000)

![magichand](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190928/mouse8.jpg?v=637867504048970000)

![magicstyle](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190929/harpal-singh-KuvEVL7lXYQ-unsplash.jpg?v=637867509459130000)

![magicscale](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190930/chris-hardy-182PzOtcmWc-unsplash.jpg?v=637867509778300000)

### Without Selector

Example

Code

![Magicwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000)

---

## Design tokens

| Local token                             | Default value/Global token linked          |
| --------------------------------------- | ------------------------------------------ |
| \--fs-image-gallery-width               | calc(100% + (2 \* var(--fs-grid-padding))) |
| \--fs-image-gallery-transition-timing   | var(--fs-transition-timing)                |
| \--fs-image-gallery-transition-function | var(--fs-transition-function)              |
| \--fs-image-gallery-gap-mobile          | var(--fs-spacing-2)                        |
| \--fs-image-gallery-gap-notebook        | var(--fs-spacing-3)                        |

### Controls

| Local token                                             | Default value/Global token linked |
| ------------------------------------------------------- | --------------------------------- |
| \--fs-image-gallery-selector-control-bkg-color          | var(--fs-control-bkg)             |
| \--fs-image-gallery-selector-control-border-radius      | var(--fs-border-radius-circle)    |
| \--fs-image-gallery-selector-control-shadow             | var(--fs-shadow-darker)           |
| \--fs-image-gallery-selector-control-gradient-bkg-color | var(--fs-color-body-bkg)          |

### Current Selected Image

| Local token                               | Default value/Global token linked |
| ----------------------------------------- | --------------------------------- |
| \--fs-image-gallery-current-height        | 33.125rem                         |
| \--fs-image-gallery-current-border-radius | var(--fs-border-radius)           |

### Selector

| Local token                             | Default value/Global token linked      |
| --------------------------------------- | -------------------------------------- |
| \--fs-image-gallery-selector-max-height | var(--fs-image-gallery-current-height) |

#### Selector Elements

| Local token                                            | Default value/Global token linked          |
| ------------------------------------------------------ | ------------------------------------------ |
| \--fs-image-gallery-selector-elements-gap              | var(--fs-spacing-1)                        |
| \--fs-image-gallery-selector-elements-gap-notebook     | var(--fs-spacing-2)                        |
| \--fs-image-gallery-selector-elements-padding-mobile   | var(--fs-spacing-0) var(--fs-grid-padding) |
| \--fs-image-gallery-selector-elements-padding-notebook | var(--fs-spacing-0) 0                      |

#### Selector Thumbnail

| Local token                                                  | Default value/Global token linked                         |
| ------------------------------------------------------------ | --------------------------------------------------------- |
| \--fs-image-gallery-selector-thumbnail-width-mobile          | 3.5rem                                                    |
| \--fs-image-gallery-selector-thumbnail-height-mobile         | var(--fs-image-gallery-selector-thumbnail-width-mobile)   |
| \--fs-image-gallery-selector-thumbnail-width-notebook        | 4.5rem                                                    |
| \--fs-image-gallery-selector-thumbnail-height-notebook       | var(--fs-image-gallery-selector-thumbnail-width-notebook) |
| \--fs-image-gallery-selector-thumbnail-border-radius         | var(--fs-border-radius)                                   |
| \--fs-image-gallery-selector-thumbnail-border-width          | var(--fs-border-width-thick)                              |
| \--fs-image-gallery-selector-thumbnail-selected-border-color | var(--fs-border-color-active)                             |
| \--fs-image-gallery-selector-thumbnail-selected-border-width | var(--fs-border-width-thickest)                           |
| \--fs-image-gallery-selector-thumbnail-image-border-radius   | var(--fs-border-radius-small)                             |

---

## Data attributes

You can target and override `ImageGallery` styles using the following data attributes:

`data-fs-image-gallery`

`data-fs-image-gallery="with-selector | without-selector"`

`data-fs-image-gallery-selector`

`data-fs-image-gallery-selector-control`

`data-fs-image-gallery-selector-control-button`

`data-fs-image-gallery-selector-elements`

`data-fs-image-gallery-selector-thumbnail`

---

## Props

### ImageGallery

| Name                      | Type                  | Description                                                                            | Default          |
| ------------------------- | --------------------- | -------------------------------------------------------------------------------------- | ---------------- |
| **testId**                | string                | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-image-gallery |
| **images\***              | ImageElementData\[\]  | List of images that should be rendered.                                                |                  |
| **ImageComponent\***      | ImageComponentType    | Function that returns a React component that will be used to render images.            |                  |
| **selectedImageIdx\***    | number                | The currently active thumbnail.                                                        |                  |
| **setSelectedImageIdx\*** | (idx: number) => void | Event handler for clicks on each thumbnail.                                            |                  |

### ImageGallerySelector

| Name                               | Type                       | Description                                                                               | Default                       |
| ---------------------------------- | -------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------- |
| **testId**                         | string                     | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).    | fs-image-gallery-selector     |
| **currentImageIdx\***              | number                     | The currently active thumbnail.                                                           |                               |
| **aria-label**                     | string                     | For accessibility purposes, define a string that labels the current element.              |                               |
| **navigationButtonLeftAriaLabel**  | string                     | For accessibility purposes, define a string that labels the left navigation icon button.  | Backward slide image selector |
| **navigationButtonRightAriaLabel** | string                     | For accessibility purposes, define a string that labels the right navigation button icon. | Forward slide image selector  |
| **onSelect\***                     | (imageIdx: number) => void | Event handler for clicks on each thumbnail.                                               |                               |
| **images\***                       | ImageElementData\[\]       | List of images that should be rendered.                                                   |                               |
| **ImageComponent\***               | ImageComponentType         | Function that returns a React component that will be used to render images.               |                               |

### ImageElementData

| Name                | Type   | Description                                | Default |
| ------------------- | ------ | ------------------------------------------ | ------- |
| **url\***           | string | Image URL.                                 |         |
| **alternateName\*** | string | Alternative text description of the image. |         |

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62757720%3Fv%3D4%26w=64%26q=75)](https://github.com/aliceoq)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/organisms/image-gallery.mdx)

[Hero« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-hero)[NavbarSliderNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-navbar-slider)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62757720%3Fv%3D4%26w=64%26q=75)](https://github.com/aliceoq)

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23import-styles)

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23examples)

[With Selector (More than 1 Image)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23with-selector-more-than-1-image)[Without Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23without-selector)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23design-tokens)

[Controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23controls)[Current Selected Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23current-selected-image)[Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23selector)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23props)

[ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23imagegallery)[ImageGallerySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23imagegalleryselector)[ImageElementData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23imageelementdata)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/organisms/image-gallery.mdx)

Copy page

On this page

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23import-styles)

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23examples)

[With Selector (More than 1 Image)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23with-selector-more-than-1-image)[Without Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23without-selector)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23design-tokens)

[Controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23controls)[Current Selected Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23current-selected-image)[Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23selector)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23props)

[ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23imagegallery)[ImageGallerySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23imagegalleryselector)[ImageElementData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery/docs/guides/faststore/organisms-image-gallery%23imageelementdata)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] How do I use the VTEX search didyoumean app? Provide documentation and configuration details.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/basic-components)

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.breadcrumb)

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.store-footer)

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/google-one-tap-login)

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.store-header)

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.store-image)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/basic-components)

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.breadcrumb)

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.store-footer)

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/google-one-tap-login)

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.store-header)

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.store-image)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/vtex-io-apps)

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/guides/basic-components)

DidYouMean

[vtex.search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search)

Version: 2.18.8

Latest version: 2.18.8

`DidYouMean` is a component used to suggest a possible misspelling correction to the current query.

## Before you begin

Make sure you have added the `search` app to your theme dependencies in the `manifest.json` as shown below:

`1

 "dependencies": {

2

 "vtex.search": "2.x"

3

 }

`

Check the [Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search) app documentation for more details on this step.

## Usage

Add the `did-you-mean` block to the `search-result-layout.desktop` or `search-result-layout.mobile`. For example:

`1

"search-result-layout.desktop": {

2

 "children": [

3

 "flex-layout.row#didyoumean",

4

 ],

5

 "flex-layout.row#didyoumean": {

6

 "children": ["did-you-mean"]

7

 }

8

}

`

## Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles      |
| ---------------- |
| didYouMeanPrefix |
| didYouMeanTerm   |

[Suggestions« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/suggestions)[Search ResultNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search-result)

See also

[Vtex.searchVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/didyoumean%23before-you-begin)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/didyoumean%23usage)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search/didyoumean/docs/apps/vtex.search/didyoumean%23customization)

Was this helpful?

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)