Shopify

This guide shows you how to integrate Vantage, a powerful vector database and search platform, with Shopify, one of the world's most popular e-commerce platforms.

This integration allows you to store and search through your Shopify product data using Vantage's vector search capabilities, enabling you to build more intelligent and efficient e-commerce applications.

Prerequisites

To follow this guide, you'll need:

  • A Shopify store
  • A Vantage account

Install Vantage Discovery in your store

To install Vantage:

  1. Install the app in Shopify
  2. Link your Vantage account
  3. Configure the app

Step 1: Add Vantage credentials to your Shopify app

Once the app has been installed to your store, you’ll be taken to a screen to enter your Vantage account information. This will connect your vantage account to Shopify, allowing Shopify data to be indexed and ready to be served to users.

image.png
  1. Enter your “Full access api key” found in the API Keys section of the Vantage console
  1. Enter your “Account ID” found in the Account section of the Vantage console
  2. Optionally, select the option to index collections, pages, or blog posts as needed and click save.
image.png

Step 2: Enable Vantage on your storefront's theme

While ingestion is happening, you can start to configure your storefront to use the Vantage app. This will allow you to search through your product data using Vantage's vector search capabilities.

image.png

Liquid app extension

Vantage Discovery is available as a Shopify app extension. This allows you to easily add the Vantage app to your storefront's theme without having to manually add files to your theme. You will most likely use this method to install the app.

To install the app extension:

  1. Navigate to "Online Store" and select the theme you wish to use.

  2. Click on "Customize" to open the theme editor.

  3. Navigate to the "Apps" section in the sidebar of the customizer. image.png

  4. Toggle on "Vantage Discovery" in your theme's customizer. You have several options to configure the app from here, depending on what functionality you want to use.

    image.png

Vantage Predictive Search / Vantage Search Dropdown

The Vantage Search Dropdown is a dropdown menu that allows you to search through your product data using Vantage's vector search capabilities, replacing your theme's existing search functionality.

To enable Predictive Search:

  1. Toggle on "Vantage Search Dropdown" in the app settings in the same location as the other app settings described above.

  2. Get the CSS target

image.png

To get the CSS target of the dropdown menu you want to use, you can inspect the element in your browser's developer tools. To open the developer tools, press Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac), then hover over the search box the user will type in to enable the dropdown.

Once you've found the element, right click on it and select "Copy selector". This will copy the CSS target of the dropdown menu you want to use. Add this value to the "Search dropdown CSS target" field in the app's theme settings page.

Vantage Search Section

The Vantage Search Section is a section that allows you to search through your product data using Vantage's vector search capabilities.

To enable this, go to the theme customizer and navigate to the search page. From there, click on the "Add section" button in the sidebar of the customizer, then select "Apps" > "Vantage Search Section".

image.png

Place the section in the desired location on the page, and make sure tohide the original search.

image.png

To edit the settings of the Vantage Search Section, as well as other sections like the Predictive Search Section, navigate to the "Advanced" section of the app's theme settings page.

image.png

If you want to add facets a user can filter by, add them to the "Facets" field in the app's theme settings "Advanced" > "Vantage Search Section" page. By default, the app will display the price filter.

image.png

Product page related products

Navigate to a product page. From there, click on the "Add section" button in the sidebar of the customizer, then select "Apps" > "Vantage Related Products Section".  Place the section in the desired location on the page, and hide the original related products section, if present.

You can customize the number of related products displayed by changing the "Number of related products" field in the app's theme settings "Product Detail" page.

Manual Installation

Coming soon.

Uninstallation

First, duplicate the theme so you can make changes without potentially disrupting the user expeirence.

Then, to uninstall Vantage from a theme, toggle off ALL sections that have been added and turn off the app embed toggles. See the installation section for a list of these sections.

If you manually installed theme files, similarly ensure all files are removed.

> :warning: Don't just toggle off the Vantage app embed. Also delete any added Vantage-related sections, such as the Vantage Search, Vantage Predictive Search, and Product Recommendations