> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Insignias de confianza " Icons - Diseño " Styling > ℹ️ **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