Technische Shopify-Hacks, die Ihrem Store einen Rekordumsatz verschaffen

Einen guten Shopify-Shop zu betreiben macht viel Spaß – ist aber auch harte Arbeit! Hier sind einige praktische Shopify-Hacks, die für Ihren Online-Shop nützlich sein können. Lesen Sie weiter, um herauszufinden, was alles Sie mit Ihrem machen können.

Technische Einstellungen eröffnen neue Möglichkeiten und verbessern die Funktionalität und Konvertierungsfähigkeit des Shops. Dank ihnen können Sie mehr aus Ihrem Shopify-Store herausholen. Alles, was Sie benötigen, ist technischer Support oder eine technisch kompetente Person.

Hacks sind keine aggregierten Inhalte aus anderen Artikeln, aber ich habe sie im Shop verwendet, sie haben sich also in der Praxis bewährt.

Wählen Sie das richtige Webdesign mit extended Support

Webdesign Workflow

Das einfachste zum starten: Kaufen Sie ein Webdesign mit vielen Bewertungen und extended Support – es ist ein Must-have. Ich kann die Bedeutung dieses Verfahrens nicht genug betonen. Der Shop wird viele Änderungen vornehmen und der Support kann viele von ihnen codieren, sich äußern, Infos und gute Ratschläge geben.

Das Design sollte pagespeed-optimiert sein und einen Workflow haben, durch den Designänderungen auch ohne Entwickler und Coding möglich sind. Ich empfehle das Avone Design von Adornthemes, weil es schnell ist, einen fantastischer Workflow und hilfreichen Support hat.

Code-Level-Anpassungen

Themen / Sektion „Edit code“

Auch der beste Design-Workflow hat begrenzte Bearbeitungsmöglichkeiten. Weitere Änderungen können mit HTML/CSS/Liquid Codes über die Sektion „Edit code“ vorgenommen werden, wo Sie die Default Codes mit eigenem HTML und CSS anreichern und so die Funktionalitäten verbessern können.

Manuell eingefügtes Logo mit HTML

Normalerweise ist es nicht möglich, ein Logo im SVG-Format in Shopify hochzuladen, das meistens weniger KB hat als das PNG-Format, wodurch jede Seite einen Bruchteil schneller geladen wird. Das Logo kann im SVG-Format manuell in den Header eingefügt werden, indem der Code in header.liquid geändert wird.

Möglich ist z.B. überflüssige Elemente, die das Einzelprodukt-Store nicht benötigt oder die Besucher unnötig überfordern löschen – Filter in der Produktliste, Share Buttons, Datum und Name in Blogbeiträgen usw.

Eigentlich können Sie jeden Teil des Codes und des Designs ändern – dafür reicht es nur ein wenig Programmiersprachen HTML/CSS/Liquid zu kennen. Aber ändern Sie nur das, was benötigt wird, sonst wird es Big Mess. Arbeiten Sie mit Revisionen, die Shopify automatisch erstellt.

Fortgeschrittene Anpassungen können Sie mit Custom Fields, differenzierten Handy und Desktop-Displaying sowie mit benutzerdefinierten Templates vornehmen.

Custom Fields – dynamischer Content und extra Daten

Der Hauptnachteil von Shopify besteht darin, dass es nur wenige Standardfelder für Inhalte enthält. Manchmal ist es notwendig, zusätzliche Daten hinzuzufügen – Versandinformationen unter den Cart-Button, interner Numerischer Wert oder ID-Nummer für ein Produkt usw.

Dies kann mit Hilfe von Custom Fields erzielt werden, in denen die Inhalte dynamisch geladen und in der Administration geändert werden. Das benutzerdefinierte Feld wird zum einem Produkt zugeordnet, das Liquid-Tag in das Design-Template eingefügt und dann ist es möglich, verschiedenen Produkten durch Administration unterschiedliche (dynamische) Inhalte hinzuzufügen, ohne den Template-Code bei jedem Produkt zu ändern.

