How to build eCommerce Store with Shopify and WordPress

Ecommerce-Store-with-Shopify-and-WordPress

Shopify is an extremely popular e-commerce platform that has really simplified selling products and services.

If you have a WordPress powered website and want to add e-commerce features, you can easily integrate your website with the Shopify platform.

Learn more about the platform and see options for free Shopify trial here.

Shopify has created tools such as the Buy Button, which makes it easier to integrate Shopify with several other popular platforms including WordPress.

Shopify start ecommerce store
Getting started with Shopify is really easy and if you haven't signed up for Shopify yet, we have partnered with them help you get started for free. Sign up here .

Of course, it’s all possible to build it natively with WordPress using plugins and hiring a developer to configure payment and security options. Plugins like WooCommerce, Easy Digital Downloads, and iThemes Exchange are among the top choices to build e-commerce options directly within WordPress.

While WooCommerce has always been the top choice (and is continuously improving after being acquired by Automattic), it still requires a lot of technical configurations and some premium add-ons to run a good e-commerce store.

The important thing to note about the difference as compared to those WordPress plugins is that Shopify only lets you display and add shopping cart options for your products on WordPress.

The Shopify Buy Button doesn’t require you to turn your entire website into a store, and you can start selling as little as one product without the complete hassle of managing all the e-commerce complexities.

In this tutorial, I will walk you through the few possible solutions to help you integrate Shopify with WordPress.

Why use Shopify with WordPress?

WordPress is built with Publishing in mind, and it works best as a blogging and publishing platform.

For e-commerce, however, WordPress doesn’t simply work out of the box. You will need to use other plugins such as WooCommerce and configure all the complex aspects of payment gateways among others.

Comparing other WordPress options to build an e-commerce store vs. Shopify will take another post in itself but here’re few noteworthy features that make integrating Shopify a better e-commerce solution.

Better Security Options

  • SSL – All Shopify stores include a 256-bit SSL certificate to keep business data and customers' information safe and secure.
  • PCI compliant (Level-1) – Your customer’s credit card details are fully secured with the level-1 PCI compliant Shopify platform.

Better Shopping Cart Options

Shopify boasts several shopping cart options that make it easy to increase your conversions.

  • Built-in Payment options: Shopify has built-in payment options that enable you to take Visa, MasterCard, Discover, and American Express payments instantly. It also provides competitive credit card rates for the seller fees.
  • Multiple payment gateways: Shopify offers more than 70 payment gateways including the popular PayPal, Stripe and geeky Bitcoin.
  • Shipping Rates and Automatic taxes: Shopify takes out the hassle of calculating shipping rates and adding automatic taxes for locations around the world.

Several other features can be manually built in with the help of plugins and developers, but the above mentioned complicated features have been really simplified by Shopify.

Now that you are aware of some of the best features of Shopify, let’s move on to signing up for Shopify and integrating with WordPress.

Setup Shopify Store

First, I will walk you through setting up your Shopify store. If you already have a Shopify account, feel free to skip this section and navigate to the integration section – adding Buy Button and listing on WordPress.

1. Go to Shopify homepage and enter your email address to start a free trial. You can try Shopify for 14 days, and you don’t even need to enter your credit card details.

Shopify Store Sign up Home page

2. Alternatively, click on the Get Started button on the top and you should see a signup screen asking you to fill in your Email Address, Password, and Store Name.

Shopify Signup Free Trial

3. Click on create your store and you will be requested to enter your name and address to set up currencies and tax rates.

Shopify Tax Rates Sign up Form

4. Enter your details and you now have a Shopify store ready for you.

Shopify Store HomePage Ready

Now that you have created a Shopify store, go ahead and setup important Shopify store elements such as Payments and Shipping that will make your store ready to sell.


Setup Payments for Shopify Store

Another essential step that you need to configure setting up your store is is the payment gateway.

Setup Payments Shopify WordPress

You need to configure the ways you can accept payment for the products that you are selling in your store.

Click on Setup Payments and this will open Shopify Payment settings page in a new tab.

