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

[User] Explain the VTEX api reference marketplace apis API and how to use it.

[Assistant]
Documentation

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

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

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

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

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

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/marketplace-apis/docs/troubleshooting)

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

API Reference

Filter By

Post

Get

Put

Delete

Patch

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Notification

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

Matched Offers

Seller Invite

Seller Commissions

Sellers

[Offer Management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/marketplace-apis/docs/api-reference/marketplace-apis-offer-management/)

Sales Channel Mapping

Affiliates

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

API Reference

Filter By

Post

Get

Put

Delete

Patch

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Notification

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

Matched Offers

Seller Invite

Seller Commissions

Sellers

[Offer Management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/marketplace-apis/docs/api-reference/marketplace-apis-offer-management/)

Sales Channel Mapping

Affiliates

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

[DeDelete polygon« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/marketplace-apis/docs/api-reference/logistics-api%23delete-/api/logistics/pvt/configuration/geoshape/-polygonName-)[PoNotify marketplace of price updateNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/marketplace-apis/docs/api-reference/marketplace-apis%23post-/notificator/-sellerId-/changenotification/-skuId-/price)

[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 session client 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.session-client/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

[AB Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtexarg.abtester)

[Abandoned Cart Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.abandoned-cart-service)

[Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.badges)

[Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.broadcaster)

[Catalog Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.catalog-images)

[Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.checkout-ui-custom)

[Checkout UI Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.checkout-ui-settings)

[Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.messages)

[Product Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.product-context)

[Pickup point selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtexbr.pickup-selector)

[Rewriter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.rewriter)

[Responsive Values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.responsive-values)

[Search GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.search-graphql)

[Session Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.session-client)

[Session Client GraphQL API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.session-client/session-client-graphql-api)

[Store Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.store-icons)

[Store Sitemap](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.store-sitemap)

[VTEX Telemarketing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.telemarketing)

[Assembly Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/guides/assembly-options-app)

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/guides/affiliates-program-app)

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

[AB Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtexarg.abtester)

[Abandoned Cart Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.abandoned-cart-service)

[Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.badges)

[Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.broadcaster)

[Catalog Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.catalog-images)

[Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.checkout-ui-custom)

[Checkout UI Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.checkout-ui-settings)

[Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.messages)

[Product Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.product-context)

[Pickup point selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtexbr.pickup-selector)

[Rewriter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.rewriter)

[Responsive Values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.responsive-values)

[Search GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.search-graphql)

[Session Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.session-client)

[Session Client GraphQL API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.session-client/session-client-graphql-api)

[Store Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.store-icons)

[Store Sitemap](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.store-sitemap)

[VTEX Telemarketing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.telemarketing)

[Assembly Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/guides/assembly-options-app)

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/guides/affiliates-program-app)

---

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

---

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

---

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

---

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

---

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

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

Session Client

Official extension

Version: 1.0.5

Latest version: 1.0.5

The Session Client app provides React hooks and GraphQL queries for your components to read and update the [VTEX Session cookie](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/vtex-session-sessions-system-overview--6C4Edou6bYqqEAOCAg2MQQ), responsible for saving data of a specific session of a user browsing in your store.

## Installation

In your React app's `manifest.json` file, add the Session Client app to the dependency list:

`1

"dependencies": {

2

 "vtex.session-client": "1.x"

3

 }

`

> You can have full TypeScript support running `vtex setup --typings` in your CLI afterwards.

## Configuration

The Session Client's React hooks allow you to read and update the VTEX Session cookie as desired. On the other hand, the GraphQL query and mutation enable your app to fetch and change the current user session.

### React hooks

To read the VTEX Session cookie:

