Many store features you see every day, such as discounts, bundles, and order fulfillment are built using apps. These apps are created by developers to extend Shopify and solve real problems for merchants.

If you know JavaScript and basic web development, you already have enough skills to start building Shopify apps.

In this tutorial, you’ll learn what a Shopify app is, how Shopify apps work, and how to set up your development environment. You’ll also see three real examples of popular Shopify apps and how they are built.

What We’ll Cover

• What Is a Shopify App?

• How Shopify Apps Work

• Setting Up Your Development Environment

• Understanding Shopify APIs

• Case Study One: Bundle and Discount Apps

• Case Study Two: Printful and Order Fulfilment

• Case Study Three: Shiprocket and Shipping Rates

• Testing Your Shopify App

• Preparing for the Shopify App Store

• Conclusion

To follow this tutorial, you should be comfortable with JavaScript and APIs. Some experience with Node.js and npm will help, but you do not need to be an expert. No prior experience with Shopify is required.

What Is a Shopify App?

A Shopify app is a web application that connects to a Shopify store. The app runs on your own server or a serverless platform.

It talks to Shopify using secure APIs. When a merchant installs your app, they allow it to access certain store data. This could include products, orders, or customers, depending on the permissions given.

There are different types of Shopify apps.

Public apps are listed on the Shopify App Store and can be installed by any merchant. These apps must pass a review before approval.

Custom apps are built for a single store, and private apps are used only inside a company.

Most Shopify apps include backend code that calls Shopify APIs, a frontend interface shown inside the Shopify Admin, storefront features that shoppers can see, and webhooks that react to store events.

How Shopify Apps Work

When a merchant installs your app, Shopify starts an OAuth process. This is a secure way to ask the merchant for permission.

Once approved, Shopify sends your app an access token. This token allows your app to make API calls to the store.

Shopify apps can add screens inside the admin area using App Bridge and Polaris. These tools make your app feel like part of Shopify. Apps can also add features to the storefront using theme app extensions.

Shopify provides both REST and GraphQL APIs. REST is easy to use, but GraphQL is faster and more efficient. Today, most new apps use GraphQL.

Setting Up Your Development Environment

Before you start coding, you’ll need a few tools. You’ll need to install Node.js and the Shopify CLI. You’ll also need a Shopify Partner account. The Partner account lets you create apps and test them without cost.

The Shopify CLI helps you create a starter app quickly. You can generate a working app by running these commands:

shopify app create node
cd my-shopify-app
npm install
shopify app serve

This creates an app with login, authentication, and an embedded admin interface. It also sets up a secure tunnel so Shopify can reach your local server while you develop.

Understanding Shopify APIs

Shopify provides APIs for almost every part of a store. This includes products, orders, customers, and shipping. Your app can only access data that the merchant has allowed during installation.

Here’s a simple example of fetching products using the GraphQL Admin API:

import fetch from "node-fetch";

async function getProducts(shop, token) {
  const query = `
  {
    products(first: 5) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
  `;
  const response = await fetch(
    `https://${shop}/admin/api/2025-10/graphql.json`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Access-Token": token
      },
      body: JSON.stringify({ query })
    }
  );
  const data = await response.json();
  return data.data.products.edges;
}

This function gets the first five products from a store. The access token comes from the OAuth process during app installation.

Case Study One: Bundle and Discount Apps

Bundle and discount apps help merchants offer deals like “Buy two, get ten percent off.” These apps must work with Shopify’s pricing rules and checkout system. A popular example is the Bundle Deals app, which shows offers on product and cart pages.

These apps usually add small UI elements to the storefront using theme app extensions. They use Shopify’s Discount APIs to apply offers safely.

They don’t change checkout directly. Instead, they enhance the storefront and let Shopify handle the final pricing.

A storefront script might look like this:

fetch("/apps/bundle-deals/api/bundles?productId=gid://shopify/Product/123")
  .then((res) => res.json())
  .then((bundles) => {
    displayBundles(bundles);
  });

This code runs in the store’s frontend. It fetches bundle rules from your app server and shows them to shoppers.

Case Study Two: Printful and Order Fulfilment

Printful is a popular app that connects Shopify stores with a print-on-demand service (for example, T-shirts, Mugs, and so on). When a customer places an order, Printful receives the order and starts production.

Apps like this need access to orders and reliable event handling. They use webhooks to listen for new orders. When Shopify sends a webhook, the app forwards the data to an external system.

Here is a simple webhook example:

app.post("/webhooks/orders/create", async (req, res) => {
  const order = req.body;

await printfulClient.createOrder({
    external_id: order.id,
    items: order.line_items.map(item => ({
      variant_id: item.variant_id,
      quantity: item.quantity
    }))
  });
  res.status(200).send("Order processed");
});

This keeps Shopify and Printful in sync. The same pattern is used for shipping tools, accounting software, and CRMs.

Case Study Three: Shiprocket and Shipping Rates

Shiprocket helps merchants manage shipping and delivery. Shipping apps often calculate rates in real time and update order status after shipment.

Since Shopify restricts what can run during checkout, shipping apps typically calculate rates before checkout begins or use carrier service APIs. A simple rate endpoint might look like this:

app.post("/shipping/rates", async (req, res) => {
  const { destination, items } = req.body;
  const rates = await fetchCarrierRates(destination, items);

res.json({
    rates: rates.map(rate => ({
      service_name: rate.name,
      total_price: rate.price
    }))
  });
});

This lets merchants show shipping options to customers before they reach checkout.

Testing Your Shopify App

Testing is a critical part of building a reliable Shopify app, especially if you plan to submit it to the App Store. Every feature should be tested thoroughly in a development store before you consider a release. A development store lets you simulate real merchant behavior without affecting live data, which makes it ideal for both manual and automated testing.

In addition to live testing, Shopify allows you to mock API responses during development. Mocking lets you test your business logic without relying on real API calls or rate limits. This is especially useful when simulating error scenarios or incomplete data, such as missing fields or unexpected values.

