Code Shopify About

Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

Sign up for Shopify

Setting Up a Shopify Embedded App with Rails

Wednesday, Jan 23, 2019

Shopify embedded apps are a wonderful way to extend the functionality of your store and provide a seamless experience for the vendor. In this post we will go over how to set up a private embedded app with Ruby on Rails and add it to your store.

1. Create a New Rails Application

In a terminal window navigate to the directory where you want to store your app. To generate your app run with appname being the name of your app:

rails new appname

then go into the root directory of your app

$ cd appname

2. Add the Shopify App Gem

Shopify has made it easy to set up your app environment with their gem.

With your app open in your favourite text editor find your Gemfile and add the shopify_app gem.

gem 'shopify_app', '6.2.1'

In your terminal run

$ bundle install

3.Set up your app with ngrok

In order to properly preview and run our app as an embedded Shopify app within our local environment we need to set up a public url with an ssl certificate (https). We're going to use a tunneling service called ngrok.

Follow the steps below to install and run ngrok:

  1. Download ngrok
  2. In your terminal cd to the location where you downloaded ngrok
  3. Start up the ngrok process ngrok http 3000. This will create a tunnel to your rails app running on localhost:3000.

Once you've started up ngrok it will give you a temporary public url for your app, something like:

4. Create an App in Your admin Panel

** This assumes you have set up a Shopify Partner Account, if not head here.

In your Shopify Partner admin select Apps > Create a new app

Give your app a name

Enable the Embedded App SDK under Embedded Settings.

As we start out we will be developing our app locally, so under App URLs set the Application URL to the ngrok tunnel URL you just set up (this is likely something like

Set the Redirection URL to

Make sure to read and accept the developer terms, then hit create app!

5. Run the Default Generator

In your terminal run

$ rails generate shopify_app --apikey your_api_key --secret your_secret

The api key and secret are generated in your Shopify Partner Admin when you create your app

Under db > migrate in your rails app check out the create shops migration. It should look something like this:

class CreateShops < ActiveRecord::Migration
  def self.up
    create_table :shops  do |t|
      t.string :shopify_domain, null: false
      t.string :shopify_token, null: false

    add_index :shops, :shopify_domain, unique: true

  def self.down
    drop_table :shops

Then in your terminal run:

$ rake db:migrate

Still in the db directory check out the newly generated schema.rb. This will show your shops table.

In your terminal start up your rails application by running

$ rails s

Head to http://localhost:3000/ and you should see a screen where you can input the shop name to connect your app.

6. Set Up Environment Variables

In order to authenticate our app we need to include the api key and secret, but we want to make sure that these are not publicly available. To do so we will use the rails dotenv gem.

In your gemfile add:

gem 'dotenv-rails'

In your terminal run

$ bundle install

In the root of your project create a new .env file. Make sure to include this file in your .gitignore so you do not push your private keys public later.

In your .env file add:


In the config > initializers > shopify_app.rb file add the reference to your api_key and api_secret environment variables. It will look something like this:

ShopifyApp.configure do |config|
  config.api_key = ENV['api_key']
  config.secret = ENV['api_secret']
  config.redirect_uri = "http://localhost:3000/auth/shopify/callback"
  config.scope = "read_orders, read_products"
  config.embedded_app = true

7. One last configuration

To allow the app to work as an embedded app you need to make sure this setting is enabled. Back in your partner dashboard navigate to the apps and select the app you just created. Navigate to extensions and make sure 'Embed in Shopify' admin is set to enabled.

7. Voila Your App!

start the server and head back to http://localhost:3000/. Type in the URL of your shopify store and hit install. If all goes as planned you will be redirected to your shop where you can finish connecting the app!!

** Hint: if you kept the server running and are getting an error try restarting and hitting install again :)

more posts