Integrate Shopify into your Client's WordPress Website: 2016

As theme providers, we’ve come to divide the bulk of our customers into two camps: “ecommerce folks” and “non-ecommerce folks.” On the one side, we have entrepreneurs and commercial outfits—our Shopify users. On the other side, we have bloggers, photographers and artists—our WordPress users.

Something about the supposed mutual exclusivity of those two groups always bugged us. Sure, our WordPress users want to showcase their work online, but at least some of them must be looking for ways to sell it, too, right? Why shouldn’t their beautiful online portfolio be able to double as an online store?

We sat on that question for a while, waiting for the right moment to make our not-so-crazy dreams a reality. When we acquired Themezilla, one of the biggest names in WordPress design and innovation, and makers of some of the platform’s most loved themes, we saw our opportunity.

We wanted our first big Themezilla release to be something worthy of the brand’s legacy, while adding our own stamp of Pixel Union ecommerce expertise. Bringing Shopify’s easy-to-use, state-of-the-art ecommerce functionality to WordPress’s versatile and powerful CMS seemed like the perfect project. After several weeks of collaboration between Shopify and our design and development teams, Zillacommerce was born.

What is Zillacommerce?

Simply put, Zillacommerce is the best way to sell online with WordPress. Previously, if you wanted to add ecommerce to your WordPress site, you had to use a plugin. As many WordPress users know, plugins can be great for simple add-ons like social media and SEO, but for more complex functionality they can lead to all kinds of problems, from awkward styling to site bloating to security vulnerabilities.

We created Zillacommerce to do away with all that. With a Zillacommerce theme and a Shopify account, WordPress users can start selling directly from their website, managing products, orders and sales reports via Shopify’s super-intuitive dashboard. Plus, since the ecommerce functionality is baked right into their theme, users don’t have to deal with the hassle of constantly updating plugins or add-ons—not to mention the sleepless nights wondering if their server is next in line to be hacked.

To test-drive Zillacommerce, we decided put an ecommerce spin on our most recent portfolio theme, Hype. Our developers took Shopify’s Buy Button embed code and distilled it into a customizable WordPress shortcode built into our Zillaframework codebase. The shortcode allows Hype owners (and future Zillacommerce users) to add products to their pages and posts immediately and simply, all within the WordPress post editor.

How does it work?

If you’re a designer or developer working on behalf of a merchant, the first step is signing up for a Shopify account. Shopify offers four different pricing plans, but the $5/month Starter plan is all that’s needed to sell with Zillacommerce.

Once your client’s products have been configured in the Shopify back end (images added, product descriptions written, prices set, etc.), the process of integrating them into WordPress is simple. It looks something like this:

Log in to the WordPress back end and select the page or post where the product should appear.

Integrate Shopify into your Client's WordPress Website: WordPress Backend

Click the “Add Product” button in the top toolbar. If the client’s Shopify store hasn’t already been connected, insert the URL when prompted.

Integrate Shopify into your Client's WordPress Website: Add product to cart

Once the Shopify account has been connected, products and collections can be searched for and selected from the store’s inventory. Clicking “Select Product” will insert a shortcode into the page, instructing it to either display a Buy Button for a single product or a thumbnail grid for a collection.

Integrate Shopify into your Client's WordPress Website: Select Products

Products can be integrated into any page or post, and the look of the Buy Button and cart can be customized by clicking through to Appearance from the Shopify menu on the WordPress dashboard.

Integrate Shopify into your Client's WordPress Website: WordPress Dashboard

In fact, unlike hosted ecommerce platforms, almost every pixel of a product page can be customized with WordPress’s robust front-end customization abilities. Whereas some ecommerce themes allow space for only three or four product images, Zilllacommerce allows you to add full-width images, videos, and gifs to complement product descriptions and help them stand out from the crowd.

Inventory, orders and payments are all managed through Shopify, which can be accessed directly from the Shopify tab on the WordPress dashboard.

Shopify’s control panel allows access to an incredible collection of sales and marketing tools, along with 24/7 support and information about selling in-person with Shopify’s POS system. Developers can also set up a Shop section on Facebook should their client wish to diversify their sales channels beyond their WordPress site.

What it all means

Zillacommerce means getting the best of both worlds in a single, easy-to-use theme. No longer do brands and designers need to tally the pros and cons of various platforms before investing in a theme that they only hope will be the best fit for their business or client project. Instead, they get two of the web’s most amazing platforms bundled together in one neat little package.

This is only the start for Zillacommerce. We’re going to be baking it into more of our existing Themezilla themes, as well as building it into new WordPress themes. As an agency with a passion for design, user experience, and helping businesses grow, this was a logical step for us, and we’re excited to see it how it develops.

What do you think about Zillacommerce? Share your feedback in the comments' section below.

Alanna Mahr