Integración con Shopify

Agregar temporizadores de gettickr.app a las tiendas de Shopify ayuda a crear urgencia para las ventas, destacar ofertas por tiempo limitado y generar anticipación para lanzamientos de productos. Esta guía cubre múltiples métodos de integración para diferentes casos de uso en Shopify.

Resumen de inicio rápido

Requisitos previos

Antes de comenzar, necesitarás:

Método 1: Temporizadores en páginas de producto (Personalizador de tema)

Perfecto para lanzamientos de productos, ofertas por tiempo limitado y crear urgencia en productos específicos.

Guía paso a paso

Paso 1: Crea tu temporizador

1. Ve al Editor
2. Diseña un temporizador que coincida con el estilo de tu página de producto
3. Usa countdown para ventas basadas en duración (p. ej., "Venta Flash de 24 horas")
4. Usa count-to para fechas/horas de finalización específicas
5. Copia la URL del temporizador de la sección Renderer

Paso 2: Accede al Personalizador de tema

1. En Shopify Admin, ve a Tienda online → Temas
2. Haz clic en "Personalizar" en tu tema activo
3. Navega a una página de producto en la vista previa

Paso 3: Añade sección Custom Liquid

1. Haz clic en "Añadir sección" o encuentra una sección existente donde quieras el temporizador
2. Busca la sección "Custom Liquid" o "HTML personalizado"
3. Si no está disponible, tu tema puede requerir el Método 3 (Editor de código)

Paso 4: Inserta el código del temporizador

Pega este código en la sección Custom Liquid:

<div
  class="product-countdown-timer"
  style="text-align: center; margin: 30px 0;"
>
  <h3 style="margin-bottom: 15px;">¡Oferta por tiempo limitado!</h3>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="300"
    style="border: none; max-width: 800px; margin: 0 auto; display: block;"
    title="Temporizador de venta del producto"
  >
  </iframe>
  <p style="margin-top: 15px; color: #e74c3c; font-weight: bold;">
    ¡Date prisa! La venta termina cuando el temporizador llega a cero.
  </p>
</div>

Paso 5: Posición y estilo

1. Arrastra la sección para posicionarla (encima/debajo de las imágenes del producto o descripción)
2. Ajusta el margen y el estilo según sea necesario
3. Posiciones comunes:
   • Encima de "Añadir al carrito" - Máxima urgencia
   • Debajo del título del producto - Prominente pero no abrumador
   • En el área de descripción del producto - Colocación contextual

Paso 6: Guardar y publicar

1. Haz clic en "Guardar" en la parte superior derecha
2. Previsualiza en escritorio y móvil
3. Haz clic en "Publicar" cuando estés satisfecho

Tamaños de temporizador recomendados para productos

Método 2: Integración en la página de inicio

Crea urgencia para ventas en toda la tienda o eventos importantes añadiendo temporizadores a tu página de inicio.

Usando secciones de tema

Paso 1: Accede al editor de página de inicio

1. Shopify Admin → Tienda online → Temas
2. Haz clic en "Personalizar"
3. Asegúrate de estar viendo la Página de inicio

Paso 2: Añade sección personalizada

1. Haz clic en "Añadir sección"
2. Selecciona "Custom Liquid" o "HTML personalizado"
3. Colócala donde quieras (área hero, medio, encima del footer)

Paso 3: Inserta el código del temporizador de página de inicio

<section
  class="homepage-countdown"
  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 60px 20px; text-align: center; color: white;"
>
  <div style="max-width: 1200px; margin: 0 auto;">
    <h2 style="font-size: 48px; margin: 0 0 10px 0; font-weight: bold;">
      🎉 ¡Venta flash en curso!
    </h2>
    <p style="font-size: 24px; margin: 0 0 30px 0;">
      Ahorra hasta un 50% en artículos seleccionados
    </p>
    <iframe
      src="https://gettickr.app/r/#YOUR-TIMER-ID"
      width="100%"
      height="400"
      style="border: none; max-width: 1000px; margin: 0 auto; display: block; background: transparent;"
      title="Temporizador de venta flash"
    >
    </iframe>
    <a
      href="/collections/sale"
      style="display: inline-block; margin-top: 30px; padding: 15px 40px; background: white; color: #667eea; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 18px;"
    >
      Comprar ahora →
    </a>
  </div>
