When aiming to improve user experience, displaying the most up-to-date product prices is essential. However, fetching the latest prices from your store’s database for every product rendered on the page can significantly increase response time.

A more efficient solution is to fetch product prices asynchronously on the client side. This approach reduces page load times while still ensuring that users see accurate prices.

Asynchronous prices do not mean outdated. They are product prices stored in the browser cache according to the user navigation. If your store does not routinely update product prices, it is strongly recommended to display asynchronous prices instead.

Follow the steps below to configure asynchronous prices and improve your store's performance.

1. Set the simulationBehavior prop (from the Search Result app) to skip to ensure that your store is not fetching the price data on the server side:

   
   

   _10

   "store.search": {

   _10

   "blocks": [

   _10

   "search-result-layout"

   _10

   ],

   _10

   "props": {

   _10

   "context": {

   _10

   + "simulationBehavior": "skip"

   _10

   }

   _10

   }

   _10

   },

   
   

2. Add the Product Summary and the Product Price apps as dependencies in your theme's manifest.json file:

   manifest.json

   
   

   _10

   "dependencies": {

   _10

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

   _10

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

   _10

   }

   
   

3. Add the priceBehavior prop to the product-summary.shelf block and set its value to async:

   
   

   _12

   "product-summary.shelf": {

   _12

   "props": {

   _12

   + "priceBehavior": "async"

   _12

   },

   _12

   "children": [

   _12

   // other children

   _12

   "product-list-price#summary",

   _12

   "flex-layout.row#selling-price-savings",

   _12

   "product-installments#summary",

   _12

   "add-to-cart-button",

   _12

   ]

   _12

   }

   
   

4. Wrap the all price blocks under the product-price-suspense block (from the Product Prices app):

   
   

   _23

   {

   _23

   "product-summary.shelf": {

   _23

   "props": {

   _23

   "priceBehavior": "async"

   _23

   },

   _23

   "children": [

   _23

   // other children

   _23

   - "product-list-price#summary",

   _23

   - "flex-layout.row#selling-price-savings",

   _23

   - "product-installments#summary",

   _23

   - "add-to-cart-button",

   _23

   + "product-price-suspense"

   _23

   ]

   _23

   },

   _23

   + "product-price-suspense": {

   _23

   + "children": [

   _23

   + "product-list-price#summary",

   _23

   + "flex-layout.row#selling-price-savings",

   _23

   + "product-installments#summary",

   _23

   + "add-to-cart-button"

   _23

   + ]

   _23

   + }

   _23

   }