Want to add Shopify to your existing WordPress blog/website?
Then you have come to right page as in this tutorial, I go through step by step, how you can use Shopify with WordPress.
EcommerceGold is reader supported, meaning that we may earn a commission (at no additional cost to you) from products or services purchased through links on our site. Learn More.
How Does it Work?
Unlike most ecommerce options in WordPress, you don’t need to install a plugin, instead you copy and paste HTML code from Shopify and into a WordPress page.
This HTML code brings over important information such as your product title, description, images and price as well as a buy button that allows your customers to purchase from you. It is also possible to set up the check out process, so that your customers never leave your site.
When it comes to managing your orders, all of this needs to be done from the Shopify dashboard. While some may find this extra step frustrating, it does add an additional layer of security as none of your customers data is stored or accessible from your WordPress dashboard, which is great for data protection, especially if your WordPress site gets hacked.
Sign Up to Shopify
The first step is to sign up to Shopify but you only need to use the Shopify Lite package, which costs $9 a month but you can try this method out using their 14 day free trial, then if you like it, you can upgrade to a paid package.
If you haven’t already signed up to Shopify, you can do so by clicking the following link: https://www.staging.ecommerce-gold.com/shopify (this is an affiliate link, which gives me a commission at no cost to you. I would appreciate if you use this link as it helps to keep this website up and running).
The sign up process for Shopify is very simple, all you need to do is fill out the initial sign up form, then answer a few questions on where you business is currently at in terms of turnover and then enter your basic business information such as address, contact telephone number etc.
Once you have done this, you will then be taken through to the Shopify dashboard.
When it comes to adding Shopify to WordPress, there are two different ways you can do it. The first is to add single products and the second is to add collections and I will cover these two separate options below.
How to Add a Single Product
Create a New Product
Before you can start displaying products on your WordPress site, you first need to create them in Shopify.
This is very easily done by going to Products → Add Product in the Shopify dashboard.
You want to work through this page and fill out all of the sections except for the search engine preview at the very bottom of the page as this is going to be taken care of on your WordPress site.
Also, if you just want to add single product listings to your WordPress site, then you can also ignore the Organization and Collections sections on the right hand side of the page.
Create Shopify Buy Button
The first step in creating a buy button, is to add this functionality to your Shopify dashboard. To do this, click the ✚ icon next to Sales Channels and a pop-up window will appear with all of the available options.
In the pop-up window, you then want to click the ✚ button next to the Buy Button section and Shopify will install this sales channel to your website.
*On the Shopify Lite package, most of these sales channel options won’t be available as most are only available to users with the full website builder package such as Shopify Basic or Standard.
Once the Buy Button has been installed and you click on the heading under sales channels, the following screen will appear.
On this screen, you want to click on Create a Buy Button and you will be asked if you want to create a button for a product or collection and in this instance, you want to click product.
A pop up will then appear asking you which of your products you would like to create a buy button for. Simply select your chosen product and you will taken through to the customize section.
There are a few layout and customization options for you to choose in this section but the two most important are the Layout Style and Action When People Click.
For single products, there are three layout options:
- Full View
As for the actions of the buy button, you can set it so that it adds the product to the cart and the customer can carry on browsing or shopping on your site or you can set it so that when they click the button, they are automatically taken through to the checkout page and the text on the button changes to Buy Now.
When you are happy with the layout of your buy button, you can click the next button in the top right hand side of the page and you will be taken through to the HTML code that you need to copy and paste into your WordPress site.
Add Buy Button to WordPress Page
Now that you have the HTML code for the buy button, you can go into your WordPress dashboard and create a page in which to paste the code.
It is up to you if you decide to create a post or a page but if you blog on your site, I would recommend creating a page rather than a blog post. Also, when creating the post/page, you want the title, URL and meta description to match the product that is going to be displayed on the page.
In the block editor, click the ✚ icon and search for the Custom HTML Block and paste the code that you copied from the Shopify dashboard.
Once you have pasted the code, you can use the preview button to see what what the code is going to look like on your site, if you are happy with how the page looks, then you can publish the page and the product will now be available for sale.
How to Add Collections
Once you have created your products, you may want to organize them into collections and you can then display these collections on your WordPress site.
Create a Collection
The first step is to create a collection within Shopify and there are two ways you can set these up:
- Manual Collections
- Automated Collections
To help you set up your collections, I have created a tutorial video showing how to do this or you can see the full written guide below the video.
The first is what they call a manual collection and this works in a very similar way to a normal category in that you create the collection, for example Men’s Rings and then manually add the products into that collection.
This can be done by going back in and editing the collection once you have created and saved it as it will give you a section where you can select your products.
You can either start typing the name of your product or you can click the browse button, which presents a pop up screen with all of your products and you can select which ones you want by clicking the check box next to the product.
Once you have selected the products that you want to add, click the done button at the bottom and all of these products will be added to the collection.
You can also add existing products to a manual collection by going back and editing the product, this is done by selecting the chosen collection from the collections box on the right hand side of the screen. If you are creating a new product, you can use the collections box to add it to one of your collections.
Automated collections have a bit of a steeper learning curve as they are based on conditions that you create and you can create a lot!
For example you can create conditions around:
- Product Title – this is if you want to create a collection around words that appear in numerous product titles such as rings or watches
- Product Type – if you entered a product type when creating your products, then you can use this as a way to put them into a collection
- Product Vendor – if you have items from specific vendors or brands and want to put them into their own collection
- Product Price – this is used if you want to group items together based on their price, for examples products between £10 and £30
- Product Tag – if you created tags for your products, such as men’s ring or ladies watch, then you can create a collection around these tags
Once you have decided on what the collection is going to be based around, you then set the parameters for that rule, such as:
- is equal to
- is greater than
- is less than
You then type in the data which Shopify will use to select the products. Sorry if this sounds confusing but it is a bit of a challenge to put it into words but I will give you couple of examples below to try and show you how it works.
If you wanted to create a collection of gift ideas for less than £25, you would set up the automated collection like this:
Shopify would then put all of your products that you are selling for less than £25 into a collection.
You can also create more than one rule for a collection and for this example, I am going to create a collection for Men’s Seiko Watches and it would look like this:
With a collection like this, you could easily replace the product title with Product Type or Tag as long as they contained those words.
Once you have created an Automated collection, any product that you create that fits the conditions of that collection will automatically be added to it.
Create Collections Button
The process for creating a collections button is the same as that for a single product. The only difference is that you select the Collection option, rather than product option when starting to create a new button.
When you go through to the customisation section, there aren’t any main layout options and the display of your products very much depends on the amount of products that you have placed in the chosen collection.
But as with the single product, you can change what the button does and there is a third option with the collections that allows a pop up to appear that includes the product description, additional images and also any variations that you may have for that product.
Once you are happy with the setting for the collections, simply click next in the top right corner, then copy and paste the code into one of your WordPress pages.
So that is how to import your products from Shopify into WordPress but how does the shopping cart work?
To make the checkout process as seamless as possible, Shopify also brings in a cart that appears as a pop up sidebar on your website, just like the image below:
This sidebar can be minimised if customers want to continue shopping on your site or they can proceed through the checkout. If they proceed through the checkout, then a pop up will appear and allow them to check out securely.
The whole of the checkout process is hosted on Shopify’s servers, meaning that their data and information is protected.
This also works on mobile devices, the only thing that happens differently is a new tab will open for the checkout.
If you are happy with the way that Shopify is working on your WordPress website and want to go live with it, you need to set a couple of things up first. The main ones are the:
- Payment Gateway/s
- Shipping Methods
- Checkout Process
Once these are set up, then your new products are pretty much ready to go live but I would advise running a couple of tests orders through first, to make sure that the checkout is working properly and also that you know how it all works on the back end.
If you want to learn more about setting up different sections within Shopify, then take a look at my full Shopify Tutorial.
The Shopify Buy Button is a great option for WordPress website owners to add ecommerce functionality to their website and it is also pretty easy to do and I hope this guide has shown you how to do this properly.
The only negative I have found is that Shopify doesn’t save the buy buttons but due to the very clever people at Shopify, if you do update your products or collections within Shopify, it will automatically be updated on your WordPress site.
So once again, I hope you found this guide on how to use Shopify with WordPress helpful and that you go on to combine these two great platforms to make an awesome ecommerce website.