Ticket-Shop-Footer: Ein neuer Werbeplatz im Ticket-Shop

Ticket-Shop-Footer: Ein neuer Werbeplatz im Ticket-Shop

Was ist neu?

Im Ticket-Shop hast du neu einen festen Platz für eine eigene Botschaft: einen Banner am unteren Rand, der bei der Event-Übersicht und bei jedem Event automatisch mitläuft. Du hinterlegst ihn einmal und er ist bei allen Veranstaltungen identisch. Zeigen kannst du darin zum Beispiel das Logo deines Hauptsponsors, eine Grafik oder Ankündigung für eine Aktion, oder einen kurzen Hinweis-Text.

Was ändert sich für dich?

  • Werbeplatz im ganzen Bestellprozess: Der Banner erscheint auf der Übersicht und auf den Event-Seiten.
  • Sticky oder am Seitenende: Du entscheidest, ob der Banner am unteren Bildschirmrand mitläuft und damit immer sichtbar bleibt, oder ob er als normaler Footer jeweils am Seitenende steht.
  • Gestaltung in deiner Hand: Inhalt und Aussehen legst du selbst fest, inklusive unterschiedlicher Bildgrössen für Mobile und Desktop.

Wie funktioniert es?

Öffne die Einstellungen deines Web-Shops und klicke auf «Bearbeiten». Dort stehen dir drei Felder zur Verfügung:
  • Footer – hier kommt der Inhalt hinein. Text schreibst du direkt im Editor, ein Bild fügst du über den Knopf «Bild» ein. Es muss dafür in deiner  ⁠⁠Foto-Galerie⁠  abgelegt sein. Über «Quellcode» kannst du zusätzlich eigenes HTML einsetzen, zum Beispiel um einem Bild eine CSS-Klasse mitzugeben.
  • Sticky-Footer – ist die Checkbox aktiv, bleibt der Banner auch bei langen Seiten während des ganzen Bestellprozesses am unteren Bildschirmrand sichtbar, von der Event-Auswahl bis zum Checkout. Ohne Häkchen erscheint er als normaler Footer am Seitenende.
  • CSS – hier bestimmst du das Aussehen des Banners.
Der Banner wird im Shop mit eigenen Klassen ausgegeben, die du im CSS-Feld ansprechen kannst: shop-footer für den Banner selbst, shop-footer-sticky zusätzlich bei aktivierter Checkbox, und shop-footer-inner für den Inhaltsbereich. Dieses Grundgerüst kannst du direkt ins CSS-Feld kopieren:
.shop-footer { padding: 6px 10px; text-align: center; background-color: #ffffff; border-top: 1px solid #eeeeee; font-size: 12px; line-height: 1.3; }
.shop-footer p { margin: 2px 0; }
.shop-footer img { max-height: 1.5cm; width: auto; display: inline-block; vertical-align: middle; margin: 2px 8px; }
.shop-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.shop-footer-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; }
Soll ein Logo grösser erscheinen als die übrigen Bilder, gibst du ihm im Feld Footer über «Quellcode» eine eigene Klasse mit:
<img class="shop-footer-logo" src="https://...">
Die Grösse dazu legst du im CSS fest, bei Bedarf für Mobile und Desktop getrennt:
.shop-footer img.shop-footer-logo { max-height: 1.2cm; }
@media (min-width: 768px) { .shop-footer img.shop-footer-logo { max-height: 2cm; } }