fb
Schedule a Meeting

Entwicklungstipps für den Aufbau besserer Custom Shopify Sites

This post is also available in: English (Englisch) Français (Französisch) Italiano (Italienisch)

Im Gegensatz zu seinen Pendants ist Shopify zu einem bekannten Namen für alle geworden, die darüber nachdenken, einen Online-Shop zu gründen. Mit einer breiten Palette von Funktionen, hat es erfolgreich seine Kunden zu locken und hat seine Themen und Eignung entwickelt, um so viele Geschäftstypen wie möglich abzudecken. Im Laufe der Zeit strömen viele herbei nach Shopify, um das perfekte Thema für ihren ersten Laden zu suchen.

Beginnend mit Shopify kann alles aufregend und einfach auf den ersten Weg klingen, aber es kann sehr beängstigend sein, wenn Sie beginnen, Ihre Website zu bauen. Ihr perfektes Thema zu finden, ist nur der Anfang. Was folgt, ist viel mehr als nur das Thema zu verwenden, wie es ist. Als Shopify-Entwickler müssen Sie einen soliden Entwicklungsrhythmus haben, um zu bestimmen, wie Sich Ihre Website herausstellen wird. Obwohl die Plattform am begehrtesten für den Aufbau eines Online-Shops ist, aber für Sie, es ist neu. Sich damit vertraut zu machen, kann einige Zeit in Anspruch nehmen und erfordert einige Erfahrung und Wissen darüber, wie Dinge optimiert werden können, um für Sie einzigartig zu arbeiten.

Bei WebBee Global erstellen wir gerne individuelle Shopify-Apps und -Themen. Wir haben bereits viel Zeit in Forschung und Entwicklung mit einer Vielzahl von Methoden verbracht. Einige haben gearbeitet, während andere gelernt haben. Aber trotzdem ist die Erfahrung nährend und deshalb haben wir ein paar Punkte zusammengestellt, die Entwickler bei Baustellen auf Shopify beachten sollten.

Verwenden Sie diese Entwicklungstipps als Meilensteine, um funktionsreiche Shopify-Websites für sich und Ihre Kunden zu erstellen:

1. Verwenden Sie die Versionskontrolle für die Verwaltung der Arbeit

Viele Entwickler verwenden mehrere Designs, um den Quellcode zu speichern und zu steuern. Obwohl die Versuchung besteht, dies zu tun, sollten Sie die Codebasis besser in einem Remote-Versionsrepository speichern. Der Grund dafür ist, dass der Code durch diese Methode organisiert, verhindert bleibt und eine vollständige Historie aller Änderungen bietet. Später, falls die Dinge nach Süden gehen, können Sie immer wieder zu einer stabilen Design-Version wechseln.

Ein weiterer Punkt ist, wie Sie Themen, Zweige, Features, mehrere Entwickler und Änderungen verwalten, die über den Online-Shopify-Editor passieren, nachdem Sie mit der Versionskontrolle begonnen haben. Wenn mehrere Entwickler an demselben Speicher arbeiten, stellen Sie sicher, dass jeder Entwickler an separaten Zweigen und Designs arbeitet. Halten Sie den Masterzweig „Produktion bereit“, und führen Sie ihn erst zusammen, nachdem die anderen Zweige innerhalb des Themas getestet wurden. Auf diese Weise veröffentlichen Sie nicht versehentlich halbfertige Arbeiten.

Es ist die beste Methode, die im Online-Design-Editor vorgenommenen Änderungen herunterzuladen und nach deren Vornehmen in Ihr Repository zu integrieren.

Achten Sie darauf, die Änderungen in der richtigen Reihenfolge zusammenzuführen und wissen, was Sie übernehmen. Dadurch wird sichergestellt, dass alle Änderungen in das Repository eingecheckt werden, bevor Sie in den Speicher wechseln, und das Repository verwaltet den Code und nicht die Designs.

2. Konzentrieren Sie sich mehr auf das Shopify Thema Gem lokal zu entwickeln

Obwohl Shopify cloudbasiert ist, können Sie nicht in Frage stellen, eine lokale Instanz der Software zu verlassen und lokal zu arbeiten. Ein besserer Ansatz wäre, Themendateien hochzuladen und die Änderungen direkt in einem Online-Shopify-Shop anzuzeigen. Nutzen Sie das Shopify Theme Gem, über das Sie aktiv auf Ihrem Verzeichnis achten und Dateien automatisch auf das Thema hochladen können, da Sie Dateien speichern müssen.

In Zeiten, in denen Sie an einem kleinen Projekt mit minimalen Änderungen arbeiten, ist die Arbeit am Online-Editor jedoch eine sichere Option. Online-Bearbeitung würde bedeuten, dass Sie nie Probleme mit dem Überschreiben einer Datei haben, die nicht mit Ihren lokalen Änderungen synchronisiert ist.

3. Verbringen Sie etwas Zeit mit Liquid

