Most people looking to set up an eCommerce site with WordPress are familiar with the eCommerce plugins built for WordPress and therefore install WordPress and their plugin of choice on a self-hosted site. There are some popular platforms, such as Cart66 Cloud and Ecwid, that offer services that are more integrations rather than plugins, but many users tend to enjoy using a native plugin so that all store maintenance is done from the same admin dashboard.
However, integrations and SaaS-style eCommerce solutions are making a splash recently with the announcement from Automattic that WordPress.com users now have options to use eCommerce platforms for their WordPress.com websites. If you’re not familiar with WordPress.com, you should know that websites are hosted (not self-hosted like downloading WordPress from WordPress.org) and therefore you can’t install eCommerce plugins like WooCommerce, Shopp, or EDD.
Instead, WordPress.com users can now integrate their sites with Ecwid, Shopify, or ShopLocket. While we’ve already written about integrating Ecwid with a WordPress site, the addition of Shopify and Ecwid to the eCommerce selection available for WordPress.com is interesting.
Why not use native plugins? There are probably a lot of structural concerns, such as setting up SSL certificates and sending payments through their servers. Using a SaaS solution eliminates many of these issues, as payments are routed through the provider’s servers (i.e., payments go through Shopify, not your site’s servers).
There’s certainly a mixed reception to the new offerings, but the upside for me is the ability to run a WordPress site and take advantage of easy management and SEO compatibility while running a shop that’s also easy to use, but requires less setup and maintenance on my part. If you’re already using your own WordPress site, you can actually integrate with these services already and run your store in a subdomain. While I wouldn’t recommend this approach for large stores, I think it may be an interesting for small-to-medium sized shop owners.
This tutorial will describe how to integrate Shopify with a self-hosted WordPress site.
Integrating Shopify and WordPress isn’t as uncommon as you may think. There are some pre-made tools that make integrating these two platforms fairly easy. I’m going to assume that you have both a WordPress site and Shopify account with basic store settings ready to go.
Once you have some Shopify products and collections ready to go, you’ll need to install the free Shopify Widgets app, which will create embeddable widgets for your other blogs or websites. Once the app is installed, you’ll be able to access it from your Shopify dashboard under “Apps”:
When you click on the app, you’ll be taken to a menu where you can choose options for what you want to embed on your WordPress site. Let’s start with the entire store, as that’s the most complicated integration, but shouldn’t take too long.
When you click Embed a Shop, you’ll be asked to select which product collections you want to include. If you’ve never used Shopify before, this may be unfamiliar, but you can create collections based on the type of product or where you want it to be displayed, such as “Frontpage”. Products can belong to multiple collections, and if you add new products to these collections, they will still be displayed even after you embed the Shopify widget. Select the collections you want to embed in your WordPress site, then we can move on.
Now that you’ve selected the collections you want to embed, you can then generate the embed code by clicking “Get Embed Code”. You’ll copy everything and place this code in your theme’s
header.php file just before the closing
</head> tag (do this via FTP in case something goes wrong 😉 ). Once that file is saved, you have one step left.
The code you’ve embedded will open your entire catalog in a lightbox (drilled down by collection), so you merely need to add the link to open that lightbox on whatever page or posts you’d like. As the instructions state, you need to add this link:
<a href='#shopify-store'></a> to your page, post, menu, or widget. I’ve created a button for myself to open the store:
Finally, you can check out the collections you’ve embedded by clicking your link or button!
The benefit to using this method is that the entire shopping experience can be done without leaving your site, then customers are routed to a distraction-free checkout, hosted by Shopify, to complete the purchase. The only downside is that customers are not redirected to your site when completing the purchase, so you may want to create a link back to your WordPress site from your Shopify site. An easy way to do that, as well as personalize the order confirmation page, is to use the Happy Ending App.
Embedding individual products is far easier, and may be preferable for stores with few products. The downside is that clicking individual products will take customers to the Shopify product page, which makes them leave your site.
To embed a single product, you’ll open the same app. Instead of clicking the “Embed a Shop” widget option, you’ll click on Embed a Product. This will allow you to select a product to get the embed code for, and to adjust some of the display settings.
Once you have the code to embed your product (which will be iframed on your page), you can then place the product embed code in your post, page, or widget. You can have multiple products on one page, but will have to organize them yourself into columns or a grid layout (I’m using a column shortcode in this example to begin creating a grid).
Embedding a Buy Now button on a post or page is done in a very similar manner to embedding a product. You can embed a buy now button for any type of product, but if you’re using a variable product, you’ll have to determine which variation you’d like to use for the buy now button. Once you’ve selected the product to create your link for, you’ll grab the code to embed the button. Be aware, however, that this code only creates the button and does not include product images or details, so you’ll have to include those yourself.
Note that clicking on an individual embedded product or buy now button with these widgets will take customers to your Shopify store, so I’d recommend a similar domain (ideally a subdomain, but this is a bit tricker to do) and styling on your Shopify site so that customers don’t get confused or uncomfortable with leaving your site. Conversely, you can avoid this by embedding the shop instead.
While I haven’t attempted this at all, if you’re interested a different integration, you can take a look at using Zapier to integrate Shopify and WordPress. Zapier helps to connect different services to one another, and is a super useful service itself. To oversimplify the concept, Zapier takes care of communication between your WordPress site and Shopify store, and could be an interesting management solution.
You could also look at using a subdomain, such as
shop.mystore.com to host your Shopify site so that customers don’t feel that they’re leaving your site, but as we said before, this process is far more involved.
That’s it! While I don’t think this would be a solution for stores that sell several products, it could be a very easy way to sell a small product set with minimal effort needed on the part of the store administrator. Shopify is a popular and easy-to-use platform, and has a lot of great apps available, though it may be a bit pricier than using a solution like Ecwid.
For a quick comparison: both platforms have $30 per month plans that would probably fit the needs of most stores, but the $30 per month plan for Ecwid includes all store functionality while the Shopify plan at the same cost is the introductory plan and excludes some store options. Regardless of which shopping cart you use for your site, using WordPress for the rest of the site management gives you a powerful solution for your content.
The downside to using Shopify and WordPress is that you have to pay monthly for your eCommerce solution and will have to manage your store and site from separate admin dashboards. However, one of the major upsides is that this solution is entirely PCI compliant, you won’t need to bother with SSL certificates or any other security issues. The software is also very easy to use and support is included, which may not be the case for a WordPress plugin.