By combining real store testing with mocked responses, you can be confident that your app behaves correctly in both normal and failure conditions.

Preparing for the Shopify App Store

Preparing for the Shopify App Store is an important step if you want to release a public app that merchants can trust and install with confidence. Shopify has a formal review process, and your app must meet both technical and policy requirements before it can be listed.

Your app should request only the API permissions that are absolutely necessary for its core functionality. Asking for extra or unrelated permissions is one of the most common reasons apps get rejected. Shopify expects you to clearly explain why each permission is needed and how the data will be used. This helps merchants feel safe when installing your app.

You must also include basic legal and support information. This includes a clear privacy policy that explains what data you collect and how you handle it, terms of service that define usage rules, and a visible support contact such as an email address or help page.

Finally, Shopify looks closely at app quality. Your app should be stable, handle errors gracefully, and be tested across common store scenarios. Clear messaging, predictable behavior, and transparent data usage go a long way in passing the review process.

Conclusion

Building your first Shopify app takes time, but it’s very achievable. Start with login and API calls. Learn how to embed UI inside Shopify. Study real apps from the Shopify app store. Each one solves a different problem using a different design.

As you practice, the pieces will start to fit together. Keep building, testing, and reading the documentation. Your first Shopify app could be the start of something much bigger.

Email automation is all about sending emails to customers based on events that occur on your website, like abandoned cart emails, order confirmation emails, shipping confirmation emails, and so on.

The result? You save time by not having to do this work manually.

Why Email Automation is Important

Email is still one of the most effective marketing channels. Email marketing has a higher ROI than any other form of digital advertising, and even with all the new tools available to us, it’s still the most cost-effective channel.

Adding automation to your emails can take them even further. Emails are automatically sent based on triggers you set up so that they reach your customers when they’re most likely to convert. Automation also allows you to send messages at scale without any manual work.

Email also provides a direct line of communication with your customers and, if done correctly, can be something people look forward to opening.

It’s a powerful tool, but it’s not just about sending more emails — it’s about sending better ones.

Shopify email automation lets you send personalized emails to each customer as they interact with your business individually and receive follow-up messaging based on their purchase behavior, browsing activity, and even gives them recommendations based on their buying history.

This post will cover different types of email automation, what their purpose is, and how it can benefit the customers and e-commerce stores.

Why is Shopify email automation essential?

There are many reasons for implementing email automation on your Shopify store. Here are just a few:

• It saves time.

• It increases engagement.

• It improves conversion rates.

• It enhances the customer experience.

• It saves time.

Saving time

Email automation can save you a lot of time by automating tedious, repetitive tasks that would otherwise need to be done manually and individually to each recipient.

This is especially useful when sending a large number of emails in a short amount of time, such as in an event invitation or email marketing campaign.

Establishing trust

You can use email automation to establish trust with your customers, which will help increase engagement with your brand and business.

You can also use it to build relationships with your subscribers and increase the likelihood that they'll make a purchase or recommend you to their friends and family.

Improving conversion rates

As a business owner, you have to think about how you can improve your conversion rate constantly. This is especially true if you're trying to grow your business.

One of the biggest benefits of using email marketing automation software is that it can improve your conversion rate.

When used correctly, email automation can help you reach more people in less time. It can also help you get them interested enough about what you have to offer so that they actually buy from you instead of just browsing around aimlessly on your website.

Shopify email marketing automation software

Klavyio

Klavyio is a tool that you can use to set up automated email workflows. It’s a third-party tool (not built by Shopify) that integrates with your store and helps you build stronger relationships with your customers, as well as increase sales.

Using Klavyio, you can create emails that are sent automatically when a customer purchases a product from your store or when they abandon their cart. You can also set up emails to be sent at different points after someone spends time browsing your site, or even if no one has visited for a while.

Not sure how you would use Klavyio in your store? Here are some ideas:

• Send an abandoned cart recovery email after someone leaves items in their cart but doesn't purchase them. You can use the personalization features in Klavyio to show the specific products they left behind, so they're more likely to come back and buy.

• Send a newsletter about new products or store promotions to your existing customers. This is a great way to let people know about things happening in your store.

• Start building a segment of customers who have purchased from you before. Then send them exclusive offers that aren't available to anyone else.

Here's how it works:

• Klaviyo takes all your customer data and allows you to build experience across email, owned channels and measure the results in revenue.

• Klaviyo uses machine learning to analyze and group your customers into segments that are most likely to buy.

• Klaviyo automatically creates personalized emails based on what each segment is most interested in.

That way, you know exactly what to send and when to send it.

If a customer adds a product to their cart but doesn’t check out, the abandoned cart email is triggered after some time. This mail includes a list of products that were left behind in the shopping cart. This is when customers return to their carts and complete the transaction in many cases.

Someone who adds a product to their cart is a qualified lead. You can use the abandoned cart email automation process to bring them back with their cart and complete their transaction.

Abandoned carts are triggered after a set period of time, usually between 60 minutes and 24 hours. The product list in the mail reminds them what they were doing and leads them back to the checkout page.

Zapier

Zapier is a web-based service that allows you to connect your favorite web apps and automate workflows—without the headache of learning how to code. It’s a great way to extend the functionality of existing apps.

Zapier uses a trigger-action model. A trigger starts a workflow, and an action ends it.

Zapier moves info between your web apps automatically so that you can focus on your most important work.

To use Zapier, you'll first need to select the app(s) you want to create an automation between. You can either search for your app (Shopify, Gmail, and so on) or scroll through the list of popular apps.

Here’s how Zapier can help you:

1. Add new leads to a drip campaign

2. Trigger follow-up emails after a purchase

3. Send predefined email responses

4. Forward contact form submissions to your inbox

5. Add new contacts to your email list

The best part? You don’t need any technical skills or a big budget. If you can point, click, and type, Zapier can help you automate your email marketing—and more.