Liquid ist eine hoch entzifferbare und kommunikative Ruby-basierte Sprache, die als Vermittler zwischen den Daten eines Speichers und seinen von Shopify verwendeten Themenvorlagen fungiert. Wenn Sie ganz neu bei Liquid sind, ist es an der Zeit, sich damit vertraut zu machen.

Lesen über Liquid wird Ihnen helfen, Wissen darüber zu gewinnen, wie Sie die Macht der alternativen Vorlagen- und Layoutdateien nutzen können. Es ist einfacher, als Sie denken und wird Ihnen erleichtern, Ihre Website professionell anzupassen.

4. Erlauben Sie Grunt für Sass und JavaScript Compiling

Es ist wichtig, sich daran zu erinnern, dass Liquid nicht als Programmiersprache gedacht ist, sondern zum Erstellen von Markups für die Ausgabedaten, mit denen Sie arbeiten, verwendet werden soll. Die Weitergabe der Daten an JavaScript ist manchmal eine bessere Wahl, besonders für große Projekte, bei denen Sie sich in Endlosschleifen befinden könnten.

Da Shopify über einen Sass-Parser verfügt, können Sie ihn verwenden, um CSS und JavaScript zu kompilieren und zu strukturieren. Dazu können eine Reihe von Methoden und Methoden verwendet werden. Die einfachste Möglichkeit besteht darin, einen Ordnernamen ‚Sass‘ innerhalb des Stammverzeichnisses des Themas zu erstellen, um verschiedene Ordner und Dateien zu enthalten.

Erlauben Sie Grunt-Task für Sass und JavaScript-Kompilierung, die es in eine wertvolle Datei des Assets-Verzeichnisses bringt. Dies wird die Arbeit für Sie erleichtern und wird eleganter sein, als mit Liquid, um das gleiche zu tun.

5. Abstract Wann immer möglich

Eine einfache Faustregel besagt, dass Ihr Design keine Daten speichern sollte, wenn Sie ein Design für einen Client erstellen. Das Thema sollte ohne harte Codierung so viel wie möglich gebaut werden und denken Sie daran, wenn möglich zu abstrakt. Da Ihr Client der primäre Benutzer der Website ist, verwenden Sie wiederverwendbare Inhalte, und halten Sie sie einfach. Der Grund dafür ist, dem Client zu ermöglichen, die Website zu verwalten, ohne Sie für einfache Updates zu stören.

6. Überprüfen Sie Ladezeiten und Leistung

Behalten Sie immer die Leistung Ihrer Website mit allen Funktionen, die Sie während der Entwicklung hinzufügen, im Auge. Sie können Google Chrome Developer Tools für schnelle Leistungstests und zum Auffinden von Engpässen in Designs verwenden.

Überprüfen Sie Images, JavaScript und CSS-Komprimierung, da sie die offensichtlichsten sind. Aber auch achten Sie auf intensive Liquid und JavaScript-Berechnung. Rendern Sie nach Möglichkeit keinen Inhalt auf der Seite, die in erster Linie ausgeblendet ist.

7. Machen Sie gute Verwendung von Schnipseln

Eine weitere großartige Möglichkeit, Logik in separate Dateien aufzuteilen, ist die Verwendung von Liquid Snippets. Ausschnitte sind leicht zu verstehen als Markups und es ist besser, sie zu haben. Es hilft, Zeit zu sparen, die die meisten von uns bei der Jagd auf das eine unverschlossene div-Tag verschwenden, das unmöglich zu finden ist.

Mit der Verwendung von Snippets werden Ihre Inhalte logisch organisiert und Markup wird leicht zu verfolgen. Dadurch wurden auch Doppelarbeit beseitigt. Verwenden Sie Ausschnitte, um einen Markupabschnitt in mehreren Dateien wiederzuverwenden.

8. Erstellen Sie eigene JSON-Endpunkte für dynamische Daten

Die Verwendung von Vorlagenansichten kann den Unterschied ausmachen, wenn Sie einen Unterschied in Ihrer Arbeit erstellen möchten. Jede Vorlage kann für einen separaten Zweck verwendet und für eine bestimmte Ansicht angepasst werden.

Passen Sie Ihre Produktseiten mit eindeutigen Namen und Ansichtsparametern in der URL an, um Shopify anzuweisen, eine bestimmte Vorlage zu verwenden. Dadurch werden die gewünschten Daten auf einer beliebigen Seite im Speicher erstellt.

Schlussfolgerung

Ich bin sicher, dass die oben genannten Tipps helfen werden, Ihren Entwicklungsprozess für Shopifyzu improvisieren. Jedes Projekt ist einzigartig und hat unterschiedliche Anforderungen, und daher kann der beste Ansatz erst nach dem Verständnis der Projektkomplexität und der Bedürfnisse des Kunden entschieden werden.

Sie sollten sich an das halten, was für Sie funktioniert, aber weiterhin nach innovativen Möglichkeiten suchen, um Ihren Workflow zu optimieren.

Scroll to top
Schedule a Meeting
close slider