Le icone di pagamento Shopify non vengono visualizzate nel piè di pagina: correzioni relative a temi, gateway e liquidi (2026)

Correzione rapida con Thunder

Controlla prima le impostazioni del piè di pagina del tema

Vai su Negozio online, Personalizza, Piè di pagina e cerca un'impostazione denominata Mostra icone di pagamento, Metodi di pagamento o Icone di pagamento. Abilitalo, salva e visualizza l'anteprima in una finestra di navigazione in incognito. Alcuni temi hanno preimpostazioni di piè di pagina separate per desktop e dispositivi mobili, quindi provali entrambi.

Se l'impostazione è abilitata e viene visualizzato solo PayPal, il codice a piè di pagina potrebbe visualizzare solo i tipi di pagamento che Shopify riconosce per il tuo gateway. I gateway di terze parti come fornitori bancari locali, processori regionali o metodi di pagamento manuale non sempre corrispondono alle icone SVG predefinite di Shopify.

L'attendibilità del piè di pagina fa parte di un sistema di conversione più ampio. Abbinalo a ma nessuna lista di controllo delle vendite, Guida all'audit del negozio Shopifye guida alla velocità di pagamento.

Correzione del footer liquido per le icone di pagamento Shopify

La maggior parte dei temi visualizza le icone di pagamento in loop shop.enabled_payment_types. Se il ciclo viene rimosso, commentato o racchiuso in markup nascosto, le icone scompariranno anche se le impostazioni di pagamento sono corrette.

{% if section.settings.show_payment_icons %}
  <ul class="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 %}
  </ul>
{% endif %}

Se è necessario codificare i tipi di pagamento accettati, mantenere l'elenco breve e valido. Citazioni sbagliate, commenti interrotti e non chiusi li I tag sono cause comuni di errori di salvataggio del piè di pagina.

{% assign payment_types = 'visa,master,american_express,paypal,apple_pay,google_pay' | split: ',' %}
<ul class="list-payment" role="list">
  {% for type in payment_types %}
    <li class="list-payment__item">
      {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
    </li>
  {% endfor %}
</ul>

I gateway di terze parti potrebbero richiedere icone personalizzate

L'assistente per l'icona di pagamento predefinita di Shopify copre i tipi di pagamento conosciuti. Non creerà automaticamente icone per ogni metodo bancario locale, metodo di trasferimento manuale o processore di terze parti. Se il tuo provider non è nell'elenco dei tipi supportati, aggiungi manualmente una piccola icona SVG o WebP ottimizzata ed etichettala in modo accessibile.

Non caricare uno sprite PNG gigante per una fila di piccole icone a piè di pagina. Mantieni le icone personalizzate piccole, imposta larghezza e altezza esplicite ed evita di caricare un carattere di icona solo per i contrassegni di pagamento. Il Guida all'ottimizzazione delle immagini di Shopify e guida esplicita alle dimensioni dell'immagine copre le nozioni di base sulle prestazioni.

Per il comportamento di base di Shopify, utilizza official Documentazione sui pagamenti Shopify e le linee guida relative alle icone del tuo gateway.

Controlla i conflitti tra app CSS e piè di pagina

Ispeziona il piè di pagina in DevTools. Se il markup dell'icona esiste ma è invisibile, cerca :nessuno, visibilità:nascosto, icone bianche su sfondo bianco, larghezza zero, ritaglio di overflow e avvolgimento flessibile che spinge le icone fuori dallo schermo sui dispositivi mobili.

Le app Trust Badge possono anche sostituire o duplicare le icone di pagamento. Disabilita le app dei badge a piè di pagina in un tema duplicato e riprova. Se le icone ritornano, decidi se l'app vale la velocità e i costi di manutenzione. Il Guida agli avanzi dell'app è utile se un'app di fiducia disinstallata ha lasciato snippet.

Per una pulizia completa delle prestazioni, seguire il guida completa all'ottimizzazione della velocità di Shopify e Guida alla pulizia di CSS e JavaScript non utilizzati.

Correzione manuale vs. Correzione Thunder

Quando la pulizia della fiducia diventa parte di un progetto di performance più ampio, confronta Prezzi tempestosi con Ottimizzazione della velocità professionale di Shopify.

FAQ