Portada de la Tienda (Nivel 1)

Cómo crear la Portada de tu Tienda Online en Blogger (Nivel 1)

Si has instalado nuestra plantilla premium NichoClean v2.0, seguramente ya estás pensando en cómo aprovechar al máximo su sistema de tienda online en 4 niveles.
En este tutorial aprenderás a configurar el Nivel 1 – la Portada de la Tienda, que funciona como la home principal de tu tienda online en Blogger.

Este nivel es el punto de partida donde tus visitantes descubrirán todas las categorías principales, podrán ver ofertas destacadas y acceder a los diferentes productos con solo un clic.

¿Qué es el Nivel 1 de la Tienda en Blogger?

El Nivel 1 es la entrada principal de tu tienda online. Su función es actuar como un escaparate digital:

Muestra un banner principal atractivo (ideal para promociones o branding).
Contiene tarjetas de categorías (ejemplo: ropa, calzado, accesorios).
Permite incluir productos destacados y ofertas limitadas.
Redirige al visitante hacia el Nivel 2, donde se muestran los productos de cada categoría.

Ventajas de usar un Nivel 1 en tu tienda Blogger

Mejor organización: cada categoría tiene su propio espacio.
Mayor conversión: un banner y ofertas destacadas captan la atención del visitante.
SEO optimizado: puedes posicionar la página de portada en Google para palabras clave como “tiendas de ropa online”.
Escalabilidad: si mañana decides agregar más categorías, solo tendrás que editar este nivel.

Cómo configurar la Portada de la Tienda (Nivel 1)

A continuación, te muestro el paso a paso para instalarlo en tu plantilla NichoClean:

1. Crea una página estática

Entra a tu panel de Blogger → Páginas.
Haz clic en Nueva página.
Asigna un título, por ejemplo: Tienda de Ropa Online.

2. Agrega el HTML de la Demo en tu página

Dentro del editor de la página pega el siguiente código HTML:

  <section>
    <h3 style="padding: 10px 0;">Bienvenidos (aquí banner)</h3>    
    <!-- [aquí-imagen-banner] -->
    <p>¡Encuentra las mejores ofertas del año! En nuestra tienda, nos especializamos en ofrecer productos de calidad a precios competitivos, garantizando tu satisfacción en cada compra.</p>
    <p>Navega por nuestras secciones y descubre artículos cuidadosamente seleccionados para cada necesidad y estilo de vida. Desde tecnología de punta hasta moda urbana, tenemos todo lo que buscas.</p>
    <p>Además, disfruta de envíos rápidos y un servicio al cliente siempre dispuesto a ayudarte.</p>
  </section>

 <!-- Separador doble con líneas finas -->
<div class="divider-double"></div>

  <section>
    <h3 style="padding: 10px 0;">Explora nuestras categorías principales (aquí categorías)</h3>    
    <!-- [shortcode-categories] -->    
    <div class="galeria-feed cluster" data-etiqueta="Subcategorias" data-cantidad="6"></div>
    <p>Nuestras categorías están diseñadas para facilitar tu experiencia de compra, agrupando productos relacionados para que encuentres todo en un solo lugar.</p>    
<div class="feed-text" data-variant="grid" data-tag="Subcategorias" data-max="3"></div>    
   <blockquote>
         <strong>Deportes:</strong> Equipamiento y ropa para mantener tu salud y energía en movimiento.
    </blockquote>
    <p>Descubre promociones especiales dentro de cada categoría y aprovecha descuentos exclusivos al registrarte en nuestra tienda.</p>
  </section>

<!-- Separador doble con líneas finas -->
<div class="divider-double"></div>

  <section>
    <h3 style="padding: 10px 0;">Productos destacados que no puedes perderte (aquí productos destacados)</h3>
    <!-- [shortcode-featured-products] -->    
    <div class="tabla-productos" data-tema="camiseta" data-max="4"></div>
    <p>Cada mes seleccionamos cuidadosamente una gama de productos que destacan por su innovación, calidad y relación precio-valor.</p>        
<div class="feed-text" data-variant="grid" data-tag="Colecciones" data-max="3"></div>  
    <p>Explora nuestra colección completa para encontrar productos que se ajusten a tus necesidades y presupuesto.</p>
  </section>

 <!-- Separador doble con líneas finas -->
<div class="divider-double"></div>

  <section>
    <h3 style="padding: 10px 0;">Promociones y ofertas especiales (aquí ofertas)</h3>
    <!-- [shortcode-offers] -->    
    <div class="feed-catalogo" data-max="3"></div>
        <div class="index-contenedor">
          <p>Aprovecha nuestras promociones limitadas para renovar tu equipo o consentirte con tus artículos favoritos sin afectar tu bolsillo.</p> 
  <ul>
      <li><strong>20% de descuento</strong> en toda la electrónica hasta el 31 de agosto.</li>
      <li><strong>Envío gratis</strong> en compras mayores a $50 en cualquier categoría.</li>
      <li><strong>Paquetes especiales:</strong> Combina productos seleccionados y ahorra más con nuestros bundles exclusivos.</li>
    </ul>
    </div>    
    <p>No dejes pasar estas ofertas, el stock es limitado y la oportunidad es única.</p>
  </section>

 <!-- Separador doble con líneas finas -->
<div class="divider-double"></div>

  <section>
    <h3 style="padding: 10px 0;">Estos son nuestros productos destacados del mes (aquí destacados)</h3>
    <!-- [shortcode-testimonials] -->   
<div class="feed-text" data-variant="alternate" data-tag="camiseta" data-max="3"></div>
    <p>Únete a nuestra comunidad satisfecha y vive una experiencia de compra sin igual.</p>
  </section>

Reemplaza cada texto en la demo con el tuyo y label por el nombre real de tus categorías en los shortcode, así como la cantidad de productos a mostrar.

3. Publica y enlaza en el menú

Guarda la página y publícala.
Ve al menú superior de tu blog (Diseño → Menú de Páginas).
Agrega la nueva página como Tienda o con el nombre de tu preferencia.

Ejemplo de la portada de la tienda en Blogger

¿Quieres ver cómo se ve en acción? Hemos preparado un ejemplo real con la demo de la portada de 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 portada

Recomendaciones prácticas

Si tu tienda tiene pocos productos, puedes mostrar todo directamente en esta portada sin necesidad de niveles extra.
Usa imágenes optimizadas y ligeras en tu banner para no afectar la velocidad de carga.
Cada categoría debe tener su etiqueta única y coherente (ejemplo: tienda-ropa, tienda-calzado).

Advertencia: No elimines ni modifiques el código principal de la plantilla. Siempre edita dentro de las páginas o entradas para mantener la compatibilidad.

Configurar el Nivel 1 – Portada de la Tienda en tu blog es el primer paso para convertir tu sitio en una tienda online profesional con Blogger.
Con este sistema podrás organizar tus productos en diferentes categorías, mejorar tu SEO y ofrecer una experiencia clara y atractiva a tus visitantes.

Recuerda: una tienda bien organizada vende más. Empieza creando tu portada, define tus categorías principales y deja que tu blog trabaje por ti.