Liquid, JavaScript, Themes
Hi,
ich würde gerne ein weiteres Zahlungs-Icon "Gutscheinkarte" innerhalb der Bezahloptionen im Footer einbetten, das außerhalb der möglichen Bezahlmethoden von Shopify läuft. Das entsprechende Icon liegt mir zur Verfügung, den Upload habe ich bereits getätigt, nur die Migration im Footer Liquid funktioniert nicht.
Könntet ihr mir hier bitte einen Hinweis geben.
Wir nutzen das Theme "Highlight".
Danke und Grüße
Verena
Hey @verena_miller
Das ist ein tolles Theme - gute Wahl! 😉
Ich habe das Highlight Theme zu meinem Testshop hinzugefügt und das getestet was du erreichen möchtest und folgendes kannst du in einer Testumgebung/Kopie des Themes ausprobieren:
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Um ein zusätzliches Zahlungs-Icon für "Gutscheinkarte" in den Footer deines Shopify-Themes "Highlight" einzubetten, folge diesen Schritten. Beachte, dass du den Pfad zu deinem Icon angeben musst, den du bereits hochgeladen hast. Ersetze URL_ZUM_DEINEN_ICON
mit der tatsächlichen URL zu deinem Icon.
Bearbeite die Footer-Datei: Such nach der Datei, die den Footer deines Themes definiert, oft ist es eine Datei mit dem Namen footer.liquid
oder ähnlich im Verzeichnis "Sections". Es könnte auch sein, dass du direkt im theme.liquid
-File innerhalb des Ordners "Layout" arbeiten musst, abhängig davon, wie dein Theme aufgebaut ist.
Füge den Icon-HTML-Code ein: Suche in der Datei nach dem Bereich, der die Zahlungsmethoden-Icons enthält. Dies könnte innerhalb eines <div>
oder ähnlichen Containers liegen, der Klassen wie footer-icons
, payment-methods
oder ähnliches verwendet. Füge an der Stelle, wo du das Gutscheinkarten-Icon haben möchtest, den folgenden HTML-Code ein:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="24" role="img" class="footer-icon">
<image href="URL_ZUM_DEINEN_ICON" width="24" height="24"/>
</svg>
Ersetze URL_ZUM_DEINEN_ICON
mit dem Link zu deinem hochgeladenen Icon.
Speichern und überprüfen: Speichere deine Änderungen und überprüfe die Darstellung auf deiner Website, indem du die Seite im Browser aktualisierst. Stelle sicher, dass das Icon korrekt angezeigt wird und an der gewünschten Stelle im Footer platziert ist.
Anpassungen vornehmen: Falls das Icon nicht wie gewünscht erscheint oder du es anders positionieren möchtest, kannst du die HTML-Struktur und CSS-Stile entsprechend anpassen. Eventuell musst du zusätzliches CSS hinzufügen, um das Icon richtig auszurichten oder zu skalieren.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hallo zusammen! Wir haben intensiv daran gearbeitet, dein Shopify-Erlebnis auf Deutsc...
By JasonH May 12, 2025Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025