Personal Shopper is a platform that allows businesses to host live shopping sessions in the store, enabling real-time interaction with customers. During these sessions, a personal shopper can showcase products, answer questions, and add products to the customer's cart. This interactive shopping experience is designed to engage customers, increase sales, and build brand loyalty.
Personal Shopper is designed for sellers who want to show new collections to high-value customers or B2B clients. These customized live sessions are intended to provide a more personalized shopping experience than public Live Shoppings.
The Personal Shopper app is compatible with desktop and mobile devices.
Personal Shopper on mobile | Personal Shopper on desktop |
During a live in the Personal Shopper app, the personal shopper and the customers have access to various features and functionalities. Here are some of the key features and their respective availability for personal shoppers and customers:
Feature | Description | Advisor | Customer |
---|---|---|---|
Camera and microphone settings | Control the camera and microphone settings to turn them on or off during the call. | ✅ | ✅ |
Share live link | Share the live link with others to enable additional participants to join the conversation. | ✅ | ✅ |
Screen sharing | Share screens to allow participants to view the entire screen or specific applications. | ✅ | ❌ |
Chat | Communicate through text messages to exchange information and facilitate real-time conversation. | ✅ | ✅ |
File sharing | Send files during the call to enable the sharing of relevant documents or images. | ✅ | ✅ |
Search for specific products and provide recommendations to the customer. This allows the shopper to immediately add the recommended products to the cart and complete the purchase seamlessly within the same process. | ✅ | ❌ | |
Satisfaction survey | Complete a survey to provide feedback on the call experience, ensuring service quality and gathering valuable insights for improvement. | ❌ | ✅ |
Product highlight and add to cart | When an advisor sends a product, customers can add it to their cart immediately, selecting any variations within the same modal, with a notification confirming it was added. | ❌ | ✅ |
Picture in Picture | When the customer clicks the Picture in Picture icon, the sales associate's image appears in a smaller window. This allows the customer to browse the website while keeping the advisor visible. | ❌ | ✅ |
Personal Shopper is available in the following languages: English, Spanish, Portuguese and Catalán.
To get started, follow this guide to install the Personal Shopper app in your VTEX environment.
Before you begin
Personal Shopper is a paid app with different subscription plans: Standard and Pro. The subscription cost depends on your chosen plan, with each providing a specific number of monthly live stream minutes.
For more information about plans and pricing, see the Personal Shopper page.
Finally, before proceeding with this guide, you must install VTEX IO CLI on your machine. For more information, check the guide VTEX IO CLI.
Installation
To install the Personal Shopper app, follow the steps below.
We recommend creating a workspace. Otherwise, it will be installed in the main workspace by default.
- Open the terminal and log in to your VTEX account using VTEX IO CLI.
- Install the Personal Shopper app by running the following command:
_10vtex install vtexventures.personal-shopper-free
- Open your account's Store Theme app using the code editor of your preference.
- In the
manifest.json
file, add the Personal Shopper app to the list of peer dependencies for the theme:_10"peerDependencies": {_10+ "vtexventures.personal-shopper-free": "0.x"_10} - Declare the
pa-widget
block to display a call-to-action button in the Product Details Page (PDP) template (product.json
). For example:
_16 "flex-layout.col#right-col": {_16 "props": {_16 "preventVerticalStretch": true,_16 "rowGap": 0_16 },_16 "children": [_16 "vtex. store-components:product-name#details",_16 "product-rating-summary",_16 "product-price#product-details",_16 "product-separator",_16 "sku-selector",_16+ "pa-widget",_16 "responsive-layout.desktop#images-desktop",_16 "responsive-layout.mobile#images-mobile"_16 ]_16 }
- In the desired page template, add the
ps-call
block, for example:
_10{_10+ "store.custom#ps-call": {_10 "blocks": [_10 "ps-call"_10 ],_10 "props": {_10 "blockClass": "ps-call"_10 }_10 }_10}
- In the store home (
home.json
), add thepa-widget
block.
_16"flex-layout.col#right-col": {_16 "props": {_16 "preventVerticalStretch": true,_16 "rowGap": 0_16 },_16 "children": [_16 "vtex. store-components:product-name#details",_16 "product-rating-summary",_16 "product-price#product-details",_16 "product-separator",_16 "sku-selector",_16+ "pa-widget",_16 "responsive-layout.desktop#images-desktop",_16 "responsive-layout.mobile#images-mobile"_16 ]_16}
- Deploy the changes made to the Store Theme app. For more information, see Making your new app version publicly available.
Adding a new peer dependency to the Store Theme app requires deploying a new major version of the app. To ensure a smooth deployment, see the guide Migrating CMS settings after a theme major version update.