Install Wayhint on Shopify
Pepper can walk shoppers to size guides, shipping info and the right product filters.
Coming soon A Shopify app with a theme app embed (an on/off switch in the theme editor) is coming soon. The manual method below works today.
You need a site key, and your domain on its allowlist. See before you start. Replace YOUR-GUIDE-HOST and YOUR_SITE_KEY in the snippets.
Open the theme code
In Shopify admin, go to Online Store, Themes, open the menu next to your live theme and choose Edit code.
Edit layout/theme.liquid
Paste the script tag just before
</body>and save.layout/theme.liquid ... <script src="https://YOUR-GUIDE-HOST/widget/guide.js" data-site-key="YOUR_SITE_KEY" async></script> </body>Check the storefront
Open your store in a new tab. Duplicate the theme first if you want to test before going live.
Shopify checkout pages are not part of theme.liquid, so Pepper does not appear there.
Check it works
Open the page. An Ask Pepper button appears in the bottom corner and Pepper waves. In the browser console, window.Wayhint should be defined. If nothing appears, check the console for [web-assistant] messages: an unknown site key or a domain missing from the allowlist are the usual causes.
Next
- Hide sensitive areas with
data-guide-privateanddata-guide-ignore(overview). - Add your own “Show me” buttons with
Wayhint.ask()(example). - Read what the guide sees, or pick a plan.