Ficha de producto Nivel 4 en Blogger

Cómo crear una ficha de producto (Nivel 4) en Blogger

En este tutorial aprenderás a construir correctamente una ficha de producto en Blogger. Esta es la parte más importante de tu tienda online blogger (Nivel 4), ya que aquí es donde el cliente decide si compra. Veremos paso a paso cómo estructurar el producto, qué etiquetas son obligatorias, y cómo funcionan los botones de Comprar ahora y Añadir al carrito.

Requisitos mínimos de cada producto

Antes de crear tu ficha, asegúrate de cumplir con estos tres puntos. Si falta alguno, la entrada no funcionará como ficha de producto:

  1. Etiqueta store → activa la ficha de producto en tu plantilla.
  2. Etiqueta con precio → debe contener el valor en formato $XX.XX (ejemplo: $14.99).
  3. Etiqueta de subcategoría → agrupa el producto dentro de su categoría (ejemplo: camisa-blanca).
Recuerda: cada entrada de Blogger que sea un producto debe llevar exactamente estas tres etiquetas.

Partes obligatorias de la ficha de producto

Dentro del contenido de la entrada (HTML del post), cada ficha debe incluir al menos estos elementos:

  • .titulo-producto → el nombre oficial del producto (lo usa el script y Google).
  • .precio → valor en número limpio. Siempre incluye content="xx.xx" en el .
  • .disponibilidad → texto En stock o Agotado. Si está marcado como .agotado, los botones se desactivan.
  • <meta itemprop="sku"> → código único del producto.
  • itemprop="image" → al menos una imagen con alt descriptivo.
  • #pago → botón de compra directa (PayPal).
  • #add-to-cart → botón de añadir al carrito.

Demo de ficha de producto en Blogger

Copia y pega este bloque en la vista HTML de tu entrada. Esto es el mínimo para que el sistema funcione correctamente:

<div class="ficha-producto" itemscope itemtype="https://schema.org/Product">
	
  <!-- Imagen del producto -->
  <img src="aquí la url de tu imagen" 
       alt=" aquí tu alt" 
       itemprop="image">

  <!-- Información del producto -->
  <div class="ficha-info">
    
    <!-- Nombre del producto -->
    <h2 class="titulo-producto" itemprop="name">Aquí el titulo</h2>

    <!-- Descripción -->
    <p itemprop="description">
     Breve descripción del producto.
    </p>

    <!-- Características -->
    
  <ul>
    <li>1. caracteristica relevante</li>
    <li>2. caracteristica relevante</li>
    <li>3. caracteristica relevante</li>
    <li>4. caracteristica relevante</li>
    <li>5. caracteristica relevante</li>
  </ul>

    <!-- Oferta y precio -->
    <div class="ficha-precio" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
      <span class="etiqueta-precio">Precio:</span>
      <span class="precio-signo" itemprop="priceCurrency" content="USD">$</span>
      <span class="precio-valor precio" itemprop="price" content="XX.XX">XX.XX</span>
      <link itemprop="availability" href="https://schema.org/InStock">
      <span class="disponibilidad">En stock</span> <!-- Comentar o eliminar si el producto esta “Agotado” -->
      <!-- <span class="disponibilidad agotado">Agotado</span>  Comentar o eliminar si el producto esta “En stock” -->
    </div>

    <!-- SKU -->
<meta itemprop="sku" content="CODIGO PRODUCTO"> <!-- Aquí va el SKU único del producto -->

<!-- Marca como objeto Brand -->
<span itemprop="brand" itemscope itemtype="https://schema.org/Brand">
  <meta itemprop="name" content="TU MARCA">  <!-- Aquí va el nombre real de la marca -->
</span>

    
         
     <!-- Botones de acción -->
    <div class="ficha-botones">
      <button class="ficha-boton" id="pago">Comprar ahora</button>
      <button class="ficha-boton-secundario" id="add-to-cart">Añadir al carrito</button>
    </div>
   
  
  </div>
</div>

<section>
  <h2 style="color:#0f4c81;">Introducción</h2>
  <p>Aquí va tu texto</p>
</section>

