Tag Archive for: E-Commerce

How to create a shopify app in 2022

How to create a shopify app in 2022

Shopify made in incredibly easy for you to create a shopify app in 2022. All you have to do is update your shopify cli and run the latest version. You can checkout you shopify CLI version by typing in shopify version in your terminal. If you run version 2.7.3 or higher then you can be sure that the shopify app CLI is available to you.

Now cd into the directory where you want to install your app. Now just type in

this will create a new laravel project. Shopify also provides the ability to create a node.js project or a ruby project right from the CLI!

You might think that you can instantly open your app by typing in shopify app open. But unfortunately that won't work yet. Some configuration is still necessary.

First you have to make sure that your ngrok connection is authenticated. So you will have to create an account and open your dashboard at ngrok. In there you can navigate to your Auth token and copy that value.

Now go back to your terminal and type in

Now your ngrok connection is authenticated. Your shopify application needs ngrok to connect to your shop. Now you can start your app by typing in

This command will automatically start a new tunnel via ngrok and start a local development server.

The CLI will ask you if you want to update your application url. If you have no other reason why you shouldn't update your app url, then click yes.

This step is important, because every time you restart your application you will get a new ngrok-url. This means your local application is now reachable under a new url. That's why you would have to update your app url in your partners dashboard again. But the shopify CLI will do that for you automatically.

Your terminal should now look something like this:

If you press command or ctrl and click on the link in the console then you will be taken to installation window of shopify. That page will look something like this:

If you click on install unlisted app then you should see something like this:

Congrats! You just created a shopify app in a matter of minutes.

How to deploy a Laravel app to Heroku in 10 steps

You’ve made it! You successfully created your shopify app. Now it’s time to deploy it! I want to write a step by step guide about laravel app deployment. We will deploy an app to heroku which is completely free.

there are some prerequisits for you to follow along:

If you have all that set up, then let’s go!

If you don't feel like reading, you can watch all the steps in my video right here:

1. Create a Procfile

Cd into your project root and create a Procfile by typing: touch Procfile
After creating the Procfile add the following lines

The Procfile is a configuration file for Heroku. It helps to specify the commands that are executed by the app on startup.

For example, you can put your app’s web server or worker processes, etc.
For example in my video on how to create scripttags (How to create Scripttags - Shopify App Development for #PHP Developers | L4Webdesign ), I showed you that you need to type php artisan queue:listen to create the scripttags upon installation.

If you take a look at the Procfile, you can see that we are referencing a nginx_app.conf file. We also have to create that and set it up

2. Setting up nginx config file

type touch nginx_app.conf to create the config file. Then paste in these settings:

3. Login to Heroku

To log into Heroku, type heroku login. Your browser will open and you will be redirected to a login page where you can enter your credentials. If everything worked then you’re logged in and you can now use the heroku CLI.

4. Create heroku application

Let’s switch back to our terminal so we can use the heroku-cli. As a side note: we are still at the root of our project.
type heroku create name-of-app. If you don’t put a name for the app, Heroku will create a random name and URL for it.
It should look something like this:

L4-Webdesign-heroku-cli

Now if you go to your dashboard on heroku you can see that your app was created succesully.

If you type in git remote -v then you will see, that heroku has already created a git repo for you.

L4-Webdesign-heroku-cli

Now any time you will push to that repo, heroku will trigger a new deployment.
In this guide we will push to herokus repo directly, but it is also possibe to connect your github account with heroku. That way you can always push to your github repo and it will trigger a deployment as well.

5. Push your code to Heroku

Push your code from the command line just like you would push it to github, but instead of the remote origin, push your changes to the remote heroku branch:

notice the flag --allow-empty This might come in handy at some time, when you want to trigger a deployment, but you haven’t made any changes to your code.

6. Checkout and debug deployed app

Your app should be deployed now, so let’s check it out! go to https://l4-shopify-app.herokuapp.com/ and take a look!
You should now see something like this:

L4-Webdesign-heroku-deployed-app

This is good and bad at the same time. It’s good because the deployment worked but it’s bad because the app is not running yet. In order to see what causes our error, we can add APP_DEBUG=true to our .env file.

Important: when you copy all of your .env files, make sure that you update your APP_URL. Also make sure that you enter the correct values for SHOPIFY_API_KEY and SHOPIFY_API_SECRET. Otherwise the hmac will not be calculated correctly and you will see an error.

There are two ways to set up your .env file. Either on your heroku dashboard, or right on your CLI:

  • Edit .env on heroku Dashboard:
    From your dashboard, navigate to Settings and click Reveal Config Vars.
    Now you can set up all your environment variables.
L4-Webdesign-heroku-config-vars
  • Edit .env on CLI
    If you prefer the CLI you can use the command heroku config:add ENV_CONFIG=value So in this example I could have typed in

    heroku config:add APP_DEBUG=true

    This will give you the same results.
    If you want to add a little vim magic, you could add the command heroku config:add to the beginning of every line (checkout How to insert text at beginning of a multi-line selection in vi/Vim ) and you would have a script to add all of your environment variables.

7. Create Database

If we refresh our app on heroku we will see the following error page:

L4-Webdesign-heroku-error

It says that the connection was refused. That happened because we haven’t set up a database yet. So let’s do this right now.

If you go to Resources you can search for resources for your app. Here you can search for your database. You can chose any database you want, like MySQL, MariaDB, MongoDB. I would recommend to use Heroku Postgres since they provide best offer. Here you can use up to 1GB of storage which I haven’t seen on any of the other databases.

L4-Webdesign-heroku-config-vars

Add this add-on and you will see, that postgres is now attached as your database.

L4-Webdesign-heroku-dashboard

8. Database credentials

In order to set up our database we need setup our database credentials. We will get all of the required properties by typing heroku pg:credentials:url in the command line.

We can now copy and paste all of the credentials to our environment variables. Remember how we did it in step 6a) or 6b) ?

