Shopify Inbox Chat Button CSS

[patrick_jrzbk]

Hallo zusammen,

ich habe mich bereits in der Community zu dem Thema umgeschaut, allerdings nur ältere Beiträge mit negativem Ausgang gefunden - und hoffe dass ich heute ggf. mehr Glück habe.

Ich nutze den Shopify Inbox Chat auf meiner Seite. Mich stört allerdings die Größe, sowie Positionierung des Buttons, zudem würde ich gerne einen Schatten ergänzen. Vor allem Mobil ist der Button leider sehr groß, und wirkt deplatziert, da ich einen ähnlichen Button, von Usercentrics auf der Seite habe, der kleiner ist sieht die Seite etwas "ungleich" aus.

Was ich genau zu erreichen versuche ist dass 1. so aussieht wie 2., dazu habe ich testweise die CSS unter 3. angepasst, und das greift auch korrekt. Trage ich die CSS aber nun separat als Override, siehe 4. ein. Dann greift es nicht mehr.

Ändere ich aber eine höhere Klasse, bzw. ID bspw. #ShopifyChat greift die CSS perfekt.

Hat jemand eine Idee wie ich eine Anpassung vornehmen kann, sodass ich die CSS des Chat-Button korrekt angepasst kriege?

P.S.: die unter 4. eingetragene CSS dient natürlich nur als Beispiel, damit auf man den ersten Blick erkennt ob diese greift oder nicht.

Danke und besten Gruß
Patrick

[Gabe]

Hey Patrick! @patrick_jrzbk 

Um sicherzustellen, dass deine Anpassungen angewendet werden, musst du die richtigen Selektoren und möglicherweise !important verwenden, um höhere Spezifität zu erreichen. Hier ist ein Beispiel:

#ShopifyChat {
    width: 50px !important;
    height: 50px !important;
    bottom: 10px !important;
    right: 10px !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
}

#ShopifyChat iframe {
    width: 100% !important;
    height: 100% !important;
}

• width und height: Ändert die Größe des Chat-Buttons.
• bottom und right: Positioniert den Chat-Button.
• box-shadow: Fügt einen Schatten hinzu.
• iframe: Stellt sicher, dass das eingebettete Chat-Fenster die volle Größe des Containers nutzt.

Durch das Hinzufügen und Anpassen des benutzerdefinierten CSS in deiner Theme-Datei kannst du die Größe, Positionierung und das Aussehen des Shopify Inbox Chat-Buttons anpassen. Verwende !important, um sicherzustellen, dass deine Styles angewendet werden und überschreibe gegebenenfalls bestehende Styles.

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 obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

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.

[patrick_jrzbk]

Hi @Gabe,

danke die für die Hinweise.

Das habe ich allerdings schon "alles" probiert. Habe mit verschiedenen Selektoren, sowohl den Klassen, als auch den Elementen selbst gearbeitet, ebenso mit und ohne !important.

Hier (nur ein paar) Beispiele der Pfade, welche ich versucht habe zu nutzen:

#ShopifyChat .needsclick .chat-app .chat-toggle

#ShopifyChat div > button

.chat-app button.chat-toggle.chat-toggle--icon-button

button.chat-toggle.chat-toggle--icon-button

Selbst Versuche ab dem body haben ins nichts geführt.

Grundsätzlich müsste es ja über button.chat-toggle.chat-toggle--icon-button klappen, da ich in der Dev Konsole an das Ergebnis komme, siehe

ist der Code dann aber real in Verwendung klappt's nicht.

Kannst du mir einmal den korrekten CSS Selektor für diesen Fall schicken?

Vielen lieben Dank und beste Grüße
Patrick

[Gabe]

@patrick_jrzbk 

Ja, da stossen wir so langsam an die Grenzen der Gestaltung der App da sie extern geladen wird und die Styles möglicherweise über eine externe Stylesheet-Datei definiert werden, die nicht teil des Theme Code ist. Externe Widgets wie Chat-Buttons laden oft ihre eigenen Styles dynamisch und haben daher eine höhere Prio.

Verwende hochspezifische CSS-Selektoren und !important, um sicherzustellen, dass deine Styles angewendet werden:

#shopify-chat button.chat-toggle.chat-toggle--icon-button {
    width: 50px !important;
    height: 50px !important;
    bottom: 10px !important;
    right: 10px !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
    border: 2px solid green !important;
    position: fixed !important;
}

