Start building your first Shopify app

ByAdam

Start building your first Shopify app

There is a myriad of benefits that Shopify apps bring to retailers. It is certainly one of the strongest tools that helps increase the store’s sales volume, enhance customer experience, foster customer trust and many more.

With those powerful offerings, Shopify apps have been widely used by hundreds of thousands of merchants all over the world. Thus, entering this ecommerce app marketplace, or, becoming a Shopify developer perhaps is one of the best ways to make huge money online.

Creating a Shopify app, however, is not an easy process. I don’t want to panic you by the complexity of app building that I’m going to address but you need to understand it so that later on, we can go through it together.

Determining how your app will interact with merchants’ storefronts perhaps is the hardest thing. Whether you need to extend templates or inject some scripts, work with third-party API, or extend a Shopify admin, none of these parts is easy to handle. The more parts you have to take, the more complicated the process is.

Don’t be worried. Complexity can be mitigated, all you need to do is following our guide below: 

Start with using a boilerplate

After researching, I found that Shopify has a great shopify_app Ruby gem which can saves you a lot of time. No need to setup OAuth flow manually, this cool stuff will create a Shopify app framework for you. Its other offerings include: Generated Shop model, simple Webhooks and ScriptTags registering, authentication approaches, app proxy verification.

I’ve created a blank app just in minutes and I bet you can, too.

Utilize recommended tools

Approaching Admin UI is simplified with the power of Shopify Polaris. Using this React.js components library is the suggested way for extending the Shopify Admin section. It has sections like “Products” and “Orders” which makes your app looks like the Shopify native apps.

Comparing to custom themes, this recommended tool is better documented, supported and has guidelines. 

Extending Shopify Admin

Once you have successfully installed Shopify Polaris with the help of Webpacker or Yarn, it’s time to extend the Shopify Admin section.

Now, for the welcome page, you need to do as following:

First, add a route:

Next, you need to create a Rails controller:

Then, add a view template that just renders React component with the help of react-rails gem:

Finally, you need to create a React component that renders some Shopify Polaris components. There are three steps:

The first step is quite clear if you have ever worked with Ruby on Rails. The second step is as well, one thing to note is you need to inherit your admin controllers from ShopifyApp::AuthenticatedController so every request will be authorized. Here is how I created a subclass of this class for all future admin controller classes.

The third step is 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.

Customize Storefronts

In Shopify, you can use Script Tags to customize a merchant’s storefronts. Script Tags are JavaScript files that will be injected to the storefront template. You can use the shopify_app gem to register them easily.

I want to register a script for Influencify app (at config/initializers/shopify_app.rb), so I’ll write this command:

Note: Your scripts should be publicly accessible for all merchants across any of your deployments. You shouldn’t have a digest in your script’s filename like influencify-dd432js….js , instead, put the compiled version into a public folder or upload to CDN.

Another easier option is 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 and you can install it into your app by following their guides.

Testing

For those who are new to third-party APIs and testing via tools like localtunnel or ngrok, you can 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.

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

When testing an app, it requires you a test development store.

Deployment

There isn’t much to note about deployment.

Just remember to set the environment variables that you are going to use in your app via ENV[‘SOMETHING’].

One more thing to notice is Node.js buildpack is added, because there are issues with building via Webpack:

Now that we’ve walked through all the steps, you can see that building an app is not an easy task, especially for those who are non-experienced. However, experience is what can be gained through time, so brave yourself to learn new things, make your great effort and you won’t know how “experienced” you can be!

About the author

Adam administrator

Leave a Reply