Shopify Installation Guide

Shopify Installation Guide

You are here because you want to connect your Shopify webshop to Hello Retail. On this page you will find the following guides:

 

The API credentials are used by Hello Retail to synchronise your shops products 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.

Step 1: First thing you have to do is create a private application for Hello Retail. This is done by clicking on the "Apps" button in your Shopify menu.

 

Step 2: Click on the small text "Manage private apps" underneath your app list to get to your private apps that are not installed through the Shopify App Store. 

 

Step 3: Now from the private apps list click the "Create a new private app" in the top right corner to create an app for Hello Retail.

 

Step 4: You should be on a page similar to the one below.
In the "App details" section make sure to give the app a name you can associate with Hello Retail, so you know the relation of the app. 
Set the emergency developer email to support@helloretail.com.
Now in the "Admin API" section you click on the text "Show inactive Admin API permissions" to fold out the entire list og possible resources available via the API.
Find the ones called "Customers",  "Orders", "Product Listings", "Products" and "Store content" and set them to Read access.

 

Step 5: When you have done the above, you press save and you should end up with something like the image below.

Now you have set up the API and have to email us at support@helloretail.com the following details:

  • API Key
  • Password
  • Your shopify store name (xxx.myshopify.com)

 

In this section, we will guide you through how to create a Hello Retail category feed. The setup is quite similar in how to create a product feed, although with a few differences.

Step 1: Navigate and click "Online store"

 

Step 2: Click the sub-menu "Themes"

 

Step 3: Navigate to and click drop-down "Actions"

 

Step 4: Click the sub-menu "Edit code"

 

Step 5: In the second left menu, navigate to the folder "Templates" and click the link "Add a new template". A window prompt will appear for you.

 

Step 6: In the window prompt, please choose the type of "page" and call the page "helloretail-category-feed"

 

Step7: Click the button "Create template". A new editor window will appear.

 

