Shopify

Shopify

By Jumayel Islam

About● one of the best designed and most feature-packed of the cloud-hosted ecommerce

solutions

● amazing platform for building an online retail business

● Currently 275,000 stores use the platform

● it's a hosted solution, which means Shopify host your shop on their servers

● You don't have access to the back-end code but you can still massively customise your shop via configuration, 'apps' or by customising your theme

Benefits1. Responsive Website

- Free/Premium themes available

- Liquid is Shopify’s proprietary language to build custom themes

2. No Tech Worries

- provide faster and more secure hosting than you can do on your own

- don't have to worry about scalability

- fully PCI compliant

- use of caching, CDNs and other techniques by Shopify

- backed up on a regular basis

Benefits(Cont.)3. 24/7 Customer Support

4. Easily add powerful features from App Store

- third party apps that can add functionality to your store

- Apps can be developed using Ruby on Rails

5. Import Large Product Catalogues Quickly

6. Plenty of Payment Gateways to Choose from

7. Minimal set up effort/cost

8. Easy to use admin screens including order management

9. No hardware/hosting worries

10. Access to a superfast platform, beneficial for user experience and SEO

Why shopify app?

• Shopify’s API provides an almost unlimited set of possibilities for interfacing the Shopify platform with third-party software.

• Two ways you can make money building apps for Shopify stores

- Create a custom app for a client: Use the Shopify API to build and sell an app that adds features and functionality to a client’s Shopify store.

- Build an app and sell it in the Shopify App Store: You’ll earn 80% of each app sale.

Get Started● Become a Shopify Partner(Free) and create your development store

● Develop and install your app into your Development Store

● Submit to the app store

Prerequisites

• Create a new application in your partner account

• Set the Application Callback URL to:http://localhost:3000

• Set the Application redirect_uri to: http://localhost:3000/auth/shopify/callback

Shopify app store (GET)

Localhost (authenticate)

Shopify Admin (Permission)

Localhost (Install app, make api calls)

OAuth (Step 1: Get the client’s credentials)

OAuth (Step 2: Asking for permission)

OAuth (Step 2: Asking for permission - Cont.)

To show the prompt, redirect the user to this URL:

https://{shop}.myshopify.com/admin/oauth/authorize? client_id={api_key}& scope={scopes}& redirect_uri={redirect_uri}& state={nonce}}

{shop} - substitute this with the name of the user’s shop.{scopes} - substitute this with a comma-separated list of scopes. For example, to write orders and read customers use scope=write_orders,read_customers.{redirect_uri} - substitute this with the URL where you want to redirect the users after they authorize the client.{nonce} - a randomly selected value provided by your application, which is unique for each authorization request.

OAuth (Step 3: Confirming installation)

When the user clicks the Install button in the prompt, they will be redirected to the client server

One of the parameters passed in the confirmation redirect is the Authorization Code

https://example.org/some/redirect/uri?code={authorization_code}&hmac=da9..08985&timestamp=1409..6174&state={nonce}&shop={hostname}

OAuth (Step 3: Confirming installation - Cont.)

The authorization code can be exchanged once for a permanent access token

The exchange is made with a request to the shop

POST https://{shop}.myshopify.com/admin/oauth/access_token

With {shop} substituted for the name of the user’s shop and with the following parameters provided in the body of the request:

client_id :The API Key for the app. client_secret: The Shared Secret for the app. code: The authorization code provided in the redirect.

OAuth (Step 3: Confirming installation - Cont.)

The server will respond with an access token

{ "access_token": "f85632530bf277ec9ac6f649fc327f17", "scope": "write_orders,read_customers" }

access_token is an API access token that can be used to access the shop’s data as long as the client is installed

Create Rails ApplicationWe will use shopify_app gem to get the basic configuration to build our first shopify app

using Ruby on RailsTo get started add shopify_app to your Gemfile and bundle install