Mit Hilfe von Custom Fields habe ich Breadcrumbs, ähnliche Produkte, Inhaltsempfehlungen, Informationen unter dem Cart-Button, benutzerdefinierten numerischen Wert für Google Ads, interne Produktidentifikationscodes für das Herstellungssystem, SEO Beschreibungen für den Blog und Produktkategorien ins Shopify hinzugefügt.

Hauptkategorie zum Breadcrumbs hinzugefügt

Shopify verfügt nicht über die „Hauptkategorie“-Funktionalität und daher wird die entsprechende Kategorie nicht in Breadcrumbs angezeigt – ein grundlegendes Orientierungselement, das User kennen und erwarten. Es musste also als Custom Field hinzugefügt werden.

Eingeschränkte Shopify-Funktionalitäten ermöglichen es nicht, ähnliche Produkte aus einer anderen Kategorie in der angegebenen Reihenfolge anzuzeigen (komisch, oder?). Es muss als ein Global Custom Field in das Template eingefügt werden, in das der Code mit verwandten Produkten eingefügt wird.

Es ist nicht möglich, SEO Beschreibung am Anfang und am Ende von Produktlisten einzufügen. Auch hier müssen Sie das App-Tag in das Template „Collections“ einfügen und entsprechenden HTML-Code in das Feld eingeben.

Interne Custom Fields

Es ist sogar möglich, interne Daten hinzuzufügen, die nie auf der Website erscheinen, und den Store mit externen Systemen zu verknüpfen. Z.B. Informationen über Art und Variation des Produkts in einer neuen Bestellung an das Werkstatt-Produktionssystem zu senden. Man kann auch benutzerdefinierte Werte an Google Ads senden.

Bedingungen können auch festgelegt werden: Wenn das Custom Field einen Wert enthält, wird es angezeigt. Wenn es leer ist, zeigen Sie das globale Feld und andere Inhalte an. (Komplexere Bedingungen sind ebenfalls möglich.) Es spart z.B. Zeit beim Versand:

{% if product.metafields.custom_fields["delivery_time"] != blank %}
{{ product.metafields.custom_fields["specific_delivery_time"] }}
{% else %}
{{ shop.metafields.custom_fields["standard_delivery_time"] }}
{% endif %}

Um es zusammenzufassen, Custom Fields öffnen eine Million neue Möglichkeiten.

Ich empfehle die Custom Fields-App von Bonify. Kundenspezifische Daten können zu Produkten, Produktvariationen, Kunden, Bestellungen und unfertigen Bestellungen hinzugefügt werden, und es gibt auch globale Felder usw.

Handybildschirm + PC-Desktop Displaying

Differenziertes Bild nach Gerät

Manchmal muss man unterschiedliche Inhalte auf dem Handy und Desktop zeigen. Dies kann mit einfachem CSS- und HTML-Code gemacht werden. Inhalte nach Geräten anzuzeigen eröffnet neue Möglichkeiten, die über die Anpassung auf Codeebene und Custom Fields hinausgehen.

Unterschiedliche Platzierung von Inhaltsempfehlungen nach Gerät

Ich wollte, dass die Empfehlungs-Widgets in den Blogbeiträgen auf dem Desktop für die gesamte Seitenbreite (unter der Artikeltemplate) und auf dem Handy direkt am Ende des Artikels (nach dem Hauptinhalt und vor Sidebar) angezeigt werden.

Unterschiedliche Darstellung von Inhaltsempfehlungen auf Desktop und Handy

Dazu habe ich den Handy-Code in das erste Placement und den Desktop-Code in das zweite eingefügt. In beiden Fällen wird dasselbe Custom Field angezeigt.

Der Abstand zwischen den Blogbeiträgen in der Handy-Artikelliste war nicht groß genug. Es war nicht klar, welcher Artikel welcher war, und die User haben oft auf den falschen Artikel geklickt. Darum musste der Abstand auf Handy vergrößert werden.

Bio auf Desktop

Ich benutze es auch hier, in diesem Blog. Ich wollte ein Bio unter Artikeln haben, aber ich habe es bereits in der Sidebar. Wenn ich sie also hinzugefügt hätte, ohne sie auf dem Handy zu verstecken, wäre sie auf dem Handy unter einen Artikel zweimal.

