Mostrar por dispositivo y página

La pestaña Display del editor de insignias decide dónde y cuándo se muestra una insignia, después de que la pestaña Products haya decidido a qué productos se aplica.

La pestaña es una lista de secciones plegables:

Sección	Qué controla	Documentado en
Customer conditions	Quién ve la insignia (con sesión iniciada, etiquetas, clientes concretos)	Segmentar por cliente
Page conditions	En qué tipos de página aparece la insignia	Esta página
Language conditions	El idioma de la tienda online en el que navega la persona	Segmentar por país e idioma
Country conditions	El país de la persona que visita la tienda	Segmentar por país e idioma
Other conditions	Imagen del producto, dispositivo y elementos del tema excluidos	Esta página
Visibility Date & Countdown	Fechas de inicio y fin y temporizadores de cuenta regresiva	Programar la visibilidad
Priority conditions	Qué insignia prevalece cuando varias se aplican a un producto	Esta página

La pestaña Display. Las secciones con un chevron se expanden; las secciones con un interruptor se activan primero.

Nota

Las secciones con un chevron (⌄) simplemente se expanden. Las secciones con un switch (Language, Country, Priority) deben activarse antes de que aparezcan sus campos.

Abre la pestaña Display

1. Abre la aplicación

   En tu panel de administración de Shopify, ve a Apps → Sami Product Labels.

2. Abre Badges & Labels

   En el menú izquierdo de la aplicación, haz clic en Badges & Labels. La lista muestra cada insignia con su Id, nombre, vista previa, tipo, prioridad, posición y estado.

   

   La lista Badges & Labels. Haz clic en el icono de lápiz de la columna Actions para editar una insignia.

3. Edita la insignia

   Haz clic en el icono de lápiz de la columna Actions de la insignia que quieras configurar. El editor se abre con tres pestañas: Design, Products, Display.

4. Ve a Display

   Haz clic en la pestaña Display.

Nota

Los botones Save y Discard de la esquina superior derecha solo aparecen cuando cambias algo. Si quieres abandonar tus ediciones, haz clic en Discard → Discard changes.

Page conditions

Por defecto, una insignia se muestra en todas las páginas donde aparece el producto. Agrega una condición de página para limitarla a determinados tipos de página.

Cómo agregar una condición de página

1. Expande Page conditions

   Haz clic en la fila Page conditions para expandirla. Aparece un botón + Add conditions.

   

   Una sección Page conditions vacía: aún no hay ninguna regla, así que la insignia se muestra en todas partes.

2. Haz clic en + Add conditions

   Aparece una fila de condición con tres campos: Page (fijo), un operador y un tipo de página. Los valores por defecto son Page is equal to Index page.

   

   Cada clic en + Add conditions agrega una fila. Usa el icono de la papelera al final de una fila para eliminarla.

3. Elige el operador

   • is equal to: muestra la insignia solo en el tipo de página seleccionado.
   • is not equal to: muestra la insignia en todas partes excepto en el tipo de página seleccionado.

4. Elige el tipo de página

   Opción	Dónde aparece la insignia
   Index page	La página de inicio de tu tienda online
   Collection page	Páginas de listado de colecciones o categorías
   Product page	Páginas de producto individuales
   Article Page	Páginas de artículos del blog
   Blog page	Páginas de listado del blog
   Cart page (including cart drawer)	La página del carrito y el panel lateral del carrito
   Search page	Páginas de resultados de búsqueda
   Specific pages	Solo la URL exacta que introduzcas (consulta el paso siguiente)

   

   Los ocho tipos de página disponibles para una condición de página.

5. Para Specific pages, introduce la URL

   Al elegir Specific pages se agrega un cuarto campo. Introduce la URL completa de la página de tu tienda online, por ejemplo https://your-store.myshopify.com/pages/summer-sale. El texto de ejemplo muestra la URL de tu propia tienda como guía.

   

   Specific pages agrega un campo de URL: pega la URL completa de la página, no solo la ruta.

6. Guarda

   Haz clic en Save en la esquina superior derecha.

Precaución

Una insignia también debe coincidir con la pestaña Products. Una condición de página limita dónde muestra su insignia un producto que coincide; nunca hace que la insignia aparezca en productos a los que no se aplica.

Other conditions

Expande Other conditions para controlar qué imagen del producto lleva la insignia, qué dispositivos la ven y qué elementos del tema omitir.

Ajuste	Opciones	Comportamiento
Show on (product page)	All images / First image	Muestra la insignia en todas las imágenes de la galería o solo en la primera imagen (principal) del producto.
Device targeting	All devices / Desktop / Mobile	Limita la insignia a quienes compran desde escritorio o desde móvil, o la muestra en todos los dispositivos.
Do not show label on	CSS class list — .CLASS1, .CLASS2,...	La insignia no se muestra en ningún elemento que coincida con estas clases. Es útil cuando un control deslizante, una vista rápida o una sección de ventas adicionales de tu tema no se presta a la colocación de insignias.

Los ajustes de imagen, dispositivo y exclusión están en Other conditions.

Nota

Do not show label on espera selectores de clase CSS separados por comas, cada uno precedido por un punto; por ejemplo, .product-card__slider, .quick-view. Inspecciona el elemento en tu tema para encontrar el nombre de la clase.

Priority conditions

Cuando varias insignias coinciden con el mismo producto, la prioridad decide cuál se muestra.

1. Activa Priority conditions

   Haz clic en el interruptor de la fila Priority conditions. Aparece un campo Priority value.

2. Introduce un valor de prioridad

   Escribe un número de 0 a 100. 0 es la prioridad más alta y 100 la más baja. La aplicación muestra el mismo consejo debajo del campo.

   

   Número más bajo = prioridad más alta. Una insignia se oculta si el producto ya tiene una insignia de mayor prioridad.

3. Guarda

   Haz clic en Save. El valor aparece ahora en la columna Priority de la lista Badges & Labels, de modo que puedes comparar todas tus insignias de un vistazo.

Precaución

Las insignias con la prioridad desactivada aparecen como None en la lista y no forman parte de la comparación. Si quieres que una insignia prevalezca siempre sobre otra, define un valor de prioridad en ambas.

Ejemplo de prioridad

Insignia	Valor de prioridad	Resultado en un producto que coincide con ambas
Sale off	0	Se muestra
Best seller	10	Oculta

Siguientes pasos

• Cambiar la posición de la insignia: ajusta dónde se sitúa la insignia en la imagen del producto.
• Segmentar productos: elige qué productos muestran tu insignia.
• Programar la visibilidad: define fechas de inicio y fin para una insignia.

Consejo

¿Necesitas ayuda?

Si tienes alguna dificultad al seguir estos pasos, escríbenos a [email protected].