Remember to add DB_CONNECTION=pgsql to your environment variables, since this was not on the output of our terminal.

9. Migrate and seed database

Now it’s time to migrate our database. If you have created a billable app (checkout this video I made: How to set up billing for Shopify apps (as a Laravel developer)) then you will need a database seeder to set up your billing table.

You now have two options to create your migration:

  1. run heroku run php artisan migrate --seed
  2. run heroku run bash -a app-name
    Now you have access to the bash of your app. from there you can now run php artisan migrate --seed as well.

10. Create a public app at shopify dashboard

Set up a public app in shopify. If you don’t know how that is done, then you can watch my video here or read my article.

Don't forget to setup all of the environment variables in your heroku app.

11. You’re done 🎉

Congrats! You deployed your app to heroku!

You should now see your embedded shopify app if you install your app in a development store

How to create a Shopify App with laravel

In this tutorial I want to show you how you can create a shopify app with laravel.

You can either watch the video I recorded

Or you can read the step by step guide and copy all commands right here:

Installation Laravel App

  1. Create new laravel project

    laravel new <project name>
  2. cd into project directory

  3. Load all packages via terminal/ CMD (https://github.com/osiset/laravel-shopify/wiki/Installation)

    composer require osiset/laravel-shopify
    php artisan vendor:publish --tag=shopify-config
  4. Add your app to valet server with valet park

  5. Add SSL with valet secure

  6. Your app is now located at the following URL: https://<app-name>.test

  7. Go to your project folder. Navigate to shopify-app.php and find 'api_scopes'. Here you can set all Shopify API scopes that are needed for your app. A list of all API Scopes can be found here → https://shopify.dev/docs/admin-api/access-scopes.

  8. Go to web.php and edit the routes. Replace the existing routes with the following code. This way you’re addding middleware to the welcome page and you’re creating a route for 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');
  9. Replace content of welcome.blade.php with this one.

    @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
  10. Edit User Model. Add following code to existing namespaces

    use Osiset\ShopifyApp\Contracts\ShopModel as IShopModel;
    use Osiset\ShopifyApp\Traits\ShopModel;
  11. Change class from this:

    class User extends Authenticatable

    to this:

    class User extends Authenticatable implements IShopModel
  12. add following line within your class

    use ShopModel;
  13. Your class should now look like this:

    <?php
    
    namespace App\Models;
    
    use Illuminate\Notifications\Notifiable;
    use Illuminate\Foundation\Auth\User as Authenticatable;
    use Osiset\ShopifyApp\Contracts\ShopModel as IShopModel;
    use Osiset\ShopifyApp\Traits\ShopModel;
    
    class User extends Authenticatable implements IShopModel
    {
        use Notifiable;
        use ShopModel;
    
        /**
         * The attributes that are mass assignable.
         *
         * @var array
         */
        protected $fillable = [
            'name', 'email', 'password',
        ];
    
        /**
         * The attributes that should be hidden for arrays.
         *
         * @var array
         */
        protected $hidden = [
            'password', 'remember_token',
        ];
    }
  14. Setup your databse in your .env file.

  15. Nachdem alles durch ist, mit php artisan migrate alles migrieren

  16. If you visit your application you should get an error saying: “Osiset\ShopifyApp\Exceptions\MissingShopDomainException“.
    That is because we haven’t setup the from the intershop side yet.

Shopify

  1. Login to your Partner account and create a new app at https://partners.shopify.com/1844011/apps/new

  2. chose any app name

  3. set the url of your app that you created at step 6: https://<app-name>.test

  4. Set the redirect URL to: https://<app-name>.test/authenticate

  5. click on ‘create app’

  6. Copy your API key and API Secret

  7. Add API key and API secret to your .env within your laravel application

    SHOPIFY_API_KEY=xxxx
    SHOPIFY_API_SECRET=xxxx
    SHOPIFY_BILLING_ENABLED=1
  8. You can now visit your app at https://<app-name>.test/?shop=yourshopname.myshopify.com

Die beliebtesten E-Commerce Plattformen – Teil 3 : Shopware

Shopware

Shopware ist aus dier Liste der beliebten E-Commerce Lösungen der einzige Software-Hersteller aus Deutschland. Er bietet seine Software auch als Open Source an (Community Edition). Gerade für User die nur auf ihr Schul-Englisch zurückgreifen können, wird die große deutschsprachige Community sehr hilfreich sein. Da es sich um Software aus Deutschland handelt kann man sich auch zu 100% sicher sein, dass alles DSGVO-Konform von statten geht. Auch die Zahloptionen sind für den deutschen Markt.

Die Software gibt es als kostenlose Starter Edition und als Open Source-Variante im vollen Umfang kostenlos. Wer sich ein wenig auskennt mit der Einrichtung von Servern schonmal ein paar WordPress-Seiten manuell installiert hat (ohne 1-Click Installer), der kommt mit Community Edition sehr gut zu Recht. Leider gibt es für die kostenlosen Varianten keinen Herstellersupport. Man ist hier also auf sich alleine und auf die Google-Recherche gestellt.

Shopware bietet auch eine Cloud-Version an, hierbei muss man sich nur ein Benutzerkonto anlegen und sich nicht den Kopf über die Installation zerbrechen. Dann man aber auch keinen Zugriff auf den Quellcode und ist auf die Features angewiesen die es so out of the box gibt.

Wer doch den Support benötigt, für den wird es dann vergleichsweise mit den anderen E-Commerce Anbieter etwas teurer: 199,00 € mtl. Oder einmalig 2495€. Sehr sympathisch finde ich hier, dass den Anwendern die Wahl zwischen einem monatlicher oder einmaliger Zahlung gegeben wird. Abgesehen vom Herstellersupport bieten die bezahlten Versionen noch weitere Features wie erweiterte CMS-Funktionen und Verkaufskanäle. Mehr dazu hier: https://www.shopware.com/de/preise/

Wichtig: Eine Provision pro verkauftem Artikel fällt hier nicht an!

Auch die Funktionalität und die Storefront (Oberfläche) von Shopware kann mit Hilfe von Plugins erweitert werden. Hierfür gibt es einen großen Marktplatz mit kostenlosen und kostenpflichtigen Plugins und Themes. Alle Plugins und Themes gibt es als Miet- und als Kaufversion. Diese Option sieht man sonst sehr selten und hat Sympathie-Punkte verdient.

Fazit: Shopware bietet mehr Lösungen als die Konkurrenz von Shopify an. Einen voll funktionsfähigen Shop kann man sich hier sogar schon kostenlos einrichten und kann bzgl. Der DSGVO beruhigt schlafen. Wem noch deutscher Support wichtig ist und bereit ist etwas mehr zu zahlen, der wird mit der Professional Edition voll auf seine Kosten kommen. Da der Sprung von 0€ in der Starter Edition auf die Professional Edition mit 200€ doch etwas groß ist, bekommt der deutsche Software leider einen kleinen Punkte-Abzug beim Preis.

Preis
Einrichtung ohne Programmier-Kenntnisse
Performance

Die beliebtesten E-Commerce Plattformen – Teil 2 : Shopify

Shopify

Ein Aufsteigender Big-Player im E-Commerce-Bereich. Shopify hat das Prinzip von Woocommerce genommen und umgedreht. 

Was heißt das? Shopify ist in erster Linie ein Content-Management-System das auf E-Commerce ausgelegt ist. Klar können damit auch Blog-Artikel angelegt werden. Jedoch wird es dem User in erster Linie sehr leicht gemacht seine Artikel anzulegen und zu verwalten. 

Shopify gibt es nur in einem Abo Modell. Die Preise reichen von 29€ - 299€/ Monat. Wichtig zu wissen ist hier noch dass Transaktionsgebühren anfallen. Das bedeutet, dass bei jedem Verkauf zwischen 2% - 3-% des Umsatzes an Shopify abgegeben werden müssen.

Mit diesem Bezahlmodell ist die Plattform eher teuer. Dennoch ist sie sehr beliebt Mit einem Marktanteil von 31%. Woran liegt das?

Zunächst ist die Einrichtung eines Shops im Vergleich zu WooCommerce sehr einfach. Man erstellt ein Konto und kann mit der Einrichtung beginnen. Da es Shopify nur als gehostete Version gibt, fällt die Recherche  zu dem passenden Hosting Provider weg - Eine Sorge weniger. Man muss sich nicht mehr um die Performance der Seite kümmern, da sich Shopify selbst um das CDN-Caching und sonstige perfomance-steigernde Einrichtungen kümmert. Im Prinzip kann man sich an der Seite anmelden, sich ein Theme aussuchen und anfangen zu verkaufen. Diese Einfachheit und Unkompliziertheit lässt sich der Anbieter eben bezahlen.

Das Prinzip der Plugins mit welchen die Grund-Funktionalität der Software erweitert werden kann hat Shopify von WordPress übernommen. Hier heißen sie jedoch nicht Plugins sondern Apps. Mit Hilfe von Apps können zum Beispiel Pop-Up Newsletter oder Banner zum Shop hinzugefügt werden. Hier gibt es kostenlose und kostenpflichtige Apps. Alle Apps sind ebenfalls nur einem Abo-Modell erhältlich.

Fazit: Wer eine einfache Plug-N-Play Lösung haben möchte und sich nicht lange mit technischem bla-bla auseinander setzen möchte, der ist mit diesem Anbieter sehr gut bedient. Aufgrund der großen und stark wachsenden Community gibt es schöne und ansprechende Themes, mit denen du deinen Online Shop individuell einrichten kannst. Wenn du bereit bist für den Komfort etwas mehr Geld auszugeben, dann bist du mit dieser Lösung gut beraten.

Preis
Einrichtung ohne Programmier-Kenntnisse
Performance

Die beliebtesten E-Commerce Plattformen – Teil 1 : WooCommerce

Liebe online shopperinnen und online shopper, bzw. Einzelhändlerinnen und Einzelhändler an euch richtet sich dieser Artikel schon eher.

Wir schreiben den 12.12 und zumindest in Baden Württemberg wurden die corona Maßnahmen heute wieder verschärft. Die Leute sollen nur raus wenn es absolut nötig ist. Unter diesen Regelungen leidet auch der Einzelhandel, was einige Einzelhändlerinne nun dazu treibt ihren Einzelhandel zu digitalisieren. E-Commerce ist das Stichwort. 

Allerdings ist der Weg zum online ein technischer Hürdenlauf. Es gibt einige interessante Anbieter auf dem Markt. Speziell für Deutschland sind 3 Anbieter ganz besonders interessant, diese möchte hier etwas näher erläutern und für wen welcher Anbieter interessant werden könnte.

In dieser Reihe geht es um den Vergleich zwischen WooCommerce (WordPress Erweiterung), shopify und shopware.

WooCommerce

WooCommerce basiert auf dem Content Management System WordPress. Knapp 25% aller Webseiten des Internets basieren auf der WordPress Plattform. Ursprünglich wurde WordPress als Blogging-Plattform entwickelt. Die Kernfunktionalitäten des Systems können mit Plugins erweitert werden. Eines dieser Plugins ist WooCommerce. 

Hiermit verwandelst du deine Webseite in Sekunden in einen Online-Shop. Mit Hilfe eines ansprechenden Themes hast du in Kürze und kostengünstig einen Online-Shop eingerichtet. Vorausgesetzt…

… Ja vorausgesetzt du hast schon etwas Erfahrung mit WordPress, denn die Bedienung ist leider nicht sehr intuitiv. Das ist dann wohl doch der Preis den man zahlen muss für eine solch kostengünstige Einrichtung eines Online-Shops. 

Wer nicht vertraut ist mit dem Prinzip der Seiten und Beiträge im WordPress-Admin-Dashboard, dem kann alles sehr schnell über den Kopf wachsen.

Kleinere Anpassungen am Theme können sehr leicht im CSS Editor von WordPress vorgenommen werden. Wer jedoch Änderungen an der Struktur und dem Aufbau der Warenkorb-Seite beispielsweise vornehmen will, der sollte sich lieber einen Entwickler zu Rate ziehen. Scheinbar leichte Abänderungen setzen ein tiefergehendes Verständnis von der Verwendung von Child-Themes sowie PHP & CSS voraus.

Um WooCommerce zu betreiben, wird auf jeden Fall ein Hosting-Provider benötigt. Für kleinere Shops reichen Anbieter wie Strato noch aus. Da die Strato-Server aber nicht die schnellsten sind, sollte man sich bei wachsenden Anforderungen nach anderen Alternativen umschauen. Die Performance bzw. Schnelligkeit des Shops hängt also u.a. auch vom Hosting Provider ab. Andere Faktoren spielen bei der Performance jedoch auch noch eine Rolle. Darum muss man sich jedoch selbst kümmern. Beispiel: Mit CDN-Caching, JS & CSS Minifizierung kann die Seitenladezeit verbessert werden. Auch hierfür gibt es wieder (bezahlte) Plugins, oder man muss sich noch tiefer in die Untiefen der Technik einlesen.

Die Core-Funktionalität von WooCommerce selbst ist zwar kostenlos, jedoch lässt sich der Plugin-Hersteller gut bezahlen für alle weiteren Plugins die für das Betreiben eines Shops anfallen können. Daher mach dir vor der Installation am besten schonmal eine Liste mit allen Anforderungen die dein Shop haben soll (z.B. werden Artikel angeboten für die deine Kunden monatlich bezahlen sollen? etc.). Schaue dann auf Basis dieser Anforderungen nach, ob WooCommerce dem nachkommen kann, oder nicht doch kostenpflichtige Erweiterungen hinzukommen würden und ob ein alternativer Anbieter dann vielleicht doch die bessere Wahl wäre.

Fazit: WooCommerce ist eine kostengünstige beliebte und gut dokumentierte Variante für deinen Online-Shop. Ohne technisches Know-How würde ich jedoch nicht dazu raten einen Shop selbst einzurichten. Hier sollte ein Fachmann konsultiert werden.

Preis
Einrichtung ohne Programmier-Kenntnisse
Performance