1. Centro de ayuda
  2. Integraciones y aplicaciones
  3. Opciones de inserción

Cómo añadir Calendly a un sitio de Shopify

Inserta Calendly en tu sitio de Shopify para que los visitantes puedan reservar tiempo contigo sin salir de tu tienda. Shopify admite inserciones en línea, texto y widgets emergentes.

Esta guía muestra cómo añadir cada tipo de integración y resolver problemas de visualización comunes.

Antes de empezar

Primero, genera tu código de inserción de Calendly. Puedes insertar:

  • Un tipo específico de evento o
  • Tu página de reservas

Tipos de inserciones compatibles en Shopify

Shopify soporta tres opciones de inserción de Calendly:

  • Inserción en línea: muestra tu calendario directamente en una página
  • Texto emergente: un enlace de texto que abre tu calendario en una ventana emergente
  • Widget emergente: un botón flotante que abre tu calendario en cualquier página

Añade una inserción de texto en línea o emergente

Para insertar Calendly en una página específica de Shopify:

  1. En el administrador de Shopify, dirígete a Tienda en línea > Personalizar
  2. En el menú de la izquierda, selecciona Añadir sección
  3. Elige Custom Liquid
  4. A la derecha, pega el código de inserción de Calendly en el cuadro de texto
  5. Selecciona Guardar

Esto funciona tanto para códigos de inserción de texto en línea como para códigos de inserción de texto emergente.

Mostrar un widget emergente en todo tu sitio web

Para mostrar un botón flotante de Calendly en cada página:

  1. En el administrador de Shopify, ve a Tienda en línea > Temas
  2. Encuentra tu tema y selecciona el botón ...
  3. Selecciona Editar código
  4. En el menú de la izquierda, elige theme.liquid
  5. Encuentra la etiqueta <head>
  6. Añade un salto de línea justo después
  7. Pega el código del widget emergente de Calendly
  8. Selecciona Guardar

Para comprobar si funciona, selecciona Vista previa de la tienda.

Soluciona problemas de visualización de Shopify

Inserción de Shopify que no se muestra

Si tu inserción de Calendly no aparece en tu sitio de Shopify, sigue estos pasos para solucionar el problema.

Paso 1: confirma la configuración del código de inserción y del tema

  1. En Calendly, copia el código de inserción en línea para el Tipo de evento.
  2. En Shopify, ve a Tienda en línea > Temas.
  3. Busca el tema activo y selecciona Acciones > Editar código.
  4. Elige una de las siguientes opciones:
    • Añade un nuevo bloque HTML personalizado o
    • Crea un nuevo archivo de fragmento.
  5. Si usas un fragmento, dale un nombre sencillo de referenciar después (como calendly).
  6. Pega el código de inserción de Calendly en el fragmento o bloque HTML y selecciona Guardar.

Paso 2: haz referencia a la inserción en la plantilla de página

  1. Abre la plantilla de página de Shopify en la que deseas mostrar la inserción de Calendly.
  2. Añade el siguiente código en la parte inferior del archivo:
    {% include 'calendly' %}

    (Reemplaza 'Calendly' con el nombre que utilizaste si es diferente).

  3. Guarda los cambios.
El botón de cierre del emergente no funciona

Algunos temas de Shopify ocultan elementos HTML vacíos, lo que puede evitar que se cierre la ventana emergente.

Solución: añade este código HTML después del código de inserción:

<style>
 .calendly-overlay .calendly-popup-close,
 .calendly-overlay .calendly-close-overlay {
  display: block ! importante;
 }
</style>
La inserción en línea no muestra la altura completa

Si tu calendario parece cortado:

  1. Aumenta la altura en el código de inserción: 
    <div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_EVENT"
style="min-width:320px;height:1000px;">
</div>
  2. Si eso no lo soluciona, añade este CSS a tu tema de Shopify:
    • Ve a Online Store > Edit code > Assets > theme.scss.liquid
    • Agrega lo siguiente en la parte inferior: 
      iframe {
altura: 100vh ! importante;
}

Esto obliga al iframe a utilizar toda la altura de la pantalla.

¿Fue útil este artículo?