Recurso gratuito · Pack de secciones para Shopify · v1.0

Pack Moda

Siete secciones para montar la portada de una tienda de moda: navbar de cristal, hero con tu descuento, marquee, colección en rebajas, posts de Instagram, preguntas frecuentes y footer. Cada una llena de ajustes para llevarla a tu estilo, sin tocar código.

  • 7 secciones
  • 3 estilos listos
  • Cualquier tema 2.0
  • Sin apps
  • Móvil primero
Ver la instalación
Secciones
7 archivos .liquid
Temas
Horizon, Dawn y 2.0
Instalación
30-40 min
Precio
Gratis, sin cuotas
Tienda de pruebas VANTERRA (tema Horizon) · todo lo que ves se cambia en el editor de temas

Qué incluye

La portada entera de una tienda de moda, en siete piezas.

Por defecto se ven con un estilo streetwear (cristal, letra condensada gruesa, rojo de acento y tarjetas redondeadas) con toques editoriales en serifa. Cada sección trae tres estilos y decenas de ajustes para que se parezca a tu marca.

01

Siete secciones independientes

Usa las que quieras: cada una funciona sola, sin apps ni archivos extra.

  1. NavbarCristal, logo al centro y buscador que se escribe solopm-navbar.liquid
  2. HeroTu descuento en grande y el botón a las rebajaspm-hero.liquid
  3. MarqueeEnvío gratis o lo que quieras, en movimientopm-marquee.liquid
  4. ColecciónProductos destacados con su descuentopm-coleccion.liquid
  5. InstagramTus clientes con la ropa puesta, como postspm-instagram.liquid
  6. Preguntas frecuentesEnvíos, descuentos, prendas y contactopm-faq.liquid
  7. FooterContacto, políticas, newsletter y centro de ayudapm-footer.liquid

02

Navbar de cristal

Negra y translúcida, con el logo al centro, tus enlaces a la izquierda y, a la derecha, el idioma, el carrito y un buscador que va escribiendo tus productos más vendidos.

03

Tres estilos en cada sección

Al añadirla eliges Mezcla, Streetwear o Editorial. Después cambias colores, letras, esquinas, sombras y espacios.

04

Rebajas que se ven

El hero pone tu descuento en grande y la colección enseña la insignia con el porcentaje y el precio tachado, sacados de Shopify.

05

Prueba social de verdad

Posts con el aspecto de Instagram: subes la foto, pones el @ y el enlace, y si quieres etiquetas el producto.

06

Footer completo

Columnas de enlaces, contacto, newsletter con código de descuento, redes, centro de ayuda, idioma y políticas.

07

Hechas para el móvil

Cada sección tiene sus ajustes de móvil: alto, tamaños, columnas, carrusel y menú lateral.

Cómo funciona

Del ZIP a tu portada nueva, en una tarde.

  1. Descárgalo

    Déjame tu email y te llevas el ZIP con las 7 secciones y la guía. Te mando también el enlace por email.

  2. Pega las secciones

    En una copia de tu tema, Editar código → sections: creas los 7 archivos y pegas cada uno.

  3. Añádelas y elige estilo

    En el editor de temas las añades a la portada, a la cabecera y al pie, y las pones a tu gusto.

Gratis. Solo te pido el email para mandarte el enlace.

Qué te llevas

Un ZIP con 7 secciones y la guía.

Cada archivo es una sección completa: su diseño, sus ajustes y su funcionamiento van dentro. No hay que tocar nada más del tema.

Contenido del ZIP
pack-moda/
├── sections/
│   ├── pm-navbar.liquid      navbar de cristal
│   ├── pm-hero.liquid        hero con descuento
│   ├── pm-marquee.liquid     marquee
│   ├── pm-coleccion.liquid   colección con descuento
│   ├── pm-instagram.liquid   posts de Instagram
│   ├── pm-faq.liquid         preguntas frecuentes
│   └── pm-footer.liquid      footer
└── GUIA.md                   la guía completa

Para cualquier tema 2.0. Funcionan en Horizon, Dawn y los temas de Online Store 2.0 (los que dejan añadir secciones en todas las páginas). Las he probado en Horizon y en Dawn.