Falls CSS-Overrides nicht ausreichen, kannst du JavaScript verwenden, um die Stile direkt zu ändern. Dies kann über ein DOMContentLoaded-Event erfolgen:

document.addEventListener("DOMContentLoaded", function() {
    var chatButton = document.querySelector("button.chat-toggle.chat-toggle--icon-button");
    if (chatButton) {
        chatButton.style.width = "50px";
        chatButton.style.height = "50px";
        chatButton.style.bottom = "10px";
        chatButton.style.right = "10px";
        chatButton.style.boxShadow = "0px 4px 10px rgba(0, 0, 0, 0.25)";
        chatButton.style.border = "2px solid green";
        chatButton.style.position = "fixed";
    }
});

Oder es als benutzerdefiniertes Script direkt in die theme.liquid oder eine spezifische Template-Datei einfügen:

<script>
document.addEventListener("DOMContentLoaded", function() {
    var chatButton = document.querySelector("button.chat-toggle.chat-toggle--icon-button");
    if (chatButton) {
        chatButton.style.width = "50px";
        chatButton.style.height = "50px";
        chatButton.style.bottom = "10px";
        chatButton.style.right = "10px";
        chatButton.style.boxShadow = "0px 4px 10px rgba(0, 0, 0, 0.25)";
        chatButton.style.border = "2px solid green";
        chatButton.style.position = "fixed";
    }
});
</script>

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[patrick_jrzbk]

Danke nochmal @Gabe , ich hatte bereits alle möglichen spezifischen Selektoren ausprobiert. Wie beschrieben ging ich sogar vom body, habe es mir direkter Vererbung, etc. probiert.

Ich habe soeben auch mal dein Codebeispiel im CSS und auch JS eingebaut, führt leider beides ebenfalls nicht zum gewünscht Ergebnis.

Gibt es ggf. die Möglichkeit direkt im Plugin mit Custom CSS zu arbeiten, welche mit in die eigentliche CSS geschrieben wird.

Oder gehe ich recht der Annahme dass eine Umgestaltung des Buttons nicht möglich ist?

Danke und besten Gruß
Patrick

[Gabe]

@patrick_jrzbk 

Yup, wenn das benutzerdefinierte CSS nicht direkt in der theme.liquid-Datei oder in eine andere Datei greift, die sicherstellen soll, dass deine Styles zuletzt geladen werden, dann sieht es aus wie Game Over.

<style>
  button.chat-toggle.chat-toggle--icon-button {
      width: 50px !important;
      height: 50px !important;
      bottom: 10px !important;
      right: 10px !important;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
      border: 2px solid green !important;
      position: fixed !important;
  }
</style>

Probiere mal das CSS innerhalb der head-Tags der theme.liquid-Datei hinzuzufügen:

<head>
  ...
  <style>
    button.chat-toggle.chat-toggle--icon-button {
        width: 50px !important;
        height: 50px !important;
        bottom: 10px !important;
        right: 10px !important;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
        border: 2px solid green !important;
        position: fixed !important;
    }
  </style>
  ...
</head>

Oder den JS zu verwenden, um die Stile zu setzen:

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        var chatButton = document.querySelector("button.chat-toggle.chat-toggle--icon-button");
        if (chatButton) {
            chatButton.style.width = "50px";
            chatButton.style.height = "50px";
            chatButton.style.bottom = "10px";
            chatButton.style.right = "10px";
            chatButton.style.boxShadow = "0px 4px 10px rgba(0, 0, 0, 0.25)";
            chatButton.style.border = "2px solid green";
            chatButton.style.position = "fixed";
        }
    }, 1000); // Warte eine Sekunde, um sicherzustellen, dass das Element geladen ist
});

Aber das hast du ja schon alles ausprobiert denke ich...

VG,

[patrick_jrzbk]

Hi @Gabe vielen Dank nochmal für deine aktive Mithilfe! Und ja, leider habe ich auch das bereits probiert.

Ggf. kommt die Nutzung einer Custom CSS im Plugin ja irgendwann mal auf die Bucketlist 🙂 bis dahin schau ich mal nach einem alternativen Plugin.

Schönen Tag dir noch, beste Grüße
Patrick

[Gabe]

@patrick_jrzbk 

Du ja, denn September war der letzte Improvement Update zur Inbox App und Januar gingen die App Einstellungen in den Theme Editor als theme app extension:

Also dürfte der nächste Update kurz bevorstehen! 😉