Shopify Installation Guide

Shopify Installation Guide

In this guide, you can read and learn about how to set up Hello Retail with Shopify with API credentials, tracking & conversion scripts, and lastly a blank page for search.


Creating API credentials for Hello Retail:

The API credentials are used by Hello Retail to synchronise your shops products and categories with our own database, to always show updated content in our services. It is also used to get information about your orders, which is used for product relations and services such as our triggered emails.

You have to create a private application for Hello Retail. If needed, you can also read Shopify's own documentation on custom apps here.

Follow the steps below on how to do it:

  1. Log in to your Shopify account.
  2. On the dashboard view, navigate to the left-hand side menu.  Click on Apps -> App and sales channel settings

     
  3. Inside this window, click on the Develop apps button.


     
  4. Click on the Allow custom app development button.


     
  5. Read and accept the warning by clicking on the Allow custom app development button.


     
  6. After accepting this, it will prompt a pop-up to verify this change and the App development overview will look like this as seen below.
  7. Next, click on the Create an app button.

  8. Inside the Create an app view, input an App name associated with Hello Retail. Then choose the App developer appropriate from your company.
    Note It is only possible to assign staff and collaborators with permission to develop apps.
  9. When you have entered the details, then click on the Create button.


     
  10. Next, the overview of the created app will look like this. Click on the Configure Admin API scopes button


     
  11. Inside the search bar for Filter access scopes, search individually for:

    Customers - read_customers
    Orders  - read_orders
    Product listings - read_product_listings
    Products - read_products
    Store content - read_content
    Translations - read_translations

     
  12. With all these scopes, enable the read ability for all of them.


     
  13. In the Configuration tab, you have the option to see an overview of the access scopes listed with reading access.


     
  14. After the completion, click on the green Install app button to prompt the Admin API access token. Copy this generated token.

     
  15. Now that the following steps have been completed, please send the API Key and the API Access Token to support@helloretail.com with the following details:

    - API Key
    - Admin API Access Token 
    - Your Shopify store name (xxx.myshopify.com)
     
  16. To find the API, go to the API credentials tab and copy & paste the information.

     

Inserting the Hello Retail Tracking Script:

In this section, we will guide you through how to insert the Hello Retail script to your shop so that It will load in all your use-cases. To begin with, make sure you are logged into the Admin panel of your Shopify webshop. If in doubt, here is the login page: shopify.com/login.

  1. On the dashboard view, navigate to the left-hand side menu.  Click on Online Store.


     
  2. From the drop-down menu, click on Themes.


     
  3. Navigate over to the right-hand side to Debut and click on the drop-down button of Actions.


     
  4. From the drop-down menu, click on Edit code.


     
  5. On the left-hand side, a second menu bar will prompt. In this menu, go down to the folder named Layout and click on the file named theme.liquid. Next, an editor window will appear.


     
  6. Inside the editor window, then scroll down until you reach the bottom and locate the </body> tag.

  7. Insert a line above the </body> tag, and insert copy-paste the following code below at the in-line you created in the editor window. This script includes cart tracking as well.
    <script type="text/javascript">
        (function() {
            var aws = document.createElement('script');
            aws.type = 'text/javascript';
            if (typeof(aws.async) != "undefined") { aws.async = true; }
            aws.src = 'https://d1pna5l3xsntoj.cloudfront.net/scripts/company/awAddGift.js#YOUR_PARTNER_ID';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(aws, s);
        })();
        {% assign HelloRetailCartContentsRecreate = '' %}
        {% assign HelloRetailCartProductNumbers = '' %}
        {% for item in cart.items %}
            {% assign HelloRetailCartContentsRecreate = HelloRetailCartContentsRecreate | append: item.variant_id | append:":" | append: item.quantity | append: "," %}
            {% assign HelloRetailCartProductNumbers = HelloRetailCartProductNumbers | append: item.product_id | append: "," %}
        {% endfor %}
        _awev=(window._awev||[]);_awev.push(["bind_once", "crawl_completed", function() {
            try {
                ADDWISH_PARTNER_NS.api.cart.setCart({
                    total: {{ cart.total_price | divided_by: 100.0 }},
                    url: "{{shop.url}}/cart/{{HelloRetailCartContentsRecreate}}",
                    productNumbers: [{{HelloRetailCartProductNumbers}}]
                });
            } catch(e) {
                ADDWISH_PARTNER_NS.log("Could not set cart", e);
            }
        }]);
    </script>
  8. Important: Once you have pasted the code, you should replace YOUR_PARTNER_ID with your own Hello Retail Partner ID.  Check here how to find your Partner ID.


     
  9. Lastly, scroll up and navigate to the top of the screen and click the Save button.

 

 


