Installing a Drupal Site as an App in a Shopify Store

In this post, we will feature a combination of two awesome platforms that we use at Twel. We have been solving our clients' challenges for years using Shopify and Drupal, and today we will show you how to integrate them.

For this tutorial, you will need a Composer-managed Drupal Site set up on Pantheon. When creating a website on Pantheon, you should select the “Drupal with Composer” option.

At this point, you should have your Drupal Site set up on Pantheon. This will allow your site to be set up as a Shopify App. For this, we will need API communication between Shopify and our site so that we can install it as an app.

1. First, download this ZIP file.
2. Extract the files to the web directory on your Drupal Site project.
   
   
3. Now we need to create an app in the Shopify Partner portal. Go to Apps on the sidebar and click the Create app button.
   
   
   
   In this case, We’ll create a custom app, but you can create a public app as well.
4. Set up the App URL and Redirection URLs as your Pantheon Drupal site dev URL. Note that in the Redirection URLs field, you should insert the path to the generate_token.php and install.php files.
   
   
5. Before we install our app in a Shopify Store, we need to make some changes to the files we extracted.

• On the install.php file:
  • Change the $api_key variable for the one generated when you created your app. You can get it in the Shopify Partner App section.
    
  • At the $scopes variable, we’re going to leave it the way it is. It sets the access that your application will have, so you can change it as needed. For example:
    
    
  • Change the $redirect_uri variable to your Pantheon Drupal site URL plus generate_token.php:
    
    
• generate_token.php file
  • Update the $api_key variable for this file too. You can get it from the install.php file that we changed before.
  • On the $shared_secret variable, insert the API secret key that can be found below the API key on the Shopify Partner App section.
    
    
  • On line 44, there is a code to show the access_token after the installation. For testing reasons, we'll leave it that way, but in a production environment, we’ll need to remove it.
    
    

    Push all those changes to your Pantheon website.

Installing the App

Finally, we’ll properly install the App on a development Shopify Store!

1. For that, you’ll need to open your browser and type your Pantheon Drupal Site dev URL (eg. dev-test-drupal-app.pantheonsite.io) plus the install file path at the end of the URL (/install.php?shop=your-shop-name). Don’t forget to put your shop’s name without .myshopify on the URL of your store. It will  look like this:
   
   dev-test-drupal-app.pantheonsite.io/install.php?shop=test-twel-store
2. The page below will open. You’ll then just have to click on the Install app button:
   
   
3. Then a page containing the access key will be shown. You need to keep this key if you want your app to communicate with Shopify by API calls, although we will not cover that in this tutorial.

Open the Drupal Site Page from the Shopify App Section

Now we want to open our Drupal Site homepage through our Shopify Store since we have installed our app on it.

1. For that, we’ll disable the Embedded app option for our Shopify App. Go to your App through the Shopify Partner App section and then go to App setup.
   
   
2. Go to the Embedded app section and then click on the Manage button.
   
   
3. Click Disable in the Embed your app in the Shopify admin section.
   
   
4. Then go to the Apps section on your Store sidebar and click on your app name.
5. It will open your Drupal Site!

Congratulations! You have set up your Drupal Site on Pantheon to be opened as an App in your Shopify Store.

_{References
Part 1 - Shopify App Development - Introduction to Building Shopify Apps from Scratch Using PHP}