7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Shopify

How to Connect WordPress to Your Shopify Store (and Why You’d Want to)

Read Time: 10 mins

Today, with the help of platforms like WordPress and Shopify, it has become pretty easy to build a complete website or sell products and services online.

WordPress, as the most popular and powerful CMS, allows you to create almost all kinds of websites, including online stores. On the other hand, Shopify is a managed, hosted platform designed especially for building fast and easy-to-manage online stores. 

This tutorial will show you how to integrate and use WordPress with Shopify to get the best result with your online business.

Why You Would Want to Connect WordPress to Shopify

There are plenty of ways to create an online store with WordPress (like using the WooCommerce plugin). However, installing an online store directly on your WordPress website will add overhead and content (like pages, products, images, and code) that can drastically slow down your site.

You might also find managing your online store from the same location as your blog, website pages, and perhaps ticketing system, overwhelming.

So it could be a good idea to separate your store pages and their functionality (like payment and checkout process) from your WordPress website altogether. Using Shopify in combination with WordPress will help your online business to:

  • Work better and faster for both you and your visitors
  • Take advantage of the benefits WordPress and Shopify bring
  • Be easily manageable (with two separate and powerful admin panels)
  • Grow faster with more tools (Shopify apps, WordPress Plugins, etc.)
  • Benefit from Shopify’s strong support
  • Run duplicate stores from one backend and multiple WordPress front-ends

How to Integrate Shopify with WordPress Using a Plugin

When it comes to adding any functionality to WordPress, you have a choice between using a plugin or doing it manually with custom code. In this section, I want to use ShopWP; a powerful WordPress plugin for connecting your site to a Shopify store.

1. Install ShopWP WordPress Plugin

To install it, go to your WordPress admin area, navigate to Plugins > Add New and search for ShopWP. When it appears like the screenshot below, click Install Now and Activate it.

Install a new plugin on your WordPress websiteInstall a new plugin on your WordPress websiteInstall a new plugin on your WordPress website

2. Connect Your Shopify Store

Once installed and activated you will see a new menu item (ShopWP) in the sidebar menu. Select ShopWP and under its Connect tab, Click Begin the connection process.

Start connecting WordPress and ShopifyStart connecting WordPress and ShopifyStart connecting WordPress and Shopify

This will redirect you to a new window with a four-step process to connect your WordPress site to your Shopify store. To start with, enter your Shopify store’s URL and click on Connect your Shopify store.

The first step of connection processThe first step of connection processThe first step of connection process

You’ll be taken to the Shopify website where you’ll need to log into your account in order to install the ShopWP app on your Shopify online store. When you click on the Install app button, it will automatically redirect to the connection process again.

Install the ShopWP app on your Shopify storeInstall the ShopWP app on your Shopify storeInstall the ShopWP app on your Shopify store

3. Configure WordPress Settings

After successful connection between your WordPress site and Shopify account, the plugin will want you to adjust some settings.

Adjust settings for the ShopWP pluginAdjust settings for the ShopWP pluginAdjust settings for the ShopWP plugin

The Enable Listing Page button (that you can see in the screenshot above) will create default pages for listing your Shopify products on your WordPress website. If you enable the Create Product Detail Page seting, it will create a single page for every product on your site to showcase details of your products inside your WordPress website itself.

I prefer to disable both because I want to create listing pages using the pre-made plugin’s shortcodes and redirect users to the Shopify product details page when they click on a product. This approach also helps me keep my WordPress website cleaner and faster.

You can also change these options from your plugin Settings tab later. When you’re done, click Continue to Next Step and choose a currency for the prices on the next screen.

Choose a currency for your storeChoose a currency for your storeChoose a currency for your store

Finally, adjust some basic settings for your cart and checkout process. Disabling the first option will turn off the WordPress cart; a good choice if you have selected to link products directly to your Shopify store (in the step above).

When you feel everything is adjusted the way you like, click Save and Finish the Setup.

