[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 data privacy 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/data-privacy/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/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/data-privacy/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/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/data-privacy/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/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/data-privacy/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/vtex-platform-overview)

[Cloud infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/cloud-infrastructure)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/security)

[Data privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy)

[Composability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/composability)

[Extensibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/extensibility)

[Store architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/store-architecture)

[Developer experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/developer-experience)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/troubleshooting)

---

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/vtex-platform-overview)

[Cloud infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/cloud-infrastructure)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/security)

[Data privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy)

[Composability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/composability)

[Extensibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/extensibility)

[Store architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/store-architecture)

[Developer experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/developer-experience)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides)

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/vtex-platform-overview)

[Data privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy)

Data privacy

Learn how VTEX ensures compliance with data privacy regulations.

This guide presents an overview of VTEX's approach towards data privacy. Read the following sections to understand how our platform's resources can help merchants and developers protect shopper's personal data.

## Data processed by VTEX

VTEX follows the principle of data minimization, which refers to collecting, processing, and storing only the information essential to achieving a specific purpose. This means we limit the personal data we collect and keep, thus reducing the risk associated with excessive information processing.

VTEX processes shoppers’ personal data only when strictly necessary, following the requirements of each platform module to carry out ecommerce operations. Our platform may process personal data of the following types, as described in our [Data Processing Addendum (DPA)](https://read.calvincode.net/reader?url=https://vtex.com/us-en/privacy-and-agreements/data-processing-addendum/):

* Name
* Email address
* IP address
* Browsing information ([cookies](https://read.calvincode.net/reader?url=https://vtex.com/br-pt/privacy-and-agreements/vtex-platform-cookies-information/))
* Cart information
* Order information and history
* Delivery address
* ID number (when required by the country in which the store operates)
* Gift card history
* Unused cart
* [Conversation Tracker](https://read.calvincode.net/reader?url=https://help.vtex.com/pt/tutorial/conversation-tracker) information
* Session passwords (encrypted)
* Generated tokens

VTEX does not sell, monetize, enrich, or transfer shoppers' personal data to other companies. See the [Privacy & Contracts](https://read.calvincode.net/reader?url=https://vtex.com/us-en/privacy-and-agreements/vtex-commitment/) section of our website to learn more about our approach to data privacy, including certifications, internal policies, and commitments.

> Learn more about the definition of personal data and our role in data protection in the [Data and privacy](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/data-and-privacy--4Lc0i0an0DgnEtB0AUwlcq/65ZqZlNWcmFSOqZQxr8gha) track on VTEX Help Center.

## Data lifecycle

All data on the platform has a life cycle from creation to deletion, divided into four phases: Creation, Storage, Processing, and Disposal. This flow is illustrated below:

![{"base64":"  ","img":{"width":1472,"height":536,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":34362,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Data-privacy/data-lifecycle.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Data-privacy/data-lifecycle.png)

1. **Creation:** Process for creating or collecting data.
2. **Storage:** Data that will be reused is stored.
3. **Processing:** Data is processed and used to achieve the tenant's business objectives. During this stage, data can be refined, merged, or aggregated.
4. **Disposal:** When the data is no longer needed, we dispose of it permanently.

### Retention limits

Data retention limits define the duration for which data can be stored within our platform. These limits are influenced by different factors, such as legal and compliance requirements, data privacy considerations, and costs. By establishing data retention limits, we aim to ensure compliance with regulations, protect user privacy, and maintain efficient resource allocation.

VTEX stores the shopper's personal data for the duration of the [Master Services Agreement (MSA)](https://read.calvincode.net/reader?url=https://vtex.com/us-en/privacy-and-agreements/agreements/). In the event of termination of the contract with VTEX, the merchant must ensure that the data is extracted from the Master Data within thirty (30) days before the date of termination of the MSA, under Clause 7 of the [DPA](https://read.calvincode.net/reader?url=https://vtex.com/us-en/privacy-and-agreements/data-processing-addendum/).

Merchants are responsible for complying with local laws and regulations. This includes defining and respecting data retention periods, which may vary depending on the specific legislation to which each store is subject.

## Data subject rights

VTEX offers tools for merchants to assist shoppers with requests related to data subject rights, including access and portability, rectification, consent, and erasure. Learn more in [Data subject rights](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/data-subject-rights--6imchxTx09icupKMbzHVIM). For details on the data exclusion procedure, see the [Erasing customer data](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/erasing-customer-data--1R9Fn7A06Ifj4R9YD4JTKU).

> VTEX is not responsible for personal data stored by systems integrated with your store, such as ERPs, third-party marketplaces, third-party sellers, third-party applications available in the [VTEX App Store](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/visao-geral-apps--4xfsHXyAQTjbZNuiKl6Y0e) or customizations implemented by your development team. You must map this data and ensure the enforceability of the rights of personal data subjects in these instances, in addition to the processes described below.

## Data protection mechanisms

Data in transit is protected by the TLS 1.2 security standard. Connections that use older and less secure encryption methods are denied.

When working with storage or data at rest, VTEX can use one of the following algorithms to support applications that need to encrypt data:

* Two-way encryption:
   * RSA with keys of 2048 bits or more
   * AES-256
* One-way encryption:
   * PBKDF2 based on SHA-256

All relevant systems make daily automatic backups by default, but this can be adjusted as necessary to ensure data integrity and availability.

In addition, we have implemented strict information security processes and access controls to ensure that only authorized persons have access to the data.

Learn more about our Security practices in the [Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security) guide.

## Storage location

The [hosting provider](https://read.calvincode.net/reader?url=https://vtex.com/us-en/privacy-and-agreements/subprocessors/.) used by VTEX is Amazon Web Services (AWS), which stores data in the Northern Virginia region of the United States. The AWS platform has important certifications such as ISO 27001, PCI DSS, CSA, and NIST. For a detailed list of certifications, go to [AWS Compliance Programs](https://read.calvincode.net/reader?url=https://aws.amazon.com/en/compliance/programs/). Authorization for storing data on AWS can be found in our [DPA](https://read.calvincode.net/reader?url=https://vtex.com/us-en/privacy-and-agreements/data-processing-addendum/).

## Policies and compliance

VTEX has privacy and data protection policies, which are reviewed annually. The [External Privacy Notice](https://read.calvincode.net/reader?url=https://vtex.com/us-en/privacy-and-agreements/external-notice/) can be accessed on the VTEX website.

Merchants should add their own privacy policies to their websites to comply with local privacy regulations.

VTEX is committed to complying with all applicable data protection regulations, including GDPR and LGPD. The tools provided by our platform, through Admin and our APIs, allow merchants to comply with GDPR and local regulations. Learn more about our policies, contracts, and commitment to data protection compliance in the [Privacy & Contracts](https://read.calvincode.net/reader?url=https://vtex.com/us-en/privacy-and-agreements/vtex-commitment/) section of our website.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Platform-Overview/Data-privacy/data-privacy.md)

[Security« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy//docs/guides/security)[ComposabilityNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy//docs/guides/composability)

Contributors

1

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

ON THIS PAGE

[Data processed by VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23data-processed-by-vtex)

[Data lifecycle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23data-lifecycle)

[Retention limits](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23retention-limits)

[Data subject rights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23data-subject-rights)

[Data protection mechanisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23data-protection-mechanisms)

[Storage location](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23storage-location)

[Policies and compliance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23policies-and-compliance)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Platform-Overview/Data-privacy/data-privacy.md)

Copy page

On this page

ON THIS PAGE

[Data processed by VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23data-processed-by-vtex)

[Data lifecycle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23data-lifecycle)

[Retention limits](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23retention-limits)

[Data subject rights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23data-subject-rights)

[Data protection mechanisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23data-protection-mechanisms)

[Storage location](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23storage-location)

[Policies and compliance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/data-privacy/docs/guides/data-privacy%23policies-and-compliance)

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 vtex product summary productsummaryname 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/vtex-product-summary-productsummaryname/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/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/vtex-product-summary-productsummaryname/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/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/vtex-product-summary-productsummaryname/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/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/vtex-product-summary-productsummaryname/updates/release-notes)

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/docs/storefront-development)

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/updates/release-notes)

Product Summary Name

Product Summary Name is a block exported by the [Product Summary app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary) responsible for rendering the product name.

![{"base64":"  ","img":{"width":1883,"height":772,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":377119,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryname-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryname-0.png)

## Configuration

1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:

`1

 dependencies: {

2

 "vtex.product-summary": "2.x"

3

 }

`

1. Add the `product-summary-name` block to your store theme as a child of `product-summary.shelf`. For example:

`1

 "product-summary.shelf": {

2

 "children": [

3

 "product-summary-image",

4

+ "product-summary-name",

5

 "product-summary-space",

6

 "product-summary-column#1"

7

 ]

8

 },

`

1. Then, declare the `product-summary-name` and configure its behavior using the props stated below.

| Prop name       | Type   | Description                                   | Default value                                                         |
| --------------- | ------ | --------------------------------------------- | --------------------------------------------------------------------- |
| showFieldsProps | object | Defines the visibility on certain properties. | { showProductReference: false, showBrandName: false, showSku: false } |
| tag             | string | HTML tag used. It can be: div, h1, h2, h3.    | h1                                                                    |

* `showFieldsProps` object:

| Prop name            | Type    | Description            | Default value |
| -------------------- | ------- | ---------------------- | ------------- |
| showSku              | Boolean | Show product SKU       | false         |
| showProductReference | Boolean | Show product reference | false         |
| showBrandName        | Boolean | Show brand name        | false         |

## Customization

To apply CSS customizations in this and other blocks, follow the [Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles       |
| ----------------- |
| nameContainer     |
| nameWrapper       |
| brandName         |
| skuName           |
| productReference  |
| productNameLoader |

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/basic-components/vtex-product-summary-productsummaryname.md)

Contributors

1

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

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/docs/guides/vtex-product-summary-productsummaryname%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/docs/guides/vtex-product-summary-productsummaryname%23customization)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/basic-components/vtex-product-summary-productsummaryname.md)

Copy page

On this page

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/docs/guides/vtex-product-summary-productsummaryname%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname/docs/guides/vtex-product-summary-productsummaryname%23customization)

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] Explain the VTEX api reference orders api API and how to use it.

[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/api-reference/orders-api/docs/guides)

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

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

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

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/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/api-reference/orders-api/updates/release-notes)

API Reference

Filter By

Post

Get

Put

Delete

Patch

[Anti-fraud Provider API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/antifraud-provider-protocol/)

---

[Audience API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/audience-api/)

---

[Buyer organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/buyer-organizations/)

---

[Budgets API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/budgets-api/)

---

[Legacy CMS Portal API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/legacy-cms-portal-api/)

---

[Card Token Vault API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/card-token-vault-api/)

---

[Catalog API - Seller Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/catalog-api-seller-portal/)

---

[Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/catalog-api/)

---

[Checkout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/checkout-api/)

---

[Customer Credit API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/customer-credit-api/)

---

[Delivery Promise Notification API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/delivery-promise-notification-api/)

---

[GiftCard API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/giftcard-api/)

---

[Giftcard Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/giftcard-provider-protocol/)

---

[GiftCard Hub API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/giftcard-hub-api/)

---

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/headless-cms-api/)

---

[Intelligent Search API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/intelligent-search-api/)

---

[Intelligent Search Events API - Headless](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/intelligent-search-events-api-headless/)

---

[License Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/license-manager-api/)

---

[Logistics API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/logistics-api/)

---

[Marketplace API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/marketplace-apis/)

---

[Marketplace Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/marketplace-protocol/)

---

[Master Data API - v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/master-data-api-v2/)

---

[Master Data API - v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/masterdata-api/)

---

[Message Center API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/message-center-api/)

---

[mTLS API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/mtls-api/)

---

[Operational Capacity API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/operational-capacity-api/)

---

[Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/orders-api/)

Orders

Order modifications

Invoice

Tracking

Conversation

Payment

Feed v2 (deprecated)

Feed v3

Order hook

User orders

Change seller

Interactions

---

[Organization Units API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/organization-units-api/)

---

[Payment Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/payment-provider-protocol/)

---

[Payments Gateway API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/payments-gateway-api/)

---

[Pick and Pack API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/pick-and-pack-api/)

---

[Pick and Pack Last Mile Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/pick-and-pack-protocol-api/)

---

[Pick and Pack Order Changes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/pick-and-pack-order-changes-api/)

---

[Policies System API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/policies-system-api/)

---

[Pricing API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/pricing-api/)

---

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/pricing-hub/)

---

[Promotions & Taxes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/promotions-and-taxes-api/)

---

[Promotions & Taxes API v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/promotions-and-taxes-api-v2/)

---

[Punchout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/punchout-api/)

---

[Reviews and Ratings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/reviews-and-ratings-api/)

---

[Recommendations BFF API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/recommendations-bff-api/)

---

[SKU Bindings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/sku-bindings-api/)

---

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

---

[Session Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/session-manager-api/)

---

[SSL Certificates API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/ssl-certificates-api/)

---

[Storefront Permissions API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/storefront-permissions-api/)

---

[Subscriptions API (v3)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/subscriptions-api-v3/)

---

[VTEX Ads API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/vtex-ads-api/)

---

[VTEX Shipping Network API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/vtex-shipping-network-api/)

---

[VTEX Tracking APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/tracking/)

---

[VTEX DO API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/vtex-do-api/)

---

[VTEX ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/vtex-id-api/)

---

[Profile System (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/profile-system/)

---

[Orders API - PII Data Architecture (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/orders-api-pii-version/)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/troubleshooting)

---

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

API Reference

Filter By

Post

Get

Put

Delete

Patch

[Anti-fraud Provider API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/antifraud-provider-protocol/)

---

[Audience API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/audience-api/)

---

[Buyer organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/buyer-organizations/)

---

[Budgets API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/budgets-api/)

---

[Legacy CMS Portal API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/legacy-cms-portal-api/)

---

[Card Token Vault API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/card-token-vault-api/)

---

[Catalog API - Seller Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/catalog-api-seller-portal/)

---

[Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/catalog-api/)

---

[Checkout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/checkout-api/)

---

[Customer Credit API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/customer-credit-api/)

---

[Delivery Promise Notification API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/delivery-promise-notification-api/)

---

[GiftCard API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/giftcard-api/)

---

[Giftcard Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/giftcard-provider-protocol/)

---

[GiftCard Hub API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/giftcard-hub-api/)

---

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/headless-cms-api/)

---

[Intelligent Search API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/intelligent-search-api/)

---

[Intelligent Search Events API - Headless](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/intelligent-search-events-api-headless/)

---

[License Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/license-manager-api/)

---

[Logistics API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/logistics-api/)

---

[Marketplace API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/marketplace-apis/)

---

[Marketplace Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/marketplace-protocol/)

---

[Master Data API - v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/master-data-api-v2/)

---

[Master Data API - v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/masterdata-api/)

---

[Message Center API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/message-center-api/)

---

[mTLS API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/mtls-api/)

---

[Operational Capacity API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/operational-capacity-api/)

---

[Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/orders-api/)

Orders

Order modifications

Invoice

Tracking

Conversation

Payment

Feed v2 (deprecated)

Feed v3

Order hook

User orders

Change seller

Interactions

---

[Organization Units API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/organization-units-api/)

---

[Payment Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/payment-provider-protocol/)

---

[Payments Gateway API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/payments-gateway-api/)

---

[Pick and Pack API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/pick-and-pack-api/)

---

[Pick and Pack Last Mile Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/pick-and-pack-protocol-api/)

---

[Pick and Pack Order Changes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/pick-and-pack-order-changes-api/)

---

[Policies System API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/policies-system-api/)

---

[Pricing API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/pricing-api/)

---

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/pricing-hub/)

---

[Promotions & Taxes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/promotions-and-taxes-api/)

---

[Promotions & Taxes API v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/promotions-and-taxes-api-v2/)

---

[Punchout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/punchout-api/)

---

[Reviews and Ratings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/reviews-and-ratings-api/)

---

[Recommendations BFF API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/recommendations-bff-api/)

---

[SKU Bindings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/sku-bindings-api/)

---

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

---

[Session Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/session-manager-api/)

---

[SSL Certificates API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/ssl-certificates-api/)

---

[Storefront Permissions API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/storefront-permissions-api/)

---

[Subscriptions API (v3)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/subscriptions-api-v3/)

---

[VTEX Ads API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/vtex-ads-api/)

---

[VTEX Shipping Network API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/vtex-shipping-network-api/)

---

[VTEX Tracking APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/tracking/)

---

[VTEX DO API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/vtex-do-api/)

---

[VTEX ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/vtex-id-api/)

---

[Profile System (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/profile-system/)

---

[Orders API - PII Data Architecture (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/orders-api-pii-version/)

---

[PuUpdate location status« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/operational-capacity-api%23put-/api/fulfillment-locations/locations/-locationId-/status)[GeGet orderNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api/docs/api-reference/orders-api%23get-/api/oms/pvt/orders/-orderId-)

[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 2.18.8 Suggestions 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@2.18.8/Suggestions/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search@2.18.8/Suggestions/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@2.18.8/Suggestions/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@2.18.8/Suggestions/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@2.18.8/Suggestions/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@2.18.8/Suggestions/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@2.18.8/Suggestions/updates/release-notes)

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Suggestions

[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

`Suggestions` is a component used to suggest search terms similar 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 `search-suggestions` 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#suggestion",

4

 ],

5

 "flex-layout.row#suggestion": {

6

 "children": ["search-suggestions"]

7

 }

8

}

`

### Props

| Prop name  | Type   | Description                                                                      | Default value |
| ---------- | ------ | -------------------------------------------------------------------------------- | ------------- |
| customPage | string | Defines a custom page to the link of a suggestion. Example: store.search.custom. | store.search  |

## 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           |
| --------------------- |
| suggestionsList       |
| suggestionsListPrefix |
| suggestionsListLink   |
| suggestionsListItem   |

See also

[Vtex.searchVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search@2.18.8/Suggestions/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@2.18.8/Suggestions/docs/apps/vtex.search@2.18.8/Suggestions%23before-you-begin)

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

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search@2.18.8/Suggestions/docs/apps/vtex.search@2.18.8/Suggestions%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search@2.18.8/Suggestions/docs/apps/vtex.search@2.18.8/Suggestions%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=)


[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 storefront features managing product images in specific contexts 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/storefront-features-managing-product-images-in-specific-contexts/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-overview)

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-handling-third-party-scripts)

[Building navigation menus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-building-navigation-menus)

[Displaying content for authenticated users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

[Implementing regionalization features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-implementing-regionalization-features)

[Implementing search features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-implementing-search-features)

[Managing product images in specific contexts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

[Implementing Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/delivery-promise-implementation)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-overview)

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-handling-third-party-scripts)

[Building navigation menus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-building-navigation-menus)

[Displaying content for authenticated users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

[Implementing regionalization features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-implementing-regionalization-features)

[Implementing search features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-implementing-search-features)

[Managing product images in specific contexts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

[Implementing Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/delivery-promise-implementation)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/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/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-overview)

Managing product images in specific contexts

In this guide, you will learn how to control the product images that will be displayed in your store sections by labeling them with specific contexts on [VTEX Catalog](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/catalog-overview--77M8ItLhDXs6aBdQTqToVe?%26utm%5Fsource=autocomplete). These contexts determine where the image is displayed and are defined as follows:

* **Gallery context:** Restricts the image to display only in the Product Image Gallery, allowing you to curate a set of images highlighting key features.
* **SKU selector context:** Restricts the image to display only in the SKU selector, providing a zoomed-in view for detailed examination.
* **Generic context (default):** Sets the image to display in all sections.

For example, you may want to limit the number of images displayed in the Product Details Page (PDP) gallery to highlight key product features.

| **Before**                                                                                | **After**                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":1999,"height":990,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":209803,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/before___bec5e5c536162b228cd4d50d0042c4a6.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/before___bec5e5c536162b228cd4d50d0042c4a6.png) | ![{"base64":"  ","img":{"width":1999,"height":918,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":185490,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/after___f6bb9be611ba511d7eee8558c34a2732.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/after___f6bb9be611ba511d7eee8558c34a2732.png) |
| The product image gallery displays all five images uploaded to [Catalog](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ).                                                                                | After limiting the number of images, only three product images are displayed to focus on the most important product features.                                                                                |

By associating images with specific contexts, you ensure only the most relevant images are in the sections.

## Before you begin

To follow the instructions in this guide, you must understand the concepts of [API extensions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-overview) and [Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-overview).

## Instructions

For this tutorial, we will create a custom gallery for the PDP using the [label](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/17PxekVPmVYI4c3OCQ0ddJ%23adding-an-image-to-the-sku) feature from [VTEX Catalog](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ).

In this example, we will create a context by labeling selected images with the term `gallery`. This gallery will only display images that have been assigned the `gallery` label in [Catalog](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ).

### Step 1: Labeling images in Catalog

Label your product images with the label field in Catalog. This label determines where product images should be displayed in your store. To label your images, follow these steps:

1. Access the VTEX Admin.
2. Go to **Catalog > All Products** and find the product you want to edit.
3. Click the `Update` button and then click `SKU`.
![{"base64":"  ","img":{"width":1588,"height":482,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":156517,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/sku-images-admin___1baaa1f88be16795b892634b80676ccc.gif"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/sku-images-admin___1baaa1f88be16795b892634b80676ccc.gif)
4. Go to the SKU you want to update and click `Edit`.
5. Click the `Images` tab.
6. For each SKU image you want to add to the gallery, set the **Label** field to **gallery**. These are the available labels:
| Label name   | Description                                                                                |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
| gallery      | Restricts the image to display only on the Product Image Gallery.                                                                    |
| generic      | Includes the image in all contexts by default. Images labeled as generic are always displayed as part of the complete set of images. |
| skuvariation | Assigns the image to the SKU Selector. If no image has this label, the first image of the SKU is used.                               |
7. Click `Save Label` and `Save`.

### Step 2: Querying images by context

Update your store `ServerProduct` and `ClientProduct` fragments to retrieve images based on their [assigned labels](#step-1-labeling-images-in-catalog). This ensures that only relevant images for specific contexts, like the PDP, are retrieved.

> For more information about fragments in FastStore, see the guide [Extending queries using fragments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-queries-using-fragments).

1. Open your store code using the code editor of your choice.
2. Go to `src/fragments/ServerProduct.ts` and add the following:
src/fragments/ServerProduct.ts
`` 1
import { gql } from '@faststore/core/api'
2

3
export const fragment = gql`
4
fragment ServerProduct on Query {
5
 product(locator: $locator) {
6
 galleryImages: image(context: "gallery", limit: 3) {
7
 url
8
 alternateName
9
 }
10
 }
11
}
12
`
 ``
3. Go to `src/fragments/ClientProduct` and add the following:
src/fragments/ClientProduct
`` 1
import { gql } from '@faststore/core/api'
2

3
export const fragment = gql`
4
fragment ClientProduct on Query {
5
 product(locator: $locator) {
6
 galleryImages: image(context: "gallery", limit: 3) {
7
 url
8
 alternateName
9
 }
10
 }
11
}
12
`
 ``

> ❕The `limit: 3` argument selects only three images. Omitting this argument returns all images labeled `gallery`. By default, all images are returned if no context label is found.

### Step 3: Overriding the `ImageGallery` component

Customize the default [ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component to showcase the images retrieved in the [previous step](#step-1-labeling-images-in-catalog). This override allows you to control how images are displayed and interacted with on your PDP.

1. In your store code, create the `ProductDetails.tsx` file inside the `src/components/overrides` folder.
2. In the `ProductDetails.tsx` file, add the following content:
`1
import { SectionOverride } from "@faststore/core";
2

3
import { usePDP } from "@faststore/core";
4
import { Image_unstable as Image } from "@faststore/core/experimental";
5

6
import { ImageGallery, ImageGalleryViewer } from "@faststore/ui";
7
import { useState } from "react";
8

9
const SECTION = "ProductDetails" as const;
10

11
const ImageComponent = ({ url, alternateName }: {url: string, alternateName?: string}) => {
12
return <Image src={url} alt={alternateName} width={68} height={68}/>
13
}
14

15
const override: SectionOverride = {
16
section: SECTION,
17
components: {
18
 __experimentalImageGallery: {
19
 Component: () => {
20
 const { data } = usePDP();
21
 const [selectedIndex, setSelectedIndex] = useState<number>(0);
22

23
 const currentImage = data.product.galleryImages[selectedIndex];
24

25
 return (
26
 <ImageGallery
27
 images={data.product.galleryImages}
28
 ImageComponent={ImageComponent}
29
 selectedImageIdx={selectedIndex}
30
 setSelectedImageIdx={setSelectedIndex}
31
 data-fs-product-details-gallery="true"
32
 >
33
 <ImageGalleryViewer>
34
 <Image
35
 sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"
36
 width={691}
37
 height={691 * (3 / 4)}
38
 loading="eager"
39
 src={currentImage.url}
40
 alt={currentImage.alternateName}
41
 />
42
 </ImageGalleryViewer>
43
 </ImageGallery>
44
 );
45
 },
46
 },
47
},
48
};
49

50
export { override };
`
   * The `ServerProduct` and `ClientProduct` fragments are accessed via the `usePDP` hook.
   * Instead of using the images being passed to the [ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component, we are using the `galleryImages` we defined.
3. Open a terminal and run `yarn dev` to sync the changes made in the previous steps.
4. Open a pull request to your store with these changes. Once the pull request is reviewed and approved, merge it into the `main` branch.

### Considerations for SKU Selector Images

The FastStore API defines a specific name for images that are supposed to display on the SKU Selector. The first image labeled `skuvariation` in Catalog will automatically display on the SKU Selector. If no image has the `skuvariation` label, the first image of the SKU will be displayed.

> If an image needs to display on the SKU Selector and Product Gallery, you must upload it twice and assign different labels.

Contributors

1

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

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/storefront-features/managing-product-images-in-specific-contexts.mdx)

[Implementing search features« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-implementing-search-features)[Implementing Delivery PromiseNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/delivery-promise-implementation)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23instructions)

[Step 1: Labeling images in Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23step-1-labeling-images-in-catalog)[Step 2: Querying images by context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23step-2-querying-images-by-context)[Step 3: Overriding the ImageGallery component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23step-3-overriding-the-imagegallery-component)[Considerations for SKU Selector Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23considerations-for-sku-selector-images)

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/storefront-features/managing-product-images-in-specific-contexts.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/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23instructions)

[Step 1: Labeling images in Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23step-1-labeling-images-in-catalog)[Step 2: Querying images by context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23step-2-querying-images-by-context)[Step 3: Overriding the ImageGallery component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23step-3-overriding-the-imagegallery-component)[Considerations for SKU Selector Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts%23considerations-for-sku-selector-images)

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=)