Cómo incrustar un typeform en tu página de Shopify

Incrustar un typeform en una página de Shopify es muy sencillo con el código de incrustación que te facilita Typeform. Sigue leyendo si quieres descubrir cómo realizar incrustaciones de tipo "estándar" y "página entera" en Shopify.

Incrustaciones estándar (no a página entera)

1. Crea el typeform que te gustaría incrustar y haz clic en el botón "Publicar" para hacerlo visible.

2. Ve al panel "Compartir" de tu typeform. Haz clic en el apartado "Incrustar en una web" y selecciona el tipo de incrustación que prefieras para tu formulario. En este paso, puedes elegir la opción que quieras, salvo el modo "página entera". En este caso, nosotros vamos a seleccionar el modo de incrustación "estándar".

Pulsa el botón "Comienza a incrustar" para obtener el código de incrustación de tu formulario.

3. Aparecerá en pantalla una ventana emergente. Pulsa en el menú desplegable y selecciona la opción "Shopify".

Haz clic en el botón "Copiar" para copiar el código de incrustación.

4. Inicia sesión para acceder a tu página de Shopify. En el menú de la izquierda, haz clic en "Online Store" para acceder a tu tienda online. Pulsa en el apartado "Pages (Páginas)" y, después, abre la página concreta en la que quieras incrustar tu typeform. Bastará con que pulses sobre ella.

Si lo prefieres, también puedes hacer clic en el botón "Add page (Añadir página)", que encontrarás en la esquina superior derecha de la pantalla, para crear una página nueva e incrustar allí tu formulario.

5. Haz clic en el botón "Show HTML (Mostrar HTML)" que encontrarás en el editor de página.

6. Pega el código de incrustación en el lugar específico en el que quieras que se muestre el formulario dentro de esa página.

7. Ahora, pulsa el botón "Save (Guardar)".

8. El typeform incrustado no se mostrará en el editor de página, pero puedes pulsar el botón "View page (Ver página)" para comprobar cómo va a quedar el formulario dentro de la página:

Aquí puedes ver un ejemplo:

¡Buen trabajo! ¡El typeform incrustado ya está disponible en tu página de Shopify!

Incrustaciones a página entera

Para configurar esta opción tendrás que modificar el código de tu tema en Shopify. Si no estás cómodo/a editando este tipo de código o no eres un/a usuario/a avanzado/a de Liquid (el lenguaje de creación de plantillas de Shopify), desde Typeform te recomendamos tener cerca a un/a colega desarrollador/a para que te eche una mano antes de iniciar la configuración de una incrustación a página entera. Ten en cuenta que el equipo de Typeform no puede facilitar asistencia técnica cuando se personaliza el código web.

1. Crea el typeform que te gustaría incrustar y haz clic en el botón "Publicar" para hacerlo visible.

2. Ve al panel "Compartir" de tu typeform. Haz clic en el apartado "Incrustar en una web" y selecciona el tipo de incrustación "página entera".

Pulsa el botón "Comienza a incrustar" para obtener el código de incrustación de tu formulario.

3. Aparecerá en pantalla una ventana emergente. Pulsa en el menú desplegable y selecciona la opción "Shopify".

Haz clic en el botón "Copiar" para copiar el código de incrustación.

4. Inicia sesión para acceder a tu página de Shopify. En el menú de la izquierda, haz clic en "Online Store" para acceder a tu tienda online y, después, pulsa en el apartado "Themes (Temas)".

5. Haz clic en el icono de los tres puntos, que verás al lado del tema que estás usando actualmente (Current theme), y selecciona la opción "Edit code (Editar código)" en el menú.

6. Una vez estés en la página de edición del código, haz clic en la opción "Add a new template (Añadir una nueva plantilla)" que encontrarás dentro de la carpeta "Templates (Plantillas)" en el menú de la izquierda.

7. En el menú desplegable que aparecerá en pantalla, elige el tipo de plantilla que quieres usar como base para crear tu nueva plantilla. En este caso, nosotros hemos seleccionado la opción "page (página)". Después, tendrás que decidir si quieres crear la plantilla en JSON o en Liquid. Nosotros hemos optado por utilizar Liquid, que es el lenguaje que Shopify utiliza en sus temas. Por último, indica el nombre que vas a ponerle a la nueva plantilla.

Cuando hayas terminado, haz clic en el botón "Done (Aceptar)".

8. El código de la plantilla se cargará automáticamente en el editor de código. Copia el código de incrustación facilitado por Typeform aquí. Nosotros lo hemos pegado entre el título de la página y el contenido de la misma. Haz clic en el botón "Save (Guardar)" cuando hayas acabado.

9. En el menú de la izquierda, entra en el apartado "Pages (Páginas)", que encontrarás dentro de la sección "Online Store (Tienda online)".

10. Haz clic en el botón "Add page (Añadir página)", que encontrarás en la esquina superior derecha de la pantalla.

11. Ponle nombre a esta nueva página.

12. En el lateral derecho de la página, encontrarás un menú desplegable debajo del apartado "Theme template (Plantilla del tema)". Ábrelo y selecciona el nombre de página correspondiente a la plantilla creada en los pasos 6-8.

13. Ahora, pulsa el botón "Save (Guardar)".

14. Haz clic en "View on your online store (Ver en tu tienda online)" para comprobar cómo queda el typeform incrustado en tu página de Shopify.

Si quieres cambiar la forma en la que se muestra el typeform incrustado en tu página web puedes hacer ajustes en el código desde la página de la plantilla, así como modificar los parámetros de altura y anchura en el código de incrustación del typeform. Aun así, Typeform no recomienda aplicar soluciones genéricas cuando se utiliza código personalizado, así que lo mejor es que consultes a algún/a compañero/a que sea desarrollador/a antes de modificar el código de tu página de Shopify.