Carrito de compras en Blogger

Cómo instalar el carrito de compras en Blogger (botón flotante + página estática)

¿Quieres convertir tu blog en una pequeña tienda blogger online sin complicaciones? Con nuestra plantilla premium NichoClean V2.0 puedes añadir un carrito de compras en Blogger que incluye un botón flotante y una página dedicada para que tus clientes gestionen sus pedidos de forma sencilla y segura.

Ventajas de tener un carrito en Blogger

Experiencia profesional: Tu blog tendrá un sistema de carrito similar al de cualquier tienda online.
Mayor conversión: El botón flotante acompaña al usuario mientras navega y no pierde de vista sus productos.
100% integrado: Funciona directamente en Blogger sin instalar plugins externos.
Responsive y ligero: Adaptado a móviles, tablets y ordenadores sin afectar la velocidad de carga.

Paso 1: Instalar el gadget del botón flotante

Este gadget se encarga de mostrar el ícono del carrito en la esquina inferior de la pantalla. Es visible en todas las páginas de tu blog y se actualiza automáticamente con la cantidad de productos añadidos.

Para instalarlo, ve a Blogger → Diseño → Añadir un gadget → HTML/JavaScript y pega el siguiente código:

<!-- ===== BOTÓN FLOTANTE CARRITO ===== -->
<a href="/p/carrito.html" class="cart-float">
  🛒 <span id="cart-count">0</span>
</a>

Consejo: Asegúrate de que el botón flotante apunte a la URL correcta de tu carrito. Si tu página no está en /p/carrito.html, actualiza el href con la ruta que uses.

Paso 2: Crear la página estática del carrito

Ahora necesitamos un espacio donde los usuarios puedan ver sus productos seleccionados, cambiar cantidades o eliminar ítems antes de pagar.

En tu panel de Blogger, crea una nueva página con el nombre Carrito y la URL personalizada /p/carrito.html. Dentro del editor HTML pega este código:

<div class="tabla-carrito">
  <table id="cart-table">
    <thead>
      <tr>
        <th>Imagen</th>
        <th>Producto</th>
        <th>Precio</th>
        <th>Cantidad</th>
        <th>Subtotal</th>
        <th>Eliminar</th>
      </tr>
    </thead>
    <tbody>
      <!-- filas generadas por JS -->
    </tbody>
  </table>

  <div id="total">Total: $0.00</div>
  <a href="#" id="paypal-link" class="paypal-btn">Pagar con PayPal</a>
</div>

Esta página se sincroniza automáticamente con el botón flotante. Cuando el cliente haga clic, será redirigido aquí para completar su compra.

Recomendaciones importantes

Usa siempre la URL /p/carrito.html para evitar errores de sincronización.
No edites los id (cart-count, cart-table, total, paypal-link, etc.), ya que son necesarios para que el script funcione.
El JS CORE PAYPAL & CARRITO DE COMPRAS se encarga de todo el funcionamiento interno del carrito (contadores, sincronización y lógica de compra), tú solo debes colocar el HTML.

Con solo estos dos pasos ya tienes habilitado un carrito de compras en Blogger totalmente funcional en la plantilla NichoClean v2.0. Tus visitantes podrán añadir productos desde tus entradas y gestionar su pedido fácilmente, todo sin salir de tu blog. Una solución ligera, práctica y lista para monetizar tu contenido.