So fügen Sie dem Lieferdatumselement benutzerdefinierten Text hinzu

Standardmäßig ist die Lieferterminelement Es werden lediglich die voraussichtlichen Lieferinformationen ohne zusätzlichen benutzerdefinierten Text daneben angezeigt.

In vielen Fällen möchten Händler jedoch nach dem Liefertermin zusätzliche Nachrichten hinzufügen, um die Verständlichkeit zu verbessern, Dringlichkeit zu erzeugen oder das Vertrauen der Kunden zu stärken.

Dieser Leitfaden zeigt Ihnen, wie Sie in GemPages mithilfe von benutzerdefiniertem CSS einen benutzerdefinierten Text nach dem Element „Lieferdatum“ hinzufügen können.

Häufige Anwendungsfälle

Durch das Hinzufügen von individuellem Text zum Element „Lieferdatum“ kann das Einkaufserlebnis verbessert und wichtige Informationen klarer kommuniziert werden.

Einige häufige Anwendungsfälle sind:

• Meldungen wie diese anzeigen:
  • "Voraussichtliche Lieferung"
  • „Schneller Versand“
  • „Expressversand möglich“
  • „Nur Werktage“
  • „Begrenzter Vorrat“
  • „Kostenloser Versand inklusive“
• Hinzufügen von Werbebotschaften neben der voraussichtlichen Lieferzeit
• Hervorhebung des schnellen Versands zur Optimierung der Konversionsrate
• Die Gestaltung der Lieferinformationen soll besser zu Ihrem Markenauftritt passen.
• Erstellung eines hochwertigeren Produktseitendesigns

Ejemplo:

12. Juni – 15. Juni | Kostenloser Expressversand

Schritt 1: Öffnen Sie den Bereich für benutzerdefinierten Code.

• Öffnen Sie den GemPages-Editor.
• Klicken Sie auf Liefertermin Element.
• Klicken Sie mit der rechten Maustaste auf das Element.
• Auswählen Benutzerdefinierter Code.

Dadurch wird der benutzerdefinierte Code-Editor für dieses spezifische Element geöffnet.

Schritt 2: Benutzerdefinierten Code einfügen

Fügen Sie den folgenden Code in den Bereich „Benutzerdefinierter Code“ ein:

.gzacmFacXB {}

.gzacmFacXB .estimate-date-main{

Hintergrund: # 339868;

Polsterung: 4px 10px;

Rahmenradius: 6px;

Farbe: #fff !wichtig;

}

.gps .gzacmFacXB .estimate-date-container:after {

Inhalt: "Nur zum Testen";

position: relative;

Farbe: #151515;

font-size: 17px;

Schriftart: 'AbeeZee', Sans-Serif;

}

@media(max-width:767px){

.gps .gzacmFacXB .estimate-date-container:after {

font-size: 14px;

}

}

Hinweis: Austauschbare Teile im Code

Bevor Sie den Code verwenden, ersetzen Sie bitte die unten aufgeführten anpassbaren Teile durch Ihre eigenen Konfigurations- und Designvorlieben.

Schritt 3: Speichern und veröffentlichen

• Klicken Sie auf Gespeichert.
• Veröffentlichen oder aktualisieren Sie Ihre Seite.
• Seite auf Desktop- und Mobilgeräten in der Vorschau anzeigen.

Das Element „Lieferdatum“ sollte nun ein formatiertes Badge mit benutzerdefiniertem Text daneben anzeigen.