ℹ️ Note: Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.

El Trust Badges & Icons sección ayuda a los comerciantes a mejorar visualmente su credibilidad de la tienda utilizando indicadores de confianza personalizables como iconos de pago seguros, tarjetas de garantía, puntos de entrega y más.

Esta sección permite el control completo sobre:

• Aspecto de Badge
• Comportamiento de diseño
• Tipografía
• Animaciones
• Estilismo de fondo
• Receptividad móvil
• Personalización avanzada CSS

🎨 Plantilla

Lo que hace

Cambia el tema visual general y la paleta de colores de sus placas.

Cómo utilizar

Haga clic en el desplegable para elegir entre presets como:

• Viernes Negro
• Minimal
• Mint
• Dusk

Estas plantillas ayudan instantáneamente a combinar su marca de tiendas y estilo visual.

👀 Visibilidad

Lo que hace

Controla qué dispositivos pueden ver sus insignias de confianza.

Opciones disponibles

• Escritorio y móvil → Muestra placas por todas partes
• Sólo escritorio → Oculto en dispositivos móviles
• Sólo móvil → Oculto en dispositivos de escritorio

Esto ayuda a los comerciantes a crear experiencias específicas para dispositivos.

↔ Abajo Orientación (Desktop & Mobile)

Lo que hace

Determina cómo se arreglan las insignias individuales.

Opciones disponibles

Horizontal

Las insignias aparecen lado a lado en una sola fila.

Vertical

Las placas se apilan uno debajo de otro en un diseño de columna.

Los controles separados pueden estar disponibles para diseños de escritorio y móviles.

📱 Comportamiento de pantalla de insignia (sólo en mosaico)

Lo que hace

Controla cómo las insignias se comportan en pantallas móviles más pequeñas cuando el espacio se limita.

Opciones disponibles

Scrollable

Los clientes pueden girar horizontalmente para ver todas las placas en una fila.

Wrap

Las placas se mueven automáticamente a la siguiente línea para que todos sean visibles juntos.

✨ Animación

Lo que hace

Añade animaciones de entrada cuando las placas cargan en la página.

Cómo utilizar

Seleccione un estilo de animación desde el desplegable.

Las opciones de animación incluyen:

• Slide In
• Pop
• Fade Up
• Y más

Las animaciones ayudan a atraer la atención del cliente sin requerir trabajo adicional de diseño.

🖼️ Estilo de fondo

Lo que hace

Controla la apariencia de fondo detrás de la sección de la placa.

Opciones disponibles

• Color individual
• Gradiente
• Tricolor Gradient
• Patrones

Personalización adicional

Los merchants también pueden personalizar:

• Grado en ángulo
• Colores individuales
• Códigos de color Hex
• Apariencia del patrón

Esto ayuda a las placas a mezclarse visualmente en el diseño de la tienda.

📐 Fronteras & Corners

Corner Radius (px)

Controla cómo aparecen las esquinas exteriores redondeadas.

• Valores superiores → Más esquinas redondeadas
• 0 → esquinas cuadradas Sharp

Tamaño de la frontera (px)

Ajusta el espesor de la frontera exterior.

Color de la frontera

Cambia el color de la línea fronteriza.

Estilo de frontera

Los estilos disponibles pueden incluir:

• Sólido
• Dotted
• Dashed
• Ninguno

📏 Spacing (Desktop vs Mobile)

El espacio se puede personalizar por separado para dispositivos de escritorio y móviles.

Esto asegura que su diseño de placas sigue siendo equilibrado y sensible en todos los tamaños de pantalla.

Espacio interior (padding)

Controles espaciando dentro del contenedor de placa.

Instrucciones disponibles:

• Top
• Bottom
• Izquierda
• Bien.

Esto crea espacio para respirar entre el contenido y las fronteras.

Espacio exterior (Margen)

Añade espaciamiento fuera del bloque de placas.

Controles disponibles:

• Top Margin
• Bottom Margin

Útil para separar las placas de las secciones del escaparate circundante.

Icon Spacing

Controla la distancia entre las insignias/icons individuales.

🔷 Icon Styling

Badge/Icon Shape

Lo que hace

Añade fondos decorativos detrás de iconos individuales.

Opciones disponibles

• Ninguno
• Escudo
• Emblem
• Circle
• Plaza

📏 Tamaño y personalización

Escritorio / Tamaño móvil (px)

Controla el tamaño de icono de forma independiente para:

• Escritorio
• Móvil

Color de fondo

Cambia el color de fondo detrás de la forma del icono.

Corner Radius

Ajusta cómo se redondea el fondo del icono.

🚀 Pro Styling (Advanced)

Icon Animación

Añade efectos de movimiento continuos a los iconos.

Ejemplos pueden incluir:

• Shake
• Pulso
• Bounce

Icon Hover Animation

Promete animaciones cuando los clientes saltan sobre iconos.

Ejemplos pueden incluir:

• Float
• Wobble
• Holográfica

Icon Shadow

Añade efectos de profundidad y capa usando sombras.

Ejemplos pueden incluir:

• Flujo suave
• Subtle Drop Shadow

➖ Separador de iconos

Lo que hace

Añade líneas de divider entre iconos individuales de placa.

Cómo utilizar

Activar el Agregar separador de iconos buzón de verificación.

Esto ayuda a crear espaciamiento más limpio y separación visual.

✍️ Tipografía (Texto & Fuentes)

Selección de fuentes

Lo que hace

Controla el estilo tipográfico utilizado para títulos de placa y subpartidas.

Opciones disponibles

• Usa tu Shopify tema fuente
• Elija fuentes personalizadas
• Google Fonts support

Utilizar la fuente de tema ayuda a mantener la consistencia del escaparate.

📝 Título " Subheading Styling

Tamaño (px)

Controla el tamaño del texto.

Color

Cambia el color del texto usando:

• Color picker
• Código Hex

📐 Text Spacing

Lo que hace

Controla el espaciado entre líneas de texto para una mejor legibilidad.

El aumento del espaciamiento puede hacer que el contenido se sienta más limpio y más premium.

💻 CSS personalizado (para desarrolladores)

Característica avanzada

Si los ajustes incorporados no son suficientes, los comerciantes pueden añadir estilo CSS completamente personalizado.

Clases de destino disponibles

Entire Badge Container

.futureblink-trust-badge

Título Texto

.fb-title

Texto Subtítulo

.subheading

CTA Button

.cta-button

⚡ Aplicando CSS personalizado

Cómo utilizar

1. Pruebe su CSS personalizado en el editor
2. Haga clic Aplicar
3. Avance de los cambios al instante

❗ Sobreseimiento Shopify Estilos temáticos

A veces. Shopify los temas pueden anular su estilo personalizado.

Si sus cambios CSS no aparecen correctamente, use:

¡Importante!

Esto obliga a tu estilo a tomar prioridad sobre los estilos temáticos.

Ejemplo:

.fb-title {
color: rojo !importante;
}

✅ Resultado final

Una vez configurado con éxito, Trust Badges & Icons ayuda a crear una experiencia de almacenamiento más profesional, confiable y centrada en la conversión.

Con el estilo adecuado en su lugar:

• ✅ Mejora la credibilidad de las tiendas
• ✅ Las garantías importantes se vuelven más visibles
• ✅ Aumenta la confianza del cliente
• ✅ La marca de tiendas se siente más pulida
• ✅ Mejora la capacidad de respuesta móvil
• ✅ Los diseños de placa se vuelven más limpios y más organizados
• ✅ La consistencia visual en el escaparate se vuelve más fuerte

Las insignias de confianza bien diseñadas pueden ser significativas

Actualizado el: 10/09/2026