Shopify Payments Setup WordPress

Shopify supports several payment gateways to enable your store to accept credit cards and payment methods. There’s easy integration for PayPal Express Checkout and Shopify Payments.

By default, your store is ready to accept PayPal payments with PayPal Express Checkout. If you already have PayPal Merchant account with the email address that you used for Shopify, then you should be all set for this option. You can also edit this email or set up a new PayPal merchant account using this email address to claim the funds.

Using Shopify Payment, you should be directly able to accept credit card payments. You will, however, need to complete the account setup by providing Shopify with some additional details about your business. Once setup, Shopify will directly transfer the sales to your bank account.

You can also configure additional options such as Apple Pay (coming soon), Amazon Payments, or choose from a list of alternative payment options.

Setup Shipping for Shopify Store

Shipping configuration is the final step that needs setting up to make your store ready to sell.

Shipping Settings and Rates for Shopify

Click on Setup Shipping and you will be taken to Shopify’s settings page for shipping.

Shipping Settings and Rates Shopify WordPress Store

You will need to define Shipping origin, which by default will be set to your store address you entered while setting up your account. This address will be used to calculate shipping rates, and you can choose to edit it for a different shipping origin.

You can further define Shipping zones and corresponding rates to those locations depending on factors such as weight. You will need to set domestic and international shipping rates.

You can also add Fulfillment and drop shipping providers including Shipwire, Rakuten, and Amazon Multi-Channel Fulfillment if that fits your needs.

Shopify has made it really to choose your shipping regions, adding rates for different zones, and even defining tax charges for different countries.

You can go on configuring other settings for your Shopify store, but these basic configurations should make your store ready to sell your products.


Shopify Pricing Options

Now that you have a Shopify store and configured the basic aspects, you will need to choose your Shopify plan to activate your store and start selling your products.

Your free trial will work for 14 days and after that, you can switch your account to the Lite plan ($9 a month), the cheapest plan that lets you access to all basic Shopify features.

Shopify Pricing Plans Lite and Basic for WordPress

Of course, if you want the Shopify Store and other advanced options you can choose from Basic Shopify ($29 per month) or their most popular pricing plan Shopify ($79 per month).

Shopify Lite Plan with Buy Button

One of the benefits of using Shopify within your WordPress website is you can use their Lite plan for just $9 a month. This is well less than Shopify’s basic plan that starts from $29 a month.

You still get access all Shopify powerful features includes the option to Sell on Facebook, Shopify POS for iOS or Android, Shopify’s app store, and 24/7 support from Shopify team.

You can also upgrade or downgrade your plans at any time as per your store needs.

Get Started with Shopify


Activate Shopify Buy Button

The Buy Button lets you embed your Shopify store products across several platforms including WordPress.

You can choose to embed a single product or collection of products using an embed code that you can generate within Shopify.

How to Activate Buy Button

You should be able to see the Buy Button under the Sales channels section of your Admin dashboard but if you don’t see it here, you might need to activate it first.

  • To activate the Buy Button, click on the plus (+) button beside the Sales channels heading under the dashboard menu.
  • Click on the Buy Button on this Add Sales Channel dialog box.
  • Click Add Channel.

To start using the feature, navigate to the Buy Button page within your Shopify admin. You can then use the option ‘Select Product’ to generate code for a single product listing or ‘Select a collection’ to feature the entire collection of products on your store.

Let’s look at the process of listing single product or collection and customising it further to generate code that you can then use to embed it within your WordPress website.

Code for Listing Single Product

To list a single product, start by choosing Select product from the Buy Button page that lets you feature a single product.

You will see a product dialog that lets you select a product from your store catalog. You can also search to find the specific product for listing on this dialog box.

Once you select product, you can proceed to choose a template of your preference (Templates to show Buy Button only, or with more features including Product image, price and button).

Creating Buy Button Shopify Add Single

You can further customise the appearance of the button using the style and colour options.

See how the Buy button looks in the preview and once you are happy with the settings, click Generate code.

You will now see an embed code that you can copy and paste in your WordPress editor.