Save and finish the setup processSave and finish the setup processSave and finish the setup process

That's it! You have successfully connected your WordPress site to a Shopify account. If you did all the above steps correctly, you could see a message in the Connect tab under the ShopWP plugin Informing you of the connection status.

4. Sync Your Shopify Store to Your WordPress Site

Now that you have connected your WordPress website to your Shopify account, you can go to the Sync tab under the ShopWP menu item and click Sync Detail Page to sync and add Shopify products to your WordPress website.

Add products from Shopify to WordPressAdd products from Shopify to WordPressAdd products from Shopify to WordPress

When you click this button, it will automatically copy all your available products from your Shopify store to the WordPress site. Now, you can go to the Products sub-menu (under ShopWP menu item) to see all the added products and ensure successful syncing.

5. Display Products on WordPress Site

To display products on your site, you can use ShopWP’s pre-made shortcodes and add them to a new page. So, create a new page and name it whatever you want (I named it Store). Add one of the ShopWP shortcodes (I used [wps_products] to showcase all my products in a list). 

Create a new page and add shortcodes to itCreate a new page and add shortcodes to itCreate a new page and add shortcodes to it

Publish your new page and take a look at it!

Take a look at your Shopify store on WordPressTake a look at your Shopify store on WordPressTake a look at your Shopify store on WordPress

Congratulation! Now, if users click on a product, they will redirect to the product's details page on your Shopify store, and they will be able to purchase it from there (you can also change the on-click actions for the products).

Remember, whenever you add a new product to your Shopify store, you need to click on the Sync button like before. If you want to enable auto-syncing, you need to buy the premium version of the ShopWP plugin (from the Licence tab).

How to Connect Shopify to WordPress Without Plugins

Some WordPress designers and website managers prefer to install as few plugins as possible on their sites because plugins can add thousands of extra lines of codes to your website. The good news is that Shopify itself has provided an official way to display its products on other platforms and called it Buy Buttons!

So if you want to display one or more Shopify products on your WordPress website without installing any plugins or apps, read on to learn how to use Shopify Buy Buttons.

1. Go to Shopify Settings

First, log into your Shopify account and click Settings on the left-down corner.

Shopify settings pageShopify settings pageShopify settings page

2. Add a Sales Channel

Select Sales channels from the side menu and click Add sales channel. This will open a popup window where you can find the Buy Button item in the list. Click on the plus icon to enable it for your current Shopify store.

Add Buy Button to your sale channelsAdd Buy Button to your sale channelsAdd Buy Button to your sale channels

3. Create a Buy Button

On the next screen, you can see a single button named Create a Buy Button that you need to select. Choose the type of Buy Button you want to create.

I prefer to display a list of products on my WordPress website instead of a single product. So, I choose the second item (Collection Buy Button). The first item (Product Buy Button) is suitable for showcasing a single product inside a blog post, sidebar, footer, etc.

Choose the type of Buy Button you want to createChoose the type of Buy Button you want to createChoose the type of Buy Button you want to create

4. Choose a Product Collection 

So, after you click the Collection Buy Button, choose a collection in the popup window, and click the green button – Select.

This assumes you have already created collections of products in your Shopify store. If you haven’t, you can do so by navigating to Products > Collections > Create Collection from the left-hand menu in your Shopify account.
Select a collectionSelect a collectionSelect a collection

On the next page, you can customize the appearance of your list of products in an easy-to-use live editor. Change it as you like and click Next in the top-right corner.

Customize the collectionCustomize the collectionCustomize the collection

5. Copy JavaScript Snippet

Now, you can copy the code that contains the collection of your products (that you have made and customized in the previous steps).

Copy the code you have generatedCopy the code you have generatedCopy the code you have generated

Copy and paste it where ever you want! To display products on your WordPress site, you need to create a new page and put this code inside it.

Paste your code in a new WordPress pagePaste your code in a new WordPress pagePaste your code in a new WordPress page

Then, publish your page and take a look at it. Done!

Your collection will display on your Wordpress websiteYour collection will display on your Wordpress websiteYour collection will display on your Wordpress website

Redirecting Users from WordPress to Shopify Manually

If you're looking for an easier way, or if you don’t like to showcase your products on your WordPress website, then you have still another option! In this last method you’ll learn how to guide users from WordPress to Shopify, and bring them back to WordPress after successful payment.

1. Add Menu Item with Shopify Link

In your WordPress dashboard go to Appearance > Menus, create a new menu item, and link it to your Shopify store. Then put it in your website’s primary menu and click Save Menu.

Create a new link to your Shopify store and put it in your WordPress websiteCreate a new link to your Shopify store and put it in your WordPress websiteCreate a new link to your Shopify store and put it in your WordPress website

With this simple trick, you can take your visitors from WordPress to your Shopify store, where they can explore and buy your products. As you can see in the screenshot below, every thing is ready for your customers in your Shopify store.

Users will see your Shopify Store after they click on the linkUsers will see your Shopify Store after they click on the linkUsers will see your Shopify Store after they click on the link

2. Bring Users Back

If you want to bring customers back to your WordPress website after purchasing a product, you need to add some functionality to your Shopify store. This additional code can be added to the Additional scripts box like the screenshot below.

Redirect users to your WordPress site after purchasing with a codeRedirect users to your WordPress site after purchasing with a codeRedirect users to your WordPress site after purchasing with a code

Redirecting users after payment on your site is a little hacky, but a problem that has been raised in the Shopify community. You can find the Shopify Staff proposed solution here in the Shopify community.

Now let's go one step further and improve the user experience when a visitor moves from your WordPress website to your Shopify store.

Themes to Make Your WordPress Shopify Integration Seamless

Many developers have created their themes for several CMSs and frameworks so that you can use them on both WordPress and Shopify. You can find them on ThemeForest and Envato Elements.

Let’s highlight some of these themes that you can separately download and install for WordPress and Shopify to have a single design for both sides of your website.

1. Unero - Clean & Minimal Shopify Sections Theme

Unero is one of the most popular Shopify themes on ThemeForest, comes with more than 16 pre-built themes, and many more features. Installing this minimalistic theme on your Shopify store brings more attention to your products and avoids confusion in exploring your store and purchasing process.

With its WordPress version, you’ll be able to create the same environment for your WordPress website.

Unero Shopify Demo

Unero WordPress Demo

Unero - beautiful theme for Shopify and WordPressUnero - beautiful theme for Shopify and WordPressUnero - beautiful theme for Shopify and WordPress

2. Roxxe - Responsive Multipurpose Shopify Theme

This one is a powerful multipurpose theme available for both Shopify and WordPress. It provides you with 79 ready-to-import home pages for Shopify and 15 demos for your WordPress website. Please take a look at its live preview on ThemeForest to find out more about it.

Roxxe Shopify Demo

Roxxe WordPress Demo

Roxxe - well-designed Shopify theme - WordPress version availableRoxxe - well-designed Shopify theme - WordPress version availableRoxxe - well-designed Shopify theme - WordPress version available

3. iOne - Drag & Drop Minimal Responsive Shopify Theme

This one is another stunning minimalist Shopify theme that includes different demos and built-in features for your store. Check out its WordPress version and if you want to see more Shopify and WordPress themes, find them on Envato Elements or ThemeForest.

iOne Shopify Demo

iOne WordPress Demo

iONE - attractive Shopify theme with a minimalistic design - WordPress version readyiONE - attractive Shopify theme with a minimalistic design - WordPress version readyiONE - attractive Shopify theme with a minimalistic design - WordPress version ready

Conclusion

In this tutorial you’e learned about the best ways to connect two of the most popular website-builders to create a fast and powerful online store. If you like to read more about Shopify and WordPress, please explore Tuts+ or take a look at the articles below.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.