If you are a business owner who wants to set foot in the eCommerce market, you have plenty of ways to initiate. Shopify App is the primary preference for many as it establishes a website and offers tools for marketing and product hunting. However, you should also know that you can develop an eCommerce app with your favorite programming language. Shopify’s GraphQL and REST API integration allows you to utilize the best PHP frameworks such as Laravel for website development.
Shopify Laravel package, integrated with Shopify stores, produces remarkable results. Laravel has various syntaxes for tasks, while the Shopify app offers control and management. Read on to understand how to create a Shopify app with Laravel and integrate it into your store for maximum results.
Key Takeaway
- Understanding Laravel and Shopify
- How can you integrate Laravel with Shopify App
- Process to develop a functional app using Laravel
- How Does Shopify Integrate with Laravel?
Introducing Laravel and Shopify App
Laravel is a popular PHP framework that makes development streamlined with a set of syntax, unlike other PHP development structures. Laravel makes development easy by simplifying common tasks such as authentication, caching, routing, and sessions.
Shopify App is an add-on feature for stores that allows control and management. Shopify App offers various API integrations to create eCommerce applications and find products to sell. Shopify offers two types of apps:
- Public: Submitted and utilized by different Shopify stores. You need to claim a Shopify partner account to submit apps to the Shopify App Store.
- Private: Private apps can be used by multiple stores, and anyone can set up the app with a few easy steps.
Why Use Laravel for Shopify App Development?
Laravel development services prefer this framework due to its easy interface and the ability to integrate with other languages or services. On the other hand, Shopify offers a balance between user experience and customization with featured apps and marketing tools. Shopify creates effective eCommerce stores for users (whether new or seasoned vendors) without having any coding experience.
Laravel Shopify combines the features of Shopify with the coding effectiveness of Laravel on a single control center. It allows Shopify merchants to sync their stocks and manage their stores from any device.
Additionally, Shopify gives web-hosting services also, so you do not need any third-party service for the task. Laravel web development company can easily integrate everything you need to run a successful store and scale it accordingly.
Reasons to Use Laravel for Shopify App Development
Laravel has many benefits for developers to create functional and effective web applications. Some of the primary reasons many Shopify development services prefer integration using Laravel are as follows.
Scalable
Since Shopify offers software and a hosting facility, you do not need any technical expertise to set up a basic Shopify store. Not only does it make the process less demanding, but it also has speedy hosting compared to other third-party services. You can do much more with its features and tools and scale your business effectively. Stored developed using the Shopify Laravel package gives an all-in-one activity to control and manage spikes and updates as necessary for business growth.
High Security
Security of personal information is a sensitive part of online business that both Laravel and Shopify take into consideration. While running an eCommerce store, you have personal and financial information to manage and secure to earn customer trust. One of the most significant advantages of the Laravel Shopify app is the guarantee of support and updates to keep the store secure and accessible. SSL certificates and PC compliance ensure that all the information passes through a secured connection during processing.
Customization
Customization is a feature that makes Shopify a preference for new and existing eCommerce business owners. Shopify offers more than 160 themes and templates that a mobile app development company in Houston uses to create versatile and responsive Shopify apps. Developers can alter the codes to design a theme that fits well with the brand identity and layout.
Availability of Marketing Tools
Marketing is the key source of bringing leads and revenue to an eCommerce store, and it is useless if you have a great app and website but no visitors. Shopify has many SEO and marketing tools that make marketing easy when integrated with Laravel. Shopify’s SEO allows your store app to rank higher in search engines and attract a targeted audience. It also gives you analytics tools to make a business decision based on the statistics and tailor b2b eCommerce marketing strategies accordingly.
You receive social media marketing integration, email promotions, product audits, and many other marketing tools you can use in Laravel development.
Shopify Payment Gateway
Shopify payment gateway is a fund management system included in the plan. Shopify users can combine this feature in their Laravel app or website with other best payment gateways. The gateway, powered by Stripe, gives you the benefit of the lower expense of a credit card and does not need a merchant account.
Customer Support
Shopify offers 24/7 customer support that you can also receive when integrating with Laravel. Shopify has a responsive support and communication system through calls, chats, or emails.
Side Note: Since Shopify offers all these features, integrating them with Laravel gives business owners the best of both applications. A professional Laravel development company such as Clickysoft makes the best use of these features to make your store effective and successful.
How to Create a Shopify App with Laravel - Development Process
Creating a Shopify app using the Laravel PHP framework requires users to follow a step-by-step process. The following guidelines will give you an understanding of each step to make an effective and functional Shopify app.
Installing Laravel
The first step of the process is to install the Laravel framework. Installing Laravel also has a few steps to consider. We will list these steps with the commands for you (we assume you have an idea of working with Laravel to some level). Note that the installation process takes time, and you need to ensure every code is correct, or you will get error messages.
- Create a new Laravel project with the command line “laravel new <project name>” or “composer create-project laravel/laravel /path/to/your/project” if you have created a pathway for your new project
- CD into the project directory, for instance, cd shopify_app if your project name is Shopify App
- Load the packages using terminal/CMD with command lines
composer require osiset/laravel-shopify
php artisan vendor:publish --tag=shopify-config
- Use valet park to combine valet server and your app
- Add SSL certificate with valet secure add-on
- The app will now be available at the: https://<app-name>.test
- Next, go to the project folder and navigate to the file shopify-app.php. Find “api_scopes” where you can set all the necessary Shopify API scopes
- Navigate to web.php and start editing the routes. Replace the existing routes with the following code to add middleware to the welcome page and make a route toward the login page
Route::get('/', function () {
return view('welcome');
})->middleware(['verify.shopify'])->name('home');
//This will redirect user to login page.
Route::get('/login', function () {
if (Auth::user()) {
return redirect()->route('home');
}
return view('login');
})->name('login');
Next, replace the contents within welcome.blade.php with the following code
@extends('shopify-app::layouts.default')
@section('content')
<!-- You are: (shop domain name) -->
<p>You are: {{ Auth::user()->name }}</p>
@endsection
@section('scripts')
@parent
<script type="text/javascript">
var AppBridge = window['app-bridge'];
var actions = AppBridge.actions;
var TitleBar = actions.TitleBar;
var Button = actions.Button;
var Redirect = actions.Redirect;
var titleBarOptions = {
title: 'Welcome',
};
var myTitleBar = TitleBar.create(app, titleBarOptions);
</script>
@endsection
Edit UserModel file and add the following codes to the current namespaces
use Oset\ShopifyApp\Contracts\ShopModel as IShopModel;
use Oset\ShopifyApp\Traits\ShopModel;
Change class from
class User extends Authenticatable
to this:
class User extends Authenticatable implements IShopModel
Make the following addition of line to class
use ShopModel;
Your updated class will change to:
<?php
namespace App\Models;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Oset\ShopifyApp\Contracts\ShopModel as IShopModel;
use Oset\ShopifyApp\Traits\ShopModel;
class User extends Authenticatable implements IShopModel
{
use Notifiable;
use ShopModel;
/**
* The attributes that are mass assignable.
*
* @vararray
*/
protected $fillable = [
'name', 'email', 'password',
];
/**
* The attributes that should be hidden for arrays.
*
* @vararray
*/
protected $hidden = [
'password', 'remember_token',
];
}
- Start setting your database in the .env file
- Use “php artisan migrate” to migrate everything once completed
Note: When you visit the application and get an error message that says “Osiset\ShopifyApp\Expectations\MissingSHopDomainException”. The error is because of intershop side that we have not set yet.
App Settings for Shopify
After installing the Laravel application, you need to establish app settings for Shopify. It is also a step-wise process with special codes. Follow the guidelines below to set Shopify App.
- Create a new app by logging into your Shopify partner account through: https://partners.shopify.com/1844011/apps/new
- Choose a new name for your app
- Set the URL of the app you created during Laravel installation:
https://<app-name>.test
- Set an authentication redirection to the URL:
https://<app-name>.test/authenticate
- Now, click on “create app” and copy API Secret and key
- Within your Laravel application, add API Secret and API key to the .env file using the code:
SHOPIFY_API_KEY=xxxx
SHOPIFY_API_SECRET=xxxx
SHOPIFY_BILLING_ENABLED=1
- Now you can access your Shopify app at:
https://<app-name>.test/?shop=yourshopname.myshopify.com
Congratulations, you have successfully set Shopify App to integrate with Laravel.
App Routing
The next step to commence Shopify app development with Laravel is App Routing. The Shopify Laravel package expects the existence of a route named home. This route is defined by default with the package that displays a welcome page. You need to open routes/web.php and add a comment for the default Laravel route for “/” to enable routing.
Another option is to make an edit to route /web.php and make a modification to the default route to use the middleware auth.shop with home. Use this code:
Route::get('/', function () {
return view('welcome');
})->middleware(['auth.shop'])->name('home');
Modify the file resources/views/welcome.blade.php to enhance the package layout for Shopify App.
@extends('shopify-app::layouts.default')
@section('content')
<p>You are: {{ ShopifyApp::shop()->shopify_domain }}</p>
@endsection
@section('scripts')
@parent
<script type="text/javascript">
var AppBridge = window['app-bridge'];
var actions = AppBridge.actions;
var TitleBar = actions.TitleBar;
var Button = actions.Button;
var Redirect = actions.Redirect;
var titleBarOptions = {
title: 'Welcome',
};
var myTitleBar = TitleBar.create(app, titleBarOptions);
</script>
@endsection
Installing and Uninstalling Jobs
Laravel uses sync drivers by default to run jobs that run immediately and in synchronization. The Shopify Laravel package installs webhooks and uses jobs defined in the configuration after installing hooks and script tags.
Developers can leave sync drivers, which may lead to slow load times for users. Experts suggest installing Redis to run default config/queue.php, so the jobs that run in the back do not affect the performance at the front end.
Job uninstallation is a default action that deletes a shop. You can use the uninstall job option as an extension or direct.
The process for this action is as follows:
Php artisan vendor: publish – -tag=shopify-jobs (it will place a job in App/Jobs/AppuninstalledJob)
The next step is to enable the job by editing config/shopify-app.php.
The enabled job will look like this:
'webhooks' => [
[
'topic' => env('SHOPIFY_WEBHOOK_1_TOPIC', 'app/uninstalled'),
'address' => env('SHOPIFY_WEBHOOK_1_ADDRESS', 'https://(your-domain).com/webhook/app-uninstalled')
],
],
Next, use the environment for value replacing, such as domains, but you should set the topic to app/uninstalled and the path as /webhooks/app-uninstalled, which allows the manager of webhooks to start working.
Migrations
Laravel developers need to perform migrations using the following command:
php artisan vendor:publish --tag=shopify-migrations && php artisan migrate
Suppose you encounter errors after using the command. There is a high chance that php.ini has not been configured in Laravel and is trying to access the database.
You have to open the .env file in the Laravel project and remove the lines starting with DB_, but you have to keep DB_CONNECTION and change the value to sqlite. This is the database that you have to use.
Next, find php.ini file and then look for the lines starting with the “;” extension and remove the semicolon in these two modules:
extension=pdo_mysql
extension=pdo_sqlite
Once you have completed everything, run the command to perform the migration again. At this point, the database for the Shopify app will be created.
Handle Issues (SSL and Loop)
Laravel is served through HTTP by default, and Shopify requires an application to be served with an SSL certificate. This is an issue that Laravel cannot handle. Many developers present their solutions, such as modifying or changing a code and replacing it with another. However, none of them will work.
We suggest running your server or using ngrok to display the local server and firewalls to the public internet and secured tunnels. After you have achieved the URL from ngrok, you have to replace the URLs present in the Shopify dashboard (Partner App) where you can access the app. After that, you will be redirected to the Shopify App created with Laravel.
An inadvertent or infinite loop is created if you use webhooks for changes and then use API to update those changes.
To counter this issue, you must implement a mechanism to remove the loop. The Shopify forums have various solutions to the issue. However, you need to implement a logic to avoid infinite loop issues or risk reaching API limits to avoid annoying App users.
App Bridging and Legacy Controls
Appbridge is enabled by default and embedded in Shopify App. If a user wants to disable it, they have to set Shopify_APPBRIDGE_ENABLED=0 in the environment to enable legacy mode and skip any other mode.
A point to note here is that the X-frame-options header has to be removed for effective functioning. The package removes this header when responding to Laravel, but it does not work in classes.
add_header X-Frame-Options “SAMEORIGIN”;
How Does Shopify Integrate with Laravel?
The integration process uses the Shopify Laravel package, which saves our time and effort in development. The package brings many updates, although current;y under development, and works best with Laravel applications.
The package handles coding issues, billing, and other Shopify authentications while accessing APIs during the integration process.
The integration process has a few steps that you need to follow:
- Log in to your hosting account
- Create a new Laravel project and create an app on “Shopify Partner Dashboard”
- Select preferred Laravel application (select PHP size, location, website traffic) and server
- Navigate to the PHP stack and get Laravel API Scope and Key
Once completing these steps, you can access the file and config/shopify-app.php
You have to fill app_name, api_key, api_secret, and api_scopes to create functional apps. You can add scripttags and webhooks as per the requirement. Our recommendation is to use .env file for configuration. Add the following keys at the end of the .env file.
SHOPIFY_API_KEY=6e8a2bcdb6e43d8a29c4d6dd60fc8713
SHOPIFY_API_SECRET=********************************************
Update the following scopes in Shopify .config file
/*
Shopify API Scopes | This option is for the scopes your application needs in the API.
*/
'api_scopes' => env('SHOPIFY_API_SCOPES', 'read_products,write_products,read_themes,write_themes,read_orders,read_customers'),
Navigate to the .env file and use the database information obtained from Shopify application management and access. Update some details in the .env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ybgwyumndh
DB_USERNAME=ybgwyumndh
DB_PASSWORD=6C7EVNXtD2
The package identifies the availability of a home page route and characterizes that to display a welcome tag. You have to open routes/web.php and clear out the default route in Laravel application. You can also create your designated route by editing routes/web.php and changing the default route to verify Shopify middleware.
Route::get('/', function () {
return view('welcome');
})->middleware(['verify.shopify'])->name('home');
Alter the resources/views/welcome.blade.php to enhance the package format for Shopify App Bridge capacities.
@extends('shopify-app::layouts.default')
@section('content')
<!-- You are: (shop domain name) -->
You are: {{ $shopDomain ?? Auth::user()->name }}
@endsection @section('scripts') @parent <script>
actions.TitleBar.create(app, { title: 'Welcome' });
</script> @endsection
You may also need to change the Laravel user model found in app.User.php or app/Models/User.php. Open the file and add the namespace:
use Osiset\ShopifyApp\Contracts\ShopModel as IShopModel;
use Osiset\ShopifyApp\Traits\ShopModel;
The next step is to migrate the data using the command:
php artisan vendor:publish --tag=shopify-migrations
It will publish all the migrations in the app folder, and you have to run php artisan migrate to complete the changes. You can access the webpage by selecting the application URL.
Finally, you will be redirected to the Shopify App created with Laravel.
Final Word
Laravel Shopify is only a solitary product and is an all-in-one eCommerce solution. Laravel creates a rich ecosystem that enables the development of functional Shopify apps. Developing Shopify apps using Laravel may be a bit complex and challenging, but it becomes somewhat easy if you know the basics. The mini guide presented will help you in the development process and integrating Laravel API with Shopify.
