Crear un grupo de insignias (fuera de la imagen del producto)

Elige Outside product image cuando el grupo deba situarse en la columna de información del producto (debajo del precio, bajo el botón de agregar al carrito, etc.) en lugar de superponerse a la foto. Es ideal para insignias de confianza y de envío que forman parte de los datos de compra.

Nota

Crea primero tus insignias en Badges & Labels. El grupo solo reúne insignias que ya existen.

1. Abre Badge groups

   En tu panel de administración de Shopify, abre Sami Product Labels y haz clic en Badge groups en la barra lateral de la aplicación.

   

   Badge groups está entre Badges & Labels y Extra Features en la barra lateral.

2. Haz clic en Create badge group

   En una tienda vacía verás Create your first badge group. Haz clic en Create badge group para abrir el editor.

3. Selecciona Outside product image

   En la parte superior de la pestaña Design, elige Outside product image. El botón Label Selection cambia a Add badges to group y aparece un menú Badge group replacement en la sección Design.

   

   Outside product image sitúa el grupo en la columna de información del producto.

4. Ponle nombre al grupo

   Por defecto, el grupo se llama Label group. Abre el menú … situado encima de la vista previa, haz clic en Rename y escribe un nombre de hasta 50 caracteres, por ejemplo «Checkout trust badges».

5. Agrega insignias al grupo

   En Label Selection, haz clic en Add badges to group. Busca por nombre, marca las insignias que quieras y haz clic en Select.

   

   Marca cada insignia que quieras incluir y haz clic en Select.

6. Elige dónde aparece el grupo en la página

   En la sección Design, abre Badge group replacement y elige el elemento de la página de producto al que se asocia el grupo. Por defecto es Below the product price; el menú ofrece los mismos anclajes que se usan para las insignias individuales (consulta Cambiar la posición de la insignia para ver la lista completa).

   Después, usa Predefined position para alinear el grupo a la left, al center o a la right dentro de ese elemento.

   

   Elige un elemento de la página de producto y alinea el grupo dentro de él.

7. Diseña el grupo

   Define cómo se disponen las insignias entre sí:

   Ajuste	Qué controla
   Select layout	Apilado Horizontal o Vertical.
   Item size	El tamaño de cada insignia, como porcentaje o valor fijo.
   Label gap	El espacio entre insignias, en píxeles.
   Margin	El desplazamiento superior, inferior, izquierdo y derecho respecto al contenido de alrededor.

   Comprueba la vista previa en vivo de la derecha. Usa el menú Product page / Collection page y los iconos de escritorio y móvil para confirmar que el grupo queda donde esperas en cada contexto.

8. Agrega CSS personalizado (opcional)

   Expande Advance Section para agregar tu propio CSS; es útil cuando el espaciado de un tema alrededor del elemento elegido necesita un pequeño ajuste.

9. Elige cómo se segmenta el grupo

   Cambia a la pestaña Placement y elige un Condition type:

   Opción	Comportamiento
   Keep individual badge conditions	Cada insignia se muestra u oculta según sus propias reglas de segmentación.
   Set a custom group condition	Ignora las reglas individuales y usa una sola condición para todo el grupo.

   Al elegir la segunda opción se muestran las condiciones Product, Customer, Page, Language, Country y Other para el grupo; consulta Configurar las condiciones del grupo.

   

   Usa una condición de grupo personalizada cuando todo el conjunto deba seguir una misma regla.

10. Guarda el grupo

    Haz clic en Save en la esquina superior derecha. El grupo aparece de inmediato en las páginas de producto que coincidan.

Precaución

Si el grupo no aparece donde esperas, es posible que tu tema no exponga el elemento que elegiste. Prueba otra opción de Badge group replacement o usa un selector del tema como se describe en Cambiar la posición de la insignia.

Siguientes pasos

• Crear un grupo de etiquetas (dentro de la imagen del producto): superpón un grupo sobre la foto del producto.
• Descripción general de los grupos de insignias: qué hace cada ajuste del editor.
• Cambiar la posición de la insignia: la lista completa de anclajes de la página de producto.