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

[User] Explain troubleshooting issues during extending the faststore api schema 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/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/vtex-io-apps)

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

Troubleshooting

API

---

Development

[I am getting 500 errors in VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-am-getting-500-errors-in-vtex-io-cli)

[I am getting errors with my service configuration app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-am-getting-errors-with-my-service-configuration-app)

[Issues during extending the FastStore API schema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema)

[I can’t access the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/unable-to-access-headless-cms)

[I can’t install the Headless CMS plugins in my account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-cant-install-the-headless-cms-plugins-in-my-account)

[I can't install VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-cant-install-vtex-io-cli)

[I can’t integrate my external Search Provider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-cant-integrate-my-external-search-provider)

[My multi-language store is not functioning in the development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace)

[My store catalog does not display the price range filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/my-store-catalog-does-not-show-the-price-range-filter)

[My pages are taking too long to be published on Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/my-pages-are-taking-too-long-to-be-published-on-headless-cms)

[My store does not reflect the overrides I created](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/my-store-does-not-reflect-the-overrides-i-created)

[Modal Layout closes when I click a SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku)

[The Price in the shelf or in the search results is different from the product page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/the-price-in-the-shelf-or-in-the-search-results-is-different-from-the-product-page)

[The promotion highlight flag does not appear on the product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/the-promotion-highlight-flag-does-not-appear-on-the-product)

[vtex release CLI command returns an EBADF message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/vtex-release-cli-command-returns-ebadf-message)

[I can't create a new workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-cant-create-a-new-workspace)

[I can't install an app with a major other than 0.x](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-cant-install-an-app-with-a-major-other-than-0x)

[I don't see my Store Theme changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-dont-see-my-store-theme-changes)

---

Store performance

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/updates/release-notes)

Troubleshooting

API

---

Development

[I am getting 500 errors in VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-am-getting-500-errors-in-vtex-io-cli)

[I am getting errors with my service configuration app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-am-getting-errors-with-my-service-configuration-app)

[Issues during extending the FastStore API schema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema)

[I can’t access the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/unable-to-access-headless-cms)

[I can’t install the Headless CMS plugins in my account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-cant-install-the-headless-cms-plugins-in-my-account)

[I can't install VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-cant-install-vtex-io-cli)

[I can’t integrate my external Search Provider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-cant-integrate-my-external-search-provider)

[My multi-language store is not functioning in the development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace)

[My store catalog does not display the price range filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/my-store-catalog-does-not-show-the-price-range-filter)

[My pages are taking too long to be published on Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/my-pages-are-taking-too-long-to-be-published-on-headless-cms)

[My store does not reflect the overrides I created](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/my-store-does-not-reflect-the-overrides-i-created)

[Modal Layout closes when I click a SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku)

[The Price in the shelf or in the search results is different from the product page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/the-price-in-the-shelf-or-in-the-search-results-is-different-from-the-product-page)

[The promotion highlight flag does not appear on the product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/the-promotion-highlight-flag-does-not-appear-on-the-product)

[vtex release CLI command returns an EBADF message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/vtex-release-cli-command-returns-ebadf-message)

[I can't create a new workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-cant-create-a-new-workspace)

[I can't install an app with a major other than 0.x](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-cant-install-an-app-with-a-major-other-than-0x)

[I don't see my Store Theme changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-dont-see-my-store-theme-changes)

---

Store performance

---

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting)

Development

Issues during extending the FastStore API schema

Development and deployment challenges may arise while extending FastStore API schema with GraphQL.

**Keywords:** FastStore | API extension

Although the FastStore API provides a GraphQL schema for ecommerce, you can extend the FastStore API schema to access other or more specific information from your store. During this implementation, you encounter issues such as not having the GraphQL changes you performed aren’t visible during development or in the store production.

Below are different troubleshooting checks and instructions you can use to solve API extension issues:

* [GraphQL changes not visible during development](#graphql-changes-not-visible-during-development)
* [Deploy preview/production GraphQL schema different from development](#deploy-previewproduction-graphql-schema-different-from-development)
* [Type generation errors and warnings](#type-generation-errors-and-warnings)
   * [Error details](#error-details)
* [GraphQL changes not visible in production/deploy preview](#graphql-changes-not-visible-in-productiondeploy-preview)

## GraphQL changes not visible during development

If your GraphQL changes aren't visible during development, the changes you have made since you started the development server (`yarn dev`) are probably not optimized.

To trigger the optimization, run `yarn generate` (recommended) or `yarn run faststore generate-graphql`. Alternatively, you can stop and restart the development server using `yarn dev`.

> This optimization can also be performed while the development server is running.

## Deploy preview/production GraphQL schema different from development

If you notice differences between the GraphQL schema in your deploy preview or production environment and your development setup, it may be because the schema has not been optimized since the development server's initiation. The build process optimizes the schema before deployment to accurately reflect the schema declared in the store's code.

To fix the issue, refer to the [GraphQL changes not visible during development](#graphql-changes-not-visible-during-development) topic.

## Type generation errors and warnings

Some errors can occur during GraphQL optimizations and type generation. Here's how to troubleshoot them:

| **Error message**                                                                                | **Possible cause**                                                                                | **Solution**                                                                                |
| --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| error Failed to run 'yarn generate:schema'. Please check your setup.                                            | Malformed files in your GraphQL Schema Extensions definitions.                                                                              | Check the graphql files inside the src/graphql/(vtex or thirdParty)/typeDefs folders for syntax or definition errors.                                                                                |
| error GraphQL was not optimized and TS files were not updated. Changes in the GraphQL layer did not take effect | Malformed files or GraphQL types within your GraphQL layer, including errors in GraphQL Schema Extensions, declared queries, and fragments. | Check the graphql files inside the src/graphql/(vtex or thirdParty)/typeDefs folders and component (.ts, tsx) files declaring queries and fragments in your project for syntax or definition errors.                                                                                |
| warn: Failed to format generated files. 'yarn format:generated' thrown errors                                   | An issue occurred during the formatting process for the generated GraphQL optimization and types files.                                     | This is a warning, not an error. Your GraphQL layer will still function correctly. If you want to investigate and resolve the formatting issue, follow these steps: 1\. Retry formatting: Run the yarn format:generated command again. 2\. Check formatting configuration: Ensure the formatting rules are correct and compatible with the generated files.3\. Inspect error logs: Look for specific error messages that might provide more clues about the issue. |

### Error details

To access more detailed error information, use the `--debug` flag when manually running the `yarn generate` command to see detailed errors on why the generation has failed.

## GraphQL changes not visible in production/deploy preview

During the build step, the GraphQL optimization and type files are always generated fresh, reflecting the most recent changes in the code.

If your changes are not visible in production, this means you must not have committed them to the branch you're currently working on. If you see different GraphQL schema, queries, or data during development, refer to the [GraphQL changes not visible during development](#graphql-changes-not-visible-during-development) topic.

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/_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/troubleshooting/development/issues-during-extending-the-faststore-api-schema.md)

[I am getting errors with my service configuration app« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/i-am-getting-errors-with-my-service-configuration-app)[I can’t access the Headless CMSNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/unable-to-access-headless-cms)

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/_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

[GraphQL changes not visible during development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema%23graphql-changes-not-visible-during-development)

[Deploy preview/production GraphQL schema different from development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema%23deploy-previewproduction-graphql-schema-different-from-development)

[Type generation errors and warnings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema%23type-generation-errors-and-warnings)

[Error details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema%23error-details)

[GraphQL changes not visible in production/deploy preview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema%23graphql-changes-not-visible-in-productiondeploy-preview)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/troubleshooting/development/issues-during-extending-the-faststore-api-schema.md)

Copy page

On this page

ON THIS PAGE

[GraphQL changes not visible during development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema%23graphql-changes-not-visible-during-development)

[Deploy preview/production GraphQL schema different from development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema%23deploy-previewproduction-graphql-schema-different-from-development)

[Type generation errors and warnings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema%23type-generation-errors-and-warnings)

[Error details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema%23error-details)

[GraphQL changes not visible in production/deploy preview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/issues-during-extending-the-faststore-api-schema/docs/troubleshooting/issues-during-extending-the-faststore-api-schema%23graphql-changes-not-visible-in-productiondeploy-preview)

On this page

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


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

[User] Provide a guide on guides faststore using themes importing ui components styles 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/using-themes-importing-ui-components-styles/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/getting-started-with-storefront-solutions)

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/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/using-themes-importing-ui-components-styles/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/styling-overview)

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/global-tokens-overview)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-overview)

[Styling the layout and breakpoints](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-mixins-breakpoints)

[Styling a component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-components)

[Styling a section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-pages)

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

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/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/using-themes-importing-ui-components-styles/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/using-themes-importing-ui-components-styles/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/using-themes-importing-ui-components-styles/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/getting-started-with-storefront-solutions)

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/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/using-themes-importing-ui-components-styles/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/styling-overview)

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/global-tokens-overview)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-overview)

[Styling the layout and breakpoints](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-mixins-breakpoints)

[Styling a component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-components)

[Styling a section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-pages)

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

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/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/using-themes-importing-ui-components-styles/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/using-themes-importing-ui-components-styles/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/using-themes-importing-ui-components-styles/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/storefront-development)

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/styling-overview)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-overview)

