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

[User] Provide a guide on guides vtex io documentation best practices for associating a custom page with a content type in VTEX.

[Assistant]
Documentation

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

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-routing)

[Adding custom headers to your Store Framework store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-adding-custom-headers-to-your-store-framework-store)

[Best practices for associating a custom page with a content type](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type)

[Customizing your 404 page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-customizing-your-404-page)

[Enabling 404 pages for invalid single-segment paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-enabling-404-pages-for-invalid-single-segment-paths)

[Managing URL redirects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-managing-url-redirects)

[Using several service workers in your store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-using-several-service-workers-in-your-store)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-routing)

[Adding custom headers to your Store Framework store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-adding-custom-headers-to-your-store-framework-store)

[Best practices for associating a custom page with a content type](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type)

[Customizing your 404 page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-customizing-your-404-page)

[Enabling 404 pages for invalid single-segment paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-enabling-404-pages-for-invalid-single-segment-paths)

[Managing URL redirects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-managing-url-redirects)

[Using several service workers in your store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-using-several-service-workers-in-your-store)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/store-framework-routing)

[Best practices for associating a custom page with a content type](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type)

Best practices for associating a custom page with a content type

Configure URLs effectively when associating custom pages with content types.

[Custom landing pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-new-custom-page) are usually associated with specific store URLs. However, in some situations, it is helpful to associate a page template with a **content type** instead. Content types indicate the purpose of a page, such as Product Listing Pages (PLPs) and Product Detail Pages (PDPs).

Creating your own content types can simplify website content management. For example, you can create a content type named "Store Finder" for the web pages that display the cities where your store is located. To associate the assets of these pages with the Store Finder content type, you must set an ID value for Store Finder and use it as a variable in your route paths.

Follow the guidelines below to manage your website content more efficiently and ensure that your assets remain correctly associated with them, even when URLs change.

## Before you begin

Ensure you have created a new page following the guide [Creating a new custom page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-new-custom-page).

## URL guidelines

To associate a custom landing page with a content type, note the following when creating your URL:

### Setting up content type parameters

* Any URL parameter named `{entity}_id` is identified as a content type. For example, `finder_id` creates the `${finder}` content type.
> For the URL definition, adding the content type identifier is not enough. You must also attach `_id` next to it. For example, if you create a URL like `/store/:category`, the content will be tied to that URL since there is no parameter that can be interpreted as a content type. Thus, if you access _Storefront > Site Editor_ and update the content for `/store/bakery`, the content related to any page matching `/store/:category` will also be updated.
* The page URL can have only one parameter to indicate a content type.
* The page URL can have only one parameter ending with `_id`.
* Any additional variable parameters in the URL are ignored when matching content. For example, if you create the route `/store/:category/:{entity}_id`, the same content will be delivered for `/store/bakery/1` and `/store/beverages/1` as they both relate to the `{$entity}` content type.

### Handling URL changes

If you change your URL, the assets will remain associated with the content type, not the specific URL.

For example, if you create a page with the URL `/store/:store_id`, where `store_id` represents the `${store}` content type, and later change it to `/store-finder/:store_id`, the assets will still be accessible at the new URL, as both URLs relate to the `${store}` content type.

### Dos and Don'ts

| ✅ Do                 | Explanation                                                                                |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| /store/:{entity}\_id | The URL uses a content type parameter (ending with \_id), allowing the system to identify the content type. For example: If {entity} is a finder, this URL would link to the ${finder} content type. |

| ❌ Don'ts                           | Explanation                                                                                |
| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| /store/:{entity}                   | The URL is wrong because it lacks the required \_id suffix. Without \_id, the system cannot identify it as a content type, which means no assets will be associated with this URL.                             |
| /store/:category/:{entity}\_id     | While this URL includes a valid content type parameter, additional variable parameters (like :category) are ignored when determining content association. This can lead to unexpected content being delivered. |
| /store/:{entity}\_id/{entity2}\_id | The URL is not allowed because it has two parameters ending with \_id. To maintain clarity in the content association, a URL can only have one content type parameter ending with \_id.                        |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/pages/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type.md)

[Adding custom headers to your Store Framework store« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type//docs/guides/vtex-io-documentation-adding-custom-headers-to-your-store-framework-store)[Customizing your 404 pageNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type//docs/guides/vtex-io-documentation-customizing-your-404-page)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type%23before-you-begin)

[URL guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type%23url-guidelines)

[Setting up content type parameters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type%23setting-up-content-type-parameters)[Handling URL changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type%23handling-url-changes)[Dos and Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type%23dos-and-donts)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/pages/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type%23before-you-begin)

[URL guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type%23url-guidelines)

[Setting up content type parameters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type%23setting-up-content-type-parameters)[Handling URL changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type%23handling-url-changes)[Dos and Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type/docs/guides/vtex-io-documentation-best-practices-for-associating-a-custom-page-with-a-content-type%23dos-and-donts)

On this page

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


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

[User] Provide a guide on guides vtex io documentation styles builder in VTEX.

[Assistant]
Documentation

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

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

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

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

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/storefront-development)

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/troubleshooting)

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-getting-started)

---

Project structure

[Manifest](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-manifest)

[Billing Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-billing-options)

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-builders)

[Admin Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-admin-builder)

[Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-assets-builder)

[Docs Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-docs-builder)

[GraphQL Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-graphql-builder)

[Messages Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-messages-builder)

[Node Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-node-builder)

[PaymentProvider Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-paymentprovider-builder)

[Pixel Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-pixel-builder)

[React Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-react-builder)

[Store Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-store-builder)

[Styles Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-styles-builder)

[Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-dependencies)

[Peer Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-peerdependencies)

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/troubleshooting)

---

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-getting-started)

---

Project structure

[Manifest](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-manifest)

[Billing Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-billing-options)

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-builders)

[Admin Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-admin-builder)

[Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-assets-builder)

[Docs Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-docs-builder)

[GraphQL Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-graphql-builder)

[Messages Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-messages-builder)

[Node Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-node-builder)

[PaymentProvider Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-paymentprovider-builder)

[Pixel Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-pixel-builder)

[React Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-react-builder)

[Store Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-store-builder)

[Styles Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-styles-builder)

[Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-dependencies)

[Peer Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-peerdependencies)

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

Project structure

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-builders)

[Styles Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-styles-builder)

Styles builder

Learn how to use the VTEX IO Styles builder.

The `styles` builder helps you set a cohesive style for all components within your Store Theme app. During the app-building process, the `styles` builder interprets the `styles/style.json` file using [Tachyons](https://read.calvincode.net/reader?url=https://tachyons.io/) to generate your storefront’s CSS.

Using this builder, you avoid having to customize each component on different pages, as you set a standard style.

## Folder structure

An app that uses the `styles` builder has a folder named `/styles` in its root directory. The directory structure may vary depending on the specific project settings.

Below is the folder structure of this builder:

`1

styles

2

 ┣ 📄 style.json

`

The `style.json` file contains information relevant to styling, such as type scales, spacing, colors, typography, and other style-related settings.

## Usage

If you are developing a Store Theme with VTEX IO and Store Framework from the [Store Theme boilerplate](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-theme), the `styles` builder is installed automatically, and the `/styles` folder is created in the directory root.

> To learn more about app development using this builder, see the [Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-definingstyles) guide.

## Use case examples

An app using the `styles` builder has a folder named `/styles` in its root directory and the `style.json` file in it. The directory structure may vary depending on specific project settings.

The basic structure of a `/styles` folder is composed of the following files, as you can see in the [Store Theme app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-theme) repository:

`1

styles

2

 ┣ 📂 configs

3

 ┗ 📄 style.json

4

 ┣ 📂 css

`

* Within the `style.json` file, there is a set of values and configurations to be used to guide styling decisions.
* The `css` folder contains the CSS files, which, in turn, can be organized into different folders.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/concepts/vtex-io-documentation-builders/vtex-io-documentation-styles-builder.md)

[Store Builder« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder//docs/guides/vtex-io-documentation-store-builder)[DependenciesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder//docs/guides/vtex-io-documentation-dependencies)

Contributors

1

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

ON THIS PAGE

[Folder structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-styles-builder%23folder-structure)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-styles-builder%23usage)

