FROM CACHE - de_header

Payment icon wird in der Fusszeile vom Shop nicht angezeigt

Gelöst

Payment icon wird in der Fusszeile vom Shop nicht angezeigt

yuwanetsupport
Tourist
4 0 0

Hallo zusammen!

 

Wir sind ein Online-Shop aus der Schweiz und haben gerade ein Twint-Plugin Update hinter uns. Doch seit diesem Update wird das Payment icon von Twint in der Fusszeile vom Shop nicht mehr angezeigt. Beim Check-out erscheint aber die Zahlungsart und alles funktioniert einwandfrei.

Beigefügt noch zwei Bilder:

1. Verknüpfung im Shop und wie das Icon aussehen sollte

2. Fusszeile unseres Shops

 

Könnt ihr uns bitte helfen, damit das Twint-icon wieder in der Fusszeile erscheint?

Shop-URL: yuwanet.ch

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
18543 2912 4279

Erfolg.

Hey @MEVI 

 

Vieles kommt hier auf dein Theme drauf da verschiedene Themes ja verschiedene Code Strukturen haben, und ich konnte dein Theme nicht aus deiner Frage entnehmen. Wenn das ein Shopify Theme ist dann kann unser Theme Support team das ggf. 👁️. Siehe mehr dazu hier.

 

Somit empfehle ich das mit einem Experten zu machen. Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen. 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.

 

In deinem Link gibt es a auch einen Chat des Twint Support - die wären hier die besten Ansprechpartner da die ja diesen Code spezifisch für Shopify bereitgestellt haben:

 

image.png

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

 

Um das TWINT-Symbol zu den Zahlungsmethoden in der Fußzeile deines Shopify-Shops hinzuzufügen, kannst du folgende Schritte durchführen:

  1. Gehe im Shopify-Adminbereich zu Online Store > Themes.

  2. Wähle das zu bearbeitende Theme aus und klicke auf Actions > Edit code.

  3. In der Verzeichnisliste Sections klicke auf footer.liquid. Falls diese Datei nicht vorhanden ist, wähle stattdessen theme.liquid im Verzeichnis Layout.

  4. Suche in der Datei nach dem Code {% for type in shop.enabled_payment_types %} oder {%- for type in shop.enabled_payment_types -%}.

---
Habt ihr auch den Shop auf die Weihnachtssaison und den Winterschlussverkauf umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 oder Schnäppchen 👀!

giphy

 

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.

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

Lösung in ursprünglichem Beitrag anzeigen

12 ANTWORTEN 12

Valentina13
Besucher
2 0 1

Wüsste Ich auch gerne. Erscheint bei mir auch nicht. 

Kai
Shopify Staff
2373 546 367

Hallo  & ,

welches Theme verwendet ihr? Wer euer Theme entwickelt hat und unterstützt seht ihr so nach.

Je nachdem welches Theme ihr verwendet, könnt ihr dieser Anleitung folgen, um im Footer auszuwählen, welche Zahlungssymbole in der Fußzeile angezeigt werden.

 

, als ich gerade deinen Shopify Shop besucht habe, habe ich gesehen, dass man dort die Produkte kaum erkennen kann, weil sie so durchsichtig angezeigt werden:

 

21-21-33994-29053.png

 

Weißt du, wie du das wieder korrigieren kannst oder ist das mit Absicht so?

Kai | 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

yuwanetsupport
Tourist
4 0 0

Hallo Kai!

 

Vielen Dank für deine Rückmeldung. Wir verwenden das Brooklyn-Theme 16.0.5. Bedauerlicherweise komme ich mit der verlinkten Anleitung nicht weiter. Kannst du uns vielleicht irgendwie anders weiterhelfen?

 

Dein Screenshot überrascht mich jetzt wirklich. Ich sehe das gerade zum ersten Mal bei dir. Auf meinem Desktop sieht es wie folgt aus:

yuwanetsupport_0-1642793795700.png

Was könnte der Grund sein, dass es bei dir anders angezeigt wird?

 

Liebe Grüsse

Kai
Shopify Staff
2373 546 367

Hi ,

ja so sieht dein Shopify Shop bei mir in Chrome aus, einen anderen Browser kann ich leider zum Vergleich nicht installieren. In welchem Browser schaust du dir deinen Shopify Shop an? Wie sieht der Shop für dich in Chrome aus und macht es einen Unterschied, wenn du den Shopify Shop in einer Vorschau mit einer unbearbeiteten Version von Brooklyn anschaust? 

 

Da du mit Brooklyn ein kostenloses Theme von Shopify verwendest, kannst du dich an den Shopify Support wenden, um Hilfe zu diesem Tutorial zu erhalten. Die Designzeit beträgt 15 Minuten. Weitere Informationen dazu findest du unter Support für Themes.

Kai | 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

yuwanetsupport
Tourist
4 0 0

Hallo Kai

 

Ich habe den Shop nun in den verschiedensten Browsern (Chrome, Edge, Firefox) angeschaut und es hat immer alles normal, wie bei meinem Screenshot oben, ausgesehen. Was genau meinst du mit "unbearbeitete Version"?

 

