Cómo añadir un código personalizado a Instant Site

El código personalizado le permite verificar la propiedad de Instant Site y añadir una amplia variedad de elementos nuevos y contenido como chat o widgets de formularios de contenido a su sitio web de Ecwid. También puede integrar servicios externos (por ejemplo, reservas) con Instant Site de esta manera.

Hay dos sitios en Instant Site donde puede añadir código: la sección Encabezado y la sección Cuerpo. Si utiliza el Instant Site de nueva generación, también puede reemplazar secciones específicas del sitio por su contenido a través del código JavaScript.

Disponibilidad de planes: Venture, Business, Unlimited.

Mejorar cuenta

Cómo elegir dónde añadir código

Al elegir entre el encabezado y el cuerpo del Instant Site como lugar donde añadir su código personalizado, considere el propio código y su caso de uso.

Generalmente, se recomienda implementar JavaScript en el cuerpo del sitio ya que es mejor en términos de velocidad de página. Sin embargo, hay casos (por ejemplo, verificación de la propiedad del dominio) en los que el código debe añadirse a la sección Encabezado.

Asegúrese de leer las instrucciones para el código/widget de terceros que quiera añadir a su Instant Site para obtener consejos sobre dónde es mejor añadir este fragmento de código en particular.

Cómo añadir código a la sección Encabezado de su Instant Site

Insertar código en el encabezado del Instant Site será su opción si desea añadir un favicon (en inglés) o necesita verificar la propiedad de un sitio o dominio (por ejemplo, al vender o anunciarse en Facebook). Puede añadir varios códigos a la sección Encabezado.

Para añadir un código personalizado a la sección Encabezado del Instant Site:

Desde su panel de administración de Ecwid, vaya a Sitio web (o a Resumen → Gestionar Instant Site).
Desplácese hacia abajo hasta la sección “Ajustes de SEO” y haga clic en Añadir código bajo Metaetiquetas de cabecera y verificación del sitio:
En el campo que aparece, introduzca su código.
Guarde los cambios.

Actualice la página de Instant Site en su navegador para ver los cambios.

Cómo añadir código a la sección Cuerpo de su Instant Site

Insertar código en el cuerpo del Instant Site será su opción si necesita implementar cualquier script personalizado. Por ejemplo, desea tener una ventana de chat de Zendesk o un widget de formulario de contacto en su sitio web. Puede añadir tantos códigos a la sección Cuerpo como necesite.

Para añadir un código personalizado a la sección Cuerpo del Instant Site:

Desde su panel de administración de Ecwid, vaya a Sitio web (o a Resumen → Gestionar Instant Site).
Desplácese hacia abajo hasta la sección “Configuración avanzada del sitio web” y haga clic en Añadir código bajo Código JavaScript personalizado:
En el campo que aparece, introduzca su código.
Guarde los cambios.

Actualice la página de Instant Site en su navegador para ver los cambios.

Cómo reemplazar las secciones del Instant Site de nueva generación por su script

Puede reemplazar una sección existente del Instant Site de nueva generación por su contenido a través de código JavaScript personalizado. Por ejemplo, si desea añadir el calendario de Google para que los clientes puedan reservar sus clases de música. Después de reemplazar el contenido de la sección, puede añadirlo al menú de navegación para que los clientes puedan localizarlo de inmediato.

Para reemplazar una sección del Instant Site por su contenido:

Desde su panel de administración de Ecwid, vaya a Sitio web (o a Resumen → Gestionar Instant Site).
Haga clic en la dirección de su Instant Site para abrirla:
Desplácese hacia abajo hasta la sección que desea reemplazar, haga clic con el botón derecho en ella y luego elija Inspeccionar y copie el ID de la sección:

Obtenga más información sobre cómo encontrar selectores de Ecwid →
Solo puede reemplazar las secciones que tienen los siguientes ID:
tile-text-...
tile-image-text-...
tile-call-to-action-...

Copie este código:

<script>
  document.addEventListener("DOMContentLoaded", function(){
  document.getElementById("tile-text-H2KtzB").innerHTML = '
      <div>SU CÓDIGO AQUÍ</div>';
   });
  </script>

Reemplace “tile-text-H2KtzB” por el ID de sección de su Instant Site y “SU CÓDIGO AQUI” por su código personalizado.
En la página del Sitio web (o Resumen → Gestionar Instant Site) en su panel de administración de Ecwid, desplácese hacia abajo hasta la sección “Configuración avanzada del sitio web” y haga clic en Añadir código bajo Código JavaScript personalizado.
En el campo que aparece, introduzca su código.
Guarde los cambios.

Actualice la página de Instant Site en su navegador para ver los cambios.

Solo puede reemplazar las secciones que ya están publicadas. Los cambios no se mostrarán al ver su sitio en el editor de Instant Site.