* [useRenderSession](#useRenderSession)
* [useFullSession](#useFullSession)
* [useLazyFullSession](#useLazyFullSession)

To update the VTEX Session cookie:

* [useUpdateSession](#useUpdateSession)
* [useUpdateSessionInline](#useUpdateSessionInline)

#### `useRenderSession` hook

This hook is the fastest way to access session data, using the session response from `render-session`. One caveat: the session values are limited to a [set of values](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/render-session/blob/master/src/constants.ts). If you need fields that are not in this set, you can use [useFullSession](#useFullSession) or [useLazyFullSession](#useLazyFullSession).

`1

import React from 'react'

2

import { useRenderSession } from 'vtex.session-client'

3

4

function MyComponent() {

5

 const { loading, session, error } = useRenderSession()

6

7

 if (loading) {

8

 return \<\>Session is loading</>

9

 }

10

11

 if (error) {

12

 return \<\>Session has errors</>

13

 }

14

15

 console.log({ session })

16

17

 return \<\>Session is ready</>

18

}

19

20

export default MyComponent

`

#### `useFullSession` hook

> It's not possible to return the session during Server Side Rendering since it is a private query.

Runs a GraphQL query on the client side to query the full user session.

Under the hood, it's a wrapper of React Apollo's `useQuery` passing the GraphQL session query. You can read more about the `useQuery` API [here](https://read.calvincode.net/reader?url=https://www.apollographql.com/docs/react/api/react/hooks/%23usequery).

`1

import React from 'react'

2

import { useFullSession } from 'vtex.session-client'

3

4

function MyComponent() {

5

 const { loading, data, error } = useFullSession()

6

7

 if (loading) {

8

 return \<\>Session is loading</>

9

 }

10

11

 if (error) {

12

 return \<\>Session has errors</>

13

 }

14

15

 console.log({ session: data?.session })

16

17

 return \<\>Session is ready</>

18

}

19

20

export default MyComponent

`

It also accepts a GraphQL variable called `items` which is an array of strings. These strings should match attributes inside the Session object, and only those attributes will be then fetched and returned.

For example:

`1

useFullSession({

2

 variables: {

3

 items: ['store.channel', 'store.countryCode']

4

 }

5

})

`

#### `useLazyFullSession` hook

The same as [useFullSession](#useFullSession), but it uses React Apollo's `useLazyQuery` hook instead. You can read more about `useLazyQuery` API [here](https://read.calvincode.net/reader?url=https://www.apollographql.com/docs/react/api/react/hooks/%23uselazyquery).

`1

import React from 'react'

2

import { useLazyFullSession } from 'vtex.session-client'

3

4

function MyComponent() {

5

 const [getSession, session] = useLazyFullSession()

6

7

 console.log({ session })

8

9

 return <button onClick={() => getSession()}>Get session</button>

10

}

11

12

export default MyComponent

`

It also accepts a GraphQL variable called `items`, which is an array of strings. These strings should match attributes inside the Session object, and only those attributes will be then fetched and returned.

For example:

`1

useLazyFullSession({

2

 variables: {

3

 items: ['store.channel', 'store.countryCode']

4

 }

5

})

`

#### `useUpdateSession` hook

Updates the values of a session. Under the hood, it uses React Apollo's `useMutation` hook. You can read more about `useMutation` API [here](https://read.calvincode.net/reader?url=https://www.apollographql.com/docs/react/api/react/hooks/%23usemutation).

Unlike the `useMutation` hook, this one only returns the mutation function (called in the example below as `updateSession`) — it does not return the mutation result.

After calling the mutation function, the hook reloads the page, guaranteeing that the whole page data is updated to the new session parameters. This is extremely useful in pages where the content changes according to the session values, such as the search results.

`1

import React from 'react'

2

import { useUpdateSession } from 'vtex.session-client'

3

4

function MyComponent() {

5

 const updateSession = useUpdateSession()

6

7

 return (

8

 <button

9

 onClick={() =>

10

 updateSession({

11

 variables: {

12

 fields: { foo: 'bar', baz: 123 },

13

 },

14

 })

15

 }

16

 >

17

 Update session

18

 </button>

19

 )

20

}

21

22

export default MyComponent

`

#### `useUpdateSessionInline` hook

Updates the values of a session. Under the hood, it uses React Apollo's `useMutation` hook. You can read more about `useMutation` API [here](https://read.calvincode.net/reader?url=https://www.apollographql.com/docs/react/api/react/hooks/%23usemutation).

Differently from the [useUpdateSession](#useUpdateSession), this hook will not reload the page after calling the mutation function.

`1

import React from 'react'

2

import { useUpdateSessionInline } from 'vtex.session-client'

3

4

function MyComponent() {

5

 const [updateSession, updatedSession] = useUpdateSessionInline()

6

7

 console.log({ updatedSession })

8

9

 return (

10

 <button

11

 onClick={() =>

12

 updateSession({

13

 variables: {

14

 fields: { foo: 'bar', baz: 123 },

15

 },

16

 })

17

 }

18

 >

19

 Update session

20

 </button>

21

 )

22

}

23

24

export default MyComponent

`

It also accepts a GraphQL variable called `items`, which is an array of strings. These strings should match attributes inside of the Session object, and only those attributes will be then fetched and returned.

For example:

`1

updateSession({

2

 variables: {

3

 fields: { foo: 'bar', baz: 123 },

4

 items: ['store.channel', 'store.countryCode']

5

 }

6

})

`

### GraphQL query and mutation

#### `session` query

Gets the current user session.

`1

query session($items: [String]) {

2

 session(items: $items) @context(provider: "vtex.session-client") {

3

 ... on SessionSuccess {

4

 id

5

 namespaces

6

 }

7

 ... on SessionError {

8

 type

9

 message

10

 }

11

 }

12

}

`

#### `updateSession` mutation

Changes the current user session using the following variables: `{ "fields": { "foo": 123, "baz": "abc" } }`

`1

mutation updateSession($fields: SessionFieldsJSONInput!, $items: [String]) {

2

 updateSession(fields: $fields, items: $items)

3

 @context(provider: "vtex.session-client") {

4

 ... on SessionSuccess {

5

 id

6

 namespaces

7

 }

8

 ... on SessionError {

9

 type

10

 message

11

 }

12

 }

13

}

`

[Search GraphQL« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.search-graphql)[Session Client GraphQL APINext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.session-client/session-client-graphql-api)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)[Session Client Graphql APIVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.session-client@1.0.5/session-client-graphql-api)

ON THIS PAGE

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.session-client%23installation)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.session-client%23configuration)

[React hooks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.session-client%23react-hooks)[GraphQL query and mutation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.session-client/docs/apps/vtex.session-client%23graphql-query-and-mutation)

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 sticky layout 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.sticky-layout/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

[Condition Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.condition-layout)

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.stack-layout)

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

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.tab-layout)

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

[Condition Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.condition-layout)

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.stack-layout)

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

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.tab-layout)

---

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

---

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

---

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

---

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

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

VTEX Sticky Layout

Official extension

Version: 0.3.6

Latest version: 0.3.6

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

The Sticky Layout app provides layout structures to help building elements that should be fixed relative to the viewport in certain contexts.

> Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
>
> You can understand more by reading about in the [MDN position documentation](https://read.calvincode.net/reader?url=https://developer.mozilla.org/en-US/docs/Web/CSS/position%23Sticky%5Fpositioning).

* [sticky-layout](#sticky-layout)
* [sticky-layout.stack-container](#sticky-layoutstack-container)

## Blocks

### `sticky-layout`

The `sticky-layout` block is responsible for making its children _stick_ to a certain position on the page when exiting the viewport while scrolling.

**Props:**

| Prop name       | Type         | Description                                                                    | Default value |
| --------------- | ------------ | ------------------------------------------------------------------------------ | ------------- |
| blockClass      | String       | Unique class name to be appended to the container class                        | ""            |
| position        | PositionEnum | Indicates where the component should stick                                     | N/A           |
| verticalSpacing | Number       | Indicates the distance in pixels from the position chosen in the position prop | 0             |

`PositionEnum` options:

| Enum name | Enum value | Description                                  |
| --------- | ---------- | -------------------------------------------- |
| TOP       | 'top'      | Component will stick to the top of screen    |
| BOTTOM    | 'bottom'   | Component will stick to the bottom of screen |

**CSS Handles:**

| Prop name      | Description                                                                                |
| -------------- | ------------------------------------------------------------------------------------------------------------- |
| container      | Sticky layout container                                                                                |
| wrapper        | Wrapper element that takes up the space previously used by the stuck element to prevent the page from jumping |
| wrapper--stuck | Sticky layout wrapper when stuck to a position on the page                                                    |

**Example usage:**

`1

{

2

 "store.product": {

3

 "children": [

4

 "flex-layout.row#product-breadcrumb",

5

 "flex-layout.row#product-main",

6

 "sticky-layout#buy-button"

7

 ],

8

 "parent": {

9

 "challenge": "challenge.address"

10

 }

11

 },

12

 "sticky-layout#buy-button": {

13

 "props": {

14

 "position": "bottom"

15

 },

16

 "children": ["flex-layout.row#buy-button"]

17

 },

18

 "flex-layout.row#buy-button": {

19

 "props": {

20

 "marginTop": 4,

21

 "marginBottom": 7,

22

 "paddingBottom": 2

23

 },

24

 "children": ["buy-button"]

25

 }

26

}

`

### `sticky-layout.stack-container`

The `sticky-layout.stack-container` block can be used to orchestrate multiple `sticky-layout`s to have a stack behavior instead of one being on top of the other.

**Props:**

| Prop name | Type         | Description                                                                                | Default value |
| --------- | ------------ | ----------------------------------------------------------------------------------------------------- | ------------- |
| position  | PositionEnum | Indicates where the component should stick. _It overrides the position of its children sticky-layout_ | N/A           |

`PositionEnum` options:

| Enum name | Enum value | Description                                  |
| --------- | ---------- | -------------------------------------------- |
| TOP       | 'top'      | Component will stick to the top of screen    |
| BOTTOM    | 'bottom'   | Component will stick to the bottom of screen |

**Example usage:**

Imagine three blocks: the first and the last being a `sticky-layout` and the second being any other block. A gap between both `sticky-layout`s will appear the moment the user starts scrolling the page. By defining those blocks inside a `sticky-layout.stack-container`, the second `sticky-layout` block will stick to the first `sticky-layout` instead of respecting the aformetioned gap or being one on top of the other.

`1

{

2

 "header": {

3

 "blocks": ["header-layout.desktop"]

4

 },

5

 "header.full": {

6

 "blocks": ["header-layout.desktop"]

7

 },

8

 "header-layout.desktop": {

9

 // define a stack-container

10

 "children": ["sticky-layout.stack-container#header"]

11

 },

12

 "sticky-layout.stack-container#header": {

13

 "props": {

14

 "position": "top"

15

 },

16

 "children": [

17

 "sticky-layout#links-menu",

18

 // this notification.bar is not sticky, it will be scrolled away

19

 "notification.bar#home",

20

 "sticky-layout#main-menu"

21

 ]

22

 },

23

 "notification.bar#home": {

24

 "props": {

25

 "content": "SELECTED ITEMS ON SALE! CHECK IT OUT!"

26

 }

27

 },

28

 "sticky-layout#links-menu": {

29

 "children": ["vtex.menu@2.x:menu#websites"]

30

 },

31

 "sticky-layout#main-menu": {

32

 "children": ["vtex.menu@2.x:menu#category-menu"]

33

 }

34

}

`

[Stack Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.stack-layout)[Tab LayoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.tab-layout)

See also

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

ON THIS PAGE

[Blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.sticky-layout%23blocks)

[sticky-layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.sticky-layout%23sticky-layout)[sticky-layout.stack-container](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.sticky-layout/docs/apps/vtex.sticky-layout%23sticky-layoutstack-container)

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 store header 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-header/docs/guides)

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

VTEX IO Apps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Header

Official extension

Version: 2.29.0

Latest version: 2.29.0

The Header app is responsible for displaying a **navigation bar** fixed on a store's page upper side. Other blocks that are important for user navigation are found in the Header, for example the store's [logo](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all/vtex.store-components/logo), the [minicart](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all/vtex.minicart/), user [login](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all/vtex.login/) and [search bar](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all/vtex.store-components/search-bar).

![{"base64":"  ","img":{"width":2854,"height":1578,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1340793,"url":"https://user-images.githubusercontent.com/52087100/74090325-b6235d00-4a88-11ea-8227-317f93204d8f.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/74090325-b6235d00-4a88-11ea-8227-317f93204d8f.png)

## Configuration

1. Add the `store-header` app to your theme's dependencies in `manifest.json`:

`1

 dependencies: {

2

 "vtex.store-header": "2.x"

3

 }

`

Now, you are able to use all blocks exported by the `store-header` app. Check out the full list below:

| Block name            | Description                                                                                |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| header-layout.desktop | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Defines the Header layout for desktop device through header-row blocks. |
| header-layout.mobile  | Defines the Header layout for mobile device through header-row blocks.                                                                                |
| header-row            | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Create Header lines according to your store needs.                      |
| header-border         | Adds a 1px margin to a Header row.                                                                                |
| header-force-center   | Centralizes its children blocks in a Header row.                                                                                |
| header-spacer         | Adds spacing between blocks throughout a Header row.                                                                                |

1. Declare the two `header-layout` blocks, allowing you to define how the Header should be displayed for both mobile and desktop:

`1

{

2

 "header": {

3

 "blocks": [

4

 "header-layout.desktop",

5

 "header-layout.mobile"

6

 ]

7

 },

`

:information\_source: _The Header does not need to be declared in a specific template of your theme, once the app is defined as default store interface element in the `interfaces.json` file. This means that Store Framework will reproduce the configurations defined in the file you just created for all store templates behind the scenes. If you want to apply different configurations to each store template, check the **advanced configurations** section below._

1. Configure both `header-layout.desktop` and `header-layout.mobile`, declaring `header-row` to create Header lines according to your store needs.

`1

{

2

 "header": {

3

 "blocks": [

4

 "header-layout.desktop",

5

 "header-layout.mobile"

6

 ]

7

 },

8

 "header-layout.desktop": {

9

 "children": [

10

 "header-row#1-desktop",

11

 "header-row#2-desktop",

12

 "header-row#3-desktop",

13

 "header-row#4-desktop"

14

 ]

15

 },

`

:warning: _In the example above, we configured 4 different levels for `header-layout.desktop`. It will thus be possible to replicate the Header displayed above sheltering the telemarketing functionalities (when activated), a notification, links to pages and every other blocks, such as Logo, Menu, etc. **Remember that the number of `header-row`s should meet your business needs**, determining how many Header lines you want to apply to your store._

1. Configure each of the `header-row`s , applying props and declaring the desired store blocks for each line. To correctly structure your Header, you should check the [documentation](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all) for each of the desired blocks. The most commonly used are [Logo](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all/vtex.store-components/logo), [Minicart](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all/vtex.minicart/) and [Menu](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all/vtex.menu/). In the example below, we will configure the `header-row#1-desktop` as [Telemarketing](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all/vtex.telemarketing/):

`1

"header-row#1-desktop": {

2

 "children": [

3

 "telemarketing"

4

 ],

5

 "props": {

6

 "fullWidth": true

7

 }

8

},

`

* `header-row` props:

| Prop name | Type    | Description                                                                                | Default value |
| --------- | ------- | ------------------------------------------------------------------------------------------------------------ | ------------- |
| zIndex    | Number  | CSS property that controls the vertical stacking order of elements for overlapping.                          | 0             |
| sticky    | Boolean | Whether the Header margin should be fixed on the layout (true) or not (false)                                | false         |
| fullWidth | Boolean | Whether the Header should take the full width of the screen or not                                           | true          |
| inverted  | Boolean | Whether the row will use the base color (false) or the inverted base color (true) as defined in styles.json. | false         |

:warning: _**Repeat step 4 for any other `header-rows` you may have in the `header-layout.desktop`**. Remember to declare the desired blocks for each row, as we declared the Telemarketing block for the `header-row#1-desktop`, and properly configure all blocks using props. Once it is all finished, **redo steps 3 and 4 to define your `header-layout.mobile` as well**_.

Three blocks can be added as `header-row`'s children in order to customize your Header row layout: `header-border`, `header-force-center` and `header-spacer`.

* **`header-border`**:

When declared, the `header-border` block adds a `1px` margin to your store's Header.

`1

"header-row#2-desktop": {

2

 "children": [

3

 "header-border",

4

 "notification.bar#home"

5

 ],

6

 "props": {

7

 "fullWidth": "true"

8

 }

9

},

10

"notification.bar#home": {

11

 "props": {

12

 "content": "SELECTED ITEMS ON SALE! CHECK IT OUT!"

13

 }

14

},

`

| Prop name | Type    | Description                                                    | Default value |
| --------- | ------- | -------------------------------------------------------------- | ------------- |
| sticky    | Boolean | Whether the Header margin should be fixed in the layout or not | false         |

* **`header-force-center`**

When passed on, the `header-force-center` centralizes its children blocks in a Header row, for example:

`1

"header-row#4-desktop": {

2

 "props": {

3

 "blockClass": "main-header",

4

 "horizontalAlign": "center",

5

 "verticalAlign": "center",

6

 "preventHorizontalStretch": true,

7

 "preventVerticalStretch": true,

8

 "fullWidth": true

9

 },

10

 "children": ["header-force-center"]

11

},

12

"header-force-center": {

13

 "children":[

14

 "logo#desktop"

15

 ]

16

},

17

"logo#desktop": {

18

 "props": {

19

 "title": "Logo",

20

 "href": "/",

21

 "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",

22

 "width": "180"

23

 }

24

},

`

![{"base64":"  ","img":{"width":2850,"height":1576,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1413481,"url":"https://user-images.githubusercontent.com/52087100/76665339-2d577f80-6566-11ea-981d-3f4cdaec1a2b.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/76665339-2d577f80-6566-11ea-981d-3f4cdaec1a2b.png)

* **`header-spacer`**:

The `header-spacer` is tasked with adding spacing between blocks throughout the Header rows. For example:

`1

"header-row#3-desktop": {

2

 "children": [

3

 "vtex.menu@2.x:menu#websites",

4

 "header-spacer",

5

 "vtex.menu@2.x:menu#institutional"

6

 ],

7

 "props": {

8

 "blockClass": "menu-link",

9

 "inverted": "true"

10

 }

11

},

`

In practice, it will make all blocks declared before it position themselves to the left on the screen, whereas blocks that are declared after will be positioned to the right. Considering that the Menus were properly declared and configured in the theme code, we would have the following:

![{"base64":"  ","img":{"width":2854,"height":1578,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1341286,"url":"https://user-images.githubusercontent.com/52087100/74090331-c8050000-4a88-11ea-8566-98097b18c83d.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/74090331-c8050000-4a88-11ea-8566-98097b18c83d.png)

### Advanced configuration

Automatic behind the scenes Header reproduction in every store template is only possible because it is defined as default store interface elements in the `interfaces.json` file from Store Theme.

This definition in `interfaces.json` enables Store Framework to identify the Header block declared just once in a `blocks.jsonc` file and reproduce it as default for all other templates.

To overwrite this automatic duplication in `interfaces.json` and use new configurations in different templates, refer to the step-by-step of the following recipe: [Customizing the Header and Footer](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/layout/customizing-the-header-and-footer-blocks-by-page).

## Customization

In order to apply CSS customizations in these 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               |
| ------------------------- |
| container                 |
| leanMode                  |
| topMenuContainer          |
| topMenuLogo               |
| topMenuSearchBar          |
| topMenuIcons              |
| topMenuCollapsible        |
| forceCenter               |
| forceCenterInnerContainer |
| headerBorder              |
| headerSpacer              |
| headerStickyRow           |
| headerRowContentContainer |

[Google One-Tap Login« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-header/docs/guides/google-one-tap-login)[Locale SwitcherNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-header/docs/apps/vtex.locale-switcher)

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.store-header/docs/apps/vtex.store-header%23configuration)

[Advanced configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-header/docs/apps/vtex.store-header%23advanced-configuration)

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