Das Problem mit dem Icon konnte ich anderweitig lösen - Vielen Dank.

Valentina13
Besucher
2 0 1

Hi Yuwanetsupport

 

Darf Ich Fragen wie du das mit dem Icon gelöst hast? 

 

Danke dir. 

 

 

 

yuwanetsupport
Tourist
4 0 0

Hallo Valentina

 

Wir haben es mit einem externen Shopify/IT-Experten angeschaut.

Kai
Shopify Staff
2373 546 367

HI ,

in deinem Admin unter Onlineshop > Themes kannst du eine nagelneue Version von Brooklyn herunterladen, um damit deinen Shopify Shop in einer Vorschau anzeigen zu lassen:

 

27-57-85873-49258.png

 

Wenn die Produkte in der unveränderten Version deines Themes normal angezeigt werden, dann weißt du, dass es am Theme liegt und du kannst dann in Erwägung ziehen, dein veröffentlichtes Theme auf eine ältere Version zurückzusetzen.

 

Kai | 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

HO4
Tourist
5 0 4

Hi Kai, 

i had the same issue, i solved in this way:

If the TWINT icon is missing on your website footer please follow these steps to add it.

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to edit, and then click Actions > Edit code.

  3. In the Sections directory, click footer.liquid. If your theme doesn't include this file, then click theme.liquid in the Layout directory.

  4. Find the following code in the file:

    {% for type in shop.enabled_payment_types %}  
  5. Find the next {% endfor %} after the {% for type in shop.enabled_payment_types %}.

  6. Right after the {% endfor %} please paste following code:

    <img src="{{ "twint" | payment_type_img_url }}" />
 
HenryAuffahrt
Shopify Partner
66 3 31

Thank you so much for this explanation @HO4 ! 🙏

 

I need to adjust it a bit in our theme. We are using "be yours" which is basically based on "dawn"

 

{%- if section.settings.payment_enable -%}
          <div class="footer__payment">
            <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
            <ul class="list list-payment" role="list">
              {%- for type in shop.enabled_payment_types -%}
                <li class="list-payment__item">
                  {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                </li>
              {%- endfor -%}
              <li class="list-payment__item">
                <img src="{{ "twint" | payment_type_img_url }}" class="icon icon--full-color" width="38" height="22" loading="lazy" style="margin-top: -1px;"/>
              </li>
            </ul>
          </div>
        {%- endif -%}

 

We needed these adjustments so that it looks visually the same as the other symbols

 

Screenshot 2023-02-22 at 10.45.10.png

Maybe this is helpful for some of you @yuwanetsupport or @Valentina13 

If you need support with this, just let me know.

SEO & Webdeveloper @ Better Sell Online
MEVI
Besucher
2 0 1

Hallo Zusammen,

 

auf der Website von TFTW, welches das offizielle Plugin für Twint bereitstellt, wird beschrieben, wie man es bei den Zahlungsarten hinzufügt: 

https://help.tftw.ch/de/articles/6368085-wie-fuge-ich-das-twint-symbol-zu-den-zahlungsmethoden-in-me...

 

Suche den folgenden Codes in der footer.liquid Datei:

 

{% for type in shop.enabled_payment_types %}

 

 und ersetzen mit: 

 

{% assign payment_types_from_config = shop.enabled_payment_types | join: ',' %}
{% assign enabled_payment_types = payment_types_from_config | append: ',twint' | split: ',' %}
{%- for type in enabled_payment_types -%}

 

So sollte es dann auch mit der Grösse und Positionierung kein Problem geben. 

Gabe
Shopify Staff
18543 2912 4279

Erfolg.

Hey @MEVI 

 

Vieles kommt hier auf dein Theme drauf da verschiedene Themes ja verschiedene Code Strukturen haben, und ich konnte dein Theme nicht aus deiner Frage entnehmen. Wenn das ein Shopify Theme ist dann kann unser Theme Support team das ggf. 👁️. Siehe mehr dazu hier.

 

Somit empfehle ich das mit einem Experten zu machen. Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen. 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.

 

In deinem Link gibt es a auch einen Chat des Twint Support - die wären hier die besten Ansprechpartner da die ja diesen Code spezifisch für Shopify bereitgestellt haben:

 

image.png

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

 

Um das TWINT-Symbol zu den Zahlungsmethoden in der Fußzeile deines Shopify-Shops hinzuzufügen, kannst du folgende Schritte durchführen:

  1. Gehe im Shopify-Adminbereich zu Online Store > Themes.

  2. Wähle das zu bearbeitende Theme aus und klicke auf Actions > Edit code.

  3. In der Verzeichnisliste Sections klicke auf footer.liquid. Falls diese Datei nicht vorhanden ist, wähle stattdessen theme.liquid im Verzeichnis Layout.

  4. Suche in der Datei nach dem Code {% for type in shop.enabled_payment_types %} oder {%- for type in shop.enabled_payment_types -%}.

---
Habt ihr auch den Shop auf die Weihnachtssaison und den Winterschlussverkauf umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 oder Schnäppchen 👀!

giphy

 

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.

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