$ rails new my_shopify_app $ cd my_shopify_app $ echo "gem 'shopify_app'" >> Gemfile

$ bundle install

Run generator

$ rails generate shopify_app --api_key <your_api_key> --secret <your_app_secret>

The default generator will run the install, shop, and home_controller generators. This is the recommended way to start your app.

Now you will need to configure few things in shopify_app.rb file in my_shopify_app/config/initializers directory.

Configure Initializerscope - the Oauth access scope required for your app, eg read_products, write_orders. Multiple options need to be delimited by a comma-space. Ex:

config.scope = 'read_orders, read_products, write_products, read_themes, write_themes'

embedded - the default is to generate an embedded app, if you want a legacy non-embedded app then set this to false. Ex:

config.embedded_app = false

● This generator creates a simple shop model and a migration.● This generator also creates an example home controller and view which fetches and

displays products using the ShopifyAPI. You can later modify it according to your need.

Mounting the Engine

Mounting the Engine will provide the basic routes to authenticating a shop with your custom application. It will provide:

Verb Route Action

GET '/login' Login

POST '/login' Login

GET '/auth/shopify/callback'

Authenticate Callback

GET '/logout' Logout

POST '/webhooks/:type'

Webhook Callback

Mounting the Engine(cont.)

The default routes of the Shopify rails engine, which is mounted to the root, can be altered to mount on a different route.

The config/routes.rb can be modified to put these under a nested route (say /app-name) as:

mount ShopifyApp::Engine, at: '/app-name'

This will create the Shopify engine routes under the specified Subdirectory, as a result it will redirect new consumers to /app-name/login and following a similar format for the other engine routes.

Shopify APIShopifyAPI uses ActiveResource to communicate with the REST web service. ActiveResource has to be configured with a fully authorized URL of a particular store first. To make authenticated API requests you need to set the base site url as follows:

shop_url = "https://#{API_KEY}:#{SHOPIFY_TOKEN}@#{SHOP_URL}/admin" ShopifyAPI::Base.site = shop_url

API_KEY: This is the key generated when you created your app in partner’s account.SHOPIFY_TOKEN: This is the token stored in your shop table when the app is installed for a particular shop.

Shopify API(cont.)shop = ShopifyAPI::Shop.current

"shop": { "id": 690933842, "name": "Apple Computers", "email": "[email protected]", "domain": "shop.apple.com", "created_at": "2007-12-31T19:00:00-05:00", "province": "California", "country": "US", "address1": "1 Infinite Loop", "zip": "95014",

… … … … … ...

}

Shopify API(cont.)

products = ShopifyAPI::Product.find(:all)

ShopifyAPI::Webhook.create({ topic: 'orders/create', address: [ENDPOINT_URL], format: 'json' })

themes = ShopifyAPI::Theme.find(:all)

asset = ShopifyAPI::Asset.find('templates/cart.liquid', :params => {:theme_id => main_theme_id})

WebhooksCart carts/create, carts/update

Checkout checkouts/create, checkouts/delete, checkouts/update

Order orders/cancelled, orders/create, orders/delete, orders/fulfilled, orders/paid, orders/partially_fulfilled, orders/updated

Product products/create, products/delete, products/update

Shop app/uninstalled, shop/update

Theme themes/create, themes/delete, themes/publish, themes/update

API Referencehttps://help.shopify.com/api/reference

Popular Shopify AppsBetter Coupon Boxoffer site visitors a discount coupon if they follow social accounts or subscribe emails for newsletter.

Stores installing this app with a view to rocketing followers for their Facebook / Twitter accounts and growing email list to sell much better with email marketing.

Quick Facebook Live Chatallows your customers to send messages to your Facebook page inbox right on store.

Then, you can chat with them via inbox as Facebook friends and turn them into your paying customers.

Your conversation history with customers are forever saved with Facebook messenger. No more emails exchange for customer support,

Thank You