Embed Code for Buy Button Shopify for WordPress

You can also see in the dialog box that Shopify provides further embedding instructions for WordPress users.

Code for Listing Product Collection

Within Shopify, you might have created a collection of similar products and if you want to list the entire collection, you can use this selection.

When you are on the Buy Button page, click on “select selection”.

You can see a Select a collection dialog box where you can select a collection or search if you have many collections to find and select the one you need.

embedded collection For Shopify WordPress

Click on Select collection at the bottom of the dialog box when you have selected the one that you want to proceed with.

You will now see a Buy Button create page for your selected collection that will let you choose from few options to get the right template.

Shopify Buy Button for Collection WordPress Integration

You can continue to customise the appearance with the Button style and text options on the dialog.

Click Generate code once you are happy with the options and appearance for your collection.

You should now see the Embed Code that you need to copy before we go back to our WordPress dashboard.

Embed Code dialog to embed Shopify Buy Button WordPress

Click on Copy embed code at the bottom of the dialog box to proceed further.


Listing Shopify Products on WordPress

Once you have the required embed code for your Shopify single product or a collection, you can list them on your WordPress pages/post or your website sidebar.

Listing Shopify Products on WordPress Pages

We will now need to paste the embed code on our WordPress website pages to list the Shopify product including the Buy Button.

Including Shopify Products on Pages is as easy as adding a new page on WordPress and paste the embed code you generated in the above steps.

From your WordPress Dashboard, navigate to Pages (or Posts) and click on Add New.

Copy and paste the embed code for the Shopify product to appear on this page.

Shopify Product on WordPress page embed

You can continue adding additional information about the product on this as required.

Listing Shopify Products on WordPress Sidebar

You can also list your Shopify products on your WordPress blog/website sidebar or any widget areas available within your WordPress theme.

  • To add a widget area, navigate to Appearance > Widgets or the Customizer and Add a widget.
  • Choose from HTML widget, either add or drag to the widget area.
  • Paste the embed code you generated on your Shopify dashboard in the Widget.
Listing Shopify Product WordPress Sidebar

You should now be able to see the Shopify product o your WordPress website.


Final thoughts on using Shopify with WordPress

Using Shopify with WordPress means that you can get the best of both worlds.

Your website and blog will be still powered by the world’s best blogging and publishing software, while you can simply add the powerful e-commerce functionalities from Shopify.

Using WordPress, you don’t have to rely entirely on Shopify platform for your website and blog. In contrast, using Shopify, you don’t need to spend a lot of time and additional costs for plugins and security features to build it all within WordPress.

To summarise, using Shopify with WordPress can be useful to,

  • Add a shopping cart and e-commerce features to your WordPress website.
  • Adding Shopify features and integrating with the Shopify store to manage your orders, products and inventory.
  • Quickly embed products in posts and pages to allow users to purchase on your own website for better user experience.

Are you using Shopify with your WordPress? I would love to hear your experiences in the comments below. Also, let me know if you need any help setting up WordPress and Shopify.


The Buy button from Shopify makes it really easy to integrate and sell products from your Shopify store on WordPress. Start with Shopify

Pradeep Singh

Pradeep Singh

Pradeep Singh is the founder and your host here at WPism. He is an entrepreneur and blogger living his startup life based in London and Cambridge. Follow him on Twitter or like his page on Facebook.
Share on reddit
Share This Article
Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on twitter
Twitter

4 Responses

  1. Hi Pradeep!
    Thanks alot for sharing this. I am currently looking into using this setup of Shopify and WordPress. One item I am currently looking in to is the themes. It would be really good if there was some more themes available. Maybe this is something your company could look into developing. Just an idea. Thanks and best wishes to you

Leave a Reply

Your email address will not be published. Required fields are marked *

Join our list

Our Exclusive Deals

Share this post

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Help us share this post with your network?
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
Want to keep updated with WordPress?

Join our monthly newsletter to receive best curated WordPress resources.

Want to keep updated with WordPress? Join our monthly newsletter.