Open Graph Headers for Shopify

The process is:

  • Create theme settings for open graph image
  • Create your image (1200x630px) and upload it to new theme settings
  • Create or replace the ‘social-meta-tags.liquid’ snippet

Theme settings

Add this to settings_schema.json, click customise theme and upload your image

  {
    "name": "Open Graph image",
    "settings": [
      {
        "type": "header",
        "content": "Open graph"
      },
      {
        "type": "checkbox",
        "id": "opengraph_enable",
        "label": "Use custom image?"
      },
      {
        "type": "image",
        "id": "opengraph.png",
        "label": "Image",
        "info": "1200 x 630 ",
        "max-width": 1200,
        "max-height": 630
      }
    ]
  },

Social Meta Tags Snippet

Create or replace the ‘social-meta-tags.liquid‘ snippet. Include the snippet in the HTML head.

This has been modified to include the open graph image (from settings above) and a fall back for articles that do not have a featured image, but contain an image in the content field.

<!-- /snippets/social-meta-tags.liquid -->
{% comment %}
  Add Facebook and Pinterest Open Graph meta tags to product pages
  for friendly Facebook sharing and Pinterest pinning.

  More info Open Graph meta tags
    - https://developers.facebook.com/docs/opengraph/using-objects/
    - https://developers.pinterest.com/rich_pins/

  Use the Facebook Open Graph Debugger for validation (and cache clearing)
    - http://developers.facebook.com/tools/debug

  Validate your Pinterest rich pins
    - https://developers.pinterest.com/rich_pins/validator/
{% endcomment %}
{% if template contains 'product' %}
  <meta property="og:type" content="product">
  <meta property="og:title" content="{{ product.title | strip_html | escape }}">
  {% for image in product.images limit:3 %}
  <meta property="og:image" content="https:{{ image.src | img_url: 'grande' }}">
  <meta property="og:image:secure_url" content="https:{{ image.src | img_url: 'grande' }}">
  {% endfor %}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html | escape }}">
  <meta property="og:price:currency" content="{{ shop.currency }}">
{% elsif template contains 'article' %}
  <meta property="og:type" content="article">
  <meta property="og:title" content="{{ article.title | strip_html | escape }}">
  {% assign img_tag = '<' | append: 'img' %}
  {% if article.image %}
    <meta property="og:image" content="http:{{ article | img_url: 'medium ' }}">
    <meta property="og:image:secure_url" content="https:{{ article | img_url: 'medium ' }}">
  {% elsif article.content contains img_tag %}
    {% assign src = article.content | split: 'src="' %}
    {% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
    {% if src %}
  <meta property="og:image" content="https:{{ src }}">
  <meta property="og:image:secure_url" content="https:{{ src }}">
    {% endif %}
  {% endif %}
{% elsif template == 'password' %}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ shop.name }}">
  <meta property="og:url" content="{{ shop.url }}">
  {% if settings.opengraph_enable %}
  <meta property="og:image" content="https:{{ 'opengraph.png' | asset_url }}">
  <meta property="og:image:secure_url" content="https:{{ 'opengraph.png' | asset_url }}">
  {% endif %}
{% else %}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title | escape }}">
  {% if settings.opengraph_enable %}
  <meta property="og:image" content="https:{{ 'opengraph.png' | asset_url }}">
  <meta property="og:image:secure_url" content="https:{{ 'opengraph.png' | asset_url }}">
  {% endif %}
{% endif %}
{% if page_description %}
  <meta property="og:description" content="{{ page_description | escape }}">
{% endif %}
  <meta property="og:url" content="{{ canonical_url }}">
  <meta property="og:site_name" content="{{ shop.name }}">

{% comment %}
  This snippet renders meta data needed to create a Twitter card
  for products and articles.

  Your cards must be approved by Twitter to be activated
    - https://dev.twitter.com/docs/cards/validation/validator

  More information:
   - https://dev.twitter.com/docs/cards/types/product-card
   - https://dev.twitter.com/docs/cards/types/summary-card
{% endcomment %}

