Install through API - Shopify

• Step by Step Installation
• 1. Log in and Create Store in Doofinder
• 2. Platform Connection
• Accessing Shopify API for Integration
• Select API Access Scopes
• Adding API Credentials to Doofinder
• Reveal Access Token and API Secret Key
• 3. Stats Connection: Create a New WebPixel
• 3a (only if CSS is not detected): Manually Set Search Bar Location
• Activate the Script

Step by Step Installation

Follow this step by step guide to Install the Doofinder Shopify through API.

• If you are a new user, check this article to create a new Doofinder account.

If you have an account already or just created one, follow these guidelines:

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. If you prefer a different method, go to the top bar > click the "Store" dropdown menu > select "Create Store".

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".



2. Platform Connection

Accessing Shopify API for Integration

5. Once you press continue, you will be asked to complete the Settings URL, Client ID, and API Secret field. To do this, you will need to enter your Shopify admin. Do not close Doofinder’s Admin Panel, leave the pop-up open, as you will be filling in each box in the following steps.

Next, open the Shopify admin in a new tab to find the Settings URL, the Client ID and the API Secret.

Go to Dev Dashboard under your profile:



Click on “Create an app”:



Add app name “doofinder-app” and lick on “Create”:



On the following page configure the “App URL” and leave unchecked “Embed app in Shopify admin” as it follows:

https://plugins.doofinder.com/shopify/app_external



In the “Access” section, you will need to configure the “Scopes” and the “Redirect URLs”:



Add the scopes below, in the “Scopes” first box, by clicking on “Select Scopes” or alternatively, you may copy and paste the list of permissions separated by commas:

• read_content
• read_locales
• read_products
• read_translations
• read_inventory
• read_markets
• read_companies
• read_publications
• read_themes
• write_themes
• read_metaobjects
• read_audit_events



In “Redirect URLs” you will add the following URL:

https://plugins.doofinder.com/shopify/install?external=true

Verify that you have chosen all the scopes from the list above. Selecting the wrong scopes will result in errors after integration.

Finally, click on “Release”. Look at the example below:



After clicking on “Release”, go to “Settings” and copy Client ID, and place it in the Doofinder Admin page from step 1, in the box designated for Client ID:



Repeat the process for Secret!

The content should follow the format of the examples inside each box:



With all the completed fields, click “Create”.

3. Script and Stats Connection:

Steps 6 and 7 will require the codes shown in the example below of your admin, in this final step:


Add the Doofinder script to Shopify’s Theme Liquid

6. What’s the Doofinder script and how to set it up? The Installation Script is the JavaScript code Doofinder provides with your account. You can always find the Doofinder Script on your Admin Panel > Configuration > General Settings > Overview. To set it up:
   1. Log in to your Shopify admin.
   2. Go to Online Store > Themes.
   3. Click “Edit code” in your current theme.
   4. Find the file “theme.liquid”.
   5. Paste the code provided above before the closing </head> tag.
   6. Click on Save.

Create a New WebPixel

7. Create the Webpixel to track your conversion rate and other stats. Follow these instructions for a smooth configuration:
   1. Copy the code appearing in Stats connection:
      
   2. Access your Shopify Admin > Settings > Customer Events > click on “Add custom pixel”.
   3. Create a custom name and paste the code.
   4. Click on “save” and “connect”, so you are all set to monitor your conversion.
      

If you want to track your conversion rate and other statistics later, you can copy and paste the following code. Make sure to replace the placeholders with your installation ID and zone.

import('https://cdn.doofinder.com/shopify/checkout.js').then(
        (doofinder) => { doofinder.load("#{installation_id}", "#{zone}", analytics, browser) }
      );

You can find your Installation ID under General settings > Store ID. The zone refers to where your Doofinder admin is located, usually eu-1 (Europe), us-1 (USA) or ap-1 (Asia). To make sure, check the Installation script under the General Settings, it's at the beginning of your script.

3a (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:



Activate the Script

The script is generated and activated automatically during the installation process.

To verify it is activated, follow these steps:

1. On your Admin Panel go to Configuration > General settings > Shopify.
2. Scroll down to Platform Configuration > Doofinder Script and make sure the switch is enabled.

With this, Doofinder should be functioning correctly on your online shop.