For email marketing services, this means Zapier can listen for events and then trigger actions in other apps.

For example, when someone subscribes to your mailing list or when someone purchases something from your Shopify store, Zapier can be instructed to send the user's information to your CRM.

Or, if a new Google Sheets row is created with customer/user data—names, emails, phone numbers—Zapier can add that person as a subscriber to your mailing list automatically.

Integromat

Integromat is a powerful workflow automation platform with a focus on scalability, reliability, and flexibility. It enables you to connect Shopify triggers and actions to other apps, web services, or API endpoints.

The platform offers a range of capabilities such as complete control over data flow, API creation, and management tools for developers, as well as scenario builder for non-technical users.

Integromat also allows you to automate complex processes that would otherwise require hiring experienced developers.

Here are some of the things you can do using this integration:

• Send out welcome emails, confirmations, and reviews as soon as your customers sign up to your store or place an order on it

• Use different templates based on the product bought by each customer

• Segment your subscribers based on their activity, location, and purchase history.

Takeaways

Shopify email automation can be your sales partner if you implement it wisely.

Email automation will probably become your best friend in the long run, especially when it comes to marketing. And if you're having a hard time deciding which strategy to go for, then think of this: email automation is designed to help you improve your sales experience and, ultimately, increase sales.

And it's not just about marketing. Email automation can be used throughout the customer journey to improve their experience as well.

Now that you know more about Shopify email automation, there's no reason not to research and learn more about it – because there is definitely a lot for you out there.

And you might wonder why so many people use them. Well, it's because they're easy to use, cost-effective, and highly efficient.

With WordPress, Shopify, and Ghost, you can create a website from scratch in a matter of minutes.

Tailored to your needs, these powerful website builders can help you achieve anything from building an e-commerce website to starting your own blog or showcasing your portfolio.

It's no wonder why so many businesses choose these platforms. But which one should you choose?

We can't simply say that one is better than the other, because there's no single solution that will work in every situation.

So in this article, we'll cover the three platforms and look at their strengths and weaknesses so that you can figure out what will work best for your particular situation.

If you Want to Build a Blog From Scratch – Use Ghost

If you are a blogger who is looking for an open-source platform, Ghost might be the perfect choice for you.

The fact that it’s open-source enables you to alter the code of the platform, customize it, and make it more suitable to your writing needs.

And even if you’re not a coder, you can get help from other users who are willing to contribute to the community by fixing bugs or adding new features.

Tutorials on how to install Ghost on your own web server are available online. You can also choose to go with a hosted plan, which allows you to use themes created by other users instead of relying on the default theme.

Ghost is a platform that is based on Node.js, and it runs using Node.js servers. It comes with a rich plugin system, allowing you to customize your blog to suit your own needs.

Ghost lets you to use Markdown instead of HTML for writing. This makes it easy for you to write directly in the browser window.

If you don’t know about Markdown, it is a lightweight markup language that allows you to write in rich text but with simpler code, as opposed to HTML.

In fact, one of the benefits of Ghost over other platforms is that your posts are written in Markdown rather than HTML or text files, which results in much cleaner code.

You Can Use Ghost as a Headless CMS

Ghost has a flexible architecture, which means it can be used as a headless CMS. In fact, it's one of the most popular headless content management systems in the JAMStack.

A headless CMS allows you to build a front-end website or application, such as a mobile app, with an API that calls the CMS for its data. You can deploy the API and your website or app to separate servers or environments without having to change anything within your content.

Since the API delivers data from the CMS, you will have full control over that data, including permissions, tags, and categories. If you need to make changes to your content, you will only have to make those changes on one end rather than both.

Headless CMSs are often used for building websites and applications with JavaScript frameworks such as AngularJS and React.js​. However, if you need to render a dynamic site with multiple pages using a single API call, this type of CMS can be beneficial as well.

To use a headless CMS, you will need to learn how it works and how to utilize it through its API. This may require additional development resources, depending on your skill level.

This approach is gaining popularity among startups and agencies who want more control over the display of content while still retaining the ability to make updates through a central interface.

Advantages of Using Ghost

Ghost is a free, easy-to-use CMS that doesn’t require any kind of coding skills.

Along with simplicity, Ghost CMS comes with lots of out-of-the-box features which make it really appealing to bloggers and small businesses.

You can add multiple authors, set up collaborative writing, track analytics, create polls, customer support forums, manage templates, and much more using drag and drop features.

Things get interesting as you start using third-party apps on Ghost. There are numerous integrations available for installing apps like Google Analytics and Disqus comments.

Some other pros include:

• It has a clean, minimalistic design. If you want your blog to be beautiful, then Ghost CMS is great for that.

• Complete tools. You get all the tools that are required in creating a blog, starting from the installation to setting up the theme with the drag and drop features.

• Customizable themes. The themes can be customized using the built-in theme editor that makes it really easy for anyone to modify them as per their needs.

• Ghost community. If you’re stuck, you can find help from other Ghost users by going over their forums and asking questions.

If You Want to Take Your Website to the Next Level – Use WordPress

You can use WordPress as a simple blogging platform, but it is also a fully-featured content management system (CMS). It allows you to build custom websites and blogs if you want to take your business to the next level.

Because of its popularity, there is an active support community and lots of free training materials.

Tutorials for the basic functionality and more advanced features are widely available online.

WordPress is free, but if you need help installing it or customizing it for your needs, you can purchase web hosting from a reputable company. Hosting costs vary depending on the type of hosting service you choose.

You can install WordPress yourself or pay someone to do it for you. The WordPress website provides instructions on how to install the software on different server platforms.

Once installed on your server, WordPress will allow you to create your own blog page. You have complete control over the look and feel of your site through the use of themes, which are pre-built designs for the layout of your pages.

Themes are available for purchase or free download from the WordPress website. You can also design your own custom theme if you're up to the challenge.