[Use case examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-styles-builder%23use-case-examples)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/concepts/vtex-io-documentation-builders/vtex-io-documentation-styles-builder.md)

Copy page

On this page

ON THIS PAGE

[Folder structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-styles-builder%23folder-structure)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-styles-builder%23usage)

[Use case examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-styles-builder/docs/guides/vtex-io-documentation-styles-builder%23use-case-examples)

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 hide anonymous customer option 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/hide-anonymous-customer-option/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/hide-anonymous-customer-option)

[Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

[Enable the Observation field in the order screen](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/enable-the-remarks-field-in-the-order-screen)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/sales-associate-code)

[Enable cart transfer and capture between devices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/force-stock-availability)

[Add extra text to the order summary print](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/add-extra-text-to-the-order-print)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/hide-print-order-and-reprint-receipt-buttons)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/hide-cancellation-buttons)

[Allow manual prices on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/allow-manual-prices-on-vtex-sales-app)

[Integration VTEX Sales App Local stock sale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/integration-vtex-sales-app-local-stock-sale)

---

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/hide-anonymous-customer-option/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/troubleshooting)

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/hide-anonymous-customer-option)

[Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

[Enable the Observation field in the order screen](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/enable-the-remarks-field-in-the-order-screen)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/sales-associate-code)

[Enable cart transfer and capture between devices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/force-stock-availability)

[Add extra text to the order summary print](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/add-extra-text-to-the-order-print)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/hide-print-order-and-reprint-receipt-buttons)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/hide-cancellation-buttons)

[Allow manual prices on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/allow-manual-prices-on-vtex-sales-app)

[Integration VTEX Sales App Local stock sale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/integration-vtex-sales-app-local-stock-sale)

---

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/hide-anonymous-customer-option/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides)

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/how-to-customize-vtex-sales-app)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/hide-anonymous-customer-option)

Hide anonymous customer option

By default, inStore shows the option to continue as an anonymous customer in the **[New order page](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-sales-app-using-the-app--4BYzQIwyOHvnmnCYQgLzdr/2l56Bc2V1Xjv93JddsdEMi)**. If you want to hide this option, you can change its display by editing the `checkout-instore-custom.css` file. Check out the [How to customize VTEX Sales App guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/how-to-customize-vtex-sales-app%23css-customizations) for further information on how to access this file.

## Edit the `checkout-instore-custom.css` file

To customize the display of the container with the `Continue as anonymous` button, you must declare the following IDs and properties in the `checkout-instore-custom.css` file.

In the **UI display** column below, you can see how the element you can hide is rendered in VTEX Sales App’s UI. You can click on each image to enlarge it.

`` 1

{

2

"data": {

3

"h-0": "CSS ID selector name",

4

"h-1": "Description",

5

"h-2": "UI display",

6

"0-0": "`customer-anonymous-container`",

7

"0-1": "The ID selector you can use to style the `Continue as anonymous` button. This button enables you to place an order on VTEX Sales App without identifying the customer.",

8

"0-2": "![continue-as-anonymous](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/hide-anonymous-customer-option-0.png)"

9

},

10

"cols": 3,

11

"rows": 1

12

}

 ``

If you want to hide this element, you must use its ID selector and declare the display property with the value set as none in the `checkout-instore-custom.css` file, as exemplified below.

`1

#customer-anonymous-container {

2

 display: none;

3

}

`

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Sales-App/how-to-customize-vtex-sales-app/hide-anonymous-customer-option.md)

[Change VTEX Sales App language« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option//docs/guides/change-vtex-sales-app-language)[Define payment methods displayed on VTEX Sales AppNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option//docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

Contributors

1

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

ON THIS PAGE

[Edit the checkout-instore-custom.css file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/hide-anonymous-customer-option%23edit-the-checkout-instore-customcss-file)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Sales-App/how-to-customize-vtex-sales-app/hide-anonymous-customer-option.md)

Copy page

On this page

ON THIS PAGE

[Edit the checkout-instore-custom.css file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-anonymous-customer-option/docs/guides/hide-anonymous-customer-option%23edit-the-checkout-instore-customcss-file)

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 product quantity 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.product-quantity/docs/guides)

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

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

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

VTEX IO Apps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Product Quantity