Step 8: In the new editor window for your page called "helloretail-category-feed".
Replace all content with following code (Don't worry, this will not interfere with any of your already existing pages):

{% layout none %}<?xml version="1.0" encoding="UTF-8"?>{% paginate collections by 50 %}
<categories last-page-number="{{ paginate.pages }}">
{% for collection in collections %}
 <category>
<title><![CDATA[{{ collection.title | escape_once }}]]></title>
{% if collection.image %}<imgurl><![CDATA[https:{{ collection.image | img_url: '150x' | escape_once }}]]></imgurl>{% for i in (0..4) %}{% assign plusSize = i|times:50 %}{% assign imgSize = 150|plus: plusSize|append:'x' %}<imgurl{{ imgSize }}>{% if collection.image %}<![CDATA[https:{{ collection.image | img_url: imgSize | escape_once }}]]>{% endif %}</imgurl{{ imgSize }}>{% endfor %}{% endif %}
<description><![CDATA[{{ collection.description | escape_once }}]]></description>
<url><![CDATA[{{ shop.url | escape_once }}{{ collection.url | escape_once }}]]></url>
<hierarchy><category><![CDATA[{{ collection.title | escape_once }}]]></category></hierarchy>
<navigations>{% for list in linklists %}{% assign link_urls = list.links | map: 'url' %}{% if link_urls contains collection.url %}<nagivation><navTitle><![CDATA[{{ list.title | escape_once }}]]></navTitle><navList>{% for link in list.links %}<nav><![CDATA[{{ link.title | escape_once }}]]></nav>{% endfor %}</navList></nagivation>{% endif %}{% endfor %}</navigations>
<tags>{% for tag in collection.all_tags %}<tag><![CDATA[{{ tag | escape_once }}]]></tag>{% endfor %}</tags>
</category>{% endfor %}{% endpaginate %}</categories>


Step 9: Navigate to the top right corner and press the button "Save"

 

Step 10: Navigate and click the menu "Pages"

 

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

 

Step 12: In the page editor, please write "helloretail-category-feed" in Title. Make sure the option "Visible" is chosen under Visibility. Choose "page.helloretail-category-feed" under Template.

 

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

 

Step 14: You completed setting up a Hello Retail category feed.
You can access the feed by URL:
http://your-shop.myshopify.com/pages/helloretail-category-feed
(Note: replace your-shop.myshopify.com with your webshop domain.)

 

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.

Step 1: Navigate and click "Online store"

 

Step 2: Click the sub-menu "Themes"

 

Step 3: Navigate to and click drop-down "Actions"

 

 

Step 4: Click the sub-menu "Edit code"

 

Step 5: Navigate to the second left menu bar, and under folder "Layout" click the file "theme.liquid". An editor window will appear.

 

Step 6: In the editor window: scroll down until you reach the bottom and locate the </body> tag.

 

Step 7: Insert a line above the </body> tag, and insert copy-paste following code in line you created.
Important: Once you have pasted it, you should replace YOUR_PARTNER_ID with your own Hello Retail partner ID. 

  <script type="text/javascript">
        (function() {
            var aws = document.createElement('script');
            aws.type = 'text/javascript';
            if (typeof(aws.async) != "undefined") { aws.async = true; }
            aws.src = (window.location.protocol == 'https:' ? 'https://d1pna5l3xsntoj.cloudfront.net' : 'http://cdn.addwish.com') + '/scripts/company/awAddGift.js#YOUR_PARTNER_ID';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(aws, s);
        })();
  </script>

 

Step 8: Navigate to the top of the screen, and click the button "Save".

 

In this section, we will show you how to provide a cart span that Hello Retail can track. Adding the Hello Retail cart span is essential in making features like Triggered Emails Abandoned-cart trigger to work correctly.

Step 1: Navigate and click "Online store"

 

Step 2: Click the sub-menu "Themes"

 

Step 3: Navigate to and click drop-down "Actions"

 

Step 4: Click the sub-menu "Edit code"

 

Step 5: Navigate to the second left menu bar, and under folder "Layout" click the file "theme.liquid". An editor window will appear.

 

Step 6: In the editor window: scroll down until you reach the bottom and locate the </body> tag as well as the script that you inserted from Guide: Inserting the Hello Retail tracking script.

 

Step 7: Insert a new line above the <script type="text/javascript"> tag and copy paste following code:

{% if cart.item_count > 0 %}
    {% assign contents = '' %}
    {% for item in cart.items %}
        {% assign contents = contents|append: item.variant_id | append:":" | append: item.quantity | append: "," %}
    {% endfor %}
    <span class="addwish-cart"
        style="display:none"
        data-total="{{ cart.total_price | divided_by: 100.0 }}"
        data-url="{{shop.url}}/cart/{{contents}}">
    {% for item in cart.items %}
        <span class="addwish-product" data-url="{{shop.url}}{{ item.url }}" data-productnumber="{{item.product_id}}" data-quantity="{{item.quantity}}"></span>
    {% endfor %}
    </span>
{% else %}
    <span class="addwish-cart" style="display:none" data-total="0,00"></span>
{% endif %}

 

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.

Step 1: Navigate to the left menu and click "Settings" at the bottom. A selection of setting categories are now shown to you.

 

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

 

Step 3: In the list of Checkout settings, scroll down until you find the setting named "Additional scripts"

 

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

 

Step 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 = (window.location.protocol == 'https:' ? 'https://d1pna5l3xsntoj.cloudfront.net' : 'http://cdn.addwish.com') + '/scripts/company/awAddGift.js#YOUR_PARTNER_ID';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(aws, s);
        })();
</script>
<span class="addwish-conversion" style="display:none;"
data-ordernumber="{{ order.order_number }}"
data-total="{{ order.subtotal_price | divided_by: 100 }}"
data-email="{{ order.email }}"
>
{% for line_item in order.line_items %}
<span class="addwish-product"
data-url="{{ shop.url }}{{ line_item.product.url }}"
data-productnumber="{{ line_item.product_id }}"
data-quantity="{{ line_item.quantity }}"
></span>
{% endfor %}
</span>

 

Step 6: In the code you pasted you'll find YOUR_PARTNER_ID. Replace this word with your own Hello Retail ID with your account: https://addwish.com/company/signin.html

 

Step 7: Navigate to the top of the website and press button "Save"

 

In this section, we will guide you through how to create a blank page where Dynamic Search can display the full search results.

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.

 

Like Follow
  • 2 mths agoLast active
  • 1Replies
  • 572Views
  • 2 Following