You might want a more complicated site than what is provided by the basic WordPress installation. In that case, you can hire a designer to build you a customized theme or using an existing theme as a framework and add your own custom features through plugins. Plugins extend the features of themes with special design elements and programming functions.

Advantages of using WordPress

WordPress is by far the most customizable option in this list. It features the most comprehensive library of themes and plugins, allows you to edit the source code quite easily, and even write your own custom functionalities.

You can think of WordPress as the CMS that falls between Ghost and Shopify, as it allows you to run an eCommerce store and a blog at the same time by simply installing a compatible theme.

WordPress lets you take your blog to the next level and scale your eCommerce store as your business grows.

The downside is that sooner or later you will need a developer’s help. This is because the more plugins you install, the slower your website will get, and users hate slow websites (not to mention search engines).

Some other pros include:

• Extremely cheap to get started with. You can get a WordPress website up and running for free, and basic hosting plans start as low as $18.96 per year.

• Ability to assign user roles. At some point during your business growth cycle, you might need to bring in extra people to help you create, edit and publish content. WordPress comes with built-in user roles which will make your life a whole lot easier.

• Best marketing plugins on the market. You can install one of the many SEO plugins available in the plugin directory. Some examples include Yoast or Rank Math. These plugins help you optimize your content (like articles, pages, and even product pages) and increase your chances of outranking your competitors.

• A vast array of integrations. Chances are you will be using 3rd party SaaS products like Mailchimp or ActiveCampaign. Regardless of the service, you will find it extremely easy to integrate them with your website as almost all have created a WordPress plugin.

• The biggest online library of resources. The WordPress community is by far the largest which makes it easy to find answers to all your questions regarding your installation. There are tens of thousands of websites and forums focused solely on WordPress websites featuring tons of information.

If You Want the Fastest Way to Start an eCommerce Business – Use Shopify

Shopify started in 2006 as an online store for snowboarding equipment. Back then, the CMS ecosystem was lacking a robust and easy-to-use solution, so the Shopify creators decided to code their own.

Needless to say, this was a hit. In the years that followed more and more stores have started to use the Shopify CMS. As of May 2021, more than 1.7 million businesses from some 175 countries use Shopify to run their businesses.

By far the simplest and fastest way to start an eCommerce business, Shopify is mainly used by nontechnical people that want to bring their brick and mortar stores online. In no more than a few minutes you can have your own website up and running and start accepting online payments.

But Shopify is also used by some of the biggest online stores on the Internet, which makes it a great option if you want to scale your business to the next level, and have the funds to do so.

Some of Shopify’s advantages:

• Extremely easy to get started with. The CMS was built with ease of use in mind. Anyone can get a store up and running in no time. You don’t have to know how to code or even how to connect a domain to your website as Shopify does all that for you.

• Compatible with most major third-party services. Shopify connects out of the box with the biggest third-party services, like Klaviyo for email marketing or Facebook Ads for paid advertising.

• Plenty of apps in the app store. If you feel that your store needs additional functionality, like bundle discounts, for example, you will be happy to hear that there are tons of apps that can help you achieve this. Just be careful and look at their cost as they can go up rather quickly.

Some of Shopify’s disadvantages:

• Can get pretty expensive. Shopify is extremely easy to start with, but that comes with a cost. The cheapest plan (Basic) starts at $29 per month, while the most expensive one (Advanced) reaches $299 per month. The main difference is the commission applied by Shopify on payments.

• High payment fees. You have to take into account that Shopify charges up to a 2% fee on your transactions (on the Basic plan). This commission decreases with the plan to a minimum of 0.5% (on the Advance plan). In comparison, WooCommerce doesn’t charge you a percentage of your sales.

• Shopify developers are expensive. If you want to customize your store beyond basic functionalities you will need the help of a developer, and they are not cheap. However, there are a multitude of apps available that can help you achieve your goals.

• Most Shopify Apps have a monthly cost. You can find free apps in the app store, but most of them have a monthly cost (compared to a fixed one-time fee charged by the vast majority of WordPress plugins).

• The blog functionality isn't great. Shopify is an eCommerce-centric platform so there’s no wonder that they haven’t spent too much time optimizing their blog functionality. Big stores choose to host their blogs on WordPress while keeping their storefront on Shopify.

In conclusion, you can use Ghost to start your blog almost instantly, or Shopify to configure a fast and secure online store. And, if you want to get the best out of both worlds, you might want to go with WordPress.

The ultimate WordPress guide is a free resource that will help you understand the basics and help you launch your new website in no time, so be sure to give it a read before you make the big decision of choosing a specific platform.

E-commerce for all! (…websites, that is ?)

Written by Chris August 2018, updated November, 2018

