Los íconos de pago de Shopify no se muestran en el pie de página: tema, puerta de enlace y soluciones líquidas (2026)

Solución rápida con Thunder

Primero verifique la configuración del pie de página del tema

Vaya a Tienda en línea, Personalizar, Pie de página y busque una configuración llamada Mostrar íconos de pago, Métodos de pago o Íconos de pago. Habilítelo, guárdelo y obtenga una vista previa en una ventana de incógnito. Algunos temas tienen ajustes preestablecidos de pie de página separados para computadoras de escritorio y dispositivos móviles, así que pruebe ambos.

Si la configuración está habilitada y solo aparece PayPal, es posible que el código del pie de página muestre solo los tipos de pago que Shopify reconoce para tu puerta de enlace. Las puertas de enlace de terceros, como proveedores bancarios locales, procesadores regionales o métodos de pago manuales, no siempre se asignan a los íconos SVG predeterminados de Shopify.

La confianza en el pie de página es parte de un sistema de conversión más amplio. Combina esto con el tráfico pero sin lista de verificación de ventas, Guía de auditoría de tiendas Shopify, y guía de velocidad de pago.

Arreglar el líquido del pie de página para los íconos de pago de Shopify

La mayoría de los temas muestran íconos de pago al recorrerlos tienda.enabled_paid_types. Si ese bucle se elimina, se comenta o se incluye en etiquetas ocultas, los iconos desaparecerán incluso cuando la configuración de pago sea correcta.

{% 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 %}

Si necesita codificar los tipos de pago aceptados, mantenga la lista breve y válida. Citas malas, comentarios rotos y sin cerrar. li Las etiquetas son causas comunes de errores al guardar el pie de página.

{% 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>

Las puertas de enlace de terceros pueden necesitar íconos personalizados

El asistente de ícono de pago predeterminado de Shopify cubre tipos de pago conocidos. No creará automáticamente íconos para cada método bancario local, método de transferencia manual o procesador de terceros. Si su proveedor no está en la lista de tipos admitidos, agregue manualmente un pequeño ícono SVG o WebP optimizado y etiquételo como accesible.

No cargue un objeto PNG gigante para una fila de pequeños íconos de pie de página. Mantenga los íconos personalizados pequeños, establezca el ancho y el alto explícitos y evite cargar una fuente de ícono solo para las marcas de pago. el Guía de optimización de imágenes de Shopify y guía explícita de dimensiones de imagen cubre los conceptos básicos de rendimiento.

Para conocer el comportamiento básico de Shopify, utilice el oficial Documentación de pagos de Shopify y las pautas de íconos propias de su puerta de enlace.

Verifique los conflictos de aplicaciones de CSS y pie de página

Inspeccione el pie de página en DevTools. Si el icono de marcado existe pero es invisible, busque pantalla: ninguna, visibilidad:oculta, íconos blancos sobre fondo blanco, ancho cero, recorte desbordado y envoltura flexible que empuja los íconos fuera de la pantalla en dispositivos móviles.

Las aplicaciones de insignia de confianza también pueden reemplazar o duplicar íconos de pago. Deshabilite las aplicaciones de insignias de pie de página en un tema duplicado y vuelva a probar. Si los íconos regresan, decida si la aplicación vale la velocidad y el costo de mantenimiento. el guía de restos de aplicaciones es útil si una aplicación de confianza desinstalada dejó fragmentos.

Para una limpieza de rendimiento completo, siga las guía completa de optimización de velocidad de Shopify y Guía de limpieza de CSS y JavaScript no utilizados.

Solución manual frente a solución Thunder

Cuando la limpieza de confianza se convierte en parte de un proyecto de rendimiento más amplio, compare Precios de trueno con optimización profesional de la velocidad de Shopify.

FAQ