Cómo agregar un código de Botón de compras a HTML

Después decrear un Botón de compraen tu panel de control de Shopify, ya puedes agregarlo a tu propio sitio web o blog.

El proceso de agregar un código de incrustación al código fuente HTML de su sitio web es un poco diferente dependiendo de cómo y dónde quieres que aparezcan tus botones de compra y carrito, de tu plataforma de publicación, y a veces, del tema que estás utilizando en esa plataforma.

Agregar código de incrustación a WordPress

Puedes agregar un código de incrustación a publicaciones, páginas o plantillas en el sitio de WordPress.

Agregar código de incrustación a una publicación o página de WordPress

1. En Shopify,crea un Botón de compray copia su código de incrustación del cuadro de diálogoCódigo de incrustación(o haz clic enCopiar código de incrustación en el portapapeles).
2. Desde el panel de control de WordPress, ve a tus publicaciones o páginas.
3. Crea una nueva publicación o página, o edita una existente.
4. Dentro del editor de bloques, haz clic en el botón+, buscaCustom HTMLy, luego, haz clic para insertar un bloque HTML personalizado.
5. Pega el código de incrustación en el campo de texto proporcionado por el bloque HTML personalizado.

6. Opcional: Mueve el bloque HTML personalizado u obtén una vista previa de cómo aparecerá el botón de compras:

   • Para mover el bloque HTML personalizado, haz clic en los botones de flecha en la barra de herramientas del bloque o arrastra el bloque a una nueva ubicación.
   • Para obtener una vista previa del botón de compras, haz clic enVista previaen la barra de herramientas del bloque.

7. Cuando termines, haz clic en el botónGuardar borrador,Vista previaoPublicarde la publicación o página.

Si usasClassic Editor Pluginde WordPress, en lugar de usar un bloque HTML personalizado, cambia el editor de texto de modoVisualaTextoy pega el código de incrustación en el editor.

Agregar código de incrustación a una plantilla de WordPress

Si el tema de WordPress es compatible con el editor del sitio, puedes agregar un botón de compras incrustado a cualquiera de las plantillas del sitio.

Pasos:

1. En Shopify,crea un Botón de compray copia su código de incrustación del cuadro de diálogoCódigo de incrustación(o haz clic enCopiar código de incrustación en el portapapeles).
2. En el panel de control de WordPress, ve alEditor.
3. Navega hasta la plantilla que te gustaría editar.
4. Dentro del editor de bloques, haz clic en el botón+, buscaCustom HTMLy, luego, haz clic para insertar un bloque HTML personalizado.
5. Pega el código de incrustación en el campo de texto proporcionado por el bloque HTML personalizado.

6. Opcional: Mueve el bloque HTML personalizado u obtén una vista previa de cómo aparecerá el botón de compras:

   • Para mover el bloque HTML personalizado, haz clic en los botones de flecha en la barra de herramientas del bloque o arrastra el bloque a una nueva ubicación.
   • Para obtener una vista previa del botón de compras, haz clic enVista previaen la barra de herramientas del bloque.

7. Cuando termines, haz clic en el botón de la plantilla deVista previaoGuardar.

Agregar códigos de incrustación a tu blog de Shopify

Pasos:

1. En la páginaPublicaciones de blog, haz clic en el título de una publicación de blog que quieras editar o haz clic enAgregar publicación de blogpara crear una nueva.
2. En la secciónEscribir tu artículo de blog, haz clic enMostrar HTMLen el editor de texto enriquecido.
3. Pega tu código de incrustación en el campo de texto principal.
4. Haz clic enGuardar.

Agregar código de incrustación a Squarespace

Puedes agregar un código de incrustación a publicaciones en Squarespace y a los menús en tu página de inicio. En algunos casos, es posible que quieras hacer ambas. Por ejemplo, puedes incrustar un carrito en tu página de inicio para recibir compras desde de Botones de compra que incrustes en publicaciones.

Pasos:

