Integrating Craft & Shopify

As we have the opportunity work on more Craft sites at Viget, we’ve been able to do some interesting integrations, like our most recent integration with the ecommerce platform Shopify. Below is a step-by-step guide to implementing Craft and Shopify by utilizing a plugin I built.

Craft Configuration

First, you need to download and install the Craft Shopify plugin, and add your Shopify API credentials in the plugin settings.

With the plugin installed, you also get a custom fieldtype that let’s you select a Shopify Product from a dropdown. So let’s create a field called Shopify Product.

Next, let’s create a Product section in Craft and add our Shopify Product field to that section. Now, when we go to publish a Product, we can associate the product in Craft with a product in Shopify.

The idea here is that we can use the powerful custom field functionality of Craft to build out product pages but still pull in the Shopify specific data (price, variants, etc). Then, we let Shopify handle the cart and checkout process.

Craft Templates

The Shopify plugin also provides some functionality to retrieve information from the Shopify API. So on our products/_entry template, we can use the value from our shopifyProduct field to grab information about the product from Shopify.

 {% set shopify = craft.shopify.getProductById({ id: entry.shopifyProduct }) %}

That will hit the Shopify product endpoint, and return the data you can use in Craft. You can also specify particular fields to make the response smaller.

This means we can pretty easily create an Add to Cart form in our Craft templates.

 {% set shopify = craft.shopify.getProductById({ id: entry.shopifyProduct, fields: 'variants' }) %}
<form action="http://your.shopify.url/cart/add" method="post">
    <select name="id">
        {% for variant in shopify.variants %}
            <option value="{{ variant.id }}">{{ variant.title }} - ${{ variant.price }}</option>
        {% endfor %}
    </select>
    <input type="hidden" name="return_to" value="back">
    <button type="submit">Add to Cart</button>
</form>

The plugin also provides a couple of additional methods to retrieve product information from Shopify.

craft.shopify.getProducts()

This method hits the products endpoint, and you can pass in any of the parameters that the documentation notes.

 {% for product in craft.shopify.getProducts({ fields: 'title,variants', limit: 5 }) %}
    <div class="product">
        <h2>{{ product.title }}</h2>
        <ul>
            {% for variant in product.variants %}
                <li>{{ variant.title }} - ${{ variant.price }}</li>
            {% endfor %}
        </ul>
    </div>
{% endfor %}

craft.shopify.getProductsVariants()

I ended up creating this method because on the products index, I wanted an easy way to output the variants for each Craft product without having to hit the API multiple times. So basically what you do is call this method once, and then the keys of the array are the ID of the product. Again, you can pass in any of the parameters that the products endpoint documentation references, but if you don’t include the ID and variants, there isn’t any point in using this method!

 {% set shopifyProducts = craft.shopify.getProductsVariants() %}
{% for entry in craft.entries({ section: 'product' }) %}
    <div class="product">
        <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
        {% if entry.shopifyProduct and shopifyProducts[entry.shopifyProduct] %}
            <ul>
                {% for variant in shopifyProducts[entry.shopifyProduct] %}
                    <li>{{ variant.title }} - ${{ variant.price }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endfor %}

Really you can do whatever you want with the data that's returned; this is just a simple example to output the variants for each product.

So download the Craft Shopify plugin, and enjoy the simple integration with Shopify!