Hey @petexpress
Das stellt sicherlich ein tolles Kundengerüst und Service dar, das du anbieten möchtest mit diesen simplen Telefon und E-Mail CTA Buttons (call-to-actions)!
Zwei Dinge vorab: mit der Inbox App von Shopify wird das aber nicht gehen denn die kann man nicht allzusehr anpassen und stattdessen nur mit den out-of-the-box Features der App arbeiten so wie sie sind (siehe mehr zu den tollen Vorteilen unserer inbox App hier).
Think simple! Wie wäre es stattdessen mit einer Customer Helpdesk App als Scaffolding für die Besucher zu deinem Shop? Hast du auch andere Apps ausprobiert, wie diese Demos hier, von denen viele auch einen Free Plan haben?
Dann beachte auch dass wenn du es selber codieren 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.
Wichtig: Änderungen zu deinem Theme Code können gewisse Nebeneffekte für dein hart ergattertes Boost Theme mit sich ziehen, wie z. B. 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen.
Um drei nebeneinander gesetzte Grids in einem benutzerdefinierten Abschnitt wie oben abgebildet zu erstellen, die die 3 Beschreibungstexte und CTA Buttons enthalten, kann man das folgende Vorgehen verwenden, es erfordert aber eine ausführliche Bearbeitung des Shopify-Theme-Codes und das Erstellen eines benutzerdefinierten Abschnitts:
-
Benutzerdefinierter Abschnitt erstellen:
- Gehe zu “Online Store” → “Themes” → “Actions” → “Duplizieren” → “Edit Code”.
- Navigiere in der neuen Themekopie zum Abschnitt “Sections” und klicke auf “Add a new section”.
- Gebe dem Abschnitt einen Namen, z.B. “Three Grids Section”, und speichere ihn.
-
HTML und Liquid-Code für den Abschnitt erstellen: In der neu erstellten Abschnittsdatei (sections/three-grids.liquid) füge den folgenden HTML- und Liquid-Code ein, um die 3 gewünschten Grids zu erstellen:
Erstes Kaestchen Beschreibungstext
Telefonieren
Zweites Kaestchen Beschreibungstext
[E-Mailen](mailto:info@example.com)
Drittes Kaestchen Beschreibungstext
Live Chat
Füge CSS-Styling hinzu, um die Grids nebeneinander darzustellen und das gewünschte Erscheinungsbild zu gestalten. Hier ist ein einfaches Beispiel:
.grid-container {
display: flex;
justify-content: space-between;
}
.grid-item {
width: 30%; /* Passe die Breite nach Bedarf an */
padding: 20px;
border: 1px solid #ccc;
}
Wenn du möchtest, dass der “Live Chat”-Button einen Live-Chat öffnet, füge JavaScript-Code hinzu. Hier ist ein einfaches Beispiel:
document.addEventListener('DOMContentLoaded', function() {
var liveChatButton = document.getElementById('live-chat-button');
if (liveChatButton) {
liveChatButton.addEventListener('click', function() {
// Hier den Code für die Ausführung des Live-Chats hinzufügen
// Zum Beispiel das Öffnen eines Chat-Fensters oder das Umleiten zu einer Chat-Plattform
// Beispiel: window.open('https://www.livechat.com', '_blank');
});
}
});
Bearbeite die gewünschte Template-Datei (z.B. template.liquid oder page.liquid) und füge den benutzerdefinierten Abschnitt an der gewünschten Stelle ein, indem du {% section 'three-grids' %} verwendest.
Ansonsten wäre wie gesagt eine der oben-genannten Apps der einfachere Weg!