Inserting the Hello Retail Conversion Script:

In this section, we will guide you through how to make your conversions available for Hello Retail. This data is used across many of Hello Retail features, e.g., for enriching the algorithms of your product recommendations, and for post-conversion emails.

  1. When logged in as Admin: Navigate to the left-hand menu and click on Settings at the bottom. A selection of setting categories is now shown to you.

  2. Navigate and click on the category Checkout. A list of Checkout settings is presented to you.


     
  3. In the list of Checkout settings, scroll down until you find the setting named Additional scripts.
    Note Other than the /admin/settings/checkout section, this can also be changed in the Order Status page.


  4. If there already exists text in the Additional scripts field, go to the bottom and make a new line. We don't want to override some settings that might already exist.
     
  5. Insert the following code at the bottom of the Additional scripts field.
     
    <script type="text/javascript">
        (function() {
            var aws = document.createElement('script');
            aws.type = 'text/javascript';
            if (typeof(aws.async) != "undefined") { aws.async = true; }
            aws.src = 'https://d1pna5l3xsntoj.cloudfront.net/scripts/company/awAddGift.js#YOUR_PARTNER_ID';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(aws, s);
        })();
        {% assign HelloRetailConversionProductNumbers = '' %}
        {% for line_item in order.line_items %}
            {% assign HelloRetailConversionProductNumbers = HelloRetailConversionProductNumbers | append: line_item.product_id | append: "," %}
        {% endfor %}
        _awev=(window._awev||[]);_awev.push(["bind_once", "crawl_completed", function() {
            try {
                ADDWISH_PARTNER_NS.api.conversion.track_sale({
                total: {{ order.subtotal_price | divided_by: 100 }},
                orderNumber: '{{ order.order_number }}',
                email: '{{ order.email }}',
                productNumbers: [{{HelloRetailConversionProductNumbers}}]
            });
            } catch(e) {
                ADDWISH_PARTNER_NS.log("Could not set conversion", e);
            }
        }]);
    </script>


    It should look like this in the window view:

  6. Important: Once you have pasted the code, you should replace YOUR_PARTNER_ID with your own Hello Retail Partner ID.  Check here how to find your Partner ID.


     
  7. Navigate to the top of the website and press Save.

 


The following section is only relevant for setups for a full search.

Step 1: Navigate and click "Online store"

 

Step 2: Click sub-menu "Pages"

 

Step 3: Navigate to the top right corner and click the button "Add pages". A new page editor will appear.

 

Step 4: In the page editor, please write a meaningful title, e.g., "Search results" in Title. Make sure the option "Visible" is chosen under Visibility. Choose "page" under Template.

 

Step 5: Navigate to the bottom right corner and press button "Save"

 

Step 6: You have now created a blank page for Hello Retail to display search results. After you clicked the save button, please navigate to the top of the page and locate and "View Page." This will open a new tab in your browser.

 

Step 7: Find the URL near your browser tab, copy-paste it, and share it with Hello Retail so they can finish your full-page search.

 


Configure Webshop

After the installation setup of your platform and the onboarding flow, make sure to have your webshop configured. Read this guide here on how to do so:

Configure Webshop

Like Follow
  • 1 mth agoLast active
  • 1Replies
  • 2851Views
  • 2 Following