If you've tried React tutorials, but don't know how to use React on your Shopify store, or you just don't have a concrete idea of how to use React on your Shopify store, this is the place to start!


Can use theme kit
, understand JavaScript
, know some React
, and have npm installed


What to do

Prepare environment to use React in Shopify store
, try to output cart button using React

Now that you can use React on the Shopify store, it might be fun to try making some things with React! Let's get started.

Setting up the environment within Shopify

Create a test theme

It is better to use a test theme rather than a live theme, so duplicate the theme and add the test theme information on config.yml.

Make sure that theme watch is enabled.

In this case, we have configured it under the name react, so we can navigate to the root directory of the theme from the terminal and run

theme watch -e react

to theme watch.

Now, any local file changes will be reflected in the test theme.

Setting up the npm environment

Next, open a new terminal tab and navigate to the root directory of the theme in question.

npm init -y

Enter This will create a file called package.json. (Note that if npm is not installed, it must be installed first.)

Install what you need.

Next, install the dependencies required for using react.

npm install --save react react react-dom

Then, the essential things related to react are also installed.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader core-js webpack webpack-cli webpack-merge

You now have the general framework of your environment set up!

*Since this is a setup within the local environment, nothing is reflected in the theme yet.

Verify that React is working properly

Now let's verify that React works properly.

Specifically, try outputting the cart icon from the React side of the site, and if it is output properly, you can determine that React is working properly.

Create necessary icons and snippets

The first step is to set up what will be needed on the theme side.


and snippets output for
react output

The following settings need to be made.

Creation of snippets for react output


and include in it an empty div element for React output as shown below.

{%- comment
-%}React Test
Snippets{%- endcomment

-%}<div id="react-cart-icon"></div

The code output from React is displayed in this react-cart-icon!

(2) snippets output

Just creating these snippets will not, of course, display them on the site.

Somewhere along the way, you will need to add a

{% render 'cart-icon-snippets' %}

and the corresponding snippets must be called.

In this case, we want to output the cart icon, so we render it in the header.

In the case of the Debut theme, we will use

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
{% include 'icon-cart' %}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
<div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
<span data-cart-count>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.items_count }}</span>

It will be displayed in a nice way when added under the

By the way, below the existing cart icon above

<a href="#">hello</a>

I put in a temporary one like that and it displayed without any problem.

react test header shopify

So, I added the following to this section

{% render 'cart-icon-snippets' %}

in the following manner.

Sorry for the image, but it looks like this.

shopify render snippets

This completes the theme configuration.

Now, if you can output from react to the cart-icon-snippets.liquid file, you should be able to output the cart icon in the header.

Now let's continue with the React side configuration!

Create a scripts folder

Create a scripts folder in the theme directory.

The scripts folder should exist alongside assets, snippets, sections, and templates.

scripts フォルダ react

Create a Components folder for React and a cartIcon.js file (scripts/Components/cartIcon.js) for the cart icon output.

In scripts/Components/cartIcon.js, enter the following

import React from 'react'

export const CartIconCode = () => {
return (
< svg id = = (1, 2, 3, ...) "Capa_1" enable-background = "new 0 0 12 12" height = "12" viewBox = "0 0 12 12" width = "12" xmlns = . "http://www.w3.org/2000/svg" > < g > < path d = (a) "m472 452c0 11.046-8.954 20-20 20h-20v20c0 11.046-8.954 20-20 20s-20-8.954-20-20v-20h-20c-11.046 0-20-8.954-20-20s8.954-20 20-20h20v-20c0-11.046 8.954-20 20-20s20 8.954 20 20v20h20c11.046 0 20 8.954 20 20zm0-312v192c0 11.046-8.954 20-20 20s-20-8.954-20-20v-172h-40v60c0 11.046-8.954 20-20 20s-20-8.954-20-20v-60h-192v60c0 11.046-8.954 20-20 20s-20-8.954-20-20v-60h-40v312h212c11.046 0 20 8.954 20 20s-8.954 20-20 20h-232c-11.046 0-20-8.954-20-20v-352c0-11.046 8.954-20 20-20h60.946c7.945-67.477 65.477-120 135.054-120s127.109 52.523 135.054 120h60.946c11.046 0 20 8.954 20 20zm-121.341-20c-7.64-45.345-47.176-80-94.659-80s-87.019 34.655-94.659 80z" /> </ g > </ svg >

Next, also create scripts/cart-icon.js. The contents should look something like the following! (I'll skip explaining each React code, since the goal is to use React with the Shopify store.)

import ReactDOM from "react-dom".
import React from "react".
import { CartIconCode } from ". /Components/CartIcon"

const rootEl = document . getElementById ( "react-cart-icon". )

rootEl && ReactDOM . render (<CartIconCode />, rootEl )

The code as React should now be fine.

Around Babel and Webpack settings

Next, we will proceed with the configuration of Babel and Webpack.

The files to be created are as follows.

, webpack.prod.js
, webpack.dev.js
, .babelrc
, package.json (already created, so editing is required)

Each should be created in the same column as the assets folder. It looks like this.

webpack react ファイル shopify

The contents look like this. (babelrc is also in this list, but its filename is prefixed with . dot at the beginning of the file name, so it is hidden.)

(1) webpack.common.js

const path = require("path")

module.exports = {
entry: {
'cart-icon': ". /scripts/cart-icon.js"
module: {
rules: [
test: /\


exclude: /node_modules/,
use: ["babel-loader"]
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "assets")


What we are doing here is describing cart-icon.js as entry, and then outputting cart-icon.bundle.js to the assets folder as output! The process is as follows.

(2) webpack.dev.js

const { merge } = require ( "webpack-merge". )
const common = = (a) require ( ". /webpack.common.js" )

module. exports = = merge ( common , {
mode : "development" ,
devtool : "inline-source-map". ,
watch : true

(3) webpack.prod.js

const { merge } = require ( "webpack-merge". )
const common = = (a) require ( ". /webpack.common.js" )

module. exports = = merge ( common , {
mode : "production".


In this section, the following is added to the script portion of the already existing package.json file.

"scripts". : {
"dev" : { : "webpack --config webpack.dev.js --progress --color" ,
"build". : "webpack --config webpack.prod.js --progress --color"


Finally, create a file named .babelrc and include the following information.

"presets". :[
"@babel/preset-env". ,
"useBuiltIns". : "usage". ,
"corejs". : 3

Now you can use

npm run dev

in the scripta folder, a file named cart-icon.bundle.js will be created in the assets folder!

Loading the bundled file

Finally, the bundled js file can be loaded on the Shopify store.

In the layout/theme.liquid file, add the following line to the part of the layout/theme.liquid file where each js file is loaded

< script defer type = ... "module". src = "{{ 'cart-icon.bundle.js' | asset_url }}" ></ script >

The following is a description of the process.

Then cart-icon.bundle.js should load!

If you actually load the page...

As you can see (though it's a little hard to tell with the colors) the cart icon has been added!

react shopify 使用 適用

(The one on the right with the wince. lol)

How to use React in your Shopify store Conclusion

That's all about how to apply and use React in your Shopify store!

The initial setup is a bit complicated, but now you can play with React in many ways, and since React is an indispensable technology for the modern front end, we hope to dig a lot deeper and do more with it.

Finally, I'll also include the article I referred to in writing this article.

Reference https://www.cadence-labs.com/2019/12/how-to-add-react-to-a-shopify-theme/

*There may be some code that is a bit unnecessary, but please bear with me lol.

Thank you for reading to the end. Have a great day!

Contact form