</section>

Consejos de diseño para temporizadores de página de inicio

Método 3: Páginas de colección/categoría

Añade temporizadores a las páginas de colección para ventas específicas de categoría (p. ej., "Venta de colección de verano").

Método del editor de código de tema

Paso 1: Accede al editor de código

1. Shopify Admin → Tienda online → Temas
2. Haz clic en "Acciones" → "Editar código"
3. Encuentra la carpeta "Sections" en la barra lateral izquierda

Paso 2: Edita la plantilla de colección

1. Encuentra collection-template.liquid o main-collection.liquid
2. Localiza donde quieres añadir el temporizador (generalmente después de <h1>{{ collection.title }}</h1>)

Paso 3: Añade el código del temporizador

Inserta este código en la ubicación elegida:

{% comment %} Temporizador de cuenta regresiva para venta de colección {%
endcomment %}
<div
  class="collection-countdown-wrapper"
  style="margin: 40px auto; max-width: 1200px; padding: 0 20px;"
>
  <div
    style="text-align: center; background: #f8f9fa; padding: 30px; border-radius: 8px;"
  >
    <h2 style="margin-top: 0;">⏰ ¡La venta termina pronto!</h2>
    <iframe
      src="https://gettickr.app/r/#YOUR-TIMER-ID"
      width="100%"
      height="300"
      style="border: none; max-width: 900px; margin: 20px auto; display: block;"
      title="Temporizador de venta de colección"
    >
    </iframe>
    <p style="margin-bottom: 0; font-size: 18px; color: #666;">
      ¡No te pierdas los descuentos exclusivos!
    </p>
  </div>
</div>

Paso 4: Visualización condicional (Opcional)

Para mostrar el temporizador solo en colecciones específicas:

{% if collection.handle == 'summer-sale' %}
<!-- Código del temporizador aquí -->
{% endif %}

Paso 5: Guardar y probar

1. Haz clic en "Guardar" en la parte superior derecha
2. Visita una página de colección para ver el temporizador
3. Prueba en dispositivos móviles

Método 4: Páginas personalizadas (páginas de destino)

Para páginas de venta dedicadas, páginas de eventos o páginas de destino promocionales.

Método del editor de páginas

Paso 1: Crea o edita página

1. Shopify Admin → Tienda online → Páginas
2. Haz clic en "Añadir página" o edita una página existente
3. Ingresa el título y contenido de la página

Paso 2: Cambia a modo HTML

1. Haz clic en el botón "<>" (Mostrar HTML) en la barra de herramientas del editor
2. Esto revela el HTML sin procesar de tu página

Paso 3: Inserta el código del temporizador

Pega el código de tu temporizador donde lo desees:

<div style="text-align: center; margin: 40px 0;">
  <h2>El registro anticipado cierra en:</h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    style="border: none; max-width: 1000px; margin: 20px auto; display: block;"
    title="Temporizador de registro"
  >
  </iframe>
  <p style="font-size: 18px;">¡Regístrate ahora para ahorrar un 30%!</p>
</div>

Paso 4: Guardar y publicar

1. Haz clic en "Guardar"
2. Previsualiza la página
3. Publica cuando esté listo

Método 5: Temporizador en banner de todo el sitio

Muestra temporizadores en toda tu tienda en un encabezado o barra de notificación.

Integración en encabezado de tema

Paso 1: Edita el código del tema

1. Temas → Acciones → Editar código
2. Encuentra sections/header.liquid o sections/announcement-bar.liquid

Paso 2: Añade banner con temporizador