1. Desde tu panel de Squarespace, abre la página web donde desees agregar el código de incrustación.
2. Busca el elemento en la página donde quieres que aparezca el Botón de compras o el carrito incrustado, mueve el cursor sobre el área deContenido de la páginay luego haz clic enEDITAR.
3. Haz clic en el punto de incrustación donde desees agregar el código de incrustación.
4. En la secciónMásdel cuadro de diálogoBloques de contenido, haz clic enCódigo.
5. Desde tu panel de control de Shopify, copia el código de incrustación del cuadro de diálogoCódigo de incrustación.
6. Desde tu panel de Squarespace, pega el código de incrustación en el cuadro de diálogoCÓDIGO. Asegúrate de que el campo de texto esté configurado para recibirHTML.
7. Haz clic enAPLICARen el cuadro de diálogoEDITAR CÓDIGO.
8. Haz clic nuevamente enGUARDARen el editor de página. Dado que Squarespace deshabilita el JavaScript en el panel de control, debes hacer una vista previa de tu página por separado para ver el Botón de compras o el carrito incrustado que agregaste.

Si completas los pasos y el Botón de compras no se carga, es posible que debas desactivar la carga de Ajax. Para más detalles, ve aActivar o desactivar Ajax.

Agregar código de incrustación a Wix

Después de quehayas creado un Botón de compras o una colecciónen tu panel de control de Shopify, puedes agregarlo a tu sitio web Wix usando el Editor de sitios web Wix.

Puedes incrustar una colección, si deseas mostrar más de un producto en tu sitio web Wix sin editar el código de incrustación. Puedescrear una nueva colecciónen tu panel de control de Shopify para los productos que deseas mostrar en Wix.

Pasos:

1. Desde tu panel de control de Shopify,克雷亚联合国Boton de compras对位un producto o colección, y luego copia su código de incrustación.

1. Desde tu cuenta Wix, en la secciónMis sitiosbusca el sitio que deseas editar y luego haz clic enEditar sitio.
2. En el编辑de sitios web de Wix haz clic En elbotón+y luego haz clic enMás.
3. Haz clic enCódigo HTMLpara agregar un widget de código HTML a la página.
4. Haz clic enIntroducir código.
5. En el cuadro de diálogoConfiguración de HTML, pega el código de incrustación de tu Botón de compras o de la colección en el campoAgregar tu código aquíy luego haz clic enActualizar.
6. Ajusta el tamaño del widget de código HTML para que se se adapte al contenido. Si estás creando una inserción con un carrito, asegúrate de que la pestaña del carrito aparezca en el lugar correcto.
7. Cuando hayas terminado, haz clicGuardar.

Insertar varios productos o colecciones

Pasos:

1. Desde tu panel de control de Shopify,克雷亚联合国Boton de compras对位un producto o colección, y luego copia su código de incrustación.
2. Pega el código en un editor de código o en el creador de sitios web Wix. Repite los primeros dos pasos hasta que hayas creado los Botones de compra que necesites.
3. Edita los códigos de incrustación para verificar que se muestran con la alineación adecuada.
4. Desde tu cuenta Wix, en la secciónMis sitiosbusca el sitio que deseas editar y luego haz clic enEditar sitio.
5. En el编辑de sitios web de Wix haz clic En elbotón+y luego haz clic enMás.
6. Haz clic enCódigo HTMLpara agregar un widget de código HTML a la página.
7. Haz clic enIntroducir código.
8. En el cuadro de diálogoConfiguración de HTML, pega el código de editado de tu Botón de compras en el campoAgregar tu código aquíy luego haz clic enActualizar.
9. Ajusta el tamaño del widget de código HTML para que se se adapte al contenido. Si estás creando una inserción con un carrito, asegúrate de que la pestaña del carrito aparezca en el lugar correcto.
10. Cuando hayas terminado, haz clicGuardar.

Agregar etiquetas de script por separado

Algunas plataformas (como Unbounce) requieren que pegues las etiquetas

1. Abre el encabezado de página del sitio web donde deseas insertar un Botón de compras.

2. Pega el elemento