twint icon im footer ist höher als die restlichen

[tawaro]

Hallo Liebe Leute,

ich habe ein problem und komm nicht mehr weiter.

Hoffentlich gibts hier jemanden der mir helfen kann.

Ich habe es nun endlich geschafft das Twint icon im footer hinzuzufügen, nur leider ist es nicht auf der gleichen Höhe wie die restlichen icons. Hat jemand eine Lösung?

[Gabe · Accepted solution]

Hey @tawaro 

Danke für das Bild und wie ich sehe musstest du das Twint Icon selber an die Payments Reihe im Footer ergänzen. Vieles hängt aber von deinem Theme ab und wie genau du das Twint Icon in das footer.liquid eingebaut hast.

Weiterer Kontext zu wie die Payment Icons im Footer angezeigt werden

Alle kostenlosen Shopify-Themes enthalten die Option, Zahlungssymbole in der Fußzeile anzuzeigen. Die angezeigten Symbole werden vom Backend System gezogen und basieren auf den Zahlungseinstellungen deines Shops und der Region und Währung des Kunden. Sie können auch im Theme-Editor aktiviert werden. Wenn du Zahlungssymbole hinzufügen oder entfernen möchtest, ohne die Zahlungseinstellungen zu ändern, kannst du den Theme-Code bearbeiten.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative 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-Icon im Footer deines Shopify-Themes kleiner zu machen und es in der Größe den anderen Zahlungssymbolen anzugleichen, kannst du das CSS-Code für das Icon anpassen. Hier ist ein Beispiel-Code, den du verwenden kannst und ggf. unser neues benutzerdefinierte CSS Eingabefeld im Theme Editor dafür verwenden:

1. Erstelle eine Klasse für das Twint-Icon und definiere die Größe, die du für das Icon möchtest:

.twint-icon {
  display: inline-block;
  height: 24px; /* ändere die Größe nach Bedarf */
  width: auto; 
}

2. Füge dem Twint-Icon die Klasse twint-icon hinzu, um die Größe des Icons zu ändern:

{% if shop.payment_settings.enabled_payment_types contains 'twint' %}
  <a href="{{ 'https://www.twint.ch/' | escape }}" class="site-footer__payment-link twint-icon">
    <img src="{{ 'twint.png' | asset_url }}" alt="Twint" class="site-footer__payment-icon" />
  </a>
{% endif %}

In diesem Beispiel wird das Twint-Icon durch das Bild twint.png repräsentiert, und die Klasse site-footer__payment-icon wird verwendet, um die Größe des Bildes zu definieren. Durch das Hinzufügen der Klasse twint-icon wird die Klasse site-footer__payment-icon überschrieben und die Größe des Twint-Icons wird auf die Größe von 24px (in diesem Beispiel) geändert.

Es ist aber Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

[TFTWGmbH]

Hi @Gabe 

Leider ist es seit der Umstellung auf die Shopify Payment Apps nicht mehr so. Seit der Umstellung auf die Payment Apps werden die Icons nicht mehr im Footer geladen. Wir haben diesen Fehler schon öfters beim Shopify Partner Support gemeldet. Leider wurde bis heute nichts daran geändert.

Magst du das Thema eventuell mal wieder mit eurem Team anschauen?