Simply copy and paste the following command line in your terminal to create your first Strapi project.
npx create-strapi-app
my-project --quickstart
Shopify is a subscription service that lets you create, manage and sell your products or services. When combined with Strapi and its ability to customize and manage content, you have on your hands a sleek, powerful website or app that is both attractive to your customers and very easy to use.
In this tutorial, we will create a Shopify store to sell custom-made clothes and integrate our store into our Strapi-powered website.
By following this tutorial, you will learn how to integrate Shopify into your Strapi website using the Shopify API. This tutorial aims to guide you through the entire process by breaking it into small, easy-to-follow steps, ensuring that you understand each step before moving on to the next one.
To follow this tutorial, you need to have the following:
Below are the steps to set up Strapi account and create a new collection.
Open your terminal, navigate to the folder where you want to store your project, and run the following command:
npx create-strapi-app strapi-shopify --quickstart
or using yarn
yarn create strapi-app strapi-shopify --quickstart
When the project has been successfully created, cd
into your project folder strapi-shopify
and run the following command in your terminal:
npm run develop
or using yarn
yarn develop
When you run yarn develop
or npm run develop
in your terminal, it will build the UI for your admin dashboard and automatically open localhost:1337/admin
on your browser with the following content:
Fill the form with your relevant details and click on "LET'S START" to access the admin dashboard.
Click on the "Content-Types Builder" tab under Plugins and create a new collection type named "Product."
When you click "Continue," a modal will pop up to provide you with options to create fields for your collection type:
We will add four fields to our collection type:
Select "Text" to add a field for your product name
Click on "+ Add another field" and select "Rich Text" to add a field for your product description.
Click on "+ Add another field" and select "Media" to add a field for your product image.
Click on "+ Add another field" and select "Text" to add a field name shopifyID
. This will contain the ID of your Shopify product.
When you are done, click the "Finish" button. Strapi will automatically restart your server to implement your changes.
We need to let our users view our products whether they are authenticated or not. Click on "Settings" located on your dashboard's sidebar, then scroll down to "Users & Permissions Plugin" and click on "Roles."
Click on "Public" to edit permissions for public users. Scroll down to the "Permissions" section and check the box "findOne" to enable users to see products by their ID.
Click on “Save” to save your permission updates.
Below are the steps to set up a new Shopify store account.
If you haven't already created your Shopify account and store, open www.shopify.com on your browser, click on "Start a free trial," and fill in the appropriate details for your store.
If you successfully create your account, you will see something like this. For this tutorial, the name of our store is Divi Apparels.
Shopify apps are used to add new features to your store or enhance admin capabilities. There are three main app types available on Shopify: Public, custom, and Private apps. Public apps can be installed from Shopify's app store or a Shopify developer's website.
Custom apps are built specifically for your Shopify store by a developer and don't require API or Admin access to your store. Private apps are also only available to your store, and they require API and Store Admin access.
We will need this API access to be able to integrate Shopify into Strapi.
On the sidebar of your store's dashboard, click on "Apps" and then click "Manage private apps."
You might see a warning screen saying, "Private apps are currently disabled," along with some extra info to explain why.
Click on "Enable private app development," tick the boxes, and enable private apps. Next, create your private app by clicking on "Create private app."
In the "App Details" section, put in a name for your Shopify private app and an email address to get technical updates.
Scroll down to the "Admin API" section and click on "Show inactive Admin API permissions."
In the dropdown menu, scroll down until you locate "Products," click on "No Access," and select "Read Access."
Then scroll down to the end of the page and click "Save."
Congratulations, you have successfully created your first private app. Please take note of your API credentials as you will need them later.
You can skip this step if you already have some products on your Shopify store. If you don't have any, then follow along:
On the sidebar of your store's dashboard, click on "Products" and click on "Add Products."
Go ahead and add details of your product, such as its title, description, pictures, pricing, etc. Be sure to change your product's status from "Drafts" to "Active" when you're ready to display it in your store.
After adding your product details, click on the "Save" button located at the top-right corner of your dashboard's navbar to save your product. Repeat the same process to add as many products as you wish to your store.
Below are the steps to integrate Strapi API with Strapi:
Shopify API is a handy little package that allows you to connect your website or app to your Shopify store using the API keys you created.
Open your terminal and run the command:
npm install --save shopify-api-node
or using yarn
yarn add shopify-api-node
In your browser, open the Strapi documentation on customizing controllers in your Strapi backend, scroll down to "Collection Type" in the "Core Controllers" section.
We are going to copy the findOne
controller function and modify it to fit our project.
In your project folder, navigate to api/product/controllers/products.js
and replace its content with the code above.
To modify it for our project, replace the restaurant
with the product
or whatever you named your collection-type
in your Strapi dashboard. This is how the code will look when you're done:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const { sanitizeEntity } = require("strapi-utils");
module.exports = {
/**
* Retrieve records.
*
* @return {Object}
*/
// Find Product by ID
async findOne(ctx) {
const { id } = ctx.params;
const entity = await strapi.services.product.findOne({ id });
return sanitizeEntity(entity, { model: strapi.models.product });
},
};
Go to the Shopify API GitHub page and copy the boilerplate code to create a shopify
constant that will contain your API information.
Paste this code in the same file as your controllers (api/product/controllers/products.js
) above your module.exports
Replace 'your-shop-name'
with the name of your Shopify store, which you can get from your browser's search bar
Replace 'your-API-key'
with the API key you created for your Shopify private app and 'your-app-password'
with your private app's password. Make sure you input these details as strings.
We need to tell our findOne
controller to get our product's metadata using our Shopify API details.
In your findOne()
function, below the entity
constant, type in this code:
1
entity.shopify = await shopify.product.get(entity.shopifyID);
Your product.js
file should look like this when you’re done:
Save your changes to restart your server.
We will create a product entry that matches the product we wish to get from our Shopify store. On your Shopify admin dashboard, click on "Products" in the sidebar and click on the product you wish to add to your Strapi website.
In the search bar of the tab displaying your Shopify product, copy the product ID.
In a separate browser tab, open your Strapi admin dashboard, and select "Products" under "Collection Types," then click on "+ Add New Products." Fill in the exact details as you did in the Shopify store, add an image, and in the shopifyID
section, paste the ID you copied from the Shopify website.
Click on “Save” and then click on “Publish”.
Open a new browser tab and type http://localhost:1337/products/1 to see the metadata for the first product you created. It should look like this on Firefox:
Congratulations! You've successfully integrated Shopify into your Strapi website.
In this tutorial, you learned how to integrate your Shopify store into your Strapi website. Check out the source code for this tutorial here.
You can take it a step further and build the website's front-end part using your preferred framework.
Divine is a Software Engineer and Technical Writer based in Nigeria. He loves looking at pixel-perfect designs on Dribbble and building them out with React.