Crear una insignia de confianza
Crea y personaliza una insignia de confianza desde cero o a partir de una plantilla destacada en Sami Product Labels.
Una insignia de confianza es un bloque de iconos de pago, seguridad, envío, garantía o políticas, con un título y una descripción opcionales. El editor tiene dos pestañas: Design, para el contenido y el estilo, y Placement, para la posición integrada en la página de producto y el shortcode.
-
Abre Trust Badges
Sección titulada «Abre Trust Badges»En el panel de administración de Shopify, abre Sami Product Labels, selecciona Extra Features en la navegación de la aplicación y luego la pestaña Trust Badges.
Si ya tienes insignias de confianza, la página las muestra en una tabla. Si la lista está vacía, la página muestra en su lugar un panel Create your first trust badge.
La pestaña Trust Badges contiene la acción de crear, las insignias de confianza guardadas y las plantillas destacadas.
-
Elige cómo empezar
Sección titulada «Elige cómo empezar»Haz clic en Create trust badge. El botón aparece en el encabezado de la página cuando la tabla es visible, o en el panel de estado vacío cuando todavía no has creado ninguna insignia de confianza.
Desplázate hasta Featured templates. Haz clic en View all templates para ver los cuatro diseños: Eco-Friendly template, With payment method, Policies store template y Badge box template. Haz clic en Select en una plantilla para abrirla con sus iconos y su estilo ya aplicados.
Ambas opciones abren el editor en la pestaña Design.
Crea una insignia de confianza desde cero o selecciona una de las cuatro plantillas destacadas.
-
Pon un nombre a la insignia de confianza
Sección titulada «Pon un nombre a la insignia de confianza»El campo de nombre aparece sobre la vista previa. Sustituye New Trust Badge por un nombre de hasta 50 caracteres. Este nombre solo sirve para identificar la insignia de confianza en la aplicación y no se muestra a la clientela.
Usa un nombre interno claro para encontrar fácilmente la insignia de confianza en la tabla.
-
Agrega un título y una descripción
Sección titulada «Agrega un título y una descripción»En Content & Badges, abre Title y Description e introduce el texto opcional que aparece sobre los iconos. Ambos campos admiten negrita, cursiva, subrayado, emojis, alineación del texto y modo de código fuente.
Los campos son específicos de cada idioma. Sus etiquetas muestran el idioma activo, por ejemplo Title (en). Usa el selector de idioma situado sobre la vista previa para editar otro idioma.
Deja ambos campos vacíos si solo quieres mostrar los iconos.
Title y Description son campos de texto enriquecido opcionales que se editan por separado para cada idioma.
-
Agrega iconos de insignia
Sección titulada «Agrega iconos de insignia»En Badges, haz clic en Add Badge y elige una opción:
Opción Qué hace Select badge image Abre el cuadro de diálogo Select Image. Line break Hace que los iconos siguientes empiecen en una fila nueva. En Select Image, usa Search images para buscar un icono. El origen Library contiene más de 400 imágenes de pago, seguridad, envío, garantía y políticas; el número actual de elementos aparece junto al nombre del origen. Selecciona una o varias imágenes y haz clic en Select Image.
Cambia a Design your Images para usar diseños propios subidos, importados por URL o relacionados. Después de seleccionar una imagen, haz clic en Edit with AI si quieres crear una variación antes de agregarla.
Busca en la biblioteca integrada o cambia a Design your Images y confirma tu selección.
-
Reordena y configura cada icono
Sección titulada «Reordena y configura cada icono»Cada icono aparece como una fila en la lista Badges. Arrastra una fila por su control para cambiar el orden de visualización o haz clic en Delete para eliminarla. Usa los elementos Line break para controlar dónde empieza una fila nueva.
Haz clic en el botón General de la fila para abrir sus ajustes:
- Change Image: sustituye el icono seleccionado.
- Link: hace que el icono abra una URL; usa la opción de enlace externo para abrirla en una pestaña nueva.
- Tooltip: agrega hasta 150 caracteres que se muestran cuando una persona apunta al icono.
- Layout colors: cambia el color de las capas compatibles en los iconos SVG integrados.
Arrastra los iconos para reordenarlos y usa General para cambiar la imagen, el enlace, el tooltip o los colores compatibles.
-
Da estilo al bloque de la insignia de confianza
Sección titulada «Da estilo al bloque de la insignia de confianza»Usa las secciones de diseño plegables para adaptar la insignia de confianza a tu tema:
Sección Ajustes principales Design Main Section Ancho del bloque, margen, relleno, tamaño, estilo y color del borde, sombra y radio de las esquinas. Design title & description Fuente personalizada, color, tamaño de fuente e interlineado del título y la descripción. Design Badge Estilo mono, mono card, original u original card; alineación; ancho y alto; margen; y animación. Responsive size Ancho y alto de los iconos por separado para tableta y móvil. Advance Section CSS personalizado y una referencia de CSS en la que se puede hacer clic con los selectores de la insignia de confianza. Las animaciones disponibles son SlideInUp, SadeInDown, BounceIn, FlipInX y ZoomIn. Activa Animation, selecciona un efecto y usa el botón de reproducción para previsualizarlo.
Abre cada sección de diseño para dar estilo al contenedor, al texto, a los iconos, a los tamaños adaptables y al CSS personalizado.
-
Elige dónde aparece la insignia de confianza
Sección titulada «Elige dónde aparece la insignia de confianza»Cambia a la pestaña Placement:
Opción Qué hace Product page Activa el interruptor para mostrar la insignia de confianza en la posición integrada de la aplicación en todas las páginas de producto. Shortcode Copia el fragmento cuando quieras colocar la insignia de confianza en una posición personalizada de tu tema. Una insignia de confianza sin guardar usa
data-id="new"en su shortcode. Guarda la insignia de confianza antes de colocar ese fragmento en tu tema.
Usa la posición integrada en la página de producto o copia el shortcode para una posición personalizada.
-
Previsualiza y guarda
Sección titulada «Previsualiza y guarda»Usa los controles situados sobre la vista previa para:
- cambiar el idioma de edición;
- previsualizar la Product page;
- alternar entre las vistas de escritorio y móvil;
- mostrar u ocultar el producto de ejemplo;
- definir la insignia de confianza como Active o Draft.
Revisa la vista previa y haz clic en Save, en la esquina superior derecha. Haz clic en Discard si quieres salir sin conservar los cambios sin guardar.
Previsualiza el resultado, elige Active o Draft y guarda la insignia de confianza.
Siguientes pasos
Sección titulada «Siguientes pasos»- Descripción general de las insignias de confianza: gestiona las insignias de confianza guardadas, las plantillas, el estado y la ubicación.
- Colocar una insignia de confianza con un shortcode: agrega la insignia de confianza en una posición exacta de tu tema.