[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 cart attachments section api quick start guides 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/cart-attachments-section-api-quick-start-guides/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/checkout-api-overview)

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/shopping-cart-section-api-quick-start-guides)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/cart-attachments-section-api-quick-start-guides)

[Getting a customer profile by email](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/getting-a-customer-profile-by-email)

[Adding customer profile information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-customer-profile-information-to-the-cart)

[Add shipping address and select delivery option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-shipping-address-and-delivery-option-to-the-cart)

[Adding customer preferences to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-customer-preferences-to-the-cart)

[Adding marketing information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-marketing-information-to-the-cart)

[Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-cart-items)

[Adding payment information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/adding-payment-information-to-the-cart)

[Adding merchant context information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-merchant-context-information-to-the-cart)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/checkout-error-codes)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/checkout-api-overview)

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/shopping-cart-section-api-quick-start-guides)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/cart-attachments-section-api-quick-start-guides)

[Getting a customer profile by email](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/getting-a-customer-profile-by-email)

[Adding customer profile information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-customer-profile-information-to-the-cart)

[Add shipping address and select delivery option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-shipping-address-and-delivery-option-to-the-cart)

[Adding customer preferences to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-customer-preferences-to-the-cart)

[Adding marketing information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-marketing-information-to-the-cart)

[Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-cart-items)

[Adding payment information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/adding-payment-information-to-the-cart)

[Adding merchant context information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/add-merchant-context-information-to-the-cart)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/checkout-error-codes)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides)

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/checkout-api-overview)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides/docs/guides/cart-attachments-section-api-quick-start-guides)

Cart Attachments

This section contains the quick start guides of the endpoints described in the [Cart Attachments section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checkout-api-overview%23cart-attachments) of the Checkout API Reference.

* [Get client profile by email](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-a-client-profile-by-email)
* [Add client profile](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-client-profile)
* [Add shipping address and select delivery option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-shipping-address-and-delivery-option-to-the-cart)
* [Add client preferences](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-client-preferences-to-the-cart)
* [Add marketing data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-marketing-data-to-the-cart)
* [Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/add-cart-items)
* [Add payment data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-payment-data-to-the-cart)
* [Add merchant context data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-merchant-context-data-to-the-cart)

Contributors

1

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

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/Checkout/cart-attachments-section-api-quick-start-guides.md)

[Add a service (offering) to a shopping cart« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides//docs/guides/add-service-to-the-cart)[Getting a customer profile by emailNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cart-attachments-section-api-quick-start-guides//docs/guides/getting-a-customer-profile-by-email)

Contributors

1

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

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/Checkout/cart-attachments-section-api-quick-start-guides.md)

Copy page

On this page

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 configuring custom images for the sku selector 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-configuring-custom-images-for-the-sku-selector/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-using-components)

[Building a horizontal Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-building-a-horizontal-product-summary)

[Building a Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-building-a-shelf)

[Configuring custom images for the SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector)

[Creating a native form for your store users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-creating-a-native-form-for-your-store-users)

[Creating a product availability form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-creating-a-product-availability-form)

[Overriding native app blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-overriding-native-app-blocks)

[Using Sandbox blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-using-sandbox-blocks)

[Using the Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-using-the-assets-builder)

[Setting up Delivery Promise components (Beta)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/setting-up-delivery-promise-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-using-components)

[Building a horizontal Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-building-a-horizontal-product-summary)

[Building a Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-building-a-shelf)

[Configuring custom images for the SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector)

[Creating a native form for your store users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-creating-a-native-form-for-your-store-users)

[Creating a product availability form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-creating-a-product-availability-form)

[Overriding native app blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-overriding-native-app-blocks)

[Using Sandbox blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-using-sandbox-blocks)

[Using the Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-using-the-assets-builder)

[Setting up Delivery Promise components (Beta)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/setting-up-delivery-promise-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/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-configuring-custom-images-for-the-sku-selector/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/store-framework-using-components)

[Configuring custom images for the SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector)

Configuring custom images for the SKU Selector

By default, the [SKU selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-skuselector) component uses **thumbnail images of SKU** when rendered.

