Hey @FirstUser2023
Das Integrieren von SVG Icons oder Icons von FontAwesome in deine Announcement Bar in Shopify kann tatsächlich eine großartige Möglichkeit sein, um die Aufmerksamkeit der Besucher auf wichtige Informationen zu lenken.
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 FontAwesome Icons nutzen zu können, musst du zunächst das FontAwesome Stylesheet zu deinem Shopify-Theme hinzufügen. Dies ermöglicht es dir, Icons überall in deinem Theme mit einfachen HTML-Elementen zu nutzen. Hier ist, wie du das machst:
- Gehe im Shopify Admin-Bereich zu Online Store > Themes.
- Finde dein aktuelles Theme und klicke auf Actions > Edit code.
- Öffne die Datei
theme.liquid.
Du solltest den FontAwesome Stylesheet-Link innerhalb des <head>-Tags deiner theme.liquid-Datei platzieren. Das <head>-Tag findest du meist am Anfang der Datei. Es sieht ähnlich wie folgender aus:
<head>
<!-- Füge den FontAwesome Link direkt hier ein -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
...
</head>
Um Icons zu deiner Ankündigungsleiste hinzuzufügen, musst du den spezifischen Ort im HTML-Code deines Themes finden, wo die Ankündigungsleiste definiert wird. Dies kann je nach Theme variieren, aber häufig findest du diesen im header.liquid-Teil oder in einem spezifischen Snippet für die Announcement Bar. Eine Möglichkeit ist die Verwendung von Liquid-Logik in deinem Theme-Code, um zu prüfen, welche Ankündigung gerade angezeigt wird, und entsprechend das Icon anzupassen. Hier ist ein einfaches Beispiel:
{% if announcement_text == "Kostenloser Versand" %}
<i class="fa-solid fa-truck-fast"></i>
{% elsif announcement_text == "Neue Produkte" %}
<i class="fa-solid fa-box-open"></i>
{% endif %}
{{ announcement_text }}
In diesem Beispiel wird geprüft, welcher Text in der Variable announcement_text steht (diese musst du entsprechend deinem Theme anpassen), und je nach Inhalt wird ein unterschiedliches FontAwesome Icon angezeigt.
Angenommen, du hast FontAwesome somit bereits zum Liquid hinzugefügt (wie oben beschrieben), kannst du auch Icons einfach durch Hinzufügen eines <i>-Tags mit der entsprechenden Klasse direkt vor oder nach deinem Ankündigungstext einfügen. Hier ist ein Beispiel, wie du es in deinem HTML-Code machen könntest:
<div class="announcement-bar">
<p class="announcement-bar__message">
<i class="fa-solid fa-truck-fast"></i> Kostenloser Versand für Bestellungen über 50€!
</p>
</div>
Wenn du lieber direkt SVG verwenden möchtest, kannst du dein SVG-Icon direkt in den HTML-Code einbetten. Hier ist ein Beispiel, wie du ein SVG-Icon für einen LKW (ähnlich dem „Kostenloser Versand“-Icon) einbetten könntest:
<div class="announcement-bar">
<p class="announcement-bar__message">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="truck-fast" class="svg-inline--fa fa-truck-fast fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M624 352h-16V243.9c0-17.7-14.3-31.9-32-31.9H416V160c0-17.7-14.3-32-32-32H32C14.3 128 0 142.3 0 160v224c0 17.7 14.3 32 32 32h16c0 35.3 28.7 64 64 64s64-28.7 64-64h256c0 35.3 28.7 64 64 64s64-28.7 64-64h16c17.7 0 32-14.3 32-32v-48c0-17.7-14.3-32-32-32zM96 400c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm384-48h-64V224h64v128zm96 0h-32V256c0-17.7 14.3-32 32-32h32v112c0 17.7-14.3 32-32 32z"></path></svg>
Kostenloser Versand für Bestellungen über 50€!
</p>
</div>
Etwas CSS anpassen, um sicherzustellen, dass deine Icons und dein Text schön ausgerichtet sind und gut zusammen aussehen. Zum Beispiel könntest du folgendes CSS verwenden:
.announcement-bar__message {
font-weight: bold;
display: flex;
align-items: center;
}
.announcement-bar__message i,
.announcement-bar__message svg {
margin-right: 8px;
}
Dieses CSS sorgt dafür, dass dein Text und dein Icon zentriert sind und ein wenig Abstand zwischen dem Icon und dem Text ist. Du kannst den margin-right Wert nach Bedarf anpassen, um den Abstand zu erhöhen oder zu verringern.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas 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
