Klaviyo Footer unterschiedlich auf Desktop und mobile

Liebe Community,

vielleicht könnt ihr mir helfen. Ich möchte eine Footer Sign Up Newsletter Form für Desktop und Mobile erstellen. Leider lässt Shopify immer nur eine Version zu die dementsprechend auf einem der beiden Anzeigemittel nicht schön aussieht. Folgendes habe ich bereits versucht:

Ich habe in der Klaviyo Seite jeweils eine Footer Sign Up Form für Mobile und Desktop erstellt.

Habe auch eingestellt, dass das jeweilige Form nur auf Desktop oder nur auf Mobile erscheint. Soweit bis hierher alles klar in Shopify kann ich dann allerdings nur eine Form ID eingeben.

Sobald ich im Footer eine zweite App Kategorie mit nochmal Klaviyo ID erstelle zeigt es mir gar nichts mehr an. Weder auf mobile noch auf Desktop..

Kann mit jemand helfen? Ich verzweifle schon den halben Tag..

Liebe Grüße

Elisa

Hey Elisa! @Elisa9394

Danke für die Angaben und hat dir der Klaviyo Support hier weiterhelfen können? Der wäre der beste Ansprechpartner. Apropos: wenn du eine Form einbauen möchtest, haben wir auch eine tolle App und dessen Anleitung dafür hier. Diese Form ist responsive, sprich, verwendet auch Media Queries um sich der Größe des Bildschirms anzupassen

Es DIY lösen

Bei dem Problem, dass Shopify nur eine Form-ID zulässt, was die Integration verschiedener Klaviyo-Formulare für Desktop und Mobile erschwert habe ich hier ein paar Vorschläge, wie du dieses Problem angehen könntest:

  • CSS Media Queries: Anstatt zwei verschiedene Formulare zu erstellen, ein Formular entwerfen und es mithilfe von CSS-Media-Queries an unterschiedliche Bildschirmgrößen anpassen. Media Queries können verwendet werden, um das Layout oder das Styling des Formulars zu ändern, je nachdem, ob es auf einem Desktop oder einem Mobilgerät angezeigt wird.
  • Beispielsweise kann man im CSS-Editor (mehr dazu hier) folgendes hinzufügen, aber wenn du mir den genauen Code hier sendest, oder einen Link zur Page deiner Form, dann kann ich dir eine genauere Code Anpassungen geben:
@media (max-width: 768px) {
    /* Stile für mobile Geräte */
    .footer-form {
        width: 100%;
        font-size: 16px;
        /* Weitere Anpassungen für mobile Ansicht */
    }
}

@media (min-width: 769px) {
    /* Stile für Desktop */
    .footer-form {
        width: 50%;
        font-size: 18px;
        /* Weitere Anpassungen für Desktop Ansicht */
    }
}

Javascript: Eine andere Lösung besteht darin, mithilfe von JavaScript die Anzeige des Formulars auf verschiedenen Geräten zu steuern. Den Bildschirmbreitenwert einfach überprüfen und das Formular entsprechend ein- oder ausblenden.

window.onload = function() {
    const formID = 'form-id'; // Passen Sie die Form-ID hier an
    const form = document.getElementById(formID);

    if (window.innerWidth < 768) {
        form.style.display = 'block'; // oder 'none' für nicht gewünschte Form
    } else {
        form.style.display = 'block'; // oder 'none' für nicht gewünschte Form
    }
};

Es könnte auch, wie gesagt, hilfreich sein, sich an Klaviyo-Support zu wenden oder in den Klaviyo-Dokumentationen nachzusehen, ob es eine integrierte Lösung für die Anzeige verschiedener Formulare auf unterschiedlichen Geräten gibt. Ich bin sicher dass Klaviyo schon längst dafür gesorgt oder einen Trick im Ärmel hat.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


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.

1 Like

Vielen Dank, es hat geklappt!

Super freut mich! :wink: