AddThis to Shopify Theme with Configuration Variables

Setup a Google Analytics account and record the profile ID.

Setup an AddThis Sharing account, add a new profile and record the profile ID.

Setup a Bitly account, go to Advanced Settings and record your “login” and “API Key”

Add the following configuration settings to your Shopify theme ‘settings/settings_data.json’ file:

{
  "current": {
    ....
    "addthis_profile_id":"PUT YOUR ADDTHIS PROFILE ID HERE",
    "google_profile_id":"PUT YOUR GOOGLE PROFILE ID HERE",
    "enable_bitly":true,
    ....
  }
}

Add the following fields to your Shopify theme ‘settings/settings.html’ file:

<fieldset>
  <legend>Sharing Settings</legend>
  <table>
    <tr>
      <td><label for="addthis_profile_id">Addthis Profle ID</label></td>
      <td><input id="addthis_profile_id" name="addthis_profile_id" class="text" /></td>
    </tr>
    <tr>
      <td><label for="enable_bitly">Enable Bitly URL Shortener for Addthis</label></td>
      <td><input type="checkbox" id="enable_bitly" name="enable_bitly" /></td>
    </tr>
    <tr>
      <td><label for="google_profile_id">Google Profle ID</label></td>
      <td><input id="google_profile_id" name="google_profile_id" class="text" /></td>
    </tr>
  </table>
  
</fieldset>

Add the following at the bottom of your Shopify theme ‘layouts/theme.liquid’ file (before the </body> tag):

NOTE: I set ‘data_track_addressbar’ to ‘false’ because it adds hashed variables to URLs which can screw with someJavascript dependant themes.

{% if settings.addthis_profile_id.size > 0 %}
<!-- AddThis Button  -->
<script type='text/javascript'>
var addthis_product = 'mag-1.0';
{% if settings.enable_bitly %}var addthis_share = { url_transforms : { shorten: { twitter: 'bitly' } }, shorteners : { bitly : {} }  }{% endif %}
var addthis_config = {data_track_addressbar:false{% if settings.google_profile_id.size > 0 %}, data_ga_property:'{{ settings.google_profile_id }}'{% endif %}};
</script>
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid={{ settings.addthis_profile_id }}"></script>
<!-- AddThis Button  -->
{% endif %}

Then you can simply add the code to any page/liquid template like this:

{% if settings.addthis_profile_id.size > 0 %}
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->
{% endif %}

Then add Facebook open graph tags to your page like this:

NOTE: Save a coming soon image called “my-coming-soon-image.jpg” in your assets for collections that do not have images.

{% if template contains 'product' %}
  <meta property="og:url" content="{{ shop.url }}{{ current_url }}" />
  <meta property="og:title" content="{{ product.title }}" />
  <meta property="og:description" content="{{ product.description | newline_to_br | strip_html | truncatewords: 100, '' | escape  }}" />
  <meta property="og:image" content="{{ product.featured_image | product_img_url: 'medium' }}" />
{% elsif template contains 'article' %}
  <meta property="og:url" content="{{ shop.url }}{{ current_url }}" />
  <meta property="og:title" content="{{ article.title }}" />
  <meta property="og:description" content="{{ article.excerpt_or_content | newline_to_br | strip_html | truncatewords: 100, '' | escape  }}" />
  {% if article.content contains "<img" %}
    {% assign src = article.content | split: 'src="' %}
    {% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:'  %}
    {% if src %}<meta property="og:image" content="{{ src }}" />{% endif %}
 {% endif %}
{% elsif template contains 'collection' %}
	{% if collection.all_products_count > 0 %}
            {% if collection.image %}
                {% capture meta_img_src %}{{ collection.image.src | collection_img_url: 'medium' }}{% endcapture %}
            {% else %}
                {% capture meta_img_src %}{{ collection.products.first.featured_image.src | product_img_url: 'medium' }}{% endcapture %}
            {% endif %}
            {% if meta_img_src contains "no-image" %}
                {% capture meta_img_src %}{{ 'my-coming-soon-image.jpg' | asset_url }}{% endcapture %}
            {% endif %}
        {% else %}
            {% capture MybadUrl %}{{ collection.image.src | collection_img_url: 'medium' }}{% endcapture %}
            {% if MybadUrl contains "no-image" %}
                {% capture meta_img_src %}{{ 'my-coming-soon-image.jpg' | asset_url }}{% endcapture %}
            {% else %}
                {% capture meta_img_src %}{{ MybadUrl }}{% endcapture %}
            {% endif %}  
        {% endif %}
      	<meta property="og:title" content="{{ current_title }}" />
  	<meta property="og:image" content="{{ meta_img_src }}" />
  	<meta property="og:url" content="{{ shop.url }}{{ current_url }}" />
{% else %}
  {% if settings.use_logo %}
    <meta property="og:image" content="{{ 'logo.png' | asset_url }}" />
  {% endif %}
{% endif %}