Die Shopify-Plattform ist ein großartiger Ort, um Ihr E-Commerce-Geschäft zu starten. Sie bietet alles, was Sie für den Anfang benötigen, einschließlich eines integrierten CMS, Zahlungsabwicklung und E-Mail-Versanddienste.
Wenn Sie ein benutzerdefiniertes Warenkorbsymbol in Ihrem Shopify-Shop mithilfe von Code hinzufügen möchten, hilft Ihnen dieser Artikel weiter. In diesem Artikel werden wir Schritt für Schritt besprechen, wie Sie mit Code ein benutzerdefiniertes Warenkorbsymbol in Ihrem Shopify-Shop hinzufügen, damit Sie das Konzept leicht verstehen können.
Vorteile des Hinzufügens eines benutzerdefinierten Warenkorbsymbols
Sie möchten eine einzigartige Markenidentität online schaffen und Ihren Shop einzigartig aussehen lassen. Personalisieren Sie das Einkaufserlebnis Ihrer Käufer mit benutzerdefinierten Symbolen, Grafiken, Farben und UX/UI.
Fügen Sie Ihrem Shopify-Shop ein benutzerdefiniertes Warenkorbsymbol hinzu, um Ihr Branding zu stärken. Ein benutzerdefiniertes Warenkorbsymbol verbessert das Erscheinungsbild Ihres Shops und beeinflusst die Psychologie der Benutzer, um einen erfolgreichen Kauf zu tätigen.
Wir zeigen Ihnen in diesem Artikel, wie Sie mit ein paar einfachen Codezeilen ein benutzerdefiniertes Symbol zu "In den Warenkorb" hinzufügen.
Kommen wir zum Tutorial –
So fügen Sie ein benutzerdefiniertes Warenkorbsymbol in Ihrem Shopify-Shop mit Code hinzu
#Schritt 1 – Melden Sie sich in Ihrem Shopify Admin-Panel an
Der erste Schritt ist die Anmeldung in Ihrem Shopify Admin-Panel durch Eingabe der erforderlichen Anmeldeinformationen.
#Schritt 2 – Wählen Sie Ihr Live-Theme
Nachdem Sie sich im Admin-Panel angemeldet haben, klicken Sie auf Online-Shop, wie im linken Menü zu sehen, und dann auf Themes.
#Schritt 3 – Erstellen Sie ein Backup
Erstellen Sie nun ein Backup, indem Sie Ihr aktuelles Theme auswählen. Klicken Sie auf Aktionen, es öffnet sich ein Dropdown-Menü, dann klicken Sie auf Duplizieren.
#Schritt 4 – icon-cart.liquid-Datei öffnen
Jetzt haben Sie ein Backup der vorhandenen Codedateien erstellt. Es ist Zeit, den Code zu ändern, um ein neues Warenkorbsymbol hinzuzufügen. Klicken Sie erneut auf die Optionen Aktionen und Code bearbeiten. Wenn Sie auf "Code bearbeiten" klicken, sollte ein Code-Editor auf Ihrem Bildschirm erscheinen und eine Menüliste der .liquid-Codedateien links neben dem Code-Editor. Suchen Sie nun die Datei icon-cart.liquid, indem Sie nach unten scrollen und suchen.
Klicken und öffnen Sie das Verzeichnis (die Datei) icon-cart.liquid, die Codedatei sollte rechts in Ihrem Editor erscheinen.
# Schritt 5 – Code entfernen und hinzufügen
Entfernen Sie den gesamten Code aus der geöffneten Datei und fügen Sie den neuen Code in die Datei ein, um das Symbol hinzuzufügen.
Der beste Weg, ein Warenkorbsymbol hinzuzufügen, ist das Kopieren des eingebetteten Warenkorbsymbol-Codes von Drittanbieter-Websites wie z.B.
Wählen Sie das Warenkorbsymbol, das Sie hinzufügen möchten, kopieren Sie den eingebetteten HTML-Code und kehren Sie zum Theme-Editor zurück, um den Code einzufügen.
JETZT SPEICHERN!
Alles erledigt!
#Schritt 6 – Symbolgröße anpassen
Wenn das Warenkorbsymbol unpassend aussieht, können Sie es in der Größe anpassen. Um die Größe anzupassen, suchen und öffnen Sie das Assets-Verzeichnis und wählen Sie das Stylesheet. Im Allgemeinen lautet der Dateiname theme.scss.liquid, er kann aber auch anders benannt sein.
Kopieren Sie nun den folgenden Code und fügen Sie ihn zuletzt in die CSS-Datei ein.
.site-header__cart img { width: 25px;height: 25px; }
Wenn Ihnen die Größe immer noch nicht perfekt erscheint, können Sie die Breite und Höhe des Symbols ändern und testen.
Schlussworte
Das ist alles von unserer Seite, wenn Sie immer noch Schwierigkeiten beim Hinzufügen des Warenkorbsymbols haben, kontaktieren Sie uns, unser Shopify-Entwickler wird Ihnen helfen.