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 un blog en WordPress.org

Puedes agregar un código de incrustación a publicaciones individuales y al menú en la página de inicio de tu blog en WordPress.org.

Agregar código de incrustación a una publicación en 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 tu panel de control de WordPress, ve a tus artículos.
  3. Crea un artículo nuevo o edita una publicación existente donde desees mostrar un Botón de compras.
  4. Según la versión de WordPress que estés usando, sigue uno de los siguientes pasos:

    • En el artículo, cambia el editor de texto de modo Visual a Texto.
    • Desde el editor de bloques, haz clic en el botón +, busca Custom HTMLy luego haz clic en HTML personalizado.
  5. Pega el código de incrustación en el campo de texto en el lugar donde quieres que aparezca el Botón de compras o la colección.

  6. Cuando hayas terminado, haz clic en Guardar borrador, Vista previa o Publicar.

Agregar código de incrustación a un menú de Wordpress

Pasos:

  1. Desde tu panel de WordPress, haz clic en Apariencia.
  2. Haz clic en Personalizar para abrir el editor de temas y luego haz clic en Widgets.
  3. Haz clic en el nombre del área donde quieres agregar el Botón de compras o el código de carrito personalizado.
  4. Abre un widget de Texto existente, o haz clic en Agregar un widget, y luego haz clic en Texto.
  5. Pega el código de incrustación en el campo de texto principal dentro del widget de Texto.
  6. Guarda tus cambios.

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

Pasos:

  1. En la página Artículos de blog, haz clic en el título de un artículo de blog que quieras editar o haz clic en Agregar artículo de blog para crear uno nuevo. 4. En la sección Escribir tu artículo de blog, haz clic en Mostrar HTML en el editor de texto enriquecido. 5. Pega tu código de incrustación en el campo de texto principal. 6. 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.

¿Estas listo(a) para comenzar a vender con Shopify?

Pruébala gratis