Cómo añadir insignias de productos de Shopify sin la app (Guía 2026)

¿Quieres que tus productos de Shopify destaquen con etiquetas personalizadas llamativas? Entonces esta es la guía perfecta para ti. Insignias como "Rebajas", "Novedades" o "Más vendidos" pueden ayudar a que tus productos se destaquen rápidamente. No necesitas ninguna aplicación para hacerlo. ¿Sorprendido? En esta publicación, aprenderás a crear insignias de productos de Shopify sin una aplicación. Metacampos y código de tema simple de Shopify.

Esta guía paso a paso funciona incluso si no sabes programar. También aprenderás a añadir una insignia en Shopify y a controlar el texto y el color directamente desde tu panel de administración. Al final, tendrás insignias coloridas y profesionales, con un aspecto impecable y que cargan rápido. ¿Listo para transformar tu tienda Shopify? ¡Comencemos! 

Resumen

• Puedes agregar insignias de productos en Shopify sin ninguna aplicación usando metacampos y un pequeño fragmento.
• El texto, el color y el estilo de la insignia se pueden controlar directamente desde el administrador de Shopify.
• Las insignias ayudan a resaltar artículos en oferta, nuevos arribos, los más vendidos y stock limitado.
• Un CSS simple le permite posicionar y diseñar la insignia en las páginas de productos y colecciones.
• DiscountRay ofrece insignias inteligentes avanzadas si desea automatización y reglas dinámicas.

¿Por qué agregar insignias?

Las insignias ayudan a los clientes a centrarse en los productos clave. Destacan lo nuevo, lo popular o lo que está en oferta.
Guían a los compradores y aumentan los clics.

Ejemplos: 

• Las insignias de “Venta” muestran descuentos y ofertas.
  
• Las insignias de “Bestseller” generan confianza y muestran popularidad.
  
• Las insignias de “Nueva llegada” indican qué es nuevo.
  
• Las insignias de “Stock limitado” crean urgencia.
  

Si vendes ropa, añade una etiqueta de "Novedad" a los artículos nuevos. Los clientes los detectarán al instante.

Añadir insignias personalizadas de Shopify mejora la apariencia de tu tienda y te ahorra dinero. No necesitarás aplicaciones ni scripts adicionales. Es una de las mejores maneras de añadir insignias a los productos de Shopify de forma sencilla.

Próximamente…

Aprenderás a:

• Agregar insignias a las páginas de productos y colecciones
  
• Controlar el texto y el color de la insignia desde el administrador de Shopify
  
• Crea insignias de productos personalizadas que los propietarios de tiendas Shopify adoran
  
• Agregue etiquetas como Venta, Más vendido o Limitado
  
• Utilice las insignias de productos de Shopify sin una aplicación para ahorrar dinero y mantenerse rápido
  

En la siguiente sección, te proporcionaremos una guía paso a paso sobre cómo agregar insignias personalizadas mediante código simple. No te preocupes si no estás familiarizado con él. Estas instrucciones son fáciles de seguir; solo necesitas copiar y pegar para obtener el resultado deseado. 

Pasos para crear insignias de productos de Shopify sin la aplicación

Paso 1: Crear metacampos

Los metacampos almacenan detalles adicionales del producto.
Crearás tres: uno para el texto de la insignia, uno para el color de fondo y uno para el color del texto.

Pasos:

1. En el administrador de Shopify, vaya a Ajustes → Datos personalizados (metacampos) → Productos

2. Hacer clic Añadir definición y crear
   

• Texto de la insignia – texto de una sola línea, por ejemplo, “Venta”
  
• Color de fondo de la insignia – texto de una sola línea, ejemplo, #FF0000
  
• Color del texto de la insignia – texto de una sola línea, ejemplo, #FFFFFF
  

3. Hacer clic Ahorrar
   

Ahora edite cualquier producto y desplácese hasta MetacamposVerás tres casillas listas para llenar.

Ejemplo:

Si el producto es un Vestido de Verano, rellene

• Texto de la insignia → Venta
  
• Color de fondo → #FF0000
  
• Color del texto → #FFFFFF
  

Guardalo

Shopify ahora mostrará una insignia de venta roja en ese producto.

Así es como funcionan las insignias de productos de Shopify sin una aplicación.

Paso 2: Agregar el fragmento

Este paso es fácil. Solo tienes que pegar un bloque de código.

1. Ir a Tienda en línea → Temas

2. Hacer clic Comportamiento → Editar código
   
3. Bajo Fragmentos, haga clic Agregar un nuevo fragmento
   
4. Nómbralo insignias de producto
   
5. Pegue este código
   

{% si producto.metacampos.personalizado.texto_de_insignia != en blanco %}

  <div class=”custom-badge” 

       estilo="color de fondo: {{ producto.metafields.custom.badge_background_color }}; 

              color: {{ producto.metafields.custom.badge_text_color }};”>

    {{producto.metafields.custom.badge_text}}

  </div>

{% fin si %}

Captura de pantalla del código: 

Guardalo

Este código comprueba si un producto tiene texto de insignia. Si es así, lo muestra automáticamente.

Ejemplo:

Si añades "Venta" a tu metacampo, este código lo mostrará. Solo tienes que copiar y pegar. Fácil, ¿verdad? 

Esto funciona para una insignia de venta de Shopify, "Nuevo producto" o cualquier texto que desees. Es una de las formas más sencillas de usar las insignias de productos de Shopify sin una app.

