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.

Shopify and WordPress

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”:

Integrating Shopify and WordPress | Shopify Apps

Shopify Dashboard: Apps

Embedding the Store

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.

Integrating Shopify and WordPress | Creating Widget

Creating a Shopify “widget”

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.

Integrating Shopify and WordPress | Choosing Collections

Choose Collections to Embed

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.

Integrating Shopify and WordPress | Getting Embed Code

Grabbing the Embed Code

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:

Integrating Shopify and WordPress | Creating a Store Link

Create a link to open your store

Finally, you can check out the collections you’ve embedded by clicking your link or button!

Integrating Shopify and WordPress | Store Lightbox

Store Lightbox

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

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.

Integrating Shopify and WordPress | Getting Product Embed Code

Embedding a Product

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).

Integrating Shopify and WordPress | Embed Products

Embedding Individual Products

Embedding Buy Now Buttons

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.

 
Integrating Shopify and WordPress | Buy Now Buttons - Frontend

Buy Now Buttons – Frontend



Integrating Shopify and WordPress | Embed Buy Now Buttons

Embed Buy Now Buttons


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.

Other Options or Approaches

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.

Conclusions

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.


Note: This post may contain affiliate links. Providing the most comprehensive and objective WordPress eCommerce resources is our mission. Have more questions? See our affiliate policy. You can use the plain links below if you prefer that we not receive a referral commission:

Articles you may also like:

Posted by Beka Rice

Beka Rice manages the direction of Sell with WP content and writes or edits most of our articles to share her interests in eCommerce. Or she just writes as an excuse to spend more time jamming out to anything from The Clash to Lady Gaga. Who knows.

3 Comments

  1. Great advice – thanks!
    I tested an embed and it works great. Maybe a bit slow to load, but all good. The problem, though, is that the widget isn’t mobile friendly and does not load on a phone. Any ideas on how to load one link for desktop but another link for a phone?

    1. Hey JC, unfortunately Shopify doesn’t have a mobile widget available, so this wouldn’t be possible. You could however, disable this for mobile visitors using this in your header.php around the Shopify script:

      <?php if ( ! wp_is_mobile() ) {
      	/* Insert Shopify Widget Script Here */
      } ?>
      

      You’d then want to note where you have your Shopify store link / button that this simply won’t work for mobile visitors. You could also add a customized script for mobile visitors instead – maybe something that directs them to the actual Shopify store if they’re on a mobile device rather than using the widget. This would probably take a developer less than a half hour to do for you.

  2. hello,
    does it mean that you pay to word press and shopify both?

It's been over 2 years since this post was published, so comments have been closed. Thanks for reading!