Antes de empezar

Cinco minutos que te ahorran disgustos.

  1. Trabaja en una copia del tema: Tienda online → Temas → ··· → Duplicar. Así tu tienda sigue igual hasta que publiques.
  2. Ten tu logo en PNG con fondo transparente. Si la navbar va en cristal negro, mejor la versión blanca (o usa la opción de invertir colores).
  3. Crea la colección de rebajas (con los productos que tienen «precio de comparación») y, para el buscador, una colección automática ordenada por Más vendidos.
  4. Fotos de tus clientes con la ropa puesta, con su permiso, para la sección de Instagram.

Si abres los archivos, nunca con Word. Word cambia las comillas y rompe el código. Usa el Bloc de notas (Windows), TextEdit en texto normal (Mac) o Visual Studio Code.

Instalación

De la descarga a tu portada nueva, paso a paso.

30-40 min la primera vez

  1. Paso 1: Duplica tu tema

    2 min
    1. En Shopify: Tienda online → Temas → en tu tema, ··· → Duplicar.
    2. Trabaja siempre en la copia: hasta que no la publiques, tus clientes no ven nada.

  2. Paso 2: Crea las 7 secciones

    10 min
    1. En la copia: ··· → Editar código.
    2. En la carpeta sections → Añadir una nueva sección → escribe pm-navbar (tipo Liquid) → Hecho.
    3. Borra todo lo que trae, pega todo pm-navbar.liquid y pulsa Guardar.
    4. Repite con los otros seis: pm-hero, pm-marquee, pm-coleccion, pm-instagram, pm-faq y pm-footer.

    Consejo: pon a cada archivo exactamente su nombre. Si al guardar Shopify marca un error, es que falta un trozo: vuelve a copiar el archivo entero.

  3. Paso 3: La navbar y el footer

    5 min
    1. Pulsa Personalizar. En la columna de la izquierda, arriba, está el grupo Cabecera: Añadir sección → Pack Moda · Navbar (elige el estilo).
    2. Oculta la cabecera de tu tema con el icono del ojo (y la barra de anuncios, si no la quieres).
    3. Abajo, en el grupo Pie de página: Añadir sección → Pack Moda · Footer y oculta el pie del tema.
    4. En la navbar: sube tu logo, añade tus enlaces (bloques «Enlace» o «Menú») y elige la colección de más vendidos para el buscador.

  4. Paso 4: Monta la portada

    10 min
    1. En la Página de inicio, Añadir sección: Hero, Marquee, Colección, Instagram y Preguntas frecuentes. Arrástralas en ese orden.
    2. En el hero, tu foto, tu descuento y el enlace del botón a la colección de rebajas. Si la navbar va encima del hero, activa la opción de dejar sitio para la navbar.
    3. En la colección, elige la de rebajas. En Instagram, sube las fotos, el @ y el enlace de cada post.

  5. Paso 5: Ponla a tu gusto y publica

    10 min
    1. Cambia colores, letras, esquinas y espacios en cada sección (los ajustes comunes están al final de cada una).
    2. Revisa el móvil con el icono de la parte de arriba del editor.
    3. Cuando te guste: Guardar → vuelve a Temas → en la copia, Publicar.

Los tres estilos

Elige el punto de partida.

Al añadir cualquier sección del pack aparecen tres versiones. Son el mismo archivo con otros ajustes: puedes mezclarlas (por ejemplo, navbar Mezcla y footer Editorial).

EstiloCómo se vePara quién
Mezcla (por defecto)Cristal negro, letra condensada gruesa, rojo de acento, tarjetas redondeadas y antetítulos en serifa itálica.Moda urbana con un punto cuidado.
StreetwearMás fuerte: bandas rojas, todo en mayúsculas, cristal claro y sin serifas.Marcas urbanas, drops y colecciones cápsula.
EditorialBlanco y crema, serifa, esquinas rectas y líneas finas.Moda de autor, sastrería y marcas premium.

