Wie implementiere ich Zertifizierung Icon in Shop Footer?

[MK35]

Hallo Community,

Ich möchte im Footer meines Shops eine Zertifizierung Icon einfügen vom Schweizer Onlineshop. Den Badge / Code hab ich erhalten. Weiss aber nicht wie ich den Code im Shop integrieren kann. Kann mir da Jemand helfen?

Danke im Voraus für Euer Feedback.

[Gabe]

Hallo @MK35!

Um ein Zertifizierungs-Icon im Footer Ihres Onlineshops einzufügen, müssen Sie den von der Zertifizierungsstelle bereitgestellten Code in den HTML-Code Ihres Footers integrieren. Hier die Schritte je nachdem, wo Sie das Icon im Footer platzieren möchten:

1. Bestimmen Sie den Platzierungsort: Entscheiden Sie, in welchem Teil des Footers das Zertifizierungs-Icon erscheinen soll. Zum Beispiel könnten Sie es neben den Zahlungsmethoden, den sozialen Medien Links oder am Ende des Newsletters einfügen.

2. Code einfügen: Öffnen Sie die HTML-Datei Ihres Website-Footers in Ihrem Code-Editor. Suchen Sie den Teil des Codes, der dem von Ihnen gewählten Platzierungsort entspricht.

3. Code-Beispiel für Zertifizierungs-Icon: Nehmen wir an, Sie haben einen HTML-Code von der Zertifizierungsstelle erhalten, der so aussieht:

<a href="ZERTIFIZIERUNGS_URL" target="_blank">
  <img src="LINK_ZUM_ICON" alt="Zertifiziert durch [Name der Zertifizierungsstelle]">
</a>

Ersetzen Sie ZERTIFIZIERUNGS_URL mit der URL zur Zertifizierungsseite und LINK_ZUM_ICON mit dem Link zum Zertifizierungs-Icon.

4. Code Integration:

   • Wenn Sie möchten, dass das Icon neben den Zahlungsmethoden erscheint, fügen Sie den Code vor dem Abschluss-Tag </div> der Klasse footer__payment ein.
   • Für eine Platzierung neben den sozialen Medien Links fügen Sie den Code vor dem Abschluss-Tag </div> der Klasse footer__column footer__column--social ein.
   • Um das Icon am Ende des Newsletters einzufügen, positionieren Sie den Code vor dem Abschluss-Tag </div> der Klasse newsletter__form.

5. Speichern und Testen: Speichern Sie die Änderungen und laden Sie Ihre Website hoch, um zu testen, ob das Zertifizierungs-Icon korrekt angezeigt wird.

Beachten Sie, dass der genaue Ort für die Einfügung des Codes je nach Struktur Ihres Website-Codes variieren kann. Passen Sie den Einfügepunkt gegebenenfalls an, um das gewünschte Layout zu erreichen.

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

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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.

[MK35]

Vielen Dank, Gabe. Deine Anleitung war schon sehr hilfreich. Es verlangt nun nach der Grössenangabe (Width & height). Gibt es eine Möglichkeit dies einfach zu implementieren?

[Gabe · Accepted solution]

Hey @MK35 

Klar, ich kann dir erklären, wie du die Größenangabe für das Icon in deinen Code einfügst. Es ist ziemlich einfach, die Größe des Icons anzupassen, indem du die width- und height-Attribute direkt im <img>-Tag angibst. Wenn du den von der Zertifizierungsstelle erhaltenen HTML-Code hast, sieht er also so aus:

<a href="ZERTIFIZIERUNGS_URL" target="_blank">
  <img src="LINK_ZUM_ICON" alt="Zertifiziert durch [Name der Zertifizierungsstelle]">
</a>

Um die Größe des Icons anzupassen, füge einfach die width- und height-Attribute zum <img>-Tag hinzu. Das kannst du so machen: 

<a href="ZERTIFIZIERUNGS_URL" target="_blank">
  <img src="LINK_ZUM_ICON" alt="Zertifiziert durch [Name der Zertifizierungsstelle]" width="100" height="50">
</a>

In diesem Beispiel habe ich die Breite (width) des Icons auf 100 Pixel und die Höhe (height) auf 50 Pixel gesetzt. Du kannst diese Werte natürlich an die Größe anpassen, die du für dein Icon haben möchtest. Es ist wichtig, die Größe so zu wählen, dass das Icon gut in den Footer deines Shops passt und gleichzeitig gut sichtbar und erkennbar ist.

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.

[MK35]

Hi Gabe, Danke für die tolle Unterstützung. Ich hab das Zertifikat Dank Deiner Hilfe genau dort platzieren können, wo ich wollte.

[Gabe]