Inserta antes de la etiqueta de cierre </header> o al principio del archivo:

<div
  class="site-wide-countdown-banner"
  style="background: #ff6b6b; padding: 15px 20px; text-align: center;"
>
  <div
    style="max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px;"
  >
    <span style="color: white; font-weight: bold; font-size: 16px;">
      🔥 La venta flash termina en:
    </span>
    <iframe
      src="https://gettickr.app/r/#YOUR-TIMER-ID"
      width="400"
      height="60"
      style="border: none; vertical-align: middle;"
      title="Temporizador de banner de venta"
    >
    </iframe>
    <a
      href="/collections/sale"
      style="color: white; text-decoration: underline; font-weight: bold;"
    >
      Comprar ahora →
    </a>
  </div>
</div>

Paso 3: Hazlo desestimable (Opcional)

Añade JavaScript para permitir a los usuarios cerrar el banner:

<div
  id="countdown-banner"
  class="site-wide-countdown-banner"
  style="background: #ff6b6b; padding: 15px 20px; text-align: center; position: relative;"
>
  <!-- Contenido del temporizador -->
  <button
    onclick="document.getElementById('countdown-banner').style.display='none'"
    style="position: absolute; right: 10px; top: 10px; background: none; border: none; color: white; font-size: 20px; cursor: pointer;"
  >
    ✕
  </button>
</div>

Solución de problemas de integración con Shopify

Problemas comunes

Lista de comprobación de pruebas

Antes de publicar cambios de temporizador:

• Probar en producto/colección/página real
• Verificar capacidad de respuesta móvil (usar vista previa móvil de Shopify)
• Comprobar que el temporizador se actualiza correctamente
• Asegurar que el temporizador no rompe el diseño de la página
• Probar en múltiples navegadores (Chrome, Safari, Firefox)
• Verificar que el temporizador carga rápidamente (< 3 segundos)
• Comprobar que el temporizador coincide con la marca de la tienda

Rendimiento y SEO

Consejos de rendimiento

Consideraciones de SEO

Mejores prácticas:

• Añadir atributo title descriptivo a los iFrames
• Incluir contexto de texto alrededor de los temporizadores (encabezados, descripciones)
• No ocultar contenido importante detrás de temporizadores
• Asegurar que el contenido de la página sea valioso más allá del temporizador

Funciones Premium para Shopify

Flujo de trabajo de control remoto:

1. Añade temporizador a página de producto con URL Premium
2. Cuando la venta comienza: Abre el editor, inicia el temporizador remotamente
3. El temporizador se actualiza automáticamente en la tienda
4. Cuando la venta termina: Pausa o reinicia el temporizador remotamente
5. Reutiliza el mismo temporizador para el próximo evento de venta

Mejores prácticas para temporizadores de comercio electrónico

Optimización de conversión

✅ HACER:

• Colocar temporizadores en la parte superior de la página en páginas clave
• Usar colores urgentes (rojo, naranja) para ofertas sensibles al tiempo
• Hacer coincidir el diseño del temporizador con la estética del producto/marca
• Probar diferentes posiciones de temporizador para mejores resultados
• Combinar temporizadores con CTAs claros (Llamadas a la acción)
• Usar fechas límite auténticas (no fingir urgencia)

❌ NO HACER:

• Usar en exceso temporizadores en cada producto (crea efecto "Pedro y el lobo")
• Usar fechas límite engañosas o falsas
• Hacer temporizadores tan grandes que abrumen el contenido
• Olvidar eliminar temporizadores vencidos
• Usar temporizadores sin propuesta de valor clara

Ideas de pruebas A/B

Próximos pasos

• Integración iFrame - Profundiza en la personalización de iFrame
• Personalizar diseño del temporizador - Coincide perfectamente con tu tema de Shopify
• Control remoto - Aprende sobre la gestión de temporizadores Premium
• Integración WordPress - Si también tienes un blog de WordPress