_Courtesy of Negative Space on [pexels.com](https://www.pexels.com/photo/grayscale-photo-of-computer-laptop-near-white-notebook-and-ceramic-mug-on-table-169573/" rel="noopener" target="blank" title=")

Background and Motivation

So the motivation here was pretty simple. I wanted my site visitors to be able to browse, search, and select products directly on my custom domain without having to go to our Shopify site.

The secondary motivation is that I’d much rather have my own codebase for a website than use one of Shopify’s factory templates. No offense Shopify team! The templates are modern and clean, but they are rather basic. I’m sure those templates are heavily customizable, but it’s not a stack I know at the moment.

So this is the best of both worlds — my custom React site (already built and online ?), with the added API and checkout process of Shopify!

By the end of this tutorial, you’ll be able to add your Shopify products on any page of your site. The only part of the shopping process that will occur on Shopify is when the user clicks ‘Checkout’.

I’ve created an empty boilerplate repository for this tutorial as well.

The motivation specifically for writing here on Medium was simply that I couldn’t find a tutorial on this process myself — so I decided to make one!

I’ve been a professional developer for 4 years now, and programming for 7. I’ve worked in tech stacks from old-school Fortran and Perl, to React, Javascript, Python, and Node.

Siren Apparel is one of my side project / startup / maker companies that I’ve run for 5 years now, and we’ve donated to 5 different police and fire departments so far!

Let’s finally get started with this tutorial.

Shopify’s Storefront API

The wonderful folks at Shopify have put together the Storefront API. With the Storefront API, you can create React components to add product pictures, product variations, product sizes, a cart, and ‘add to cart’ and ‘checkout’ buttons into your own, non-Shopify site.

*Note that this tutorial is NOT about Shopify Polaris, which is used to create components in React for Shopify store management itself.

Getting Started: react-js-buy Repository

Take a look at this React example built by the Shopify team. Most of the code in this tutorial comes from that repository.

…Did you take a look? Good! ?

Now we’re going to hop right into code! Head to your React site’s root folder and install the shopify-buy module via the terminal:

cd my-awesome-react-project/npm install --save shopify-buy

(or yarn add shopify-buy if you prefer yarn)

Then, in your frontend index.js, (NOT App.js!) you will need to import Client from the JS Buy SDK:

import Client from 'shopify-buy';

Then add the following configuration object above the ReactDOM.render()call:

const client = Client.buildClient({    storefrontAccessToken: 'your-access-token',    domain: 'your-shopify-url.myshopify.com'});

That’s it for index.js for now — we’ll come back to it soon.

Now we’re going to add in all the components needed for a smooth shopping and checkout experience. Copy all the components from the react-js-buy repository:

Cart.js

LineItem.js

Product.js

Products.js

VariantSelector.js

We will paste these components into acomponents/shopify/ folder in your src/ folder. You could put these component files anywhere else in the src/ folder, if you wished. The rest of the tutorial assumes you have put them in components/shopify/ .

Modifying App.js

App.js will need extensive changes. First, import that Cart component you just copied into your own project:

import Cart from './components/shopify/Cart';

If your App.js component was stateless, like mine, you should be safe copying this entire constructor() function:

constructor() {    super();    this.updateQuantityInCart = this.updateQuantityInCart.bind(this);    this.removeLineItemInCart = this.removeLineItemInCart.bind(this);    this.handleCartClose = this.handleCartClose.bind(this);}

If you already have state, copy only those bind lines. Those three lines are event handler functions that the Shopify cart needs to function properly.

“But what about state for the cart!?”

You may ask; or:

“What about defining those event handlers for the cart!?”

Indeed, that’s coming, but not yet! ?

You can then append the <Cart/> component to the bottom of your render() function, before the ending div.

In my opinion, the cart should be accessible anywhere in your app. I think it makes sense, then, to put the <Cart/> component in the root component of your app — in other words, App.js:

return (<div>...<Cart    checkout={this.state.checkout}    isCartOpen={this.state.isCartOpen}    handleCartClose={this.handleCartClose}    updateQuantityInCart={this.updateQuantityInCart}    removeLineItemInCart={this.removeLineItemInCart} /></div>);

Again, I haven’t included any code on the event handlers for the cart yet. Additionally, I didn’t address the lack of state components for the cart in App.js.

There is good reason for this.

About halfway through this project, I realized my products component was of course not in my App.js file.

Instead, it was buried about three children components down.

So instead of passing products three levels down to children, and then function handlers all the way back up…

I decided to use…

? Redux!!! ?

Ugh! I know, I know, Redux, while not being very difficult, is a pain in the %*$! to wire up initially with all the boilerplate required. But, if you are a developer working on an E-commerce store or an E-commerce store owner, think of it this way: Redux will enable you to access the state of the cart from any component or page in our website or webapp.

This ability will be essential as Siren Apparel expands and we develop more products. As we create more products, I’ll make a separate dedicated store page with all products, while leaving just a handful of featured products on the homepage.

The ability to access the cart is essential if a user shops around a bit, reads some stories or info about Siren Apparel, and then decides to checkout. It doesn’t matter how much they navigate around, nothing from their cart will be lost!

So, in short, I decided it’s probably better to implement Redux now while the codebase for our site isn’t too large.

Implementing Redux for Shopify Buy SDK With Bare Minimum Boilerplate

Install NPM packages redux and react-redux:

npm install --save redux react-redux

In index.js , import Provider from react-redux and your store from ./store:

import { Provider } from 'react-redux';
import store from './store';

Wrap the <Provider> component with the passed store around your&lt;App>;in index.jsto hook up your App to your Redux store:

ReactDOM.render(
<Provider store={store}>
<IntlProvider locale={locale} messages={flattenMessages(messages[locale.substring(0, 2)])}>
<App locale={locale}/>
</IntlProvider>
</Provider>,
document.getElementById('root')
);

(Note that I also have a <IntlProvider>, but that’s in a different post about how I applied internationalization and localization to dynamically render the content on Siren Apparel’s site. A different story for a different day.)

Now of course we haven’t made a ./store.js file yet. Create your store in store.jsin the src/ root and put this in it:

import {createStore} from 'redux';
import reducer from './reducers/cart';export default createStore(reducer);

Create your reducers file in src/reducers/cart.js and paste this code:

// initial state
const initState = {
isCartOpen: false,
checkout: { lineItems: [] },
products: [],
shop: {}
}// actions
const CLIENT_CREATED = 'CLIENT_CREATED'
const PRODUCTS_FOUND = 'PRODUCTS_FOUND'
const CHECKOUT_FOUND = 'CHECKOUT_FOUND'
const SHOP_FOUND = 'SHOP_FOUND'
const ADD_VARIANT_TO_CART = 'ADD_VARIANT_TO_CART'
const UPDATE_QUANTITY_IN_CART = 'UPDATE_QUANTITY_IN_CART'
const REMOVE_LINE_ITEM_IN_CART = 'REMOVE_LINE_ITEM_IN_CART'
const OPEN_CART = 'OPEN_CART'
const CLOSE_CART = 'CLOSE_CART'// reducers
export default (state = initState, action) => {
switch (action.type) {
case CLIENT_CREATED:
return {...state, client: action.payload}
case PRODUCTS_FOUND:
return {...state, products: action.payload}
case CHECKOUT_FOUND:
return {...state, checkout: action.payload}
case SHOP_FOUND:
return {...state, shop: action.payload}
case ADD_VARIANT_TO_CART:
return {...state, isCartOpen: action.payload.isCartOpen, checkout: action.payload.checkout}
case UPDATE_QUANTITY_IN_CART:
return {...state, checkout: action.payload.checkout}
case REMOVE_LINE_ITEM_IN_CART:
return {...state, checkout: action.payload.checkout}
case OPEN_CART:
return {...state, isCartOpen: true}
case CLOSE_CART:
return {...state, isCartOpen: false}
default:
return state
}
}

Don’t worry, I’m not going to just post this big reducer and not discuss what is going on; we’ll get to each event! There are a few things to note here.

We take the initial state from what the state is written as in the Shopify GitHub example and put it in our initState, namely the following four parts of state:

isCartOpen: false,
checkout: { lineItems: [] },
products: [],
shop: {}

However, in my implementation, I also create a client part of the state. I call the createClient() function once and then immediately set it in the Redux state in index.js . So let’s head into index.js:

Back to index.js

const client = Client.buildClient({
storefrontAccessToken: 'your-shopify-token',
domain: 'your-shopify-url.myshopify.com'
});
store.dispatch({type: 'CLIENT_CREATED', payload: client});

In the Shopify buy SDK example, there are a few async calls to get information about the products and store information in React’s componentWillMount() function. That example code looks like this:

componentWillMount() {
this.props.client.checkout.create().then((res) => {
this.setState({
checkout: res,
});
});this.props.client.product.fetchAll().then((res) => {
this.setState({
products: res,
});
});this.props.client.shop.fetchInfo().then((res) => {
this.setState({
shop: res,
});
});
}

I opted to do that instead as far upstream of a site load as possible, directly in index.js. Then, I issued a corresponding event when each part of the response has been received:

// buildClient() is synchronous, so we can call all these after!
client.product.fetchAll().then((res) => {
store.dispatch({type: 'PRODUCTS_FOUND', payload: res});
});
client.checkout.create().then((res) => {
store.dispatch({type: 'CHECKOUT_FOUND', payload: res});
});
client.shop.fetchInfo().then((res) => {
store.dispatch({type: 'SHOP_FOUND', payload: res});
});

By now the reducer is created, and the initialization of the Shopify API client is complete all for index.js.

Back to App.js

Now in App.js, wire up Redux’s store to the App state:

import { connect } from 'react-redux';

and don’t forget to import the store as well:

import store from './store';

At the bottom where export default App should be, modify it to this:

export default connect((state) => state)(App);

This connects the Redux state to the App component.

Now in the render() function we are able to access the Redux’s state with Redux’s getState() (as apposed to using vanilla react’s this.state):

render() {
...
const state = store.getState();
}

Finally: the Event Handlers (We’re Still in App.js)

From above, you know that there are only three event handlers that we need in App.js, because the cart uses only three: updateQuantityInCart, removeLineItemInCart, and handleCartClose. The original cart event handlers from the example GitHub repository, which used local component state looked like this:

updateQuantityInCart(lineItemId, quantity) {
const checkoutId = this.state.checkout.id
const lineItemsToUpdate = [{id: lineItemId, quantity: parseInt(quantity, 10)}]return this.props.client.checkout.updateLineItems(checkoutId, lineItemsToUpdate).then(res => {
this.setState({
checkout: res,
});
});
}removeLineItemInCart(lineItemId) {
const checkoutId = this.state.checkout.idreturn this.props.client.checkout.removeLineItems(checkoutId, [lineItemId]).then(res => {
this.setState({
checkout: res,
});
});
}handleCartClose() {
this.setState({
isCartOpen: false,
});
}

We can refactor them to dispatch events to the Redux store as follows:

updateQuantityInCart(lineItemId, quantity) {
const state = store.getState(); // state from redux store
const checkoutId = state.checkout.id
const lineItemsToUpdate = [{id: lineItemId, quantity: parseInt(quantity, 10)}]
state.client.checkout.updateLineItems(checkoutId, lineItemsToUpdate).then(res => {
store.dispatch({type: 'UPDATE_QUANTITY_IN_CART', payload: {checkout: res}});
});
}
removeLineItemInCart(lineItemId) {
const state = store.getState(); // state from redux store
const checkoutId = state.checkout.id
state.client.checkout.removeLineItems(checkoutId, [lineItemId]).then(res => {
store.dispatch({type: 'REMOVE_LINE_ITEM_IN_CART', payload: {checkout: res}});
});
}
handleCartClose() {
store.dispatch({type: 'CLOSE_CART'});
}
handleCartOpen() {
store.dispatch({type: 'OPEN_CART'});
}

If you were following along, I already mentioned that I added my own handleCartOpen function, because I pass that function down as a prop to my <Nav/> component, so a user is able to open and close the cart from a link in the nav. At a future time, I could move that function to the Nav itself instead of passing it as a prop, since of course the Redux store will also be available there!

Finally Add that Component!

So, you’ve got a basic store maybe with some simple href’s that link to the corresponding product on your Shopify store? Ha! Get rid of those, and replace them with your brand spankin’ new <Products/> component!

First, import the component into wherever your store markup should be (remember, in my code base I’ve put the shopify example components in a folder called shopify/)

This will be wherever your products currently are. (In the boilerplate repository I made, I put this in the GenericProductsPage component, to signal that this code could be applied to any page that has a products section):

import Products from './shopify/Products';

Now finally, that past 15–20 minutes of redux boilerplate code edits pays off: we can grab the products part of our state — not by way of vanilla React state passed down over and over again through props — but through grabbing by way of Redux state, in a neat one liner const state = store.getState();:

render () {
const state = store.getState(); // state from redux store
let oProducts = <Products
products={state.products}
client={state.client}
addVariantToCart={this.addVariantToCart}
/>;

Don’t forget to drop the component itself into where it should go in your render() function. For me, that location was buried in Bootstrap style classes and HTML:

...
<div className="service-content-one">
<div className="row">
<Products/>
</div>{/*/.row*/}
</div>{/*/.service-content-one*/}
...

Finally, we will need a single event function addVariantToCart for the cart to work with this products component. Again, for reference, here is the original, vanilla React local state version of addVariantToCart(again, from the shopify example repository):

addVariantToCart(variantId, quantity){
this.setState({
isCartOpen: true,
});const lineItemsToAdd = [{variantId, quantity: parseInt(quantity, 10)}]
const checkoutId = this.state.checkout.idreturn this.props.client.checkout.addLineItems(checkoutId, lineItemsToAdd).then(res => {
this.setState({
checkout: res,
});
});
}

and the new, Redux-friendly store.dispatch() version:

addVariantToCart(variantId, quantity) {
const state = store.getState(); // state from redux store
const lineItemsToAdd = [{variantId, quantity: parseInt(quantity, 10)}]
const checkoutId = state.checkout.id
state.client.checkout.addLineItems(checkoutId, lineItemsToAdd).then(res => {
store.dispatch({type: 'ADD_VARIANT_TO_CART', payload: {isCartOpen: true, checkout: res}});
});
}

which is of course the one we will use. ?

Don’t forget to bind it in the constructor:

this.addVariantToCart = this.addVariantToCart.bind(this);

Also, you’ll need to connect this component to the store like you did App.js , and import the store:

import { connect } from 'react-redux'
import store from '../store';

at the top, and (assuming the component where you put the Shopify Product component name is GenericProductPage:

export default connect((state) => state)(GenericProductsPage);

at the bottom.

Great! Now, no matter how deeply buried in components, or wherever your products component is declared, it can communicate with the cart’s state!

Final BONUS Example: Cart in Your Header or Nav

If you want to have a ‘Cart’ button in your header / nav, add this button in your Nav component’s render function (again, an example from my current site, which has Bootstrap styles — a very simple version is in the boilerplate example:

<div className="App__view-cart-wrapper">
<button className="App__view-cart" onClick={this.props.handleCartOpen}>
Cart
</button>
</div>

where handleCartOpen is a new handler method you’ll have to add to App.js:

constructor() {
super();
...
this.handleCartOpen = this.handleCartOpen.bind(this);
...
}

in the constructor. Then when you are referencing your Nav component in App.js (or wherever you place your Nav) you pass the function handler:

<Nav handleCartOpen={this.handleCartOpen}/>

This could also be refactored to an event in Redux, but since it was only one child down, I did it the vanilla React way.

Styling Component(s)

I relied on Shopify’s CSS file, app.css, located in the shared/ folder in the storefront-api-example repository (you can’t miss it, it’s the only file in shared/ )!

Make sure to copy that into your styles/ folder or wherever it needs to be and include it in your index.js file. In my index.js it looks like this:

import './styles/shopify.css';

Since I renamed the app.css which was in the Shopify example repository to shopify.css , and put it folder styles. This convention is also used in the boilerplate repository code.

From here it’s pretty easy to identify where exactly in shopify.css the default bright blue color for the buttons is defined, and so on. I’m going to save detailed CSS customization for you to handle. ?

But who knows, maybe I’ll post on that eventually — but I find the styles from Shopify pretty good and easy enough to modify.

Takeaways

In my opinion, this is a perfect (non-todo list ?) use of Redux. Redux cleanly organizes the event functions and state of the Shopify cart and makes it easy to access the cart’s state from any other component. This is much easier to maintain than passing pieces of state to children and using multiple event handlers to pass events back up to parent functions all over a React app.

As shown as an example in the tutorial, the cart’s state is accessed easily in the Nav component and the shop section of the front page. I’ll also be able to easily add it to a sort of ‘featured’ product section as well, once Siren Apparel is ready for that.

Find the Code

A boilerplate repository of this implementation can be found here. It is a near blank create-react-app app, but with all the changes of this tutorial implemented in index.js and App.js , as well as a super basic GenericStorePage and Nav components.

I built the code on the repo while re-reading and updating my own tutorial here, to make sure this tutorial makes sense!

Because I am crazy ?, Siren Apparel’s website is all open-sourced. So if you want to fool around with my implementation, check out the repository!

I hope you enjoyed this tutorial! If anything isn’t clear or just plain not working, let me know! I’ll try to assist you!

Thanks to Lisa Catalano at CSS-Snippets for the simple Nav example which I used in the boilerplate repository!

Cheers! ?

Chris

Why build a Shopify App?

I have always been excited about how the e-commerce market is growing, and have made various attempts to dive into this world. About five years ago, a partner and I built an e-commerce website selling and delivering flowers, a soft toy, and a greeting card packaged together as a gift. This was an idea validation attempt, and we didn’t take it seriously. So it ended soon.

Later, we tried to sell floor tiles (partnering with a guy who had worked in that area for several years) and it didn’t go well, either. Mostly, the reason was the same: it was a side project for us, and we knew nothing about the floor tile market.

But, during this time, we developed a lot of e-commerce websites for our agency’s clients. Most of these websites were built using Ruby on Rails and specifically Spree. And this direction was successful — we learned a lot about e-commerce website development and typical development problems (as well as marketing, shipping, and different business problems).

This year I’m working with a new partner who had good experience with the Shopify platform. We talked a lot and came up to an idea of developing a Shopify app. This platform is growing fast, and there’s a big demand on the market for extending platform possibilities.

Building a product, rather than doing custom development for someone, was exciting for me, too. So these two things — e-commerce and product development — have naturally combined into the idea of a Shopify app.

Understanding app building complexity

So you’ve come up with an idea for your application. Now you need to decide if your app will interact with merchants’ storefronts by extending templates or injecting some scripts. Or maybe you need to work with some third-party API and integrate it into your app, or extend a Shopify Admin.

Each part can be complex enough. So if you just need to do something with Shopify store data and output something in the Admin section, you are dealing with 1 type or 1 point of complexity. If you need to work with external APIs and still have some section in Admin, you have 2 points of complexity. And so on.

Start development with a boilerplate

Well, we can see that our app is quite complex (though for customers it looks like an easy one). Since we agreed on app idea and initial MVP, I started to research and found that Shopify has a great shopify_app Ruby gem.

This is a pretty cool stuff that saves you a lot of time: it generates for you a Shopify app framework without the need to setup OAuth flow manually. Other things to note:

• Generated Shop model
• Simple Webhooks and ScriptTags registering
• Authentication approaches
• App Proxy verification (for your storefront customizations)

I’ve launched a blank app in minutes, not hours.

Use recommended tools

Next, I have researched how to approach Admin UI in your app. I found out that Shopify simplifies this task for you as well with the power of their design framework Shopify Polaris.

Polaris is a React.js components library, and this is the recommended way for extending the Shopify Admin section. Your app will look like a native Shopify app with admin sections like “Products” or “Orders” (Shopify uses it too, I guess).

You should use it instead of some custom theme, because it’s well documented, supported, and has guidelines.

Extending Shopify Admin

After a successful installation of Shopify Polaris into the project with the help of Webpacker or Yarn, you’ll be able to extend the Shopify Admin section.

For the welcome page (one that merchants will see after app installation with no data set up yet), then you’ll do these things:

• Add a route:

get ‘/welcome’ => ‘home#index’

• Create a Rails controller:

class HomeController < BaseAuthenticatedController def index endend

• Add a view template that just renders React component with the help of react-rails gem:

# home/index.html.erb<%= react_component("Welcome", {  apiKey: ShopifyApp.configuration.api_key,  shopOrigin: "https://#{ @shop_session&.url }",  debug: Rails.env.development?,  forceRedirect: !Rails.env.development? && !Rails.env.test?}) %>

• Create a React component that renders some Shopify Polaris components (like EmptyState, for example).

The first step is quite clear for everyone who’s ever worked with Ruby on Rails. The second step should be as well, except the fact that you need to inherit your admin controllers from ShopifyApp::AuthenticatedController so every request will be authorized. I’ve created a subclass of this class for all future admin controller classes.

The third step is about rendering. I’ve installed the react-rails gem which comes with a nifty react_component helper, and I’ve added a rendering of a welcome component passing all necessary properties. For Embedded Apps (those that extend Shopify Admin) you should pass at least apiKey and shopOrigin options to utilize embedded components coming with Shopify Polaris. These embedded components are just React wrappers around the Shopify Embedded App SDK.

And finally, I’ve written a Welcome component and placed it into the app/javascript/components folder according to config/webpacker.yml.

Note that I’ve extracted some boilerplate, like the definition of shopOrigin and apiKey properties, into the BasePage component which is going to be a parent component for each app page. InfluencifyApp is a component that renders the Polaris AppProvider component, Page, inside it, and any children with {this.props.children} inside the Page.

With this setup, I’ve created other components with InfluencifyApp as a root component for each app page.

Storefront customization

There’s a good option in Shopify that allows you to customize a merchant’s storefronts: Script Tags. They are JavaScript files that will be injected into the storefront template.

You can register them easily using the shopify_app gem. Here is how I’ve registered a script for Influencify app (at config/initializers/shopify_app.rb):

# to include asset_url helperinclude ActionView::Helpers::AssetUrlHelper...config.scripttags = [    {event: 'onload', src: -> (domain) { asset_url('influencify.js', host: ENV['APP_DOMAIN']) } }]

Note that your scripts should be publicly accessible for all merchants across any of your deployments. I mean in terms of Rails, you shouldn’t have a digest in your script’s filename like influencify-dd432js....js , but instead, put the compiled version into a public folder or upload to CDN.

The second option is that you can have entire pages or parts of pages served by your app. That is, in case you need to display something or fetch some data from your injected script, you can register which URLs for merchants will be served by your app. This feature is known as Application Proxies. Again, to implement this in your app is way easier with the help of the shopify_app gem — just follow their guides.

Testing

Testing a Shopify app may be a little tricky, but it’s familiar for anyone who’s ever worked with third-party APIs and tested via tools like localtunnel or ngrok. So each time you’re going to test your app, just launch your favorite tunneling tool and update the “Whitelisted redirection URL(s)” field on your app settings page with a URL to your authentication callback that looks like this: [https://myapp.localtunnel.me/auth/shopify/callback](https://myapp.localtunnel.me/auth/shopify/callback).

To test your App Proxies endpoints for storefront customizations, you need to update this URL setting as well under the “Extensions” section.

Of course, to test an app you also need a test development store.

Deployment

There’s nothing special about deployment, since this is just a regular Ruby on Rails application. I’ve deployed my app to the Heroku platform with the Puma and Sidekiq processes specified via the Procfile.

Also, you need to set the environment variables that you are going to use in your app via ENV['SOMETHING'].

One more thing to notice is I’ve added a Node.js buildpack, because had issues with building via Webpack:

git:(master) heroku buildpacks     === influencify Buildpack URLs1. https://github.com/heroku/heroku-buildpack-ruby2. https://github.com/heroku/heroku-buildpack-nodejs

Going further

Well, as you can see, building an app the way it’s recommended by Shopify includes many different steps, and it may turn out to be a complex task for a non-experienced developer.

Of course, building an app is only the tip of the iceberg. The next steps in a Shopify app building venture are making good promo materials, submitting it to the App Store, marketing, and customer support/development after it has been approved.

If you liked this post, please click on ✋ to spread the word.