{% comment %}
  Twitter user name of the site, based on theme settings
{% endcomment %}
{% if settings.twittercard_handle != blank %}
  <meta name="twitter:site" content="{{ settings.twittercard_handle }}">
{% endif %}
{% if template contains 'product' %}
  <meta name="twitter:card" content="product">
  <meta name="twitter:title" content="{{ product.title }}">
  <meta name="twitter:description" content="{{ product.description | strip_html | truncatewords: 140, '' | escape }}">
  <meta name="twitter:image" content="https:{{ product.featured_image.src | img_url: 'medium' }}">
  <meta name="twitter:image:width" content="240">
  <meta name="twitter:image:height" content="240">
  <meta name="twitter:label1" content="Price">
  {% assign price = product.price | money_with_currency | strip_html | escape %}
  <meta name="twitter:data1" content="{% if product.price_varies %}{{ 'products.general.from_text_html' | t: price: price }}{% else %}{{ price }}{% endif %}">
  {% if product.vendor != blank %}
  <meta name="twitter:label2" content="Brand">
  <meta name="twitter:data2" content="{{ product.vendor | escape }}">
  {% else %}
  <meta name="twitter:label2" content="Availability">
  <meta name="twitter:data2" content="In stock">
  {% endif %}
{% elsif template contains 'article' %}
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="{{ article.title }}">
  <meta name="twitter:description" content="{{ article.excerpt_or_content | strip_html | truncatewords: 140, '' | escape }}">
  {% comment %}
    Check if content contains an image to add to the card
      - Source: http://blog.viralica.com/2013/09/twitter-product-cards-on-shopify/
  {% endcomment %}
  {% 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="twitter:image" content="{{ src }}">
    {% endif %}
  {% endif %}
{% endif %}

Custom Addthis Social Media Sharing Buttons for Shopify (for free)

The process is:

  1. Create a Google Analtyics account and get your site ID
  2. Sign-up to Addthis and get your profile ID
  3. Sign-up to Bitly for URL shortening on Tweets (and get your API username and key)
  4. Add the Shopify Theme settings to your settings_schema.js
  5. Add the javascript to your Shopify theme layout file
  6. Add HTML for sharing buttons to your Shopify pages
  7. Add custom icon font and CSS to style your buttons
  8. Configure the Addthis Custom HTML Email Template
  9. Create a Facebook App and add the id to the settings

Addthis theme settings

Add this code to your Shopify settings_schema.json then click on “customise theme” to enter the right values.

  {
    "name": "Addthis Sharing Settings",
    "settings": [
      {
        "type": "checkbox",
        "id": "addthis_use",
        "label": "Use Addthis?"
      },
      {
        "type": "text",
        "id": "addthis_id",
        "label": "AddThis ID"
      },
      {
        "type": "text",
        "id": "google_analytics_id",
        "label": "Google Analytics ID"
      },
      {
        "type": "text",
        "id": "addthis_twitter_id",
        "label": "Twitter name"
      },
      {
        "type": "text",
        "id": "addthis_twitter_string",
        "label": "Twitter string",
        "default": "*title* Coming Soon. #signup #exclusiveaccess"
      },
      {
        "type": "checkbox",
        "id": "addthis_bitly_use",
        "label": "Use Bitly?"
      },
      {
        "type": "checkbox",
        "id": "addthis_email_template_use",
        "label": "Use custom email template?"
      },
      {
        "type": "text",
        "id": "addthis_email_template_name",
        "label": "Add this email template name",
        "default": "product_template"
      },
      {
        "type": "text",
        "id": "addthis_facebook_app_id",
        "label": "Facebook App ID"
      },
      {
        "type": "text",
        "id": "addthis_facebook_redirect_url",
        "label": "Facebook Redirect URL"
      }
    ]
  }

Addthis Javascript

Create a new snippet called “addthis.liquid” and add it to the end of your theme (before end of body tags) using {% include ‘addthis’ %}

{% if settings.addthis_use %}
<script>
  jQuery(function($) {
    initAddThis();
    jQuery('.sharenulify').on('click', function (e) {
      return false;
    });
  });
  function initAddThis() 
  {
    if ( typeof( window[ 'addthis' ] ) != "undefined" ) {
      addthis.init()
    } 
  }
</script> 

{% capture addthis_title %}{% endcapture %}
{% capture addthis_description %}{% endcapture %}
{% capture addthis_image %}{% endcapture %}
{% if template contains 'product' %}
  {% capture addthis_title %}{{ product.title | strip_html | escape }}{% endcapture %}
  {% capture addthis_description %}{{ product.description | strip_html | strip_newlines | truncatewords: 30, '' | escape }}{% endcapture %}
  {% capture addthis_image %}https:{{ product.featured_image | img_url: 'large' }}{% endcapture %}
{% elsif template contains 'article' %}
  {% capture addthis_title %}{{ article.title | strip_html | escape }}{% endcapture %}
  {% capture addthis_description %}{{ article.excerpt_or_content | strip_html | strip_newlines | truncatewords: 30, '' | escape }}{% endcapture %}
  {% if article.image %}
    {% capture addthis_image %}https:{{ article.image.src | img_url: 'large' }}{% endcapture %}
  {% endif %}
{% elsif template contains 'page' %}
  {% capture addthis_title %}{{ page.title | strip_html | escape }}{% endcapture %}
  {% capture addthis_description %}{{ page.content | strip_html | strip_newlines | truncatewords: 30, '' | escape }}{% endcapture %}
  {% assign img_tag = '<' | append: 'img' %}
  {% if page.content contains img_tag %}
    {% assign src = page.content | split: 'src="' %}
    {% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' | replace: '_small.', '_large.' %}
    {% capture addthis_image %}https:{{ src }}{% endcapture %}
  {% endif %}
{% else %}
  {% capture addthis_title %}{{ page_title | escape }}{% endcapture %}
  {% if page_description %}{% capture addthis_description %}{{ page_description | escape }}{% endcapture %}{% endif %}
{% endif %}

{% capture addthis_twitter_string_calculated %}{{ settings.addthis_twitter_string | replace: '*title*', addthis_title }}{% endcapture %}  
<script type="text/javascript">
  var addthis_config = {
    {% if settings.google_analytics_id.size > 0 %}
    data_ga_property: '{{ settings.google_analytics_id }}',
    data_ga_social : true,
    {% endif %}
    "data_track_addressbar":false,
    ui_use_css : true,
    image_include: "at_include",
    image_exclude: "at_exclude"
  };
  addthis_share = {
    {% if settings.addthis_bitly_use %}
    url_transforms : {
      shorten: {
        twitter: 'bitly',
        facebook: 'bitly'
      }
    }, 
    shorteners : {
      bitly : {} 
    },
    {% endif %}
    url: "{{ canonical_url }}",
    title: "{{ addthis_title }}",
    description: "{{ addthis_description }}",
    passthrough : {
      twitter: {
        {% if settings.addthis_twitter_id.size > 0 %}via: "{{ settings.addthis_twitter_id }}",{% endif %}
        text: "{{ addthis_twitter_string_calculated }}"
      }{% if settings.addthis_facebook_app_id.size > 0 %},
      facebook: {
        app_id: '{{ settings.addthis_facebook_app_id }}',
        redirect_uri: '{{ settings.addthis_facebook_redirect_url }}',
      }{% endif %}
    }
    {% if settings.addthis_email_template_use and addthis_image.size > 0 %},
    email_template: "{{ settings.addthis_email_template_name }}",
    email_vars: { 
      thisTitle: "{{ addthis_title }}" ,
      thisDescription: "{{ addthis_description }}", 
      thisImage: "{{ addthis_image }}" ,
    }
    {% endif %}
  }
</script>        
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid={{ settings.addthis_id }}" async="async"></script>
{% endif %}

HTML for share buttons

Create a new snippet called “addthis-share-buttons.liquid” and add it on any page you like using {% include ‘addthis-share-buttons’ %}

<div class="product-share">
  <a class="product-share-button" href="#">Share</a>
  <div class="share">
    <ul>
      <li><a class="tooltip sharebutton addthis_button_facebook" id="share_facebook" title="Share {{ mysharetitle }} on Facebook"><i class="fa fa-facebook"></i></a></li>
      <li><a class="tooltip sharebutton addthis_button_twitter" id="share_twitter" title="Share {{ mysharetitle }} on Twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a class="tooltip sharebutton addthis_button_tumblr" id="share_tumblr" title="Share {{ mysharetitle }} on Tumblr"><i class="fa fa-tumblr"></i></a></li>
      <li><a class="tooltip sharebutton sharenulify addthis_button_pinterest_share" id="share_pinterest" title="Share {{ mysharetitle }} on Pinterest"><i class="fa fa-pinterest"></i></a></li>
      <li><a class="tooltip sharebutton addthis_button_email" id="share_email" title="Send  {{ mysharetitle }} to a friend by Email"><i class="fa fa-envelope-o"></i></a></li>
      <li><a class="tooltip sharebutton addthis_button_compact" id="share_other" title="More share options"><i class="fa fa-bookmark"></i></a></li>
    </ul>
  </div>
</div>

Use CSS to style your buttons

For Fontawesome icons, remember to add the font css to your theme file.

.product-share-button, .share { display:inline-block; }
.share ul { display:inline-block; list-style:none; margin:0; padding:0; }
.share li {  margin:0; padding:0; display:inline-block; }
.share li a { display:inline-block; margin:0; padding:10px; font-size:18px; line-height: 38px;}

Google Analytics Exclude URL Query Parameters

A list of url query parameters to exclude from Google Analytics for various e-commerce apps

Shopify

  • q
  • bis_id
  • checkout_url
  • variant
  • contact_posted
  • cache
  • preview_key

Shopify app “Back in Stock Alerts”

  • bis_id

Magento

  • siteID
  • SiteID
  • SID
  • sid
  • ___SID
  • cat
  • limit
  • sort_by

Mailchimp

  • u
  • id
  • e
  • mc_id
  • mcid
  • goal

Fontawesome for Shopify theme (and asset_url output parameters)

When you use Shopify asset_url filter it outputs caching parameter to the end of the url. For example:

//cdn.shopify.com/s/files/X/XXXX/XXXX/t/X/assets/font-awesome.css?1234

This is great for developing themes sites, and refreshing the cdn cache, but can be hazardous when using external font-face file url’s in Shopify liquid css templates. For example:

url('//cdn.shopify.com/s/files/X/XXXX/XXXX/X/4/assets/fontawesome-webfont.svg?1234?v=4.0.3

If you want to add “Fontawesome” to your Shopify project do the following:

1. Download from “http://fortawesome.github.io/Font-Awesome/

2. Upload the font files to Shopify

  • In admin, go to “Themes > Template Editor”
  • Click on “Assets > Add new asset”
  • Upload each font file found in /fonts/ directory of Fontawesome download package

3. Upload “font-awesome.min.css” to assets folder and rename it as a Shopify liquid file “font-awesome.css.liquid”

4. Add the following to the top of your new Shopify liquid css file to get the correct font file paths for secure (ssl) and non-secure pages

{% capture font_url %}{{ 'fontawesome-webfont.eot' | asset_url | replace: 'http://','https://' }}{% endcapture %}
{% assign words = font_url | split: '?' %}
{% capture font_url_eot %}{{ words.first }}{% endcapture %}

{% capture font_url %}{{ 'fontawesome-webfont.woff' | asset_url | replace: 'http://','https://' }}{% endcapture %}
{% assign words = font_url | split: '?' %}
{% capture font_url_woff %}{{ words.first }}{% endcapture %}

{% capture font_url %}{{ 'fontawesome-webfont.ttf' | asset_url | replace: 'http://','https://' }}{% endcapture %}
{% assign words = font_url | split: '?' %}
{% capture font_url_ttf %}{{ words.first }}{% endcapture %}

{% capture font_url %}{{ 'fontawesome-webfont.svg' | asset_url | replace: 'http://','https://' }}{% endcapture %}
{% assign words = font_url | split: '?' %}
{% capture font_url_svg %}{{ words.first }}{% endcapture %}

5. Replace file paths in the Shopify liquid css file with new variables

  ....
  @font-face{
  font-family:'FontAwesome';
  src:url('{{ font_url_svg }}?v=4.0.3');
  src:url('{{ font_url_eot }}?#iefix&v=4.0.3') format('embedded-opentype'),
    url('{{ font_url_woff }}?v=4.0.3') format('woff'),
    url('{{ font_url_ttf }}?v=4.0.3') format('truetype'),
    url('{{ font_url_svg }}?v=4.0.3#fontawesomeregular') format('svg');
  ....

5. Add the css to your Shopify theme liquid file.

{{ 'font-awesome.css' | asset_url | stylesheet_tag }}

6. Start using it by adding HTML mark-up to your templates.

Shopify Item Details on Cart Page

A quick liquid template snippet for displaying cart item product options in Shopify:

  {% for item in cart.items %}
      {% if forloop.first %}
        {% assign coll_handle = item.product.collections.first.handle %}
        {% if coll_handle == 'frontpage' or coll_handle == '' %}{% assign coll_handle = 'all' %}{% endif %}
      {% endif %}
      <tr class="cart-row">
        <td class="cart-item">
          <a href="{{ item.product.url | within: collections.all }}">  
            {% assign option_index = 0 %}
            {% assign found_option = false %}
            {% assign image_index = 0 %}
            {% assign found_image = false %}
            {% for option in item.product.options %}
              {% unless found_option %}
                {% assign downcased_option = option | downcase %}
                {% if downcased_option contains 'color' or downcased_option contains 'colour' or downcased_option contains 'style' %}
                  {% assign option_index = forloop.index0 %}
                  {% assign found_option = true %}
                {% endif %}
              {% endunless %}
            {% endfor %}
            {% if found_option %}
              {% for image in item.product.images %}
                {% unless found_image %}
                  {% if image.alt == item.variant.options[option_index] %}
                    {% assign image_index = forloop.index0 %}
                    {% assign found_image = true %}
                  {% endif %}
                {% endunless %}
              {% endfor %}
            {% endif %}
            <img src="{{ item.product.images[image_index].src | product_img_url: 'medium' }}" alt="{{ item.title | escape }}" width="69px" />
          </a>
        </td>
        <td class="cart-detail">
          <h2><a href="{{ item.product.url }}">{{ item.product.title }}</a></h2>
          {% if item.product.variants.size == 1 %}{% unless item.variant.title contains 'Default' %}<p>{{ item.variant.title }}</p>{% endunless %}{% endif %}
          {% for o in item.product.options %}
          {{ item.variant.options[forloop.index0] }}{% unless o.last %}, {% endunless %}
          {% endfor %}
          {% for p in item.properties %}
            {% unless p.last == blank %}
              {{ p.first }}:
              {% if p.last contains '/uploads/' %}
              <p><a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a></p>
              {% else %}
              <p>{{ p.last }}</p>
              {% endif %}
            {% endunless %}
          {% endfor %}
        </td>
        <td class="cart-price">{{ item.price | money }}</td>
        <td class="cart-quantity"><input type="text" class="field styled-input" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" /></td>
        <td class="cart-total">{{ item.line_price | money }}</td>
        <td class="cart-remove"><a href="/cart/change?line={{ forloop.index }}&quantity=0" class="remove-glyph" title="remove"></a></td>
      </tr>
      {% endfor %}

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

Shopify Multi-Currency Converter

These steps are required to add multi-currency changer to your Shopify website.

Please note, a lot of this post is copied from Shopify documentation and Caroline Schnapp… with some modifications to add message to cart page and footer so that customers know what is the difference between current displayed price and actual charges in store currency. This is in use on FEIT website.

1. Tell us where the money is

Go to Preferences – General Settings.

Scroll down to the Adjust your standards and formats section.

Click on the formatting link next to ‘Money’.

Wrap your “html with currency format” in a span element with a class name set to money.

Here’s what you’ll get if your shop currency is United States Dollars (USD):

<span class='money'>${{amount}} USD</span>

Do the same with the “html without currency format”.

<span class='money'>${{amount}}</span>

Use single quotes. That will save you from some anguish down the line if your theme uses options.

If you are using Shopify 2 (currently in beta), to edit your money formats, you will need to go to Store Configuration → Settings → Standards Formats → Currency → ‘change formatting’.

2. Add multi currency jquery by carolineschnapp

Download https://github.com/carolineschnapp/currencies/blob/master/jquery.currencies.min.js

Save it to your theme “assets” folder.

3. Create theme settings

Add this code to your ‘config/settings.html’ file:

<fieldset>
  <legend>Money options</legend>
  <table>
    <tr>
      <td><label for="show_multiple_currencies">Allow shopper to see prices in his own currency?</label></td>
      <td><input type="checkbox" id="show_multiple_currencies" name="show_multiple_currencies" /></td>
    </tr>
    <tr>
      <td colspan="2"><small>Although you will be able to display prices on your store front in different currencies, Shopify will still process orders in your shop's currency.</small></td>
    </tr>
    <tr>
      <td><label for="currency_format">Money format</label></td>
      <td>
        <select name="currency_format" id="currency_format">
          <option value="money_format" selected="selected">
            Without Currency, ex: $10.00
          </option>
          <option value="money_with_currency_format">
            With Currency, ex: $10 CAD
          </option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="supported_currencies">Currencies you wish to support</label></td>
      <td><input type="text long" class="text" name="supported_currencies" id="supported_currencies" value="CAD USD" /></td>
    </tr>
    <tr>
      <td colspan="2"><small>Separate your currency codes with a space. Use the ISO 4217 3-letter currency code. Click <a target="_blank" href="http://www.xe.com/iso4217.php">here</a> for a complete list of currency codes. Example: <i>CAD USD</i>.</small></td>
    </tr>
    <tr>
      <td colspan="2"><small>* For this functionality to work in your shop, you are required to edit your money formats as per <a href="http://wiki.shopify.com/How_to_Show_Multiple_Currencies#Do_tell_where_the_money_is" target="_blank">these instructions</a> (“Do tell where the money is”).</small></td>
    </tr>
  </table>
</fieldset>

Then set up defaults in your ‘config/settings_data.json’ file:

{
  "current": {
    ....
    "show_multiple_currencies": true,
    "currency_format": "money_format",
    "supported_currencies": "AUD USD GBP EUR JPY",
    ....
  },
....

Then log into admin to set up your values:

4. Create a new snippet for the selector html and css

Save a new snippet at ‘snippets/new-currencies-picker.liquid’ with this code:

<span id="currencies">
  <span data-currency="AUD" class="{% if shop.currency == 'AUD' %}selected {% endif %}left">AUD</span> | 
  <span data-currency="EUR" class="{% if shop.currency == 'EUR' %}selected {% endif %}middle">EUR</span> | 
  <span data-currency="GBP" class="{% if shop.currency == 'GBP' %}selected {% endif %}middle">GBP</span> | 
  <span data-currency="USD" class="{% if shop.currency == 'USD' %}selected {% endif %}middle">USD</span> | 
  <span data-currency="JPY" class="{% if shop.currency == 'JPY' %}selected {% endif %}right">JPY</span>
</span>
<style>
#currencies .selected { text-decoration:underline; color:{{ settings.global_hover_color }};}
</style>

Add this snippet in the body of your theme layout file.

{% include 'new-currency-picker' %}

5. Create a new snippet for the jquery for the changer

Save a new snippet at ‘snippets/new-currencies.liquid’ with this code:

{{ "/services/javascripts/currencies.js" | script_tag }}
{{ "jquery.currencies.min.js" | asset_url | script_tag }}

<script>

// Pick your format here:  
// Can be 'money_format' or 'money_with_currency_format'
Currency.format = 'money_format';
var shopCurrency = '{{ shop.currency }}';
var cookieCurrency = Currency.cookie.read();

// Fix for customer account pages 
jQuery('span.money span.money').each(function() {
	jQuery(this).parent('span.money').removeClass('money');
});

// Add precalculated shop currency to data attribute 
jQuery('span.money').each(function() {
	jQuery(this).attr('data-currency-{{ shop.currency }}', jQuery(this).html());
});

// Select all your currencies buttons.
var buttons = jQuery('#currencies span');

// When the page loads.
if (cookieCurrency == null || cookieCurrency == shopCurrency) {
	Currency.currentCurrency = shopCurrency;
}
else {
	Currency.currentCurrency = cookieCurrency;
	Currency.convertAll(shopCurrency, cookieCurrency);
	buttons.removeClass('selected');
	jQuery('#currencies span[data-currency=' + cookieCurrency + ']').addClass('selected');
	do_multi_currency_warning(Currency.currentCurrency, shopCurrency);
}

// When customer clicks on a currency button.
buttons.click(function() {
	buttons.removeClass('selected');
	jQuery(this).addClass('selected');
	var newCurrency =  jQuery(this).attr('data-currency');
	Currency.convertAll(Currency.currentCurrency, newCurrency);
	do_multi_currency_warning(Currency.currentCurrency, shopCurrency);
});

// For product options.
var original_selectCallback = window.selectCallback;
var selectCallback = function(variant, selector) {
	original_selectCallback(variant, selector);
	Currency.convertAll(shopCurrency, jQuery('#currencies span.selected').attr('data-currency'));
	do_multi_currency_warning(Currency.currentCurrency, shopCurrency);
};

// do this each time you recalculate or page load
do_multi_currency_warning(Currency.currentCurrency, shopCurrency);


// a function to make the cart better when choosing different currencies
// explained in step 7 below
function do_multi_currency_warning(currentCurrency, shopCurrency)
{
	jQuery('.selected-currency').text(Currency.currentCurrency);
	if (currentCurrency != shopCurrency)
	{
		jQuery('.multi-currency-warning').text('*');
		jQuery('.multi-currency-warning-bottom').show();
	}
	else
	{
		jQuery('.multi-currency-warning').text('');
		jQuery('.multi-currency-warning-bottom').hide();
	}
}
</script>

Add this snippet to the bottom of your theme layout file after your ‘shop.js’ include.

{% include 'new-currency' %}

6. Update your product variants changer

In product.liquid so that currency conversion is applied when you change product options.

var selectCallback = function(variant, selector) {
....
{% if settings.show_multiple_currencies %}
	Currency.convertAll('{{ shop.currency }}', jQuery('#currencies span.selected').attr('data-currency'), 'span.money', 'money_format');
	do_multi_currency_warning(Currency.currentCurrency, '{{ shop.currency }}');
{% endif %}
....
};

7. Add a message to your footer and cart

You can use the following code to output the current selected currency (see function ‘do_multi_currency_warning’ above):

<span class="selected-currency"></span>

So you can add this message to your website footer or anywhere in body text:

Prices are in <span class="selected-currency"></span>

And to avoid confusion on the shopping cart page, add a message that tells the user that the final checkout will be in your original store currency:

<p class="multi-currency-warning-bottom">* Prices are currently displayed in <span class="selected-currency"></span>. You will checkout using {{ shop.currency }} at the most current exchange rate.</p>

That’s a wrap.

References/Thanks to: