"I want to link my WordPress site with Shopify so I can sell products."
"By linking our two sites, we want to have both a corporate site and a brand catalog site."
"I want to know the specific steps for collaboration."
This article is for you. With Shopify, you can add a shopping cart function to a website created with WordPress by using the "embedded code" issuing function.
Using this method, you can sell products and services online without having to build an e-commerce site from scratch.
In this article, our company, certified Shopify Experts, will provide a detailed explanation of how to integrate Shopify and WordPress.
Key points of this article
- How to link Shopify and WordPress with screenshots
- Learn about the "Lite Plan" recommended for integrating Shopify and WordPress
- We also introduce customizations and apps to help you sell more.
6 steps to connect Shopify and WordPress
Now, I will explain how to integrate Shopify and WordPress with screen captures.
If you already have a Shopify store, go to step 2 .
If you have already set up "Payment", "Shipping Settings", "Products", etc., please read from Step 5 and you will get the answer in the shortest time.
Step 1: Set up your Shopify store
If you don't have a Shopify store yet, set one up first.
At Shopify, you can create an account and try it for free for 14 days. No credit card registration is required. All you need to do is fill in a simple questionnaire with your email address, and you can easily create an account in just 1-2 minutes.
For those just starting out with Shopify, please see below for a simple guide on how to use it.
[Related] [2020 Edition] For those who are just starting to use Shopify! Easy to use guide!
Step 2: Set up payments for your Shopify store
Shopify allows you to enable a variety of payment methods.
In your Shopify admin page, go to "Settings" > "Payment Settings".
You can enable credit card payments by using Shopify Payments or a third-party payment provider.
Other online payment methods besides credit cards include PayPal, Amazon Pay, and Apple Pay.
For more information on how to set up payment, please see the article below.
[Related] Comparison of payment services available on Shopify and how to set them up [Explained by a company certified by Shopify Experts]
Step 3: Set up shipping for your Shopify store
With Shopify, you can also configure shipping settings from the admin screen.
In your Shopify admin, go to "Settings" > "Shipping".
You can set multiple areas where you want to separate shipping fees and set shipping fees for each area. In addition, Shopify also allows you to set shipping fees such as "free shipping for orders over XX yen," which is a common shipping fee setting in e-commerce.
For more information on how to set up "Shipping", please see the following article:
[Related] [2020 Edition] For those who are just starting to use Shopify! Easy to use guide!
Step 4: Add products to Shopify
Add your products to Shopify.
To add a product, go to the "Product Management" page in your Shopify admin panel and click the "Add Product" button.
On the product editing screen, you can register the following product information.
- Product name
- Product Description
- Product image
- Product Price
- Inventory (code and number of items in stock)
- Shipping settings (item weight and customs information)
- Product Variations
- SEO settings for product pages
For more information on how to add products and how to improve your product information, please see the article below.
[Related] [2020 Edition] For those who are just starting to use Shopify! Easy to use guide!
Step 5: Create your Buy Button
Once you have completed the settings up to Step 4, you are ready to create a Buy Button for your product and add it to your WordPress site.
First, click the "+" button next to "Sales Channels" on the left sidebar of your Shopify admin screen.
In the Add Sales Channel window, click the "+" button next to Buy Button.
Then, "Buy Button" will appear in the left sidebar of the admin screen. Click "Create a Buy Button" to proceed.
On the Button Type selection screen, choose to create either a Product Buy Button or a Collection Buy Button.
On the next "Customization" screen, you can make detailed settings for the design and functionality of your purchase button.
In the final step, an embed code will be generated.
Click the "Copy code" button and the code will be copied to your clipboard.
Step 6: Add the Buy Button to Your WordPress Site
Simply paste the embed code you copied earlier into WordPress and you're done.
The "Buy Button" created with Shopify will be installed on WordPress, and you will be able to actually sell products via the "Buy Button."
For example, there is this e-commerce site called " Gadget Mart ," which is a select shop that carries popular gadgets.
You can sell products from this shop right in this article by simply pasting the embed code generated by Shopify.
You will then be redirected to the payment screen on the e-commerce site " Gadget mart ."
Things to note when using purchase buttons
When using a purchase button, you need to be careful if the original site has implemented Amazon Pay.
When you set up a Buy Button, the URL to refer to as the original site will be the Shopify-managed domain (xxx.myshopify.com), not a URL with your own domain.
As mentioned above, if the redirect URL (domain) is different, Amazon Pay will display an error screen midway through the payment process, so measures are necessary.
The solution is to add the URL of the Shopify managed domain to the "JavaScript type" and "Redirect URL" registered in your own domain. For more details, please see the article below.
[Related] How to implement Amazon Pay on Shopify (with notes)
[TIPS] How to display Shopify products in your WordPress sidebar
Finally, as a tip, I'll show you how to display Shopify products in your WordPress sidebar.
The method is quite simple.
In WordPress, go to "Appearance" and select "Widgets".
Simply paste the "embedded code" that you obtained earlier from the Shopify admin screen into the "Content" field of "Custom HTML".
About Shopify Lite (Light Plan) for $9 per month
So far, we have introduced the integration between Shopify and WordPress.
If you only want to use Shopify by embedding it into your WordPress site, we recommend Shopify Lite.
Shopify Lite is Shopify's light plan, costing $9 per month. Shopify Lite is a plan for those who do not want to build an e-commerce site, but want to implement Shopify's sales functions on their website, blog, or SNS to sell products.
It is recommended for those who want to add an e-commerce cart function to a site built with WordPress, or those who want to sell products based on social media.
Comparison table between Shopify Lite and other plans
| Light | basic | Standard | Premium | ||
|---|---|---|---|---|---|
| Costs and Fees | Monthly cost | 9 US dollars | 29 US dollars | $79 | $299 |
| Japan Online Credit Card Fees | 3.4% | 3.4% | 3.3% | 3.25% | |
| AMEX/International Online Credit Card Fees | 3.9% | 3.9% | 3.85% | 3.8% | |
| Additional charges if you use a payment provider other than Shopify Payments | 2.0% | 2.0% | 1.0% | 0.5% | |
| Online Store | × | ◯ | ◯ | ◯ | |
| Number of staff accounts | 2 | 2 | 5 | 15 | |
| Reporting | Dashboard overview | ◯ | ◯ | ◯ | ◯ |
| Financial Reporting | ◯ | ◯ | ◯ | ◯ | |
| Live View | - | ◯ | ◯ | ◯ | |
| Customer Acquisition Report | - | ◯ | ◯ | ◯ | |
| Inventory Report | - | ◯ | ◯ | ◯ | |
| Behavioral Report | - | △ | ◯ | ◯ | |
| Marketing Report | - | △ | ◯ | ◯ | |
| Sales Report | - | - | △ | △ | |
| POS Sales Report | - | - | ◯ | ◯ | |
| Profit Report | - | - | ◯ | ◯ | |
| Customer Reports | - | - | △ | ◯ | |
| Custom Reports | - | - | - | ◯ | |
If we only look at Shopify Lite, the key points are as follows:
- Monthly fee: 9 USD
- Japan's online credit card fee is 3.4%
- AMEX/overseas online credit card fee is 3.9%
Another plus is that if you use Shopify Payments, there are no credit card fees.
The big difference with other plans is that you don't have an e-commerce site, and you can only use the Shopify admin screen. However, the functionality of the admin screen is the same as with other plans, and all of Shopify's standard functions are available.
As we've seen, Shopify makes it easy to generate embed code for WordPress.
Using embed code, you can easily add "Buy Buttons" for products and collections to your site, adding e-commerce functionality to your website.
For more information about Shopify Lite, please see the following article:
[Related] What is ShopifyLite? A thorough explanation of the recommended plan for opening an online store with Shopify that suits you
Customizing Shopify. How to change the design and create a successful e-commerce site
Finally, let's take a quick look at customizing Shopify.
With Shopify, you can customize your e-commerce site from the admin screen.
In addition, Shopify has a wide range of apps, and by using a variety of apps, you can customize your e-commerce site to make it more convenient and increase sales.
For information on how to edit things like "choosing a theme," "layout," "color scheme," and "font style," please see the Basics section of the article below.
In the Advanced section, we also explain how to customize Shopify theme code, assuming you have knowledge of HTML, CSS, and Liquid.
[Related] Customizing Shopify. How to change the design to create a successful e-commerce site
[Summary] About the integration between Shopify and WordPress
In this article, we have introduced how to integrate Shopify with WordPress.
Summary of this article
- You can easily issue the "embedded code" for the "Buy Button" on the Shopify admin page.
- Easily implement EC functionality by simply pasting the "embedded code" into WordPress
- If you only want to use Shopify by embedding it in your WordPress site, we recommend Shopify Lite, which costs $9 per month.
- With Shopify, you can customize your e-commerce site from the admin panel
- By making full use of the wide range of apps, you can customize your EC site to make it more convenient and increase sales.
Using this article as a reference, let's set up shipping fees right away.
If you are considering outsourcing the creation of a Shopify website, please contact us as we are the third company in Japan to be certified as Shopify Experts.
[Related] Creating your own EC site with Shopify
[Related] [For beginners] What is the reputation of Shopify? Considering Shopify, which can create a successful e-commerce site at a low price
[Related] Things to note when migrating WordPress blog posts to Shopify
*This article is current as of March 2020. Due to future updates or changes to Shopify specifications, it may not be possible to set up exactly as described in this article.
