How do you use Shopify with a WordPress website or blog? Simple question, not so straightforward answer but in this tutorial, I will show you 2 ways that you can add Shopify to WordPress.
- IMPORTANT – You Need a Shopify Account!
- Method #1: Using the Shopify Buy Button
- Method #2: Use Shopify on a Subdomain
My website (themoneysmith.co.uk) is reader supported, meaning that I may earn a commission from products or services purchased through links on my site (at no additional cost to you). Learn More.
IMPORTANT – You Need a Shopify Account!
Before I get started with showing you the two methods, you need to have an account with Shopify or have at least signed up the Shopify free trial before you can start implementing either of these methods.
To sign up to Shopify, just click any of the links in this post, such as this one here as it helps me out a lot, so thank you if you do go through one of my links.
Method #1: Using the Shopify Buy Button
The first method is using the Shopify Buy Button, which is an easy and cost effective way of adding products to your WordPress site as you only need the Shopify Lite plan, which costs $9/m and it allows you to add products or collections onto any page on your website.
The only downside of the Shopify Lite plan and the buy button, is that customers can’t create an account on your site, they can only go through and buy from you, so you do need to bear that in mind with this option.
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.
Step 1: Create a New Product in Shopify
The first step in this method is to create a new product in the Shopify dashboard and this can be done by going to Products → All Products → Add New Product and fill out this page.
If you are unsure how to do this, I have covered this in my complete Shopify tutorial and below is the link the relevant section:
You can also choose to create collections for your products as well, because Shopify does also allow you to display collections with their buy button.
Creating collections isn’t completely straight forward in Shopify but as with the products, I have covered how to do this in my full tutorial and the link below will take you to the relevant section:
If you just want to display single products on your WordPress site, then you just need to create the product listings.
Step 2: 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, click whichever option you would like to create a buy button for.
Whichever option you choose, a pop up will then appear asking you which of your products or collections you would like to create a buy button for. Simply select your chosen product/collection and you will taken through to the customize section.
The options for products and collections are slightly different, so I will cover them both individually below:
For product listings, 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:
- Basic – this is a just a button that allows people to buy but doesn’t include any image or other product related information.
- Classic – this creates a simple listing, that includes the main product image, title, price and buy button as can be seen in the accompanying image.
- Full View – this creates a full product listing and includes the product images, title, price, description and buy button. If you have created any variations for your product, they will also be displayed on this page.
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 creating a buy button for you collections, 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.
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.
Step 3: 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.
Step 4: Test the Cart
So that is how to import your products from Shopify into WordPress but how does the shopping cart work?
Well that is what you need to do next by testing out your cart, so that you know not only that is works but also how it works.
To do this, go to the page or post you just created on front end of your WordPress site and add your product to the cart and you will see a cart that appears as a 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.
You also want to check that it works properly on mobile devices but the only difference is that the checkout appears in a new tab, rather than as a pop-up like on desktop.
To run orders through your cart, you can activate a test payment gateway, so that you don’t get charged for testing it out.
Step 5: Configure Shopify
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, once again, I have covered this my full Shopify Tutorial.
Method #2: Use Shopify on a Subdomain
The second method allows you to have your main WordPress site and a full Shopify store on the same domain (kind of).
This is because you will be creating a subdomain for the Shopify store, so you can have it on something like shop.yourdomain.com and below I will show you exactly how to set this up using cPanel, which is what many hosts use.
However your host may have their own hosting admin, with a different method for creating subdomains. If you can’t find out how to do this, then you may have to contact your hosting provider.
Step 1: Create a Subdomain in cPanel
Once you have got your account with Shopify set up, it is time to start getting things ready in your cPanel. If you don’t know how to access this, ask your web hosts and they should be able to tell you.
Once in your cPanel, you will need to find the domain section and click on Subdomains.
In this section of your cPanel, you will see any of the subdomains that have been created for your website and there will be a section to add a new subdomain.
In this section, you want to add the name of the subdomain, which for this example we will call shop, then select the domain you want this to become a subdomain for (if you only have one domain name linked to your cPanel, there will only be one option to choose from).
The Document Root will automatically be allocated to the domain that you selected.
Once you are happy with the name of of the subdomain and the domain it will be used on, click create and you should get a confirmation message that your domain has been created.
Step 2: Configure Subdomain
Now that you have created your subdomain, you need to configure it so that it points towards the Shopify servers, to do this, you want to go into the Zone Editor, which is also in the Domain section of the cPanel homepage.
In the zone editor, you will see a list of all the domains that are linked to your cPanel, click on Manage next to the domain that you just created the subdomain for.
The next page can be a little bit scary as it lists all of the DNS records for that domain, including subdomains and what you want to do is find the:
- A Record for your new subdomain, which would look like shop.yourdomain.com
- A Record for the www version, which would look like www.shop.yourdomain.com
- TXT Record for the domain which would look like shop.yourdomain.com
You want to make a note or take a screen shot, so that you can revert to these settings should you need to in future. Once you have recorded the default setting, you want to delete these three records.
Step 3: Point Subdomain to Shopify
Once the records mentioned above have been deleted, you can then start setting up new CNAME records to point your new domain name towards Shopify.
To do this, go to the Zone Editor and click ✚CNAME Record button next to the new subdomain that you just created and the following pop-up will appear.
You then want to add the following CNAME records:
- shop.mydomain.com. – mystore.myshopify.com
- www.shop.mydomain.com. – mystore.myshopify.com
Make sure there is a dot after your domain name, just like I have done above, otherwise it might not accept it and once these records have been created, they should be added to the bottom of the list within the manage screen.
Step 4: Add Subdomain to Shopify
Now that your new subdomain is pointing towards Shopify servers, you want to go in and point your Shopify store towards this new domain name.
To do this, go to Online Store → Domains in your Shopify dashboard and click Connect Existing Domain and the following screen will appear:
Simply enter your subdomain in the box (without the http://www at the start) and click next. The next page will ask you to verify the connection and if everything has been set up properly, Shopify should quickly verify the domain.
Your subdomain should then appear in the list of domains available in your Shopify dashboard, alongside the .myshopify.com domain.
It might take up to 24 hours for things to properly sync as DNS changes can take this long, so don’t be surprised if it isn’t available immediately.
Once the DNS has propagated, it should show as connected within your Shopify dashboard and if you go onto your subdomain, your Shopify store should appear.
Step 5: Add a Link to Your Store
Once your store is all set up on its new subdomain, you want to add a link to on your main WordPress website and the easiest way to this is add it to your sites main navigation menu and vice versa from Shopify.
You can also add links from your pages and blog posts to relevant products on the Shopify store.
It would also be a good thing to try and have the WordPress site and Shopify use a similar design, colour schemes and fonts so that customers don’t feel like they using two completely different websites.
So there they are, two different ways to add Shopify to a WordPress website and I know neither is perfect but they are both viable options and give you features and security that come from using Shopify, while being able to keep your main site on WordPress.
There is a unofficial Shopify plugin for WordPress but this doesn’t get very good reviews and as of writing this post, I haven’t had the chance to test it out.
But I hope that you have 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.