Dutzende solcher Änderungen können vorgenommen werden. Setup ist einfach. Fügen Sie diesen CSS-Code zu theme.scss.liquid / theme.css.liquid hinzu:

CSS:
@media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}
@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

Und wo Inhalte nach Gerät angezeigt werden sollen, fügen Sie dieses und personalisierte Inhalte in den Tags ein:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

Man kann jede CSS-Klasse in @Media Query einfügen und ihr Aussehen für das angegebene Gerät ändern – z.B. unterschiedliche Überschriftengröße für Desktop- und Mobilgeräte definieren. Kommt ein wesentlicher Teil des Traffics von Tabletts, kann @Media Query für Tabletts definiert werden. Jede Änderung muss auf mehreren Geräten im Inkognito Modus überprüft werden.

Benutzerdefinierte Templates verwenden

Die nächste Stufe der Anpassung sind Custom Templates für Collections, Produkte, Blogbeiträge usw. Es geht darum, Templates mit einer einzigartigen Ansicht zu erstellen und sie mit ein paar Klicks ändern, während mehrere gleichzeitig aktiv sein können.

Der Shop kann z.B. fünf verschiedene Produkttemplates erstellen (T-Shirts, Schuhe, Hosen, Handschuhe, Socken) und die Produkte werden im Frontend unterschiedlich dargestellt. Die Unterschiede können in der Lagerverfügbarkeit, in der Größe und im Format des Produktbildes, in den Funktionalitäten usw. liegen.

Wie erstellt man ein neues Template? Öffnen Sie die Sektion „Code“, die Theme-Template und wählen Sie die Template aus, die Sie bearbeiten möchten. In unserem Fall „product.liquid“.

Neues Template

Wählen Sie „Add new template“, wählen Sie Art Produkt, Templatetyp „Liquid“ und benennen Sie die neue Template.

Je nachdem, welche Template Sie bearbeiten, stellen Sie möglicherweise fest, dass diese Template nur sehr wenig Code enthält. Das Slate Scaffold Design hat z.B. eine einzelne Zeile in der Template: „{% section ‚product’%}“. Dies liegt daran, dass der größte Teil des Codes in Section-Datei gespeichert ist, und nicht in der Template.

Neue Sektion

In Sections wählen Sie „Add new section“ und benennen Sie die Datei charakteristisch – z.B. „product-tower-template.liquid“. Im Gegensatz zur Template ist neue Sektion leer. Sie müssen den Text aus Sektion „product-template.liquid“ hineinkopieren. Diese Datei enthält den Code, den Sie bearbeiten wollen.

Tag mit Verweis auf das neue Template

Sie müssen die Template und die Sektion noch verknüpfen. Die Template lädt den Standardproduktinhalt mit dem Tag „{% section ‚product-template’%}“. Um andere Inhalte zu laden, muss das Tag dem Namen der neu erstellten Sektion entsprechen. Also ändern Sie „{% section ‚product-template’%}“ in „{% section ‚product-tower-template.liquid’%}“.

Auswahl an Produkt Templates

Das neue Template ist nun voll funktionsfähig und unter den Produkttemplates zu finden. Templates für Collections, Blogbeiträge etc. können auf die gleiche Weise erstellt werden.

Verwenden Sie Liquid

Der Shopbetrieb wird viel einfacher, wenn Sie jemanden im Team haben, der Liquid verwenden kann. Liquid ist eine Open-Source Template-Sprache, die von Shopify erstellt wurde und in Ruby geschrieben ist. Es ist der Kern von Shopify-Designs und wird verwendet, um dynamische Inhalte anzuzeigen. Das bedeutet, dass Weitere technische Modifikationen ermöglicht werden.

Zu meinen am häufigsten verwendeten Liquid-Codes gehören diese.

Wenn Sie Inhalte nach Tags kategorisiert haben, können Sie Inhalte dynamisch nach Tags anzeigen. (Übrigens, das zu finden hat lange gedauert.):

