FROM CACHE - de_header

Trust Badges

Gamze1
Entdecker
45 0 2

Wie kann man Trust Badges auf der Homepage über der Fußzeile einfügen (so wie auf dem Bild)?

 

Screenshot.png

10 ANTWORTEN 10

Gabe
Shopify Staff
16357 2587 3853

Hey @Gamze1 

 

Danke für das Bild und der einfache Weg wäre es einen Abschnitt Block mit Benutzerdefinierten HTML zu verwenden. Siehe wie ich das jetzt in meiner Dawn Testumgebung gemacht habe hier (klicke in das Bild um rein zu zoomen):

 

23-52-nm5rf-18vl1.png

 

wenn du die Trust Badges weiter stylen möchtest, dann kannst du auch gerne mit dem neuen "Benutzerdefiniertes CSS" Feature in einer Testumgebung spielen (siehe Bild!

 

Und jetzt neu - du kannst auch Fokuspunkte in die Trust Badges einbauen falls die Trust Badges clickable sein sollen:

 


Lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

 

giphy

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Gamze1
Entdecker
45 0 2

Danke für deine Antwort. Wie kann ich denn aber den Text und die Icons noch individuell anpassen? In diesem Fall wurde ja nur den Screenshot eingefügt oder nicht?

Gamze1
Entdecker
45 0 2

Da muss man doch sicherlich auch was codieren? Könntest du da weiterhelfen?

Gabe
Shopify Staff
16357 2587 3853

Hey @Gamze1 

 

Gerne helfe ich weiter aber was genau meinst du mit "Wie kann ich denn aber den Text und die Icons noch individuell anpassen?"

 

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Gamze1
Entdecker
45 0 2

Ich würde gerne andere Badges benutzen und darunter dann eine kleine Beschreibung , wie kostenloser Versand ab 50€. Ich möchte, dass es am Ende genau so wie auf dem Screenshot aussieht also 3 Badges in einer Reihe, nur dass ich mir dann alles selbst ausgesucht hab. 

Habe mir schon vieles dazu durchgelesen, aber nichts hat wirklich funktioniert..

Gabe
Shopify Staff
16357 2587 3853

@Gamze1 

 

Ja, wenn du den oben-erwähnten Abschnitt meinst wo die Badges und der Inhalt segmentiert austauschbar ist dann müsstest du entweder eine App wie den Trust Badges Bear verwenden oder es selber eincoden. 

Hier wäre ein Beispielcode:

 

<div class="trust-badges">
  <img src="badge1.jpg" alt="Trust Badge 1">
  <img src="badge2.jpg" alt="Trust Badge 2">
  <img src="badge3.jpg" alt="Trust Badge 3">
  <img src="badge4.jpg" alt="Trust Badge 4">
</div>

 

Und hier:

 

{% assign trust_badges = section.settings.trust_badges_images %}
<div class="trust-badges">
  {% for badge in trust_badges %}
    <img src="{{ badge | img_url }}" alt="Trust Badge">
  {% endfor %}
</div>

 

Im code, section.settings.trust_badges_images ist die Variable die die Bilder für die Trust Badge enthält, und die Schleife geht jedes Bild durch und zeigt es in einem img Tag.

 

Beachte, dass das CSS für die Gestaltung der Zeile mit den Vertrauensmarken zum Stylesheet des Themes hinzugefügt werden sollte (in der Regel theme.scss.liquid) und dass die Klassennamen mit den Klassennamen übereinstimmen sollten, die im HTML- bzw. Liquid-Code verwendet werden. Um die Zeile mit den Trust Badges zu zentrieren, könntest du zum Beispiel diesen CSS-Code verwenden:

 

.trust-badges {
  display: flex;
  justify-content: center;
}

 

Ich bin nun mal ab in den Feierabend fürs W-Ende und wünsche dir teu teu teu mit dem Abschnitt und deinen Shop! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Gamze1
Entdecker
45 0 2

Das hilft schon mal auf jeden Fall weiter. Ich habe aber noch weitere Fragen, da ich mich leider mit codieren garnicht auskenne. Ich habe den ersten Code jetzt im Theme.liquid ganz unten eingefügt. Die Trust Badges tauchen jetzt aber ganz unten auf der Seite auf. Ich würde Sie gerne direkt über der Fußzeile haben. Wo genau muss ich den Code denn einfügen?BA55FB89-2FC5-4176-8F2D-8043A013F7FE.jpeg

Zudem ist das Icon sehr groß. Die Größe würde ich auch gerne ändern und den Hintergrund würde ich gerne so wie auf dem ersten Screenshot haben, etwas gräulich. Wie muss ich das codieren. Ich benutze das Studio Theme und da gibt es leider keinen theme.scss.liquid

Gabe
Shopify Staff
16357 2587 3853

Hey @Gamze1 

 

Da bin ich nun wieder. Hast du das in der Zwischenzeit lösen können?

 

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Gamze1
Entdecker
45 0 2

Hey, ja ich hab’s jetzt mit einer anderen Lösung hinbekommen 🙂

Gabe
Shopify Staff
16357 2587 3853

Super freut mich! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog