Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Advanced components
Personal Shopper
Official extension
Version: 0.13.6
Latest version: 0.13.6

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.

{"base64":"  ","img":{"width":600,"height":1164,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":6848804,"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/60782333/256605109-90187b7b-4b83-4869-9296-a84aceefe0bb.gif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20241222%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241222T060626Z&X-Amz-Expires=300&X-Amz-Signature=afeb30c28d6a4794d4702951a19e23bd103fb68408471c2bbb53c217bed5795f&X-Amz-SignedHeaders=host"}}
{"base64":"  ","img":{"width":960,"height":695,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1522908,"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/60782333/256603012-1c5f304f-8fc0-42c5-a0b7-829425562f10.gif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20241222%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241222T060626Z&X-Amz-Expires=300&X-Amz-Signature=d270eeaf9df71c47e09ab3568f8d1301e6e363744bd83d8545c3f09d4fca0e46&X-Amz-SignedHeaders=host"}}
Personal Shopper on mobilePersonal 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:

FeatureDescriptionAdvisorCustomer
Camera and microphone settingsControl the camera and microphone settings to turn them on or off during the call.
Share live linkShare the live link with others to enable additional participants to join the conversation.
Screen sharingShare screens to allow participants to view the entire screen or specific applications.
ChatCommunicate through text messages to exchange information and facilitate real-time conversation.
File sharingSend 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 surveyComplete a survey to provide feedback on the call experience, ensuring service quality and gathering valuable insights for improvement.
Product highlight and add to cartWhen 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 PictureWhen 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.

  1. Open the terminal and log in to your VTEX account using VTEX IO CLI.
  2. Install the Personal Shopper app by running the following command:

    _10
    vtex install vtexventures.personal-shopper-free

  3. Open your account's Store Theme app using the code editor of your preference.
  4. 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
    }

  5. 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
}

  1. 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
}

  1. In the store home (home.json), add the pa-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
}

  1. 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.

See also
VTEX App Store
VTEX IO Apps