{% if current_tags contains 'Anleitungen' %}
Anleitungen, Hinweise, Tipps und Tricks zum Magnetfischen.
{% elsif current_tags contains 'Funde' %}
Schauen Sie sich die besten Funde an, die Sie mit einem Magneten aus dem Wasser ziehen können.
{% elsif current_tags contains 'Bravior' %}
Wer wir sind, Bestellungen, Kundeninformationen, unser Angebot, Lieferung usw.
{% else %}
Interessante Artikel zum Magnetfischen, Anleitungen, Tipps, beste Funde, Spaß.
{% endif %}

Wenn die URL dies enthält, diesen Code anzeigen:

{% if handle contains 'page-handle-you-want-to-exclude' %}
<meta name="robots" content="noindex">
{% endif %}

Inhalt nach Template + URL anzeigen:

{% if template contains 'page' and page.url == '/pages/the-studios' %}
  ... use studios nav
{% elsif template contains 'collection' and collection.url == '/collections/shop' %}
  ... use shop nav
{% endif %}

Es kann auch umgekehrt verwendet werden – auf einer Landingpage z.B. mit einem E-Book den Footer, den Warenkorb und das Menü ausblenden, um den User bei der Konvertierung nicht zu stören:

{% capture siteFooter %}
{% if handle contains 'conversion-page' %}{% else  %}
Casual footer
{% endif %}{% comment %}this endif is for my conversion page handle{% endcomment %}

Wenn Sie weitere Templates erstellen und der Shop Breadcrumbs hat, werden sie natürlich nicht in den neuen Templates angezeigt. In Breadcrumbs.liquid ändern Sie „=“ (entspricht) in „contains“.

Alle Liquid-Tags finden Sie in der Shopify-Dokumentation.

Die Frage ist, wann was verwendet sein soll. HTML- und CSS-Änderungen ändern das Frontend statisch, Custom Fields und Liquid anzeigen dynamische Inhalte. Templates ermöglichen, mehrere Ansichten zu speichern und gleichzeitig aktiv zu haben. In anderen Fällen spielt es keine Rolle, es ist nur praktischer, z.B. Liquid verwenden.

HTML und JavaScript Minimieren

HTML Miniemierung

Sie können HTML, CSS und JavaScript minimieren. Es wird gleich aussehen, aber kompakterer Code wird schneller geladen. Es ist nützlich, wenn Sie viel Code auf Ihrer Website platzieren – Empfehlungs-Widgets, externe JavaScripts usw.

Ich empfehle dieses Tool für die HTML- und CSS-Minimierung und dieses Tool für die JS-Minimierung, aber prinzipiell sind alle frei verfügbaren Tools verwendbar. Speichern Sie den nicht minimierten Code und machen Sie zukünftige Änderungen zuerst da.

Regelmäßige Backups über eine Dataexport-App

Eine große Schwäche von Shopify besteht darin, dass es keine Revisionen in Produkten, Blogbeiträgen usw. gibt. Revisionen haben nur Designs. Wenn Sie also eine großartige Produktbeschreibung oder einen großartigen Artikel haben und werden Sie versehentlich den Content löschen oder durch anderen HTML ersetzen, verlieren Sie ihn für immer.

Die zuverlässigste Lösung ist, regelmäßig den gesamten Inhalt des Shopify-Shops über eine App zu exportieren und zu speichern. Ich empfehle die App Data Export Reports.

Youtube Lazyload

Jede Website mit YouTube-Videos benötigt YouTube Lazyload, da Videos die Ladegeschwindigkeit drastisch reduzieren. Meiner Erfahrung nach hat die Ladegeschwindigkeit nach der Implementierung des Codes deutlich zugenommen hat.

Lazyload Code ist sehr einfach:

<iframe src="https://www.youtube.com/embed/Y8Wp3dafaMQ" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1&mute=1&loop=1&playlist=Y8Wp3dafaMQ&rel=0><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/maxresdefault.jpg alt='Image Alternative Description'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"  allowfullscreen title="Title Description"></iframe>

