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

Después de crear un Botón de compra en 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.

Nota

Si necesitas ayuda para agregar un código incrustado a las plataformas de publicación fuera de Shopify (como Squarespace o WordPress), contacta al proveedor de tu sitio web o plataforma de publicación directamente a fin de recibir ayuda.

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.

Nota

Los botones de compras incrustados son compatibles con sitios web de WordPress.org autoalojados y con ciertos planes que ofrece WordPress.com. La documentación a continuación está escrita pensando en versiones recientes de WordPress. Es posible que la versión instalada en el sitio sea diferente. Obtén más información sobre las versiones de WordPress en su sitio de atención al cliente.

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

1. En Shopify, crea un Botón de compra y copia su código de incrustación del cuadro de diálogo Código de incrustación (o haz clic en Copiar 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 +, busca Custom HTML y, 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 en Vista previa en la barra de herramientas del bloque.

7. Cuando termines, haz clic en el botón Guardar borrador, Vista previa o Publicar de la publicación o página.

Si usas Classic Editor Plugin de WordPress, en lugar de usar un bloque HTML personalizado, cambia el editor de texto de modo Visual a Texto y 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 compra y copia su código de incrustación del cuadro de diálogo Código de incrustación (o haz clic en Copiar código de incrustación en el portapapeles).
2. En el panel de control de WordPress, ve al Editor.
3. Navega hasta la plantilla que te gustaría editar.
4. Dentro del editor de bloques, haz clic en el botón +, busca Custom HTML y, 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 en Vista previa en la barra de herramientas del bloque.

7. Cuando termines, haz clic en el botón de la plantilla de Vista previa o Guardar.

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

Nota

El Botón de compras crea un carrito separado. Si tu cliente navega a otra página en tu tienda online, el artículo ya no aparecerá en el carrito. Puedes editar el Botón de compras para ir directamente a la pantalla de pago.

Nota: #### Pasos:

Escritorio

1. Desde tu panel de control de Shopify, ve a Tienda online > Artículos de blog.
2. En la página Publicaciones de blog, haz clic en el título de una publicación de blog que quieras editar o haz clic en Agregar publicación de blog para crear una nueva.
3. En la sección Escribir tu artículo de blog, haz clic en Mostrar HTML en el editor de texto enriquecido.
4. Pega tu código de incrustación en el campo de texto principal.
5. Haz clic en Guardar.

iPhone

1. En la aplicación de Shopify, toca el botón ….
2. En la sección Canales de ventas, toca Tienda online.
3. Toca Blogs.

Android

1. En la aplicación de Shopify, toca el botón ….
2. En la sección Canales de ventas, toca Tienda online.
3. Toca Blogs.

## Agregar código de incrustación a Squarespace

Precaución

Algunas personalizaciones avanzadas en Squarespace son específicas para cada tema. Estas personalizaciones no son compatibles con Shopify.

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 se muestre el Botón de compras o el carrito incrustado, mueve el cursor sobre el área de Contenido de la página y luego haz clic en EDITAR.
3. Haz clic en el punto de incrustación donde desees agregar el código de incrustación.
4. En la sección Más del cuadro de diálogo Bloques de contenido, haz clic en Código.
5. Desde tu panel de control de Shopify, copia el código de incrustación del cuadro de diálogo Código de incrustación.
6. Desde tu panel de Squarespace, pega el código de incrustación en el cuadro de diálogo CÓDIGO. Asegúrate de que el campo de texto esté configurado para recibir HTML.
7. Haz clic en APLICAR en el cuadro de diálogo EDITAR CÓDIGO.
8. Haz clic nuevamente en GUARDAR en el editor de página. Dado que Squarespace desactiva el JavaScript en el panel de control, debes hacer una vista previa de tu página por separado para confirmar el Botón de compras o el carrito incrustado está funcionando.

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

Nota

Si incrustas un carrito en un menú en tu página de inicio de Squarespace, recibirá los pedidos de los Botones de compra que incrustes en las publicaciones individuales.

Agregar código de incrustación a Wix

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

Precaución

Si deseas incrustar Botones de compra para varios productos o colecciones, debes editar el código de incrustación antes de agregarlo al widget del código HTML en Wix. Si incrustas más de un Botón de compras en tu sitio web Wix sin editar el código de incrustación, los clientes que intenten comprar más de un producto verán un carrito separado para cada producto.

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. Puedes crear una nueva colección en tu panel de control de Shopify para los productos que deseas mostrar en Wix.

Pasos:

1. Desde tu panel de control de Shopify, crea un Botón de compras para un producto o colección, y luego copia su código de incrustación.

Nota

Cuando creas tu botón de compras para un sitio web de Wix, no puedes usar el Redireccionamiento en la misma pestaña debido a limitaciones de Wix.

1. Desde tu cuenta Wix, en la sección Mis sitios busca el sitio que deseas editar y luego haz clic en Editar sitio.
2. En el Editor de sitios web de Wix, haz clic en el botón + y luego haz clic en Más.
3. Haz clic en Código HTML para agregar un widget de código HTML a la página.
4. Haz clic en Introducir código.
5. En el cuadro de diálogo Configuración de HTML, pega el código de incrustación de tu Botón de compras o de la colección en el campo Agregar tu código aquí y luego haz clic en Actualizar.
6. Ajusta el tamaño del widget de código HTML para que se se adapte al contenido. Si estás creando una incrustación con un carrito, asegúrate de que la pestaña del carrito aparezca en el lugar correcto.
7. Cuando hayas terminado, haz clic Guardar.

Insertar varios productos o colecciones

Pasos:

1. Desde tu panel de control de Shopify, crea un Botón de compras para 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ón Mis sitios busca el sitio que deseas editar y luego haz clic en Editar sitio.
5. En el Editor de sitios web de Wix, haz clic en el botón + y luego haz clic en Más.
6. Haz clic en Código HTML para agregar un widget de código HTML a la página.
7. Haz clic en Introducir código.
8. En el cuadro de diálogo Configuración de HTML, pega el código de editado de tu Botón de compras en el campo Agregar tu código aquí y luego haz clic en Actualizar.
9. Ajusta el tamaño del widget de código HTML para que se se adapte al contenido. Si estás creando una incrustación con un carrito, asegúrate de que la pestaña del carrito aparezca en el lugar correcto.
10. Cuando hayas terminado, haz clic Guardar.

Nota

¿Necesitas ayuda para usar el Editor de Wix? Contacta al Servicio técnico de Wix

Agregar etiquetas de script por separado

Algunas plataformas (como Unbounce) requieren que pegues las etiquetas <script> del código de incrustación en el encabezado de la página y el resto del código incrustado en la página donde deseas que se muestre el Botón de compras.

Pasos:

1. A partir del código de incrustación que se genera al crear un botón de compras, copia tanto el elemento <div> como el elemento <script>. Por ejemplo:

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

1. Abre el encabezado de página del sitio web donde deseas insertar un Botón de compras.
2. Pega el elemento <script> completo en el encabezado de la página.
3. Guarda tus cambios.
4. A partir del código de incrustación original en tu panel de control de Shopify, copia sólo el elemento <div>. Por ejemplo:

<div id='product-component-2dd3c8704e6'></div>

1. Abre la página del sitio web donde deseas insertar un Botón de compras.
2. Pega el fragmento de código <div> en la página.
3. Guarda tus cambios.