![{"base64":"  ","img":{"width":2878,"height":1404,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":741866,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-configuring-custom-images-for-the-sku-selector-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-configuring-custom-images-for-the-sku-selector-0.png)

These images that the component uses are taken from the SKU's previously given information in admin's Catalog.

However, you can configure the SKU selector to display a **custom image**, meaning an image different than the default one used by the SKU. For example:

![{"base64":"  ","img":{"width":2878,"height":1514,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":753604,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-configuring-custom-images-for-the-sku-selector-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-configuring-custom-images-for-the-sku-selector-1.png)

Follow the step-by-step below to see how to apply this configuration in your store.

## Instructions

1. Access the Admin and go to **Catalog > All Products**.
2. Find the desired product, and click the down arrow button. Then, click **SKU**.
3. Find the desired SKU and click the corresponding **Edit** button.
4. Click the **Images** tab.
5. Click the **Insert** button to add a new SKU image.

![{"base64":"  ","img":{"width":2256,"height":1098,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":142957,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-configuring-custom-images-for-the-sku-selector-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-configuring-custom-images-for-the-sku-selector-2.png)

1. Upload the file in the `File` field and set an ID for the recently uploaded file in the `Label` field. Click on **Save** after performing all your changes.
2. In your theme's code `sku-selector` block, add the `thumbnailImage` prop, whose past value should be the same as the label added in the catalog. For example:

`1

"sku-selector":{

2

 "props": {

3

 "thumbnailImage": ["LabelName"]

4

 }

5

},

`

After completing step 7, you will be able to check a brand new image for your SKU selector.

The problem is that **this image is link to the SKU** through the catalog information, and therefore will also be rendered in its original format when users select the SKU in question.

The way out of this scenario is to **hide the custom image** that's linked to the SKU in the `product-images` block.

1. In the `product-images` block you can use the `hiddenImages` prop to activate a sort of image blacklist. This prop's value should be the custom image's label, the same one used in the previous step. For example:

`1

"product-images": {

2

 "props": {

3

 "displayThumbnailsArrows": true,

4

 "hiddenImages": ["LabelName"]

5

 }

6

},

`

> Remember to replace the value inserted in the brackets with real values, according to your SKU label.

Consequently, you'll be able to configure a customized image exclusively for your SKU selector component, without it affecting your store's layout or that of the SKU images displayed to users.

> _For this configuration to properly work, **all SKU custom images must have the same label value** (which must be the only value given between brackets). Otherwise, even by following the steps above, the SKU selector will continue to render the default images._

### Specifying SKU color variations

Once you have configured the [custom images](###step-by-step), you should set a specific name to display the SKU color variations.

![{"base64":"  ","img":{"width":1892,"height":756,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":390454,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-configuring-custom-images-for-the-sku-selector-3.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-configuring-custom-images-for-the-sku-selector-3.png)

Follow the next step-by-step on how to configure the SKU color variations.

1. Access the Admin.
2. Go to **Catalog** \> **Categories**.
3. Choose the desired category and in `ACTIONS` click on **Field(SKU)**
4. In **Field** click in the group's `Edit`.
5. In the fields **Name** and **Text** complete with a color variation name which you can check the values in the [SKU Selector component](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-components/blob/e130859a02e5c5d5e9deb9494bde9cfb6a0babc2/react/components/SKUSelector/utils/index.ts%23L50-L72). For example:

![{"base64":"  ","img":{"width":1450,"height":792,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":74546,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-configuring-custom-images-for-the-sku-selector-4.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-configuring-custom-images-for-the-sku-selector-4.png)

1. Click on `Save` to make your changes available on SKU with thumbnail images.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/_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/Storefront-Guides/concepts-1/vtex-io-documentation-configuring-custom-images-for-the-sku-selector.md)

[Building a Shelf« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector//docs/guides/vtex-io-documentation-building-a-shelf)[Creating a native form for your store usersNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector//docs/guides/vtex-io-documentation-creating-a-native-form-for-your-store-users)

Contributors

1

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

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector%23instructions)

[Specifying SKU color variations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector%23specifying-sku-color-variations)

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/concepts-1/vtex-io-documentation-configuring-custom-images-for-the-sku-selector.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector%23instructions)

[Specifying SKU color variations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector%23specifying-sku-color-variations)

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 building a search results page with multiple layouts 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-building-a-search-results-page-with-multiple-layouts/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-building-pages)

[Building a Product Details Page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-building-a-product-details-page)

[Building a search results page with multiple layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts)

[Creating a Black Friday page from template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-creating-a-black-friday-page-from-template)

[Creating a custom search results page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-creating-a-custom-search-results-page)

[Creating a new custom page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-creating-a-new-custom-page)

[Customizing the Header and Footer blocks by page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-page)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-building-pages)

[Building a Product Details Page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-building-a-product-details-page)

[Building a search results page with multiple layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts)

[Creating a Black Friday page from template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-creating-a-black-friday-page-from-template)

[Creating a custom search results page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-creating-a-custom-search-results-page)

[Creating a new custom page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-creating-a-new-custom-page)

[Customizing the Header and Footer blocks by page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-page)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/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-building-a-search-results-page-with-multiple-layouts/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework)

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/store-framework-building-pages)

[Building a search results page with multiple layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts)

Building a search results page with multiple layouts

Creating a versatile search results page is crucial for providing a seamless user experience in your online store. In this guide, you will learn how to build a search results page with multiple layouts, allowing users to switch between grid and list views.

![{"base64":"  ","img":{"width":1406,"height":486,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":149092,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts-0.png)

## Before you begin

Before proceeding, ensure you are familiar with the [Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.flex-layout) and the [Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search-result) apps. Also, check the [Building a Horizontal Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-horizontal-product-summary) guide to understand how to create similar results on your search results page.

## Instructions

1. Implement the Search Result app in your Store Theme according to the instructions in the [Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search-result/) guide.
2. Declare the `gallery` block responsible for structuring the page layout, and use its `layouts` prop to define the desired layouts for the search results page. For example:
`1
"gallery": {
2
 "props": {
3
 "layouts": [
4
 {
5
 "name": "grid",
6
 "component": "GridSummary",
7
 "itemsPerRow": {
8
 "(min-width:1008px)":4,
9
 "(min-width:623px) and (max-width:1007px)":3,
10
 "(max-width:622px)":2
11
 }
12
 },
13
 {
14
 "name": "list",
15
 "component": "ListSummary",
16
 "itemsPerRow": 1
17
 }
18
 ],
19
 "ListSummary": "product-summary.shelf#listLayout",
20
 "GridSummary": "product-summary.shelf"
21
 }
22
}
`
All three of the `layouts` properties are mandatory and must be provided for each layout.
| Property    | Description                                                                                |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name        | Specifies the search result layout. It can be grid or list.                                                                                |
| component   | Defines the parent block responsible for defining the layout's components. For the grid layout, we define the component GridSummary that will then present items vertically and horizontally from each other. For the list layout, we define the ListSummary to show a list of items below one another. |
| itemsPerRow | Controls how many items per row will be displayed by each layout. You can use media queries to define the layouts' widths properties for desktop, tablet, and phone, such as min-width and max-width, or you can use the layouts' name, such as desktop, tablet and phone.                              |
Choosing to use the layouts' name, such as `desktop`, `tablet`, and `phone`, in `itemsPerRow`, you should declare them as the example below:
`1
{
2
 "component":"GridSummary",
3
 "itemsPerRow":{
4
 "desktop":4,
5
 "tablet":3,
6
 "phone":2
7
 }
8
}
`
Once you define the `list` and `grid` layouts, declare which blocks you should use in the code to build the desired pages:
| Component   | Block                                  |
| ----------- | -------------------------------------- |
| ListSummary | product-summary.shelf#listLayout block |
| GridSummary | product-summary.shelf block            |
3. Define the default layout, i.e., which layout will be first presented to customers, using the `defaultGalleryLayout` prop from the `search-result-layout.mobile` and `search-result-layout.desktop` blocks:
`1
"search-result-layout.desktop": {
2
 "children": [
3
 "flex-layout.row#searchbread",
4
 "flex-layout.row#searchtitle",
5
 "flex-layout.row#result"
6
 ],
7
 "props": {
8
 "pagination": "show-more",
9
 "preventRouteChange": false,
10
 "defaultGalleryLayout": "grid"
11
 }
12
}
`
4. Declare the `gallery-layout-switcher` block in the search results template (`store.search`):
`1
"gallery-layout-switcher": {
2
 "children": [
3
 /*
4
 * For accessibility purposes, it is fundamental to define the layout options following the same ordering used to declare them in step 2.
5
 */
6
 "gallery-layout-option#grid",
7
 "gallery-layout-option#list"
8
 ]
9
},
10
"gallery-layout-option#grid": {
11
 "props": {
12
 "name": "grid"
13
 },
14
 "children": [
15
 "icon-grid",
16
 "responsive-layout.desktop#textOptionGrid"
17
 ]
18
},
19
"gallery-layout-option#list": {
20
 "props": {
21
 "name": "list"
22
 },
23
 "children": [
24
 "icon-inline-grid",
25
 "responsive-layout.desktop#textOptionList"
26
 ]
27
},
28
"responsive-layout.desktop#textOptionGrid": {
29
 "children": [
30
 "rich-text#option-grid"
31
 ]
32
},
33
"responsive-layout.desktop#textOptionList": {
34
 "children": [
35
 "rich-text#option-list"
36
 ]
37
},
38
"rich-text#option-grid": {
39
 "props": {
40
 "text": "Grid",
41
 "textColor": "c-auto",
42
 "blockClass": "layout-option"
43
 }
44
},
45
"rich-text#option-list": {
46
 "props": {
47
 "text": "List",
48
 "textColor": "c-auto",
49
 "blockClass": "layout-option"
50
 }
51
}
`
Each `gallery-layout-option` block receives the `name` prop with the name of the layout it corresponds to. This is a mandatory prop. Additionally, you can declare other blocks as its children and customize the selected layout option using the `galleryLayoutOptionButton--selected` [CSS Handle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization/).
5. Add the `gallery-layout-switcher` block as a child of the `search-result-layout.mobile` and `search-result-layout.desktop` blocks to display the switcher button on the page for both devices (mobile and desktop). For example:
`1
"flex-layout.row#searchinfo": {
2
 "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"]
3
},
4
"flex-layout.row#orderByAndSwitcher": {
5
 "children": ["order-by.v2", "gallery-layout-switcher"],
6
 "props": {
7
 "horizontalAlign": "right",
8
 "preventHorizontalStretch": true,
9
 "blockClass": "orderByAndSwitcher",
10
 "colGap": 3
11
 }
12
}
13
"flex-layout.col#switcherMobile": {
14
 "children": ["gallery-layout-switcher"],
15
 "props": {
16
 "verticalAlign": "middle"
17
 }
18
}
`
6. [Deploy your theme changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/_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/Storefront-Guides/concepts-1/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts.md)

[Building a Product Details Page« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts//docs/guides/vtex-io-documentation-building-a-product-details-page)[Creating a Black Friday page from templateNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts//docs/guides/vtex-io-documentation-creating-a-black-friday-page-from-template)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts%23instructions)

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/concepts-1/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts.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-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts/docs/guides/vtex-io-documentation-building-a-search-results-page-with-multiple-layouts%23instructions)

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 storefront implementation 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/storefront-implementation/docs/guides)

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

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

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

Storefront Development

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

---

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

---

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

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/vtex-io-documentation-store-theme)

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

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/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/storefront-implementation/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/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/storefront-implementation/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/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/storefront-implementation/docs/guides/storefront-best-practices)

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

---

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

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/vtex-io-documentation-store-theme)

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

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/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/storefront-implementation/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/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/storefront-implementation/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/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/storefront-implementation/docs/guides/storefront-best-practices)

---

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

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

Store Framework

Store Framework is a front-end development framework designed to enhance and simplify the creation of ecommerce websites within VTEX. Built on the [VTEX IO development platform](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) and [React](https://read.calvincode.net/reader?url=https://reactjs.org/) technology, the framework offers native storefront components in JSON format.

Store Framework relies on the following pillars:

| Aspect                        | Description                                                                                |
| ----------------------------- | ---------------------------------------------------------------------------------------------------- |
| Composability                 | Assemble pre-built and custom components to create a storefront tailored to specific business needs. |
| Flexibility and customization | Adapt storefronts to unique design requirements and functional preferences.                          |
| Workspaces                    | Create multiple store versions and test them to guarantee reliability and deploy changes safely.     |
| A/B tests                     | Experiment with different versions of a storefront to enhance user experience and performance.       |
| VTEX IO cloud infrastructure  | Develop in a fully managed auto-scalable infrastructure.                                             |

## Store Framework architecture

Codebase

Build process

Deployment

Customer touchpoint

User touchpoint

Cloud - AWS

VTEX IO apps

Builder Hub

Housekeeper

PWA

Webstore

CMS / Site Editor

Developer Tools

Development workspaces

VTEX IO CLI

A/B tests

Production workspaces

Edition apps

Builders

Admin

GraphQL

React

Store

Node

Pixel

Technologies

Node

React

Typescript

GraphQL

The diagram shows a typical Store Framework architectural flow, which includes the following components:

* **Codebase:** The source code for Store Framework and VTEX IO apps is cloud-native.
* **Build process:** The process of converting the source code into a deployable application, based on [VTEX IO Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders).
* **Deployment:** The process of deploying the application to a production environment.
* **Business user touchpoint:** where administrative users interact with storefront settings, on CMS and Site Editor.
* **Customer touchpoint:** where customers interact with the storefront, usually on a webstore or PWA.

### Developer Tools

Developers using Store Framework can count on a set of tools:

* [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference): Interact with the VTEX platform using our command-line tool.
* [A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/ab-tests): Compare traffic between two workspaces.
* [Edition App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app): Streamline your setup by installing a preset bundle of settings, policies, backend and frontend apps.
* [Development workspaces](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace): Test and preview your code in workspaces dedicated to development, without affecting the live store.
* [Production workspaces](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-production-workspace): Run tests and quality assurance in a workspace that is ready to handle live traffic.
* [Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders): Connect your apps to our services quickly using VTEX IO Builders.

### Technologies

To work with this framework, you should be familiar with the following technologies:

* [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io)
* [React](https://read.calvincode.net/reader?url=https://reactjs.org/)
* [Node.js](https://read.calvincode.net/reader?url=https://nodejs.org/en)
* [TypeScript](https://read.calvincode.net/reader?url=https://www.typescriptlang.org/)
* [GraphQL](https://read.calvincode.net/reader?url=https://graphql.org/)

## Quickstart

This quickstart guide is a brief introduction to the VTEX Store Framework. For more detailed step-by-step documentation, check [Store Framework - Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3).

### 1\. Initial settings

1. [Install VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install). You will need it to run commands in the following steps.
2. Log in to your VTEX account:
`1
vtex login {accountName}
`
3. Open a [support ticket](https://read.calvincode.net/reader?url=https://help.vtex.com/support?/cultureInfo=en-us) to set up your account’s Edition app to `vtex.edition-store@3.x` or higher. Refer to the [Edition App article](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app) to identify the most suitable version for your scenario.
4. Install Intelligent Search (if the account’s Edition app is `vtex.edition-store@4.x` or lower) and integrate it with your store’s catalog according to [this guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-2-prerequesites%23step-2-implementing-the-vtex-intelligent-search).

### 2\. Setting up the project

1. Navigate to a local file directory where you want our [boilerplate store theme](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-theme) to be saved:
`1
cd {folderName}
`
2. Start a new project:
`1
vtex init
`
3. Select `store` by navigating with your arrow keys and pressing `Enter`. When prompted to confirm, type `y` to clone the `minimum-boilerplate-theme` to your folder.
4. Create a workspace:
`1
vtex use {workspaceName}
`
5. Navigate to the `minimum-boilerplate-theme` directory:
`1
cd minimum-boilerplate-theme
`
6. Link your local repository with the workspace:
`1
vtex link
`
7. Access your workspace:
`1
vtex browse
`

Now you can make changes to the local repository and test them live in the workspace without altering the store's final public version.

## Next steps

### Customizing your theme

[Building your own store themeLearn how to create your store theme from scratch.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)[Building pagesCreate custom pages for your ecommerce.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-product-details-page)[Using componentsLeverage from premade components to build your store theme.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-carousel-using-slider-layout)[StylingCustomize your store's style.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles)

### Deploying your changes

[Making your theme content publicPublish your new store theme.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public)[Going liveMake your store available to shoppers.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-go-live)

Contributors

2

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

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/store-framework.md)

[Tracing the error source« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation//docs/guides/faststore/troubleshooting-tracing-the-error-source)[Store ThemeNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation//docs/guides/vtex-io-documentation-store-theme)

Contributors

2

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

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

ON THIS PAGE

[Store Framework architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23store-framework-architecture)

[Developer Tools](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23developer-tools)[Technologies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23technologies)

[Quickstart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23quickstart)

[1\. Initial settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%231-initial-settings)[2\. Setting up the project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%232-setting-up-the-project)

[Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23next-steps)

[Customizing your theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23customizing-your-theme)[Deploying your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23deploying-your-changes)

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/store-framework.md)

Copy page

On this page

ON THIS PAGE

[Store Framework architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23store-framework-architecture)

[Developer Tools](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23developer-tools)[Technologies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23technologies)

[Quickstart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23quickstart)

[1\. Initial settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%231-initial-settings)[2\. Setting up the project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%232-setting-up-the-project)

[Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23next-steps)

[Customizing your theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23customizing-your-theme)[Deploying your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-implementation/docs/guides/store-framework%23deploying-your-changes)

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