Official extension

Version: 1.10.0

Latest version: 1.10.0

[![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl1L8f2MmAAz0A3OFonzpAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

The Product Quantity allows users to a add a chosen amount of the displayed product in their cart.

![{"base64":"  ","img":{"width":2856,"height":1472,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":373243,"url":"https://user-images.githubusercontent.com/52087100/70237475-0f4bd900-1746-11ea-9af2-38f794f4a3dd.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/70237475-0f4bd900-1746-11ea-9af2-38f794f4a3dd.png)

## Configuration

1. Add the Product Quantity app to your dependencies in the theme's `manifest.json` file:

`1

 "dependencies": {

2

 "vtex.product-quantity": "1.x"

3

 }

`

You are now able to use all blocks that are exported by the Product Quantity app. Check out the full list below:

| Block name               | Description                                                                                |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| product-quantity         | Displays a quantity selector on the product details page. This block must be declared in the theme's store.product page template.                                                                    |
| product-summary-quantity | Displays a quantity selector on [Product Summary](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all/vtex.product-summary/)'s blocks. This block must be declared as a children of the product-summary.shelf block. |

1. According to your desired scenario, add the `product-quantity`/`product-summary-quantity` blocks to your theme. For example:

`1

 "flex-layout.col#product-price": {

2

 "props": {

3

 "preventVerticalStretch": true,

4

 "rowGap": 0

5

 },

6

 "children": [

7

 "product-name",

8

 "product-price#product-details",

9

 "product-separator",

10

+ "product-quantity",

11

 "sku-selector",

12

 "flex-layout.row#buy-button",

13

 "availability-subscriber",

14

 "shipping-simulator",

15

 "share"

16

 ]

17

 },

18

 "product-quantity": {

19

 "props": {

20

 "warningQuantityThreshold": 9999999,

21

 "showUnit": true

22

 }

23

 },

`

_In the example above a Product Details Page is built using Flex Layout and the `product-quantity` block._

### `product-quantity` and `product-summary-quantity` props

| Prop name                | Type    | Description                                                                                | Default Value                     |
| ------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| warningQuantityThreshold | number  | Displays the quantity of remaining items in stock if the available quantity is less than or equal to the value given to this property.                                                                                | 0 (the quantity is not displayed) |
| showUnit                 | boolean | Whether the unit of measurement should be displayed (true) or not (false).                                                                                | true                              |
| size                     | enum    | Preset size values for font-size and padding. You can check these value measures by accessing the [VTEX Styleguide](https://read.calvincode.net/reader?url=https://styleguide.vtex.com/%23/Components/Forms/NumericStepper). Possible values are: small, regular, and large.                                                                                | small                             |
| showLabel                | boolean | Whether a label should be displayed (true) or not (false).                                                                                | true                              |
| selectorType             | enum    | Defines how the quantity selector should initially behave. Possible values are: stepper (displays an input field where the quantity can be directly defined, in addition to side buttons to increase or decrease the value) and dropdown (shows a list of predefined-quantity options. In case the last quantity option is selected by users, the component is replaced with an input). | stepper                           |
| quantitySelectorStep     | enum    | Defines how the number of products that have unitMultiplier will works. Possible values are: singleUnit (the quantity will be not affected with the unitMultiplier) and unitMultiplier (the quantity will be affected with the unitMultiplier).                                                                                | unitMultiplier                    |

## Customization

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

| CSS Handles                             |
| --------------------------------------- |
| availableQuantityContainer              |
| quantitySelectorContainer               |
| quantitySelectorDropdownContainer       |
| quantitySelectorDropdownMobileContainer |
| quantitySelectorInputContainer          |
| quantitySelectorInputMobileContainer    |
| quantitySelectorStepper                 |
| quantitySelectorTitle                   |
| summaryContainer                        |

[Product Price« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-quantity/docs/apps/vtex.product-price)[Product SpecificationsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-quantity/docs/apps/vtex.product-specifications)

See also

[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.product-quantity/docs/apps/vtex.product-quantity%23configuration)

[product-quantity and product-summary-quantity props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-quantity/docs/apps/vtex.product-quantity%23product-quantity-and-product-summary-quantity-props)

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