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.

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 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

Pasos:

  1. 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.
  2. En la sección Escribir tu artículo de blog, haz clic en Mostrar HTML en el editor de texto enriquecido.
  3. Pega tu código de incrustación en el campo de texto principal.
  4. Haz clic en Guardar.

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 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 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 a Activar o desactivar Ajax.

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.

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.
  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 inserció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 inserció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.

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 aparezca 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.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis