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.
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.
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.
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.
3. Configure WordPress Settings
After successful connection between your WordPress site and Shopify account, the plugin will want you to adjust some settings.
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.
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.
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.
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).
Publish your new page and take a look at it!
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.
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.
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.
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.
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.
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 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.
Then, publish your page and take a look at it. Done!
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.
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.
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.
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.
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.
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.
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.
How to Set up a Shopify Store
How to Edit Your WordPress Site
WooCommerce vs. Shopify: Which One Is Right for You?
How to Edit a WordPress Menu
How to Add Products to Shopify
How to Build a WooCommerce Store With Elementor
Best Healthcare and Wellness Shopify Themes for 2022
30+ Best Shopify Themes for Clothing and Fashion