¿Ya la has añadido? No hace falta borrarla: cambia los colores, las letras y las esquinas en sus ajustes, o añádela otra vez con el otro estilo y borra la primera.

Qué se cambia

Casi todo, sin tocar código.

Lo más importante de cada sección (al final de todas hay además colores, tipografía, formas, espaciado y animación).

SecciónLo que puedes cambiar
NavbarCristal (color, opacidad y desenfoque), flotante o a lo ancho, fija encima del hero o con su hueco, ocultar al bajar, logo, enlaces con etiqueta y color, desplegables, buscador que se escribe solo con sugerencias, idioma, cuenta, carrito con contador y menú lateral en el móvil.
HeroFoto de ordenador y de móvil o vídeo, alto, capa para leer el texto, posición del texto, antetítulo, titular, descuento en grande, dos botones, pegatina giratoria, cuenta atrás y zoom lento.
MarqueeMensajes con enlace e icono, separador, velocidad, dirección, pausa, segunda fila al revés, colores, letra, inclinación y bordes.
ColecciónColección o lista de productos, solo con descuento, estilo de tarjeta (flotante, rejilla o editorial), proporción de la foto, segunda foto, insignia de descuento, colores, añadir rápido, columnas y carrusel.
InstagramPosts con foto o vídeo, @usuario, pie, enlace y producto etiquetado; estilo post de Instagram, foto con @ o solo foto; banda de color, columnas, carrusel y botón al perfil.
Preguntas frecuentesCategorías y preguntas, pestañas o lista, iconos del acordeón, buscador de preguntas, tarjeta de contacto (email, WhatsApp, página) y datos para Google.
FooterFranja superior, columnas de enlaces o menús, contacto, newsletter con código de descuento, redes, centro de ayuda, logo enorme, idioma y país, iconos de pago, políticas y copyright.
TodasColores (fondo, texto, acento, tarjetas, bordes, botones), letras de titulares, textos y acento (o las de tu tema), mayúsculas, esquinas, bordes, sombras, ancho, márgenes de ordenador y de móvil, y animación al aparecer.

Problemas frecuentes

Si algo no sale como esperabas.

Comprueba que los archivos están en la carpeta sections, con su nombre exacto, y que se guardaron sin error. Después recarga el editor de temas.

Oculta la cabecera del tema en el grupo «Cabecera» (icono del ojo) y deja solo la del pack.

Es lo que se busca cuando va «encima del contenido». Activa en el hero la opción de dejar sitio para la navbar, o pon la navbar «con su hueco».

Elige una colección en «Colección de los más vendidos». La mejor: una colección automática con todos tus productos y ordenada por «Más vendidos».

El desplegable solo aparece si tu tienda tiene más de un idioma (Configuración → Idiomas). Con uno, se ve la etiqueta «ES · Español».

La insignia y el precio tachado salen del «precio de comparación» de cada producto. Si no lo tiene, no hay descuento que enseñar.

Se actualiza solo al añadir desde el pack y desde la mayoría de temas. Si tu tema añade al carrito de otra forma, el número se ve al cambiar de página.

Mira que «Usar las letras del tema» esté desactivado en esa sección.

Preguntas frecuentes

Lo que más me preguntan.

Para cualquier tema 2.0: Horizon, Dawn y la mayoría de temas actuales, gratis o de pago. Lo he probado en Horizon y en Dawn.

No. Todo va dentro de cada sección.

Sí. Son independientes: instala solo las que quieras.

Cada sección carga solo su diseño y un poco de código propio, sin librerías externas. Las fotos se sirven al tamaño justo.

Las secciones son archivos tuyos: si el tema nuevo es 2.0, vuelves a pegarlas y siguen funcionando.

Sí, sin cuotas ni apps. Solo te pido el email para mandarte el enlace.

Descarga gratuita

Tu portada nueva, en una tarde.

Siete secciones para tu tienda de moda en Shopify, con tres estilos cada una y llenas de ajustes. Gratis y sin apps.

ZIP con 7 secciones .liquid + guía · v1.0

¿Prefieres que lo instalemos nosotros? Cuéntame tu caso

Trabaja siempre en una copia del tema y publícala cuando te guste.