So codieren Sie Ihre eigene Ankündigungsleiste für Ihren Online-Shop

Veröffentlicht: 2021-08-15
Hinweis: Bevor Sie Änderungen am Code Ihres Shops vornehmen, stellen Sie immer sicher, dass Sie Ihre Website sichern.

Ich bin sicher, Sie haben solche Banner schon einmal gesehen. Sie befinden sich normalerweise ganz oben auf Websites:

Beispiele für Website-Ankündigungsleisten

Ich wette, Sie sehen sie die ganze Zeit, und das aus gutem Grund. Eine Ankündigungsleiste ist eine einfache, aber sehr effektive Möglichkeit, Ihren Kunden kritische, aktuelle und/oder wichtige Informationen mitzuteilen.

Es ist ein großartiger Ort, um Dinge wie Verkäufe, Links zu Ihren Social-Media-Konten, Versandaktionen (z. B. kostenloser Versand), Produktionsverzögerungen, Ankündigungen neuer Blog-Posts und mehr anzukündigen. Manchmal verwenden Händler sie sogar zur E-Mail-Erfassung.

Sobald Sie den Dreh raus haben, Ihr eigenes zu bauen, können Sie es so anpassen, dass es fast alles macht. Das Beste daran ist, dass Sie keine App installieren müssen, um eine in Ihrem Store zu haben.

In diesem Tutorial erstellen wir diese Ankündigungsleiste mit einem benutzerdefinierten Shopify-Themenabschnitt.

So erstellen Sie eine Ankündigungsleiste Shopify
Bevor wir jedoch beginnen können, müssen wir alle Dinge planen, die wir brauchen werden.

Lassen Sie uns kartieren!

Welche Funktionen wollen wir?

Es ist wichtig, sich eine Minute Zeit zu nehmen, um über alle Funktionen nachzudenken, die Sie benötigen oder möchten. Für die Zwecke dieses Tutorials werden wir die folgenden bearbeitbaren Funktionen für unseren Abschnitt mit der Ankündigungsleiste erstellen:

  • Text (die Möglichkeit, Text und Links mit grundlegenden Stilen wie Fett und Kursiv hinzuzufügen)
  • Textgröße
  • Textfarbe
  • Hintergrundfarbe
  • Randfarbe
  • Rahmengrösse
  • Polsterung

Erstellen Sie Ihre Abschnittsdatei

Melden Sie sich bei Ihrem Shopify-Dashboard an und gehen Sie zu Online Store > Themes .

Shopify Theme-Anpassung Tutorial

Werbung

Klicken Sie auf das Dropdown-Menü mit der Bezeichnung Aktionen und klicken Sie auf Code bearbeiten .

Shopify Tutorial zur Anpassung der Ankündigungsleiste

Suchen Sie im Dateibrowserbereich nach dem Ordner mit dem Namen Abschnitte und erweitern Sie diesen. Klicken Sie auf den Link Neuen Abschnitt hinzufügen.

Anpassen einer Ankündigungsleiste in Shopify

Nennen wir unseren neuen Themenbereich " Ankündigungsleiste" .

Hinzufügen einer Ansageleiste

Sobald Ihre Datei erstellt wurde, sehen Sie den folgenden vorgefüllten Code für den Boilerplate-Abschnitt.

{% Schema %}
 {
 „Name“: „Abschnittsname“,
 "die Einstellungen": []
 }
 {% Endschema %}

 {% Stylesheet %}
 {% Endstylesheet %}

 {% Javascript %}
 {% endjavascript %}

Dies mag verwirrend aussehen, aber am Ende dieses Tutorials wird es mehr Sinn ergeben. Im Schema-Tag speichern Sie alle Informationen zu Ihrem neuen Abschnitt.

Wenn Sie mehr über das Inhaltsschema erfahren möchten, lesen Sie die umfassende Dokumentation von Shopify.

Als nächstes müssen wir einen Verweis auf diese Datei/diesen Code dort platzieren, wo unsere Ankündigungsleiste auf unserer Website angezeigt werden soll. Lassen Sie uns unsere ganz oben auf der Website platzieren.

Öffnen Sie die Datei theme.liquid , die Sie im Dateibrowser im Ordner Layout finden .

Werbung

Shopify Liquid Theme-Anpassungs-Tutorial

Suchen Sie nach dem öffnenden <body> -Tag und platzieren Sie es direkt darunter – wie folgt:

<body class= “template-{{ template | Teilt: '.' | zuerst }}” >
 {% Abschnitt 'announcement_bar' %}

Einstieg

Als Nächstes fügen wir in Ihrer Abschnittsdatei ein div mit einer Klasse von Ansage hinzu . Der Text, der in Ihrer Ansageleiste angezeigt werden soll, wird in dieses div eingeschlossen.