Ersetzen Sie „Y8Wp3dafaMQ“ durch ID Ihres Videos. Schreiben Sie eine alternative Beschreibung und einen Titel. Wenn das Bild ausfällt und nicht angezeigt wird, ändern Sie „maxresdefault.jpg“ in „sddefault.jpg“ oder „hqdefault.jpg“ oder erstellen Sie ein eigenes Bild, wenn nötig.

Hreflang für Shopify

Hreflang ist ein HTML-Tag, das Google-Robots mitteilt, dass eine Seite andere Sprachmutationen hat. Es wird für gleichsprachige Webseiten mit gleichem Inhalt (DE/AT/CH) und für lokalisierte Websites (EN/DE/ES/IT) verwendet, damit lokalisierte Ergebnisse in Suchergebnissen bevorzugt werden.

Aber Hreflang in Shopify einzufügen ist kompliziert. Es ist ein Rätsel, mit dem sich viele Shopify Shop-Betreiber beschäftigen.

Die primitivste Implementierung von Hreflang für eine mehrsprachige Website ist in theme.liquid diesen Liquid Code einfügen:

<link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.de' }}" hreflang="de-de" />
<link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.at' }}" hreflang="de-at" />
<link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.ch' }}" hreflang="de-ch" />

Das Problem ist, dass dies nur für die kleinsten Seiten geeignet ist, da Dutzende von Bedingungen das Rendern der Seite langsamer machen würden.

Die Lösung ist Hreflang als JavaScript und asynchron laden. Verwenden Sie dazu diesen Code:

if (window.jQuery) {
  $(document).ready(function () {
    var a, b, c;
    var url = window.location.href;
    if (/\/pages\/(bewertung-hinterlassen|leave-review)(\/?)($|\?)/.test(url)) {
      a = document.createElement("link");
      a.id = "lang1";
      jQuery("head").append(a);
      $("#lang1").attr({
        rel: "alternate",
        href: "https://beispielshop.co.uk/pages/leave-review",
        hreflang: "en-gb"
      });
      b = document.createElement("link");
      b.id = "lang2";
      jQuery("head").append(b);
      $("#lang2").attr({
        rel: "alternate",
        href: "https://beispielshop.de/pages/bewertung-hinterlassen",
        hreflang: "de-de"
      });
      c = document.createElement("link");
      c.id = "lang3";
      jQuery("head").append(c);
      $("#lang3").attr({
        rel: "alternate",
        href: "https://beispielshop.at/pages/bewertung-hinterlassen",
        hreflang: "de-at"
      });
    }
  });
}

IF identifiziert und testet die aktuelle URL. Anstelle von Pages können Collections, Blogs usw. verwendet werden. Die URL der Unterseiten wird in die zweite Klammer eingefügt. Der Code erstellt mehrere hreflang Attributen – a, b, c bis xyz. Tragen Sie also die URL aller äquivalenten Unterseiten in „href“ und das Sprachlabel in „hreflang“ ein. Die IF Bedingung sollte alle Unterseiten des Stores enthalten. Der Code muss in eine .js-Datei gespeichert und asynchron in theme.liquid geladen werden.

Inhaltspersonalisierung nach Tastatur, Domain oder anderen Bedingungen

Unterschiedliche Inhalte auf derselben Website zu haben (und die Limits von Liquid und Custom Fields überwinden), ist in Shopify eine große Herausforderung, da Shopify diese Option nicht anbietet.

Die Erstellung von drei Websites für die DACH-Region oder für die GB/US-Sprachversion kostet viel Geld, es erfordert Wartung & Pflege und jede Änderung muss auf mehreren Websites manuell vorgenommen werden. Die erforderliche Änderung kann auch sehr klein sein, z.B. nur ein paar Zeilen HTML-Code.

Die Personalisierung von Inhalten ist umso notwendiger, wenn Sie einen Store für verschiedene Domains duplizieren und vom selben Server auf mehreren Domains geladen wird (sog. maskierte Weiterleitung).

Gemeinsam mit einem Datenspezialisten haben wir dafür drei Möglichkeiten entdeckt:

  • Personalisierung mit Google Tag Manager,
  • per Skript auf dem Server,
  • oder mit Google Optimize.

