Payment icon wird in der Fusszeile vom Shop nicht angezeigt

[yuwanetsupport]

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

[Valentina13]

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

[Kai]

Hallo Yuwanetsupport & Valentina13,

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.

Yuwanetsupport, 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:

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

[yuwanetsupport]

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:

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

Liebe Grüsse

[Kai]

Hi Yuwanetsupport,

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.

[yuwanetsupport]

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]

Hi Yuwanetsupport

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

Danke dir. 

[yuwanetsupport]

Hallo Valentina

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

[Kai]

HI Yuwanetsupport,

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:

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.

[HO4]

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]

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

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

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

[MEVI]

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 · Accepted solution]

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:

Ä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 👀!

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.