App Embed Widget
The core storefront integration. Toggle visibility and behavior in the app Settings. Controls how/when the assistant becomes available and what tools it surfaces by default.
Getting Started
Welcome to Vibe Shopper! This quick guide walks you from install to your first live session. You’ll enable the app embed, run a first-time product sync, and then choose which components (search, CTA buttons) to show on your store.
1) Install & choose a pricing plan
After clicking Install on the Shopify App Store, you’ll be redirected to the pricing page. Pick the plan that fits your needs and approve it. Once approved, you’ll land on the app’s home page.
Tip: You can change plans anytime in Shopify Billing. Your session history and configuration remain intact.
2) Enable the App Embed
On the app’s home page, you’ll see a banner prompting you to enable the app embed. This allows the Vibe Shopper engine to run on your storefront.
- Click the banner button to open your Theme Editor.
- In the left panel, turn on Vibe Shopper App Embed.
- Save your theme changes.
The app engine is a non intrusive block that will not take performance off your store, by default it includes the app storefront global button - you can disable the button in the settings menu if you only wish to use the specific app blocks or the js events instead.
3) Run the first product sync
Back on the dashboard, click Sync. The first-time sync fetches your product information and prepares everything the assistant and try-on need - recommendations, sizes, and size logic.
- You don’t need to keep the page open after starting the sync.
- Future product changes sync automatically.
4) Component Types
Choose which UI components to enable. You can configure placement and appearance in the Theme Editor (and in the app’s Settings where noted).
Vibe Global Search
A universal search/command bar. Shoppers can ask anything about products, request size help, or retrieve their try-on images. Appearance is controlled in your theme settings.
Vibe Shopper CTA Button (Product Page)
A customizable button you can place anywhere on the product page. It opens the try-on stage directly with the current product pre-attached, perfect for a fast path to trying.
Vibe Shopper Image Button (on Product Images)
Like the CTA, but placed directly over product images. It launches try-on with the exact image/variant the shopper is viewing.
Placed everywhere on the page, it only needs to be added once, on every page it finds the product images and add the try on button. If you wish to use the try on feature in a non-intrusive way you can use it on product pages.
Vibe Shopper JS Events
Vibe shopper can also be launched with scripts only, and it is easier than you would guess.
The same way as using the rest of the components, it requires the app embed to be anbled, whether with or without the widget. There are two events you can use with javascript:
Launching Vibe Shopper
Sending a User Query
Where the USER_QUERY is what you wish to send to the vibe shopper chat
window.dispatchEvent(new Event('vibeShopperOpen'));Sending a User Query
(window.__vibeQueue = window.__vibeQueue || []).push({ type: 'vibeShopperSearch', detail: USER_QUERY, ts: Date.now() });Where the USER_QUERY is what you wish to send to the vibe shopper chat
Next steps
- Test the flow on a product page and verify that the try-on launches with the correct item.
- Use the Features page to enable advanced options.
- Review Troubleshooting if something doesn’t look right.