Personalisierung mit GTM

Die Darstellung verschiedener Inhalte und CSS/HTML-Steuerung per Tastatur oder Domain kann über den Google Tag Manager eingestellt werden. Es ist ideal für kleinere Anpassungen, die unten auf der Seite geladen werden, es ist relativ einfach und benötigt keinen Entwickler – die Einrichtung wird auch von einem Datenspezialisten vorgenommen.

Möglich ist z.B. eine Webseite für DACH Region zu verwenden, und die Versandinformationen unter Cart-Button zu ändern oder die Benachrichtigungen über kostenlosen Versand zu löschen, wenn der Versand in das Land nicht kostenlos ist usw.

Der Nachteil ist, dass die Personalisierung nicht funktioniert, wenn der User einen aktiven Ad Blocker hat, der GTM blockiert, weil das Skript nicht ausgeführt werden kann. Wenn jedoch der größte Teil des Traffics aus Handys und z.B. Google Chrome kommt, wird er meistens nicht blockiert.

Personalisierung per Skript auf dem Server

Die Möglichkeiten der Personalisierung per Skript auf dem Server sind grenzenlos. Es ist ideal für größere Inhaltsänderungen und sogar für die gesamte Webseite. Kein Werbeblocker kann dies beeinflussen/einzuschränken. Diese Personalisierung macht normalerweise ein Developer.

Personalisieren Sie über Google Optimize

… und Shopify Verknüpfung mit einer Nicht-Shopify-Website auf einer Subdomain. Jetzt eine Mega-Hardcore-Anpassung 🙂

Wie beim Skript kann das gesamte Erscheinungsbild der Website über Google Optimize (oder ein ähnliches Tool) verändert werden. Der Vorteil ist eine riesige Möglichkeit der Anpassung an beliebige Bedingungen, es wird kein Flashen beim Laden erscheinen und es wird kein Programmierer benötigt. Der Nachteil bleibt die Blockierung durch Ad Blocker.

Ich habe eine solche Personalisierung für die Galerie der Spieltürme verwendet. Die Galerie befindet sich auf der Subdomain. Ich wollte, dass der User den Unterschied zwischen der Hauptdomain und einer Subdomain nicht erkennt. Und um nahtlos in und von der Galerie navigieren können.

Das Problem war, dass der Store in vier Ländern verkauft, aber es macht keinen Sinn, mehrere Galerien zu erstellen. Genau das löst Google Optimize. Die Daten Spezialistin erhielt die Aufgabe, ein Skript mit dieser Logik zu schreiben:

Identifizierung nach Eintrittseite – bei Fehlschlag: Identifizierung nach Browsersprache – bei Fehlschlag: Identifizierung nach Geolocation – bei Fehlschlag: Standardinhalt anzeigen.

Das Skript zunächst versucht, die Eintrittseite zu ermitteln (beispielshop .de/.at/.ch/.co.uk) und die Texte und Links zum Store entsprechend anzeigt. Wenn der User über die Eintrittseite nicht identifiziert werden kann, versucht das Skript, ihn anhand der Geolocation und bei Fehlschlag nach der Browsersprache zu identifizieren. Wenn dies nicht funktioniert, werden nicht personalisierte Inhalt angezeigt.

Mit anderen Worten, wenn der User von beispielshop.de kommt, sieht er die Texte auf Deutsch und die Links führen zum deutschen Store.

Es ist der perfekte Weg, um Shopify mit einer Subdomain zu verknüpfen und Content zu geringen Kosten zu personalisieren. Haben sie Inhalte auf einer Shopify-Store-Subdomain? Falls ja, können Sie sie mit dem Store auf die gleiche Weise verbinden.

Implementieren Sie diese Shopify-Hacks noch heute

Obwohl Shopify ein E-Commerce-System ist, ermöglicht es Anpassungen, wie kein anderes E-Commerce-System auf dem Planeten. Profitieren Sie davon. Verbessern Sie Ihren Shop auf technischem Niveau und verkaufen Sie mehr.

Michal Compel

Michal Compel

I really like building things.