Importing FastStore UI component styles

If you are using a [FastStore UI component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index) and want to apply its styles to your FastStore project, follow the steps below.

There are two different scenarios on how to import FastStore UI component styles:

* [Overriding a component](#importing-styles-when-overriding-a-component): For this use case, we will override the `ProductTitle` component within the `ProductDetails` section.
* [Creating a new section](#importing-styles-when-creating-a-new-section): For this use case, we will create a new section in the CMS called `OurStore`.

## Before you begin

### Ensure you have a basic understanding of overrides

Refer to the [Overriding components and props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1) and [Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) guides for more information. In this guide, we will use the [ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1%23product-title) component and [OurStores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section%23ourstore) section.

### Using CSS modules

We recommend using [CSS Modules](https://read.calvincode.net/reader?url=https://nextjs.org/docs/app/building-your-application/styling/css-modules) to style your new component.

## Importing styles when overriding a component

For this scenario, we will use as an example the override of the [ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-components-and-props-v1%23product-title) component within the `ProductDetails` section.

1. Open your FastStore project, navigate to the `components` folder, and create the `customProductTitle.module.scss` file. This file is responsible for importing the FastStore UI component style.
2. Add the following code to the `customProductTitle.module.scss` file.
"customProductTitle.module.scss"
`1
.customProductTitle {
2
 @import '@faststore/ui/src/components/molecules/Tag/styles.scss';
3
}
`

This code imports the [Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-tag) styles to the custom component that you are creating.

1. Import the styles in the `CustomProductTitle.tsx` file and add a `className` to the `section`
CustomProductTitle.tsx
`1
import React from 'react'
2
import { ProductTitle, Tag } from '@faststore/ui'
3

4

5
import styles from './customProductTitle.module.scss'
6

7
export default function CustomProductTitle() {
8
 return (
9

10
 <ProductTitle title={
New headphones
} />
11
 <Tag variant="warning" label="On sale" onClose={() => {}} />
12

13
 )
14
}
`
2. Run `yarn dev` in the terminal and open the local development server to see the changes. You should see a result similar to the image below:
![{"base64":"  ","img":{"width":1316,"height":764,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":239727,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/importing-styles___6de1d121d0acc88b4545d04955c3eb89.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/importing-styles___6de1d121d0acc88b4545d04955c3eb89.png)

## Importing styles when creating a new section

To follow this guide, we recommend creating the [OurStores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section%23ourstore) section, which we will use as an example.

With [the section on the page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section%23ourstore), add some styles to it by opening the `components` folder and creating the `ourStores.module.scss` file. This file will import the FastStore UI components styles. Add the following code to the `ourStores.module.scss` file:

"src/components/ourStores.module.scss"

`1

.ourStores {

2

 @import '@faststore/ui/src/components/atoms/Button/styles.scss';

3

 @import '@faststore/ui/src/components/atoms/Select/styles.scss';

4

 @import '@faststore/ui/src/components/molecules/SelectField/styles.scss';

5

}

`

This code imports the [Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-icon) and [SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-select-field) styles to the custom component that you are creating. You also need to import the `Select` component styles since `SelectField` inherits them.

1. Now, import this stylesheet to `OurStores.tsx` file and apply it.
"src/components/OurStores.tsx"
`1
import React from 'react'
2
import { Button, Icon, SelectField } from '@faststore/ui'
3

4
import styles from './ourStores.module.scss'
5

6
export interface OurStoresProps {
7
 title: string
8
 description: string
9
}
10

11
export default function OurStores(props: OurStoresProps) {
12
 return (
13

14

{props.title}

15

{props.description}

16

17
 <SelectField
18
 id="select-state-store"
19
 label="State:"
20
 options={{
21
 newYork: 'New York',
22
 arizona: 'Arizona',
23
 massachusetts: 'Massachusetts',
24
 hawaii: 'Hawaii',
25
 }}
26
 />
27
 <SelectField
28
 id="select-city-store"
29
 label="City:"
30
 options={{
31
 newYorkCity: 'New York City',
32
 phoenix: 'Phoenix',
33
 boston: 'Boston',
34
 honolulu: 'Honolulu',
35
 }}
36
 />
37
 <Button
38
 variant="secondary"
39
 icon={<Icon name="ArrowRight" />}
40
 iconPosition="right"
41
 >
42
 Find Store
43
 </Button>
44

45

46
 )
47
}
`

You should be able to see something like the following:

![{"base64":"  ","img":{"width":2552,"height":946,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":135138,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/without-styles___4680d2a9a67e4175f3b73eff036ca8ac.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/without-styles___4680d2a9a67e4175f3b73eff036ca8ac.png)

1. Let's add more styles to it. You can customize it using the [design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview%23global-tokens) and [component's data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button%23customization).
"src/components/ourStores.module.scss"
`1
.ourStores {
2
 @import '@faststore/ui/src/components/atoms/Button/styles.scss';
3
 @import '@faststore/ui/src/components/atoms/Select/styles.scss';
4
 @import '@faststore/ui/src/components/molecules/SelectField/styles.scss';
5

6
 width: 100%;
7
 display: flex;
8
 flex-direction: column;
9
 justify-content: center;
10
 align-items: center;
11
 padding: var(--fs-spacing-5);
12
 margin: auto;
13
 background-color: var(--fs-color-neutral-bkg);
14

15
 [data-fs-select-field] {
16
 flex-direction: column;
17
 align-items: flex-start;
18

19
 [data-fs-select] {
20
 border: var(--fs-border-width) solid var(--fs-border-color);
21
 margin-top: var(--fs-spacing-0);
22
 width: 10rem;
23
 height: var(--fs-control-min-height);
24

25
 select {
26
 width: 100%;
27
 }
28
 }
29
 }
30
}
31

32
.ourStores__title {
33
 font-size: var(--fs-text-size-title-section);
34
 margin-bottom: var(--fs-spacing-1);
35
}
36

37
.ourStores__content {
38
 display: flex;
39
 align-items: flex-end;
40
 column-gap: var(--fs-spacing-5);
41
 margin: var(--fs-spacing-5);
42
}
`
"src/components/OurStores.tsx"
`1
import React from 'react'
2
import { Button, Icon, SelectField } from '@faststore/ui'
3

4
import styles from './ourStores.module.scss'
5

6
export interface OurStoresProps {
7
 title: string
8
 description: string
9
}
10

11
export default function OurStores(props: OurStoresProps) {
12
 return (
13

14

{props.title}

15

{props.description}

16

17
 <SelectField
18
 id="select-state-store"
19
 label="State:"
20
 options={{
21
 newYork: 'New York',
22
 arizona: 'Arizona',
23
 massachusetts: 'Massachusetts',
24
 hawaii: 'Hawaii',
25
 }}
26
 />
27
 <SelectField
28
 id="select-city-store"
29
 label="City:"
30
 options={{
31
 newYorkCity: 'New York City',
32
 phoenix: 'Phoenix',
33
 boston: 'Boston',
34
 honolulu: 'Honolulu',
35
 }}
36
 />
37
 <Button
38
 variant="secondary"
39
 icon={<Icon name="ArrowRight" />}
40
 iconPosition="right"
41
 >
42
 Find Store
43
 </Button>
44

45

46
 )
47
}
`

After applying these additional styles, you should be able to see this final look:

![{"base64":"  ","img":{"width":2552,"height":946,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":129326,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/with-styles___4b1cd40d4dcbbba544fd051b1f2dcb36.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/with-styles___4b1cd40d4dcbbba544fd051b1f2dcb36.png)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/_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/docs/styling/using-themes/importing-ui-components-styles.mdx)

[Styling a section« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-pages)[UI componentsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/components-index)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/_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/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-importing-ui-components-styles%23before-you-begin)

[Ensure you have a basic understanding of overrides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-importing-ui-components-styles%23ensure-you-have-a-basic-understanding-of-overrides)[Using CSS modules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-importing-ui-components-styles%23using-css-modules)

[Importing styles when overriding a component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-importing-ui-components-styles%23importing-styles-when-overriding-a-component)

[Importing styles when creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-importing-ui-components-styles%23importing-styles-when-creating-a-new-section)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/styling/using-themes/importing-ui-components-styles.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/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-importing-ui-components-styles%23before-you-begin)

[Ensure you have a basic understanding of overrides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-importing-ui-components-styles%23ensure-you-have-a-basic-understanding-of-overrides)[Using CSS modules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-importing-ui-components-styles%23using-css-modules)

[Importing styles when overriding a component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-importing-ui-components-styles%23importing-styles-when-overriding-a-component)

[Importing styles when creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles/docs/guides/faststore/using-themes-importing-ui-components-styles%23importing-styles-when-creating-a-new-section)

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 alternative api requests 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/alternative-api-requests/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

[Categories](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/categories)

[Brands](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/brands)

[Products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/products)

[Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/specifications)

[Product specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/product-specifications)

[SKU specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/sku-specifications)

[Updating SKU Specifications with Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/updating-sku-specifications-with-catalog-api)

[SKUs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/skus)

[Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/images)

[Alternative API requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests)

[How to implement product color variation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/how-to-implement-product-color-variation)

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/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/alternative-api-requests/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

[Categories](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/categories)

[Brands](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/brands)

[Products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/products)

[Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/specifications)

[Product specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/product-specifications)

[SKU specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/sku-specifications)

[Updating SKU Specifications with Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/updating-sku-specifications-with-catalog-api)

[SKUs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/skus)

[Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/images)

[Alternative API requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests)

[How to implement product color variation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/how-to-implement-product-color-variation)

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/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/alternative-api-requests/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

[Alternative API requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests)

Alternative API requests

As you may have noticed, many catalog API requests use VTEX IDs in order to create and update values. Fields like `BrandId`, `FieldId`, `FieldValueId`, `GroupId` and `CategoryId`.

While it is important to keep track of these IDs, there are some alternative endpoints that do not require them for performing some tasks.

## Create product using brand name and category path

[Create product API endpoint](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/post-product)

### Example body:

`1

{

2

 "Name": "Test Product",

3

 "CategoryPath": "Storage/Hard Drive",

4

 "BrandName": "Sample Brand",

5

 "RefId": "310117069123",

6

 "Title": "Browser Title for this product",

7

 "LinkId": "test-product",

8

 "Description": "This is a cool product",

9

 "ReleaseDate": "2019-01-01T00:00:00",

10

 "IsVisible": true,

11

 "IsActive": true,

12

 "TaxCode": "",

13

 "MetaTagDescription": "tag test",

14

 "ShowWithoutStock": true,

15

 "Score": 1

16

}

`

## Create product specification using field, group names

API request: [Associate product specification using specification and group names](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/put%5Fapi-catalog-pvt-product-productid-specificationvalue)

### Example body

`1

{

2

 "FieldName": "TesteAPI",

3

 "GroupName": "TestGroup",

4

 "RootLevelSpecification": true,

5

 "FieldValues": [

6

 "Value123"

7

 ]

8

}

`

Contributors

1

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

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/Integration-Guides/catalog-integration/alternative-api-requests.md)

[Images« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests//docs/guides/images)[How to implement product color variationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests//docs/guides/how-to-implement-product-color-variation)

Contributors

1

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

ON THIS PAGE

[Create product using brand name and category path](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests%23create-product-using-brand-name-and-category-path)

[Example body:](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests%23example-body)

[Create product specification using field, group names](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests%23create-product-specification-using-field-group-names)

[Example body](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests%23example-body)

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/Integration-Guides/catalog-integration/alternative-api-requests.md)

Copy page

On this page

ON THIS PAGE

[Create product using brand name and category path](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests%23create-product-using-brand-name-and-category-path)

[Example body:](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests%23example-body)

[Create product specification using field, group names](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests%23create-product-specification-using-field-group-names)

[Example body](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/alternative-api-requests/docs/guides/alternative-api-requests%23example-body)

On this page

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


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

[User] How do I use the VTEX store components 3.178.5 ProductName 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.store-components@3.178.5/ProductName/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/guides/pixel-apps)

---

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

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/updates/release-notes)

VTEX IO Apps

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

---

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

---

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

---

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

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/guides/pixel-apps)

---

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

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/vtex-io-apps)

Product Name

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

Version: 3.178.5

Latest version: 3.178.5

The `product-name` block is responsible for displaying a product name along with other information about the product, such as the **SKU** or **brand**.

![{"base64":"  ","img":{"width":2100,"height":1114,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":410146,"url":"https://user-images.githubusercontent.com/284515/70231165-8f6b4200-1738-11ea-9f06-3583c08fc693.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/284515/70231165-8f6b4200-1738-11ea-9f06-3583c08fc693.png)

## Configuration

1. Import the `vtex.store-components` app to your theme's dependencies in the `manifest.json` file, as in the following example:

`1

 "dependencies": {

2

 "vtex.store-components": "3.x"

3

 }

`

1. Add the `product-name` block to any child of the `store.product` template (Product Details Page template). For example:

`1

 "store.product": {

2

 "children": [

3

 "flex-layout.row#product",

4

 ]

5

 },

6

 "flex-layout.row#product": {

7

 "children": [

8

+ "product-name"

9

 ]

10

 },

`

1. Then, declare the `product-name` block using the props stated in the [Props](#props) table. For example:

`1

 "product-name": {

2

 "props": {

3

 "showSku": true,

4

 "showBrandName": true

5

 }

6

 },

`

### Props

| Prop name            | Type             | Description                                                                                | Default value |
| -------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| classes              | CustomCSSClasses | Overrides default CSS handles. For further information, please refer to [this document](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/css-handles%23usecustomclasses). Note that this is only helpful if you're using this block as a React component. | undefined     |
| displayMode          | enum             | Displays the product name (plainText) or the link to the product page (linkToProductPage).                                                                                | plainText     |
| showBrandName        | boolean          | Displays the brand name.                                                                                | false         |
| showProductReference | boolean          | Displays the product reference code.                                                                                | false         |
| showSku              | boolean          | Displays the SKU value.                                                                                | false         |
| showSponsoredBadge   | boolean          | Displays a sponsored badge above the product's name.                                                                                | false         |
| sponsoredBadgeLabel  | string           | Text of the sponsored badge if it's rendered.                                                                                | ""            |
| tag                  | string           | Defines the HTML tag of the product container. Possible values are: div, h1, h2, h3.                                                                                | div           |

## 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/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles            |
| ---------------------- |
| productBrand           |
| productNameBrandLoader |
| productNameContainer   |
| productNameLoader      |
| productNameSkuLoader   |
| productReference       |
| productSku             |
| sponsoredBadge         |

See also

[Vtex.store ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/apps/vtex.store-components)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/apps/vtex.store-components@3.178.5/ProductName%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/apps/vtex.store-components@3.178.5/ProductName%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductName/docs/apps/vtex.store-components@3.178.5/ProductName%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] How do I use the VTEX audara 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.audara/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.alexa-certify-code)

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

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

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

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

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

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.cybersource-fingerprint)

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

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.google-customer-reviews)

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

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

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

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

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

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

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.lucky-orange)

[Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.google-search-console)

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

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

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.tawk-to)

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

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.zendesk-chat)

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.alexa-certify-code)

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

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

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

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

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

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.cybersource-fingerprint)

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

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.google-customer-reviews)

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

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

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

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

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

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

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.lucky-orange)

[Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.google-search-console)

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

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

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.tawk-to)

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

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.zendesk-chat)

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

---

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

---

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

---

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

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

Audara

Official extension

Version: 1.0.3

Latest version: 1.0.3

> VTEX Audara first-party app

## Setup

Open a terminal and type:

`1

vtex install vtex.audara@1.x

`

Open your admin in the Apps section:

<https://YOURSTORENAME.myvtex.com/admin/apps/vtex.audara@1.0.0/setup>

Fill in your Audara's Account ID and click save.

[Alexa Certify« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.alexa-certify-code)[BluecoreNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.bluecore)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Setup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.audara/docs/apps/vtex.audara%23setup)

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