Paso 3 – Mostrar la insignia

Ahora dile a Shopify dónde mostrar la insignia.

1. Abierto tarjeta-de-producto.líquido (o similar)
   

• Busca “tarjeta” o “producto”
  

2. Encuentre el área de la imagen del producto, marcada con <img> o imagen de la tarjeta del producto
   
3. Pega esta línea donde quieras la insignia.
   

{% renderiza 'insignias de producto' %}

Captura de pantalla del código: 

Ahorrar.

Luego abre plantilla-de-producto.líquido y pegue la misma línea donde desea que aparezca la insignia en las páginas del producto.

Ejemplo:

Pégalo encima de la imagen para mostrar "Novedad" directamente en ella. Guarda y actualiza.

Consejo:

Duplica tu tema antes de editarlo. Así podrás restaurarlo fácilmente si lo necesitas.

Esta configuración le ayuda a agregar insignias a los productos de Shopify rápidamente y funciona en cualquier tema.

Paso 4 – Dale estilo a la insignia

Ahora podrás diseñar el aspecto de tu insignia.

Abra su archivo CSS (base.css o tema.css).
Desplácese hasta la parte inferior y agregue este código.

.insignia personalizada {

  posición: absoluta;

  superior: 10px;

  izquierda: 10px;

  relleno: 5px 10px;

  peso de fuente: negrita;

  tamaño de fuente: 14px;

  radio del borde: 5px;

  índice z: 10;

  espacio en blanco: nowrap;

}

Captura de pantalla del código: 

Ahorrar.

Tus insignias ahora aparecen en la esquina superior izquierda de cada imagen de producto.

Ejemplo:

Ahora, cada producto muestra claramente una insignia roja de venta de Shopify con texto blanco. Puedes ajustar la posición modificando los números superiores o izquierdos.

Así es como se diseñan las insignias de producto de Shopify sin una app. Y ni siquiera se tuvo que modificar el diseño principal.

Paso 5: Agregar detalles de la insignia

Ahora es el momento de aplicar tu insignia.

1. En el administrador de Shopify, abra Productos

2. Elige un producto como “Chaqueta de invierno”
   
3. Desplácese hasta Metacampos
   
4. Llenar
   
   • Texto de la insignia → Más vendido
     
   • Antecedentes → #FFD700
     
   • Color del texto → #000000
     
5. Ahorrar
   

Actualiza tu tienda. Verás una insignia dorada de "Bestseller".

Acaba de crear una configuración de insignias de productos personalizadas en Shopify que funciona perfectamente sin herramientas externas.

Opcional: usar etiquetas

También puedes crear insignias con etiquetas en lugar de metacampos.

Añade una etiqueta llamada "venta" a tu producto. Luego, pega este código donde lo pusiste.

{% si product.tags contiene 'venta' %}

  <div class="”custom-badge”">Venta</div>

{% fin si %}

Captura de pantalla del código: 

Ahora dale estilo.

.insignia personalizada {

  color de fondo: #FF0000;

  color: #FFFFFF;

}

Captura de pantalla del código: 

Ejemplo:

Los productos con la etiqueta "rebajas" ahora muestran una insignia roja de "Rebajas". Al quitar la etiqueta, desaparece.

Este método de configuración manual de insignias en Shopify es más rápido, pero menos flexible. A diferencia de la insignia de Shopify, no se pueden cambiar los colores por producto sin una aplicación que use metacampos.

En la siguiente sección, enumeramos algunas soluciones comunes para ayudarte a minimizar errores. Analicémoslas. 

Soluciones comunes

Si las insignias no se ven bien, verifique esto.

Falta la insignia

Asegúrese de que los nombres de los metacampos coincidan exactamente (como texto de la insignia).

Posición de la insignia

Cambie los valores superior e izquierdo en el CSS.

El color no se muestra

Utilice un # antes del código de color.

Después de realizar pequeñas correcciones, las insignias de productos de Shopify sin la aplicación deberían mostrarse correctamente.

Bono: Agrega insignias inteligentes con DiscountRay

Puedes llevar esto más allá con las insignias de Shopify de DescuentoRayNo necesitas programar nada. En solo dos clics, tu insignia personalizada estará lista.  

Ejemplos: 

• Compra 2 y obtén 15% de descuento
  
• Envío gratuito para VIP
  
• Oferta exclusiva B2B

• Ventas del viernes

Hay una guía detallada sobre cómo puedes personalizar aún más tus ofertas usando esto descuento personalizado aplicación.

Reflexiones finales

Ahora sabes cómo crear insignias de producto de Shopify sin una app. No necesitas programar ni instalar nada.

Tú

• Se crearon metacampos para texto y color.
  
• Se agregó un pequeño fragmento de código
  
• Insignias colocadas en productos y colecciones
  
• Los estilicé con CSS
  
• Aprendí un método de etiqueta
  
• Vi cómo DiscountRay agrega insignias dinámicas de Shopify

Tu tienda ahora luce más limpia y rápida. Empieza con algo pequeño. Agrega una insignia y pruébala. Una insignia pequeña puede marcar una gran diferencia en cómo los compradores ven tus productos. Esperamos que este artículo te haya sido útil. Compártelo con otros comerciantes de Shopify que quieran mejorar su tienda. Para más consejos de expertos, consulta nuestros otros blogs de comercio electrónico. 

Preguntas frecuentes