<div class= "Ankündigung" > {{ section.settings.announcement_text }} </div>

Der möglicherweise seltsam aussehende Code, den Sie im Div sehen, wird als "Liquid-Tag" bezeichnet. Liquid Tags sind von „geschwungenen“ Klammern umgeben. Es verweist auf eine ID namens ankündigung_text, über die wir in einer Minute erfahren werden.

Aber zuerst Eingabeeinstellungen

Eingabeeinstellungen werden vom Händler verwendet, um die Themeneinstellungen für seinen Shop zu konfigurieren. Der Händler greift über die Seitenleiste des Theme-Editors auf die Einstellungen zu.“ –Shopify

Die Eingabeeinstellungen sind großartig und leistungsstark, wenn Sie wissen, wie Sie sie alle verwenden. Glücklicherweise gibt Shopify in seiner Dokumentation Beispiele für jeden einzelnen, die alle hier gefunden werden können.

Löschen Sie alles in Ihrem {% schema %}- Tag und ersetzen Sie es durch Folgendes. Ihr vollständiger Code sollte bisher so aussehen:

<div class= "Ankündigung" > {{ section.settings.announcement_text }} </div>

{% Schema %}
 {
 „Name“: „Ansageleiste“,
 "die Einstellungen": [
 {
 „Typ“: „Checkbox“,
 „id“: „announcement_visibility“,
 „label“: „Sichtbarkeit (Ein / Aus)“,
 „Standard“: wahr
 }
 ]
 }
 {% Endschema %}

(Wir haben auch die Stylesheet- und Javascript-Tags entfernt, FYI)

Werbung

Wir haben den Kontrollkästchen- Eingabetyp gewählt, weil wir einen oben in unserem Abschnitt anzeigen möchten, damit wir die Leiste ein- und ausschalten können.

Einstellung der Ansageleiste

Nachdem wir unser Kontrollkästchen konfiguriert haben, müssen wir unser Container-Div (dasjenige, das wir vor kurzem erstellt haben) in ein Liquid-Tag einwickeln, das von unserer Sichtbarkeitseinstellung unterstützt wird.

Wickeln Sie das a- Announcement- Div in eine „if“ -Anweisung ein:

{% if section.settings.announcement_visibility %}

<div class= "Ankündigung" > {{ section.settings.announcement_text }} </div>
 {% endif %}


 {% Schema %}
 {
 „Name“: „Ansageleiste“,
 "die Einstellungen": [
 {
 „Typ“: „Checkbox“,
 „id“: „announcement_visibility“,
 „label“: „Sichtbarkeit (Ein / Aus)“,
 „Standard“: wahr
 }
 ]
 }
 {% Endschema %}

Die neue „if“-Anweisung, die wir hinzugefügt haben, untersucht die Einstellungen für eine übereinstimmende ID von notice_visibility . Wir setzen den Standardwert auf true , daher wird der Balken angezeigt.

Lassen Sie uns den Rest der Einstellungen hinzufügen

Ersetzen Sie den Code zwischen Ihrem Schema-Tag durch Folgendes:

{% Schema %}
 {
 „Name“: „Ansageleiste“,
 "die Einstellungen": [
 {
 „Typ“: „Checkbox“,
 „id“: „announcement_visibility“,
 „label“: „Sichtbarkeit (Ein / Aus)“,
 „Standard“: wahr
 },
 {
 „Typ“: „Richtext“,
 „id“: „announcement_text“,
 „Etikett“: „Text“,
 "default": " <p> Standard <em> Richtext </em> <a href= \ "https://example.com/\"> Inhalt </a></p> "
 },
 {
 „Typ“: „Bereich“,
 „id“: „announcement_text_size“,
 „min“: 12,
 „max“: 24,
 "Schritt 1,
 „Einheit“: „px“,
 „label“: „Schriftgröße“,
 „Standard“: 16
 },
 {
 „Typ“: „Farbe“,
 „id“: „announcement_text_color“,
 „label“: „Textfarbe“,
 „Standard“: „#000000“
 },
 {
 „Typ“: „Farbe“,
 „id“: „announcement_bg_color“,
 „label“: „Hintergrundfarbe“,
 „Standard“: „#aaa“
 },
 {
 „Typ“: „Bereich“,
 „id“: „announcement_border_size“,
 „min“: 0,
 „max“: 10,
 "Schritt 1,
 „Einheit“: „px“,
 „label“: „Randgröße“,
 „Standard“: 4
 },
 {
 „Typ“: „Farbe“,
 „id“: „announcement_border_color“,
 „label“: „Randfarbe“,
 „Standard“: „#333333“
 },
 {
 „Typ“: „Bereich“,
 „id“: „announcement_padding“,
 „min“: 0,
 „max“: 20,
 "Schritt 1,
 „Einheit“: „px“,
 „Etikett“: „Auffüllen“,
 „Standard“: 5
 },
 {
 „Typ“: „Auswählen“,
 „id“: „announcement_text_align“,
 „label“: „Textausrichtung“,
 "Optionen": [
 { "Wert": "links", "Label": "links"},
 { „Wert“: „Mitte“, „Beschriftung“: „Mitte“},
 { "Wert": "richtig", "Label": "richtig"}
 ],
 „Standard“: „Mitte“
 }
 ]

}
 {% Endschema %}

