How to Connect Your Ruby on Rails App to the Shopify API

Photo by Álvaro Serrano on Unsplash

The Shopify API can be a bit intimidating on first glance. There is a lot to learn in terms of creating a Shopify application — should your app be public or private? Embedded or not? What is the difference between a Shopify store and a Shopify app?

It took me longer than I care to admit to get off the ground with building my Ruby on Rails application and integrate it with the Shopify API. Hopefully this guide will help you hit the ground running!

Creating Your Shopify Store

First, you will need to log in to Shopify (or create an account, if you don’t have one yet) and create a store. Although production stores require payment, it is free to make a development store. Call your store whatever you’d like — for this tutorial, I’m making a store run by my dog, Stella, stocked with her favorite snacks.

You will want at least a few dummy products to work with while making your application. Under the “home” tab (on the left side of the screen), you will see an option in the center of the screen to add products. Add two or three by filling out information such as the title, price, and add an image if you’d like.

Click the purple “Add Product” button to add a product

Create an App to Accompany Your Store

In the Shopify world, an “app” and a “store” are two distinct entities — a store is a management system that tracks your inventory, and an app is a program that will actually let you or your customer view your products. You can create an app associated with our new store by clicking “Apps” at the bottom of the menu on the left. Doing so will bring you to a page that looks like this:

On this screen, you’ll see numerous applications that, when connected to your store, can add useful functionality. For now, though, we’re going to focus on hooking up our own app.

Click on “manage private apps” toward the bottom of the screen. This will bring you to a dashboard of the private applications you have associated with this store — at this point, there probably aren’t any. Click the purple “Create a new private app” button.

You will need to fill out the information, but since it can all be changed later, there isn’t anything super important here.

The one important step is to make sure you check off the box that says “Allow this app to access your storefront data using the Storefront API.”

This setting is what will eventually allow your app to make requests for data to your store’s product information.

Your Application’s Credentials

Creating this private app will generate the following:

• An API key
• A password
• A shared secret

These three strings will be necessary for us to compose a URL to which our application will make requests.

Our Rails Back End

This tutorial is going to assume familiarity with Ruby on Rails. If you aren’t familiar with Rails, I suggest checking out this video from FreeCodeCamp.

Generate your rails app (in this case, an API only) with the following command:

$ rails new <your app name> --api 

In your Gemfile, you will need the following Gems:

#to allow us to hide our API key and password in a .env file:
gem 'dotenv-rails'
#to allow us to easily make requests to Shopify's REST API
gem 'rest-client'
#to make cross-origin AJAX possible
gem 'rack-cors'

Run the bundle command to install all gems.

Getting a List of Our Products in Our Rails App

First, get your API key and password from your Shopify App dashboard. If our code will be on GitHub, we want to keep these private. The dotenv-rails gem allows us to do this by keeping them stored in variables in a file called “.env” in the root of our directory.

Here is the code we need to do this:

#in config/application.rb :
Dotenv::Railtie.load 
#in a new file called .env:
SHOPIFY_API_KEY=<copy and paste your key here>
SHOPIFY_API_PASSWORD=<copy and paste your secret here>

You will also want to add .env to your .gitignore file.

Now, make sure you have a root to your index in config/routes.rb:

get '/products', to: 'products#index'

Any time our front end makes a “get” request to “/products”, this will route it to an action called “index” in products_controller.

class ProductsController < ApplicationController
  def index
  end
end

We will be putting our call to our shop’s storefront API in the index action and rendering JSON that our frontend can take to present visually as we wish.

The trickiest part of this is composing the URL to fetch data from. Shopify tells us that the format is like so:

https://{apikey}:{password}@{hostname}/admin/api/{version}/{resource}.json

We will interpolate the apikey and password from our .env file. “Host name” refers to your development store’s url, which is your-shop-name.myshopify.com.

Our code will look like this:

#in app/controllers/products_controller.rb :
class ProductsController < ApplicationController
  def index
    products = RestClient.get("https://#{ENV['SHOPIFY_API_KEY']}:#{ENV['SHOPIFY_API_PASSWORD']}@your-shop-name.myshopify.com/admin/api/2020-01/products.json")
    render json: products
  end
end

Please note that “2020–01” in the URL above should be replaced with whatever Shopify API version you are using — this information is available in the same place in the dashboard as your API key and password.

You can browse the Shopify REST API documentation for other URLs to get information from.

The RestClient gem also lets us send post, patch, and delete requests to various API URLs. Additional information (such as new product information in a post request) would be added as a second argument to RestClient.post, formatted in a Ruby hash.

More code available on my GitHub

More code is available in my GitHub repo here, but please note that this a project I’m currently working on, so it may not be perfect!

Please don’t hesitate to reach out with comments and suggestions!

About me:

I’m a teacher turned full stack developer with skills in Ruby on Rails, vanilla JavaScript, Node.js, and React.js. I’m on the hunt for a junior software engineer position — connect with me at nicoledow.com !