<section>
  <h2 style="color:#0f4c81;">Características principales</h2>
  <ul>
    <li>Aquí va tu texto</li>
    <li>Aquí va tu texto</li>
    <li>Aquí va tu texto</li>
    <li>Aquí va tu texto</li>
    <li>Aquí va tu texto</li>
    <li>Aquí va tu texto</li>
    <li>Aquí va tu texto</li>
  </ul>
</section>

<section>
  <h2 style="color:#0f4c81;">Experiencia de uso</h2>
  <p>Aquí va tu texto</p>
</section>

<section>
  <h2 style="color:#0f4c81;">Ventajas</h2>
  <ul style="color:#1a7f0f;">
    <li>Aquí va tu texto</li>
    <li>Aquí va tu texto</li>
    <li>Aquí va tu texto</li>
    <li>Aquí va tu texto</li>
  </ul>
</section>

<section>
  <h2 style="color:#0f4c81;">Desventajas</h2>
  <ul style="color:#b22222;">
    <li>Aquí va tu texto</li>
    <li>Aquí va tu texto</li>
  </ul>
</section>

<section>
  <h2 style="color:#0f4c81;">Conclusión</h2>
  <p>Aquí va tu texto</p>
</section>

<h2>Catálogo de productos</h2>
<div class="feed-catalogo" data-max="3"></div>

Funcionamiento técnico

Botón Comprar ahora

  • Lee el título desde .titulo-producto.
  • Obtiene el precio desde .precio (atributo content).
  • Verifica si .disponibilidad.agotado está presente → si lo está, bloquea el botón.
  • Genera un link de PayPal con cmd=_xclick y abre en una nueva pestaña.

Botón Añadir al carrito

  • Obtiene datos: name, sku, price, image, url.
  • Verifica stock y precio válido.
  • Usa localStorage:
    • Si el producto ya está → aumenta la cantidad.
    • Si no está → lo agrega como nuevo objeto {sku, name, price, qty, image, url}.
  • Actualiza el contador global del carrito.
  • Cambia texto temporal a “Añadido ✓”.

Ejemplo de ficha de producto en Blogger

¿Quieres ver cómo luce una ficha de producto en acción? Hemos preparado una demo real donde podrás visualizar la imagen principal, el nombre del producto, el precio, los botones de compra y el diseño pensado para mejorar la experiencia de compra en tu tienda Blogger.

Ver demo de ficha de producto

Recomendaciones importantes

  • Si no incluyes las tres etiquetas (store, precio y subcategoría), la ficha no funcionará.
  • Usa siempre un sku único para cada producto.
  • El precio debe estar en formato decimal con punto, no coma: 14.99 y deben coincidir los dos del <span class="precio-valor precio" itemprop="price" content="XX.XX">XX.XX</span> con el de la etiqueta $XX.XX. Además si por error olvidas colocar el precio y lo dejas en blanco en el "content" la página de PayPal mostrará error y si le colocas (00.00) los botones se bloquean aunque muestren el precio en la ficha de producto.
  • Si usas .disponibilidad agotado, ambos botones quedarán deshabilitados automáticamente.

El elemento <span class="disponibilidad">En stock</span> indica que el producto está disponible para la venta. Es importante mantenerlo visible cuando el artículo puede comprarse, ya que el script de la plantilla lo usa para habilitar los botones Comprar ahora y Añadir al carrito.

Si el producto está agotado, debes comentar o eliminar este elemento y reemplazarlo (o descomentar) la línea <span class="disponibilidad agotado">Agotado</span>.

Este segundo elemento indica al sistema que el producto no está disponible, deshabilitando automáticamente ambos botones para evitar que los clientes intenten comprar un artículo que no se puede enviar.

Con esta estructura ya tienes una ficha de producto optimizada en Blogger, lista para integrarse con PayPal y con el carrito interno. Es el último nivel de tu tienda en blogger (Nivel 4), donde el cliente finalmente decide comprar.

Recuerda: cada detalle importa. Sin etiquetas correctas o campos completos, los botones no funcionarán. Con la configuración correcta, podrás vender desde Blogger de forma profesional, ordenada y segura.