index.html

---
layout: default
title: Open Source for Shopify
description: A collection of Shopify-related open source projects, developed by third parties.
---

<div class="hero">
  <div class="hero-lines"></div>
  <header class="hero-header">
    <div class="pagewidth">
      <div class="logo--ie">
        <img src="/images/open-source-for-shopify.svg" alt="Open Source for Shopify" class="logo">
      </div>
      <ul class="inline-list git-stats">
        <li>
          <span id="countRepos" class="git-stat is-loading"></span> Repos
        </li>
      </ul>
    </div>
  </header>
  <div class="pagewidth">
    <div class="hero-inner">
      <h1 class="hero-text">A collection of Shopify-related open source projects, developed by third parties.</h1>
      <p>This collection of third-party projects is not officially supported or endorsed by Shopify.</p>
      <p>For the list of official Shopify open source projects, <a href="http://shopify.github.io/">go here</a>.</p>
    </div>
  </div>
</div>

<div class="pagewidth">
  <div class="filter-bar">
    <div class="button-group js-radio-button-group" id="filters">
      <div class="filter-bar--left">
        Show
      </div>
      <div class="filter-bar--right">
        <button class="btn is-active" data-filter="*">All</button>
        <span class="filter-bar--divider">/</span>
        <button class="btn" data-filter=".themes">Themes</button>
        <button class="btn" data-filter=".apps">Apps</button>
        <button class="btn" data-filter=".tools">Tools</button>
        <span class="filter-bar--divider">/</span>
        <button class="btn" data-filter=".liquid">Liquid</button>
        <button class="btn" data-filter=".javascript">JavaScript</button>
        <button class="btn" data-filter=".python">Python</button>
        <button class="btn" data-filter=".ruby">Ruby</button>
        <button class="btn" data-filter=".php">PHP</button>
      </div>
    </div>
  </div>
</div>

<div class="repoWrap">
  <div class="pagewidth">
    <div id="repos"></div>
    <div class="repo-loader">
      <div class="repo-loader--inner">
        <div class="spinner spinner-large"></div>
      </div>
    </div>
  </div>
</div>

<script id="repoTemplate" type="text/template">
{% raw %}
  {{#items}}
  <div class="repo {{languageClass}} {{categoryClass}}{{#unless description}} no-desc{{/unless}}">
    <header class="repo-header">
      <div class="grid">
        <div class="grid-item large--one-half">
          <h2>
          {{#if homepage}}
            {{#if avatar}}
              <a href="{{homepage}}" class="homepage-link">
                <img src="{{avatar}}" alt="{{name}}">
              </a>
            {{else}}
              <a href="{{homepage}}" class="homepage-link">
                <i class="icon-world"></i>
              </a>
            {{/if}}
            <a href="{{homepage}}" title="View {{name}} on Github">{{name}}</a>
          {{else}}
            {{#if avatar}}
              <img src="{{avatar}}" class="homepage-link" alt="{{name}}">
            {{/if}}
            <a href="{{url}}" title="View {{name}} on Github">{{name}}</a>
          {{/if}}
          </h2>
        </div>
        <div class="grid-item large--one-half">
          <div class="repo-meta">
            <div class="repo-git">
              <a href="{{url}}" title="View {{name}} on GitHub">
                <i class="icon-github" title="View on GitHub"></i> Repo
              </a>
            </div>
            <div class="repo-stats">
              <i class="icon-star" title="Stars"></i> {{stars}}
              <i class="icon-forks" title="Forks"></i> {{forks}}
              <span class="repo-category">{{category}}</span>
              <span class="repo-stats-divider">/</span>
              <span class="repo-lang">{{language}}</span>
            </div>
          </div>
        </div>
      </div>
    </header>
    {{#if description}}
    <p>{{description}}</p>
    {{/if}}
  </div>
  {{/items}}
{% endraw %}
</script>

<script>
  var repos = {{ site.github.public_repositories | jsonify }};
</script>