Tienda online en Blogger

Cómo montar tu tienda online en Blogger

En esta guía aprenderás a crear una tienda online dentro de Blogger utilizando la plantilla NichoClean v2.0. Aprenderás cómo organizar productos por etiquetas, configurar gadgets, usar el JS Store y montar todas las secciones de tu tienda de forma consistente y profesional.

Lo que debes saber antes de montar la tienda

Antes de comenzar a crear productos y secciones, es fundamental hacer un estudio de palabras clave y organizar los productos por grupos relacionados. Cada grupo se representará mediante etiquetas que luego serán usadas en los shortcodes para mostrar productos en las subcategorías.

1. Navegación por etiquetas en 4 niveles

El sistema de navegación de la tienda funciona en cuatro niveles: Home → Categoría → Subcategoría → Producto. Cada nivel depende de las etiquetas asignadas a los productos, subcategorías y categorías. Esta estructura permite que los visitantes encuentren fácilmente los productos relacionados y mejora el SEO on-page. Más información

2. Cómo funciona el Plugin Store Blogger

El JS Store es el núcleo que hace funcionar todo el ecosistema de la tienda: gestiona el carrito de compras, actualiza el contador flotante, sincroniza productos en la página /p/carrito.html, valida disponibilidad y precios, y genera enlaces de pago con PayPal automáticamente. Más información

Configuraciones iniciales

Antes de crear productos, subcategorías y categorías, es necesario configurar los elementos básicos que permiten al JS Store funcionar correctamente.

1. Gadget de configuración global

Se necesita un gadget HTML o bloque oculto en la plantilla con id="config-store" y los atributos data-* que definen:

  • Correo de PayPal para recibir pagos.
  • URL de retorno tras finalizar la compra.
  • URL de cancelación en caso de que el cliente no complete la compra.
  • Si se mostrará el contador flotante en el carrito.

Ejemplo de gadget:

<div id="config-store" hidden
     data-paypalemail="demo@example.com"
     data-returnurl="https://tusitio.com/p/gracias.html"
     data-cancelurl="https://tusitio.com/p/cancelado.html"
     data-mostrarcontador="true">
</div>

Más información

2. Botón flotante del carrito

Este botón permite que los usuarios vean la cantidad de productos agregados desde cualquier página. La estructura mínima requerida es:

<a href="/p/carrito.html" class="cart-float">
  🛒 <span id="cart-count">0</span>
</a>

Recuerda actualizar la URL href="/p/carrito.html" si tu página de carrito tiene otra dirección. Más información

3. Página de carrito

Debes crear una página estática con URL /p/carrito.html que mostrará los productos añadidos, permitirá modificar cantidades y eliminar items, y tendrá un enlace a PayPal para realizar el pago. La estructura mínima es:

<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></tbody>
  </table>

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

Más información

Creación de las secciones

1. Ficha de producto

Cada entrada que quieras convertir en producto debe tener tres etiquetas:

  • store → activa la entrada como ficha de producto y oculta la imagen destacada.
  • $XX.XX → define el precio y permite que el shortcode lo detecte para mostrarlo en tarjetas de productos.
  • Etiqueta de subcategoría → permite agrupar productos y mostrarlos en la home o subcategorías mediante shortcodes.

Más información

2. Subcategorías

Las subcategorías permiten organizar los productos dentro de una categoría. Cada subcategoría tiene una etiqueta única que será usada en los shortcodes para mostrar los productos correspondientes. Más información

3. Categorías

Las categorías agrupan varias subcategorías relacionadas. Su etiqueta permitirá generar la navegación de 4 niveles de la tienda y mostrar productos relacionados en la home de la categoría. Más información

4. Home de la tienda

La portada o home de la tienda mostrará productos destacados, categorías y subcategorías usando los shortcodes. Todo dependerá de las etiquetas definidas previamente en productos, subcategorías y categorías. Más información

Shortcode para mostrar los productos

Ejemplo de la tienda en Blogger

¿Quieres ver cómo se ve en acción? Hemos preparado un ejemplo real con una demo de la tienda online en Blogger, donde podrás visualizar el banner principal, las categorías destacadas y la organización pensada para mejorar la experiencia de compra.

Demo en vivo de la tienda

Recomendaciones finales

Una vez realizado el estudio de palabras clave y seleccionadas las etiquetas de productos, subcategorías y categorías según el nicho, se recomienda:

  • Crear primero todos los productos respetando las etiquetas para que los shortcodes funcionen correctamente.
  • Definir todas las subcategorías relacionadas y sus etiquetas antes de montar las categorías.
  • Finalmente, construir la portada de la tienda con todas las categorías y subcategorías correctamente vinculadas.
  • Si hay múltiples tiendas o temáticas distintas, definir etiquetas específicas para agruparlas o usar una etiqueta global para la tienda principal.

Siguiendo este orden garantizarás consistencia en la tienda y un funcionamiento correcto del JS Store Blogger, optimizando la experiencia de usuario y el SEO.