Wir haben hier viel auszupacken, aber wenn man den Dreh raus hat, ist es leicht zu begreifen. Gehen wir Einstellung für Einstellung vor.

Werbung

Richtext

Richtext bietet gerade genug Formatierung, um wirklich nützlich zu sein, genau wie Shopify sagt: „Sie können Richtext- Einstellungen verwenden, um Textinhalte mit einfacher Formatierung zuzulassen. Unterstützte Formatierungsoptionen sind Fett, Kursiv, Unterstrichen, Links und Absätze.“ (Quelle)

Bereichsschieberegler für Schriftgröße, Auffüllung und Rahmengröße

Ich habe einen Bereichsschieberegler verwendet, um die Textgröße zu steuern. Sie können eine minimale und maximale Größe sowie eine Standardgröße auswählen. Ich habe mich für px entschieden , aber Sie können em oder was auch immer Sie wollen verwenden. Dieselben Einstellungen werden dann erneut verwendet, um die Größe des unteren Rands der Ansageleiste sowie den Abstand zu steuern.

Text- und Hintergrundfarben

Ich habe den Farbeinstellungstyp verwendet, um die Hintergrundfarbe der Ansageleiste selbst sowie die Textfarbe zu konfigurieren.

Auswahl-Dropdown

Um unsere Einstellungen abzurunden, haben wir einen Dropdown-Typ für unsere Textausrichtung verwendet.

Voreinstellungen (optional)

Wenn Sie Voreinstellungen haben, wird der Abschnitt automatisch im Themeneditor angezeigt und wird zu einem dynamischen Abschnitt. Dies bedeutet, dass Sie die Position (nach oben oder unten) auf der Startseite verschieben können, wenn Ihr Design für dynamische Abschnitte aktiviert ist.

CSS

Das Letzte, was wir tun müssen, ist, alle von uns ausgewählten Stilkonfigurationen in CSS zu übersetzen. Fügen Sie direkt nach Ihrer Eröffnungs-Sichtbarkeits-„if“-Anweisung das folgende Style- Tag hinzu:

<Stil>
 .Bekanntmachung {
 font-size:{{ section.settings.announcement_text_size }}px;
 Hintergrundfarbe: {{ section.settings.announcement_bg_color }};
 border-bottom: {{ section.settings.announcement_border_size}}px solid {{ section.settings.announcement_border_color }};
 Auffüllen: {{ section.settings.announcement_padding}}px;
 text-align: {{ section.settings.announcement_text_align }};
 }
 .announcement p {color: {{ section.settings.announcement_text_color }};}
 .Ansage a {Text-Dekoration: unterstreichen;}
 .Ankündigung a:hover {Text-Dekoration: keine;}
 </style>

Hier gestalten wir das Wrapper-Element Ankündigung , das wir zu Beginn dieser Reise erstellt haben. Wir verwenden dieselben Liquid-Tags, um auf die ID jedes Einstellungstyps zu verweisen. Denken Sie daran, wenn wir in unserem Schema auf eine ID verweisen, müssen wir section.settings voranstellen .

Endgültige Ergebnisse

Einstellungen für die Shopify-Ankündigungsleiste

Anpassung der Shopify-Ankündigungsleiste

Und schon haben Sie Ihren ersten Themenabschnitt codiert. Sie können Ihre Kunden jetzt ganz einfach auf Ihren nächsten Verkauf aufmerksam machen!

Es gibt viele andere Dinge, die Sie hinzufügen könnten; bedingte Aussagen darüber, auf welchen Seitentypen es sichtbar ist (z. B. nur die Homepage vielleicht?).

Werbung

Mit dem, was Sie in diesem Tutorial gelernt haben, in Kombination mit der umfangreichen Dokumentation von Shopify, können Sie einen Themenbereich für fast alles erstellen: Empfohlene Produktliste, vorgestellte Produktsammlung und so weiter.

Gehen Sie zurück und lesen Sie dies noch einmal durch, lesen Sie die Dokumente und machen Sie sich an die Arbeit! Sie können Ihr Theme ganz alleine so viel besser machen, ohne einen Entwickler zu benötigen.

Den vollständigen Code finden Sie hier