Shopify For WordPress

I just finished up and released a WordPress plugin for pulling and display products from Shopify web stores. If you’d like to check it out and jump into using it you can find it on Github right here. If you’d like to know a little more about it and the motivation behind creating it, keep reading.

Background

A few months back a project I was working on had an e-commerce aspect that was going to be built using Shopify. While very good at what it is – an e-commerce platform – Shopify doesnt quite have the functionality or allow the customization that warrant calling it a full-fledged content management system. Without the ability for custom content types, custom metadata, and the fairly limiting Liquid template language, its usefulness is definitely on the low end when creating dynamic and feature-intensive websites.

The site in question, however, required a wide array of content types. Aside from regular pages there were to be blog posts, team members, press releases, a store locator, and more; all of which needed to be flexible and varying in their layouts. I realized pretty quickly that Shopify would probably not cut it on its own.

With Shopify already chosen by the client, and my feeling that it was still their best option for e-commerce, I had to find a way to make it do what I wanted. The solution I came up with was to use two separate sites acting as one. The first would be the main site, built with WordPress, the second would be the store site, built with Shopify. If I could pull off making the two themes identical, the user experience would be seamless. The main site would be at their regular domain ( www.domain.com ) and the Shopify store would work off a subdomain ( www.store.domain,com ). This proved to be the easiest part of the process. Building the WordPress half first, I simply removed my PHP and wrote the appropriate Liquid to suit the needs of the Shopify theme.

This resulting site wound up working very well. I was able to make the sites identical despite operating on two completely separate systems. An ordinary user would never realize they were in fact moving back and forth between two wholly different platforms. The design, however, called for more integration of the e-commerce aspect within the functionality of the main site. Things like featured products, random products, and shopping cart totals all needed to be displayed throughout the whole site, not just the store.

The Plugin

Shopify has a nice, well documented, JSON-based API that allows for a number of interactions with their platform. Looking at it for a few minutes and reading the basics of the documentation I realized it wouldn’t be difficult at all to pull in the stores products and write a few functions to output them within the theme. It became even easier when I found this library by Sandeep Shetty. The majority of the work was already done for me.

From there I wrote a very bare bones plugin to be used on the site in question. There was no widget at first as I was simply selecting products to be displayed in custom meta boxes on pages, and hard coding calls within the theme for random products. It worked great and the integration between the sites was vastly improved.
In order to make the plugin more user friendly I went ahead and developed a widget that allowed easy selection and display of products in any sidebar in WordPress. I think the result is a very simple and easy to use solution for those who want to integrate their Shopify stores with their business site, personal site, blog, etc.
For everyday users its as simple as setting up your API key and dragging the widget where you want it. For developers there are a number of functions available to be used anywhere in your theme or admin section, found in the shopify-products.php file.

Plugin source code is available on Github.

 
0
Kudos
 
0
Kudos

Now read this

Hoardr: Flickr as a cloud backup service

After years of being relegated to nothing more than a container for whacky cat antics, it turns out the humble Gif is capable of more than meets the eye. Specifically, it is able to carry more than just image data – you can actually... Continue →