Doofinder logo

Support Documentation

Search icon
  • Help
  • Plugins
  • Vtex
  • Installation Guide
  • Installation Steps - Vtex

Installation Steps - Vtex

Installation

Follow this step by step guide to Install the Doofinder VTEX Plugin.

  1. To access the backoffice, in the shop url add /admin and log in.
  2. Go to Apps > App Store, search for "Doofinder" and click on "install".
  3. click on install

Note that the region must be "eu1" or "us1", and the language must be the shortened locale, e.g. "en" or "es".

Post Installation

Once installed, you need to generate an API token that will be used later during the Store creation. To do this, go to: Account Settings > Account Management > Application Keys > Manage My Keys > Generate New

Manage my keys

When adding a new key, make sure that both values are saved, since the token value is only retrieved on creation and, for security reasons, can no longer be accessed.

Add a new key
Check keys values

1. Log In and Create Store in Doofinder

  1. Log in to your Doofinder Admin Panel.
  2. If you are new, a "Create store" button will appear on the front page. Click on "Create Store".
  3. Create Store in Doofinder

    If you don't see it or prefer a different method, go to the top bar > click the "Store" dropdown menu > select "Create Store".

    Create Store in Doofinder from the top bar
  4. Once clicked, a pop-up window will appear where you need to:
    • Enter the complete URL of your website. Doofinder will detect your platform automatically. If not, select your platform in the following block.
    • Select your store’s industry.

    Click "Continue".

    Choose platform and industry

    2. Platform Connection

  5. In the following panel, complete the Application Key, and Application Token generated in the previous step.
  6. Choose platform and industry

    Click “Create store”.

3 (only if CSS is not detected): Manually Set Search Bar Location

Doofinder will detect the CSS selector of your search bar automatically.

If it can’t detect it, you’ll need to enter the selector manually before the Store connection step (the final step where your Store and Search Engine are created).

You can use an id, name, or class as the CSS selector. For example:

  • #search-box

  • input[name="q"]

  • .input-search

For more information, check our guide on CSS Selector.

The panel will look like this:

Write the CSS Selector to add the layer

Doofinder Script

Once you complete the installation process in Doofinder, the script will be automatically added to your theme; no further action is required on your part.

Did you find this page helpful?