Cómo agregar un código de Botón de compra 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 inserció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 inserción a un blog en WordPress.org

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

Agregar código de inserción a una publicación en WordPress

Pasos:

  1. En Shopify, crea un Botón de compra y copia su código de inserción del cuadro de diálogo Código de inserción (o haz clic en Copiar código de inserción en el portapapeles ).
  2. Desde tu Panel de WordPress , haz clic en Publicaciones.
  3. Haz clic en Agregar nuevo para crear una nueva publicación, o haz clic en el nombre de una publicación donde desees mostrar un Botón de compra.
  4. Desde la página Agregar nueva publicación o Editar publicación , cambia el editor de texto del modo Visual a Texto.
  5. Pega el código de inserción en el campo de texto principal del editor en el lugar donde quieres que aparezca el Botón de compra o la colección.
  6. Cuando hayas terminado, haz clic en Guardar borrador , Vista previa o Publicar.

Agregar código de inserció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 compra 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 inserción en el campo de texto principal dentro del widget de Texto.
  6. Guarda tus cambios.

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

Pasos:

  1. Desde tu panel de control de Shopify, haz clic en Tienda online.
  2. Haz clic en Publicaciones de blog.
  3. 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.
  4. En la sección Escribir tu publicación de blog , haz clic en Mostrar HTML en el editor de texto enriquecido.
    Mostrar botón del editor de HTML
  5. Pega tu código de inserción en el campo de texto principal.
  6. Haz clic en Guardar.

Agregar código de inserción a Squarespace

Puedes agregar un código de inserció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 insertar un carrito en tu página de inicio para recibir compras desde de Botones de compra que insertes en publicaciones.

Pasos:

  1. Desde tu panel de Squarespace, abre la página web donde desees agregar el código de inserción.
  2. Busca el elemento en la página donde quieres que aparezca el Botón de compra o el carrito insertado, 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 inserción donde desees agregar el código de inserció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 inserción del cuadro de diálogo Código de inserción.
  6. Desde tu panel de Squarespace, pega el código de inserció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 compra o el carrito incrustado que agregaste.

Agregar código de inserción a Wix

Después de que hayas creado un Botón de compra 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 insertar una colección, si deseas mostrar más de un producto en tu sitio web Wix sin editar el código de inserció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 compra para un producto o colección, y luego copia su código de inserción.
  2. Desde tu cuenta Wix, en la sección Mis sitios busca el sitio que deseas editar y luego haz clic en Editar sitio.
  3. En el Editor de sitios web de Wix, haz clic en el botón + y luego haz clic en Más.
  4. Haz clic en Código HTML para agregar un widget de código HTML a la página.
  5. Haz clic en Introducir código.
  6. En el cuadro de diálogo Configuración de HTML , pega el código de inserción de tu Botón de compra o de la colección en el campo Agregar tu código aquí y luego haz clic en Actualizar.
  7. 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.
  8. 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 compra para un producto o colección, y luego copia su código de inserción.
  2. Pega el código en un editor de código o en el generador 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 inserción para verificar que se mostrarán 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 compra 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 inserció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 compra.

Pasos:

  1. A partir del código de inserción que se genera al crear un Botón de compra, 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 compra.

  2. Pega el elemento <script> completo en el encabezado de la página.

  3. Guarda tus cambios.

  4. A partir del código de inserció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 compra.

  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