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. In the following panel, complete the Settings URL, Access Token, and API Secret Key fields. To do this, you will need to exit Doofinder. 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 Access Token and the API secret key.

Go to Shopify > Settings > Apps and Sales Channels > “Develop Apps”.

If you haven’t developed apps before you will need to accept and click on “Allow custom app development” button, just as you observe below:


6. Click on “Create an app”. On the pop-up screen write “Doofinder” on the app name block. After the app is created click on “Configure Admin API Scopes”.


Select API Access Scopes

7. Once you are in the Admin API integration section, navigate to Admin API access scopes and select the scopes listed below:

To select them you can go through the list or look for them in the “filter access scopes” search bar:

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

Verify that you have chosen all the scopes from the list above. Selecting the wrong scopes will result in errors after integration. Click on “Selected” on the Admin API Access Scopes menu to verify you have checked off all the scopes from the list.

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



Adding API Credentials to Doofinder

8. Go to the API credentials section. Copy the URL appearing on the search bar:

9. Next, paste it into the Settings URL box in the store creation in the Doofinder Admin Panel:


Reveal Access Token and API Secret Key

10. Now, click on “Install app”, button, at the top-right side of the panel. Your access token will be created. In here, make sure to copy and paste the Access token and the API secret key. Keep on reading for easy directions:
• First, reveal the access token, copy and paste it in the "Access token" box in Doofinder.

Your Access token can only be revealed once. Make sure to reveal, copy and paste it in the store you are creating in Doofinder. If not, you will need to create the app and the store again.

• At the bottom of the same panel, you will find the API Key and secret key section. Reveal the API secret key, copy and paste it in the corresponding box in the store you are creating in Doofinder.

Reveal the API secret key. Make sure to reveal, copy and paste it in the store you are creating under the "API secret key" box. If you select the API Key, the creation of the store won't work.

As a result, your Platform Connection panel should contain:

1. The Settings URL from the API Credentials section.
2. The Access token, which starts with “shpat”, and can only be revealed once.
3. The API secret key, located at the bottom of the panel, on the API secret key section.

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


11. With all the completed fields, click “Continue”.

3. Stats Connection: Create a New WebPixel

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

This Webpixel code is displayed only once during store creation.

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) }
      );

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 > Store Settings > Shopify.
2. Scroll down to Platform Configuration > Doofinder Script > the switch is enabled.

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