Ayuda
Iniciar sesión

Agregar el código del botón de compras al HTML

Después de create a Buy Button en el panel de control de Shopify, ya puedes agregarlo a tu sitio web o blog.

El proceso de agregar el código de incrustación al HTML de origen del sitio es un poco diferente según cómo y dónde quieras que se muestren los botones de compras y el carrito, según la plataforma de publicación y, a veces, según el tema que uses en esa plataforma.

En esta página

Agregar código de incrustación en WordPress

Puedes agregar el código de incrustación en entradas, páginas o plantillas de tu sitio de WordPress.

Agregar código de incrustación en una entrada o página de WordPress

  1. En Shopify, create a Buy Button y copia su código de incrustación desde el cuadro Código de incrustación (o haz clic en Copiar código de incrustación al portapapeles).
  2. Desde el panel de control de WordPress, ve a entradas o páginas.
  3. Crea una entrada o página nueva, o edita una existente.
  4. En el editor de bloques, haz clic en el botón +, busca HTML personalizado y haz clic para insertar un bloque de HTML personalizado.
  5. Pega el código de incrustación en el campo de texto del bloque HTML personalizado.
  6. Opcional: mueve el bloque HTML personalizado o previsualiza cómo se mostrará 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 otra ubicación.
    • Para previsualizar el botón de compras, haz clic en Vista previa en la barra de herramientas del bloque.
  7. Cuando termines, haz clic en Guardar borrador, Vista previa o Publicar en la entrada o página.

Si usas el Classic Editor Plugin de WordPress, en lugar de usar un bloque de 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 en 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, create a Buy Button y copia su código de incrustación desde el cuadro Código de incrustación (o haz clic en Copiar código de incrustación al portapapeles).
  2. En el panel de control de WordPress, ve al Editor.
  3. Ve a la plantilla que quieres editar.
  4. En el editor de bloques, haz clic en el botón +, busca HTML personalizado y haz clic para insertar un bloque de HTML personalizado.
  5. Pega el código de incrustación en el campo de texto del bloque HTML personalizado.
  6. Opcional: mueve el bloque HTML personalizado o previsualiza cómo se mostrará 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 otra ubicación.
    • Para previsualizar el botón de compras, haz clic en Vista previa en la barra de herramientas del bloque.
  7. Cuando termines, haz clic en Vista previa o Guardar para la plantilla.

Agregar código de incrustación en el blog de la tienda en Shopify

Nota:

Pasos:

Escritorio

  1. Desde el panel de control de Shopify, ve a Contenido > Blog posts.

  2. En la página Artículos del blog, haz clic en el título del artículo que quieres editar o haz clic en Agregar artículo del blog para crear uno nuevo.

  3. En la sección Escribe tu artículo del blog, haz clic en Mostrar HTML en el editor de texto enriquecido.

  4. Pega el código de incrustación en el campo de texto principal.

  5. Haz clic en Guardar.

Móvil

  1. Desde la app de Shopify, toca el ícono Menu.

  2. En el menú Contenido, toca el ícono arrow down y luego toca Artículos del blog.

  3. Toca el artículo del blog que quieres editar.

  4. En la sección Contenido, toca … y luego toca el ícono Edit code.

  5. Pega el código de incrustación en el campo de texto.

  6. Toca Guardar o ✓.

Agregar código de incrustación en Squarespace

Puedes agregar el código de incrustación en publicaciones individuales de Squarespace y en los menús de la página de inicio. En algunos casos, querrás hacer ambas cosas. Por ejemplo, puedes incrustar un carrito en la página de inicio para recibir compras desde botones de compras que incrustes en publicaciones individuales.

Pasos:

  1. Desde el panel de control de Squarespace, abre la página web en la que quieres agregar el código de incrustación.
  2. Busca el elemento de la página donde quieres mostrar el botón de compras o el carrito incrustado, coloca el cursor sobre el área Page Content y haz clic en EDIT.
  3. Haz clic en el punto de inserción donde quieres agregar el código de incrustación.
  4. En la sección More del cuadro Content Blocks, haz clic en Code.
  5. Desde el panel de control de Shopify, copia el código de incrustación desde el cuadro Código de incrustación.
  6. Desde el panel de control de Squarespace, pega el código de incrustación en el cuadro CODE. 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. Vuelve a hacer clic en Guardar en el editor de la página. Como Squarespace desactiva JavaScript en su panel de control, necesitas previsualizar la página por separado para confirmar que el botón de compras o el carrito incrustado funciona.

Si completas los pasos y el botón de compras no carga, quizá necesites desactivar la carga con Ajax. Para obtener más detalles, consulta Enable or disable Ajax.

Agregar código de incrustación en Wix

Después de crear un botón de compras o una colección en el panel de control de Shopify, puedes agregar el botón o la colección al sitio web de Wix con el editor de sitios web de Wix.

Si quieres mostrar más de un producto en el sitio web de Wix sin editar el código de incrustación, puedes incrustar una colección. En el panel de control de Shopify puedes crear una colección nueva para los productos que quieras mostrar en Wix.

Pasos:

  1. Desde el panel de control de Shopify, crea un botón de compras para un producto o una colección y luego copia su código de incrustación.
  1. Desde tu cuenta de Wix, busca el sitio que quieres editar en la sección Mis sitios y haz clic en Editar sitio.
  2. En el editor de sitios web de Wix, haz clic en el botón + y luego 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 Ingresar código.
  5. En el cuadro de diálogo Configuración de HTML, pega el código de incrustación del botón de compras o la colección en el campo Agrega el código aquí y haz clic en Actualizar.
  6. Redimensiona el widget de código HTML para ajustarlo a su contenido. Si estás creando una incrustación con carrito, verifica que la pestaña del carrito se muestre en el lugar correcto.
  7. Cuando termines, haz clic en Guardar.

Incrustar varios productos o colecciones

Pasos:

  1. Desde el panel de control de Shopify, crea un botón de compras para un producto o una 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 de Wix. Repite los dos primeros pasos hasta crear los botones de compras que necesites.
  3. Edita los códigos de incrustación para que se muestren con la alineación correcta.
  4. Desde tu cuenta de Wix, busca el sitio que quieres editar en la sección Mis sitios y haz clic en Editar sitio.
  5. En el editor de sitios web de Wix, haz clic en el botón + y luego 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 Ingresar código.
  8. En el cuadro de diálogo Configuración de HTML, pega el código editado de los botones de compras en el campo Agrega el código aquí y haz clic en Actualizar.
  9. Redimensiona el widget de código HTML para ajustarlo a su contenido. Si estás creando una incrustación con carrito, verifica que la pestaña del carrito se muestre en el lugar correcto.
  10. Cuando termines, haz clic en 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 de incrustación en la página donde quieres que se muestre el botón de compras.

Pasos:

  1. Del código de incrustación que se genera cuando creas 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 la página del sitio web donde quieres incrustar un botón de compras.
  2. Pega todo el elemento <script> en el encabezado de la página.
  3. Guarda los cambios.
  4. Del código de incrustación original en el panel de control de Shopify, copia solo el elemento <div>. Por ejemplo:
<div id='product-component-2dd3c8704e6'></div>
  1. Abre la página del sitio web donde quieres incrustar un botón de compras.
  2. Pega el fragmento de código <div> en la página.
  3. Guarda los cambios.