Skip to content

So passen Sie die Schriftart Ihres Cookie-Banners in Shopify an

Wenn Sie die Schriftart Ihres Cookie-Banners in Shopify an das Branding Ihres Shops anpassen möchten, gibt es dafür einfache Methoden. In dieser Anleitung zeigen wir Ihnen, wie Sie die Schriftart entweder durch Bearbeiten des Theme-Codes ändern oder – für eine einfachere Option – eine kostenlose App nutzen, um benutzerdefinierten Code einzufügen. Wir beginnen mit der einfachsten Methode: der Verwendung der XO Insert Code App.

Option 1: Verwenden der XO Insert Code App (Einfachste Methode)

Wenn Ihnen das direkte Bearbeiten von Code zu kompliziert erscheint, können Sie die kostenlose Shopify-App „XO Insert Code“ nutzen, um die Schriftart anzupassen, ohne die Dateien Ihres Themes direkt zu ändern.

  1. Installieren Sie die XO Insert Code App

    Suchen Sie im Shopify App Store nach „XO Insert Code“ und installieren Sie die App. Folgen Sie den Anweisungen, um sie zu Ihrem Shop hinzuzufügen.

    XO Insert Code Installation Screenshot

  2. Öffnen Sie die XO Insert Code App

    Nach der Installation öffnen Sie die App über Ihren Shopify-Adminbereich.

  3. Erstellen Sie ein neues Tag für den <head>-Bereich

    Wählen Sie in der Dashboard-Ansicht der App die Option, ein Code-Snippet im <head>-Bereich hinzuzufügen. Dadurch wird sichergestellt, dass der Schriftstil auf der gesamten Website angewendet wird.

  4. Fügen Sie den Schriftart-Customization-Code ein

    Geben Sie den folgenden Code in den Editor der XO Insert Code App ein. Ersetzen Sie „Georgia, sans-serif“ durch Ihre gewünschte Schriftart:

    <style> div.banner-body__content { font-family: Georgia, sans-serif !important; } </style>

    XO Insert Code Installation Screenshot

  5. Speichern Sie den Code

    Speichern Sie den Code in der App. Die Änderungen sollten fast sofort auf Ihrer Website sichtbar sein.

Die Verwendung der XO Insert Code App ist die einfachste Methode für Anfänger, da das Risiko minimiert wird, versehentlich andere Teile Ihres Themes zu ändern.

Option 2: Bearbeiten der Datei theme.liquid

  1. Öffnen Sie Ihre Theme-Dateien

    Gehen Sie im Shopify-Adminbereich zu Onlineshop > Themes. Suchen Sie das aktive Theme und klicken Sie auf Aktionen > Code bearbeiten.

    XO Insert Code Installation Screenshot

  2. Öffnen Sie die Datei theme.liquid

    Suchen Sie in der Liste der Theme-Dateien nach der Datei theme.liquid im Bereich Layout. Klicken Sie darauf, um sie zu öffnen.

  3. Fügen Sie den Schriftart-Customization-Code ein

    Fügen Sie im <head>-Bereich Ihres Themes den folgenden Code ein. Ersetzen Sie „Georgia, sans-serif“ durch Ihre gewünschte Schriftart:

    <style> div.banner-body__content { font-family: Georgia, sans-serif !important; } </style>

  4. Speichern Sie Ihre Änderungen

    Klicken Sie auf Speichern, um die Änderungen zu übernehmen. Aktualisieren Sie Ihre Website, um die neue Schriftart zu sehen.

    XO Insert Code Installation Screenshot

Option 3: Verwendung der Theme-Einstellungen

  1. Zugriff auf die Theme-Anpassung

    Gehen Sie zu Onlineshop > Themes. Finden Sie Ihr aktives Theme und klicken Sie auf Anpassen.

    XO Insert Code Installation Screenshot

  2. Suchen Sie den Bereich für benutzerdefinierten Code

    Prüfen Sie in den Theme-Einstellungen, ob es eine Option für benutzerdefiniertes CSS oder Code im <head> gibt. Suchen Sie nach Abschnitten wie „Custom CSS“, „Benutzerdefinierter Code“ oder „Erweiterte Einstellungen“.

    XO Insert Code Installation Screenshot

  3. Fügen Sie Ihren Code hinzu

    Fügen Sie im Feld für benutzerdefinierten CSS oder Code den folgenden Stilblock ein:

    <style> div.banner-body__content { font-family: Georgia, sans-serif !important; } </style>

  4. Speichern Sie die Änderungen

    Klicken Sie auf Speichern und prüfen Sie Ihren Shop, um sicherzustellen, dass die Änderungen übernommen wurden.

Das Anpassen der Schriftart Ihres Cookie-Banners ist eine einfache Möglichkeit, Ihrem Shopify-Shop ein professionelles und einheitliches Erscheinungsbild zu verleihen. Mit nur wenigen Schritten können Sie ein ansprechendes Design erstellen, das das Gesamtbild Ihres Shops verbessert.

Next article So aktivieren Sie ein Cookie-Banner auf der Shopify-Checkout-Seite: Aktuelle Einschränkungen und Lösungen