Elemento contador de stock

Acerca del elemento Contador de Stock en GemPages

El Elemento contador de stock Está diseñado para mostrar el inventario restante de su producto con una barra de progreso, un ícono o texto. Funciona con Shopify. sistema de gestión de inventario y se puede personalizar para adaptarse a la marca de su tienda.

¿Por qué utilizar Stock Counter?

• Cree urgencia mostrando stock limitado.
• Genere confianza con transparencia estado de inventario.
• Apoye las campañas de ventas editando mensajes de stock (por ejemplo, "¡Solo quedan 5 en stock!").

¿Cómo agregar un elemento contador de stock a tu página?

Para que funcione correctamente, asegúrate de colocar el Contador de Stock dentro del Módulo de Producto de tu página. Sigue estos pasos para añadir uno.

Paso 1: Acceda a Panel de Control de GemPages > Páginas, y localice la página objetivo para abrir el editor.

Paso 2: En la barra lateral izquierda, busque el Contador de Stock elemento y arrastrar y soltar uno dentro del Módulo de Producto.

Las configuraciones del elemento estarán disponibles en la barra lateral izquierda, que cubriremos en las siguientes secciones.

Configurar la pestaña Configuración

Diseño

Seleccione el diseño del elemento Contador de Stock entre estas opciones:

• Completo: el elemento contendrá un ícono, texto y una barra de progreso.
• Texto y barra de progreso
• Icono y texto
• Solo texto
• Solo barra de progreso

Fuente del producto

Haga clic en el producto para administrarlo en el elemento Producto.

Barra de progreso

Como el diseño está completo, el Barra de progreso Se activará automáticamente. Ajusta la barra de progreso como prefieras:

• Porcentaje restante: Ajuste el porcentaje de existencias restantes. Por ejemplo, si se establece en 20%, la barra se mostrará casi vacía, lo que indica escasez.
• Color: Cambia el color de la barra de progreso para que coincida con la imagen de tu tienda. Usa el selector de colores o introduce un código hexadecimal.
• Efecto: Habilitar o deshabilitar la animación de la barra de progreso.
  • Sí:La barra se llena con una animación suave.
  • No:La barra parece estática.
• Altura: Define el grosor de la barra de progreso (en píxeles). Un número mayor crea una barra más gruesa.
• Posición: Elija dónde se mostrará la barra de progreso en relación con el texto:
  • Superior: La barra aparece encima del texto original.
  • Inferior: La barra aparece debajo del texto de stock.
• Esquina: Ajuste el radio de la esquina para darle estilo a la barra de progreso: puede ser nítida, redonda o con forma de píldora.

Ícono

Personalice el icono que se muestra dentro del elemento Contador de stock.

• Icono: Elija entre los íconos disponibles de GemPages o cargue el suyo (solo se aceptan archivos SVG).
• Tamaño: Ajusta el tamaño del icono (en píxeles). Los iconos más grandes llaman más la atención, mientras que los más pequeños mantienen el diseño sutil. 
• Color: Configura el color del ícono para que coincida con la imagen de tu tienda. Introduce un código hexadecimal o usa el selector de colores.
• Posición: Decide dónde debe aparecer el icono:
  • A la izquierda: El icono aparece antes del texto.
  • Derecha: Botón El icono aparece después del texto.

Tamaño

La configuración de Tamaño le permite definir el ancho del componente Contador de stock en su página.

Ancho: Establezca cuánto espacio horizontal ocupará el contador de existencias:

• Ingrese un porcentaje valor (p. ej., 50%) para hacer que la escala del contador sea relativa al ancho del contenedor.
• Ingrese un píxel valor (p. ej., 300px) para establecer un ancho fijo.

Los valores más pequeños mantienen el contador compacto, lo cual es útil para barras laterales o diseños más ajustados.

Texto

En la sección Texto , modifique el texto del botón como prefiera:

• Contenido:De forma predeterminada, está configurado en “Solo queda %number%”. Cámbielo como su manera de incentivar a los clientes a actuar.
• Estilos: : Elija el estilo de texto de Encabezado 1-6 or Párrafo 1-3 como estilo global. 
• Fuente: Seleccione un estilo de fuente que coincida con la identidad de su marca.
• Tamaño: Ajuste el tamaño de fuente para hacer el texto prominente.
• Color: Elija un color que complemente su diseño.
• Grosor de Fuente: Controle qué tan grueso o delgado aparece el texto.
• Altura de Línea Ajuste el espacio entre líneas para mejor legibilidad.
• Espacio entre letras: Cree un aspecto más moderno o compacto cambiando el espacio entre letras.
• Transformación: Convierta el texto a mayúsculas, minúsculas o capitalice la primera letra de cada palabra.
• Sombra: Aplique efectos de sombra paralela para mejorar la profundidad visual. 

Estado de Agotado

Estas configuraciones controlan lo que sucede cuando el producto se queda sin existencias.

• Acción: Elige lo que debe hacer el contador:
  • Mostrar mensaje:Muestra un mensaje personalizado de falta de stock.
  • Ocultar elemento:El contador de stock quedará oculto en la página.
• Icono: Seleccione un ícono para mostrar junto con el mensaje de falta de stock (por ejemplo, paquete, advertencia, cruz).
• Contenido: Editar el texto del mensaje (predeterminado: “AGOTADO”).
• Color del icono: Ajusta el color del icono de fuera de stock.
• Color de texto: Ajusta el color del texto fuera de stock.

Mensaje

Personaliza los mensajes según las condiciones del stock:

• Vender cuando esté fuera de stock: Agregue un mensaje que anime a los clientes a esperar o a realizar pedidos por adelantado (por ejemplo, "¡Volveremos a tener stock pronto! Estén atentos").
• Stock ilimitado: Establezca un mensaje cuando el stock no sea limitado (por ejemplo, “¡Apúrense! ¡DEJEN QUE LOS COMPRADORES SE APRESUREN A ENTRAR!”).

Opción de visualización

Controlar cuándo debe aparecer el contador de stock:

• Mostrar siempre:Muestra el contador en todo momento.
• Mostrar si está por debajo:Solo muestra el contador si el stock restante está por debajo de un límite especificado.

Alineación

Establezca la alineación del contador de existencias dentro de su contenedor a izquierda, centro o derecha.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la Avanzado y siga las instrucciones de este artículo.

Preguntas Frecuentes

1. ¿Puedo utilizar el Contador de Stock fuera del Módulo de Producto?

No, el elemento debe colocarse dentro del Módulo de Producto para extraer correctamente los datos de inventario.

2. ¿Stock Counter se sincroniza con el inventario de Shopify?

Sí. Refleja el inventario administrado en el sistema de gestión de inventario de Shopify.