Shopify Installation Guide

Shopify Installation Guide

You are here because you want to connect your Shopify web-shop to helloretail. On this page you will find following guides:

In this section we will guide you through how to insert the helloretail script to your shop, so It will load in all your use-cases. To begin with, make sure you are logged into the Admin panel of your Shopify web-shop. 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.

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

Important: Once you have pasted it you should replace YOUR_PARTNER_ID with your own helloretail ID. You can find this by logging into your account.

 

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 helloretail can track. Adding the helloretail cart span is essential in making features like Triggered Emails Abandoned-cart trigger to work properly.

Important: At this point, you should already have completed Guide: Inserting the helloretail tracking script.

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 helloretail 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 how to connect your product data to helloretail. Product data is essential for all features that helloretail can offer you.
In general helloretail retrieve product data from several platforms in what we call "feeds" - this being a "product feed". The next steps will show you how to set up a product feed from where helloretail can retrieve and index your product data.

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 type of "page" and call the page "helloretail-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-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.all.products by 20 %}<products last-page-number="{{ paginate.pages }}">{% for product in collections.all.products %}{% for variant in product.variants %}
<product>
<title><![CDATA[{{ product.title | escape_once  }}]]></title>
<description><![CDATA[{{ product.description | escape_once }}]]></description>
<url>{{ shop.url }}{{ variant.url }}</url>
<price>{{ variant.price | divided_by: 100.0 }}</price>
        {% if variant.compare_at_price %}
            <previousprice>{{ variant.compare_at_price | divided_by: 100.0 }}</previousprice>
        {% endif %}
        {% if variant.image %}
            <imgurl>http:{{ variant.image.src | product_img_url: 'original' }}</imgurl>
            <imgurlthumb>http:{{ variant.image.src | product_img_url: 'medium' }}</imgurlthumb>
        {% else %}
            <imgurl>http:{{ product.images[0] | product_img_url: 'original' }}</imgurl>
            <imgurlthumb>http:{{ product.images[0] | product_img_url: 'medium' }}</imgurlthumb>
        {% endif %}
<instock>{{ product.available }}</instock>
<keywords><![CDATA[{% for tag in product.tags %}{{ tag }}, {% endfor %}]]></keywords>
<productnumber><![CDATA[{{ product.id }}]]></productnumber>
<brand><![CDATA[{{ product.vendor | escape_once }}]]></brand>
<producttype><![CDATA[{{ product.type }}]]></producttype>
<hierarchies>
        {% for collection in product.collections %}
<hierarchy>
<category><![CDATA[{{ collection.title | escape_once }}]]></category>
</hierarchy>
        {% endfor %}
</hierarchies>
<barcode><![CDATA[{{ variant.barcode }}]]></barcode>
<sku><![CDATA[{{ variant.sku | escape_once}}]]></sku>
</product>
    {% endfor %}{% endfor %}{% endpaginate %}
</products>

 

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-feed" in Title. Make sure option "Visible" is chosen under Visibility. Choose "page.helloretail-feed" under Template.

  

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

 

Step 14: You completed setting up an helloretail product feed.
You can access the feed by url:
http://your-shop.myshopify.com/pages/helloretail-feed
(Note: replace your-shop.myshopify.com with your web-shop domain.)

 

In this section, we will guide you through how to make your conversions available for helloretail. This data is used across many of helloretail 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" in the bottom. A selection of setting categories are now shown to you.

 

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

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

 

Step 4: If there already exists text in "Additional scripts" field, go to the bottom and make a new line. We don't want to override some setting that might already exist.

Step 5: Insert following code at the bottom of "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 there exist a word YOUR_PARTNER_ID. Replace this word with your own helloretail ID with your account: https://helloretail.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 which feature 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 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 helloretail to 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 helloretail so they can finish your full-page search.

 

In this section, we will guide you through how to create an helloretail 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 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 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 an helloretail 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 web-shop domain.)

Reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
Follow
  • 6 days agoLast active
  • 197Views
  • 1 Following