Add AI Search to your Shopify store

What is Shopify

Shopify is a popular e-commerce platform designed for creating and managing online stores.

Get an API key

Go to the yoursearchbox Dashboard
Select your project under Projects
Go to the Integrations tab
Click on Create integration
Select Web
Provide a Name and URL (optional) for the integration
Click on Create
Click the Example < /> button to get your API key and view suggested settings

Add custom code to your theme

To add custom code to your Shopify store, you'll need to edit your theme files.

Open your Shopify admin panel
Go to Online Store > Themes
Click Actions > Edit code for your current theme

Creating the container

Add a container for the widget in your theme's layout file.

In the theme editor, locate your main layout file (usually theme.liquid)
Add a container div where you want the SearchBar widget to appear

Example:

Initialize the widget

Next, under the Tools tab open Head & Footer Code option. Add the code below to the HEAD Code section:

<script
  id="yoursearchbar-script"
  src="https://unpkg.com/@yoursearchbar/[email protected]/dist/embed.js"
  type="module"
  defer
></script>
 
<script defer>
  const yoursearchbarScript = document.getElementById("yoursearchbar-script");
 
  // configure and initialize the widget
  const addyoursearchbarWidget = () => {
    const yoursearchbarWidget = yoursearchbar().embed({
      componentType: "SearchBar",
      targetElement: document.getElementById("yoursearchbar"),
      properties: {
        baseSettings: {
          apiKey: "yoursearchbar_API_KEY", // required
          integrationId: "yoursearchbar_INTEGRATION_ID", // required
          organizationId: "yoursearchbar_ORGANIZATION_ID", // required
          primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
          organizationDisplayName: "yoursearchbar",
          // ...optional settings
          theme: {
            stylesheetUrls: ["/path/to/stylesheets"], // optional
            // ...optional settings
          },
        },
        modalSettings: {
          // optional settings
        },
        searchSettings: {
          // optional settings
        },
        aiChatSettings: {
          // optional settings
          botAvatarSrcUrl: "https://mydomain.com/mylogo", // use your own bot avatar
          quickQuestions: [
            "Example question 1?",
            "Example question 2?",
            "Example question 3?",
          ],
        },
      },
    });
  };
 
  yoursearchbarScript.addEventListener("load", () => {
    if (document.body) addyoursearchbarWidget(); // initialize the widget
  });
</script>

Save Custom Code

Click on the "Save Changes" button.
Navigate to your web application to ensure the widget is installed correctly.

For a full list of customizations, please refer to the Chat Button documentation.

Chat Button Chat Button