Documentación de Hangrail

10Instalar el tema

1. En el panel de Shopify, abre Tienda online > Temas.
2. Selecciona Agregar tema > Subir archivo zip y elige hangrail.zip.
3. Selecciona Personalizar para abrir el editor de temas.
4. En la sección Perchero de ropa de la página de inicio, elige tu nueva colección: algunas prendas cuelgan de la barra. Debajo, la tienda sigue como un sitio clásico: elige una colección en Colección destacada y las prendas de un look en Shop the look.
5. Selecciona Publicar cuando esté lista.

Mientras no elijas productos, las secciones muestran prendas dibujadas en la barra: la tienda ya tiene el aspecto de Hangrail desde el primer día.

20Mostrar un producto como mockup

Un producto se convierte en un mockup dibujado cuando tiene la etiqueta mockup:<modelo>, por ejemplo mockup:hoodie. Sin esa etiqueta, el producto muestra sus fotos.

El estampado

• Añade el estampado (logo, motivo, ilustración) como imagen del producto, mejor en .png con fondo transparente.
• En el texto alternativo de la imagen, añade [front] para el frente o [back] para la espalda. Ejemplo: Logo estrella [front].
• Sin marcador, la primera imagen del producto se usa como estampado del frente.
• Las imágenes de estampado siguen en la galería de la página de producto, después del mockup y las fotos.

Posición y tamaño

Una prenda hecha con tu tejido

Para un tejido estampado (toile, cuadros, flores…), fotografía un trozo plano del tejido, añádelo como imagen del producto con [front] (y [back]) en su texto alternativo, y pon al producto la etiqueta print:fabric (y print-back:fabric). La foto se repite por toda la prenda y las costuras, los bolsillos y las sombras siguen visibles. Usa un color blanco o claro para estas variantes. print-size fija el tamaño de la repetición.

Textura del tejido

Añade texture:corduroy, texture:knit, texture:fleece, texture:denim, texture:waffle, texture:lace o texture:satin para dar al mockup el aspecto de su tejido. Los gorros siempre son de punto.

Tus propias fotos en la percha

Los productos sin etiqueta mockup: muestran su foto, y una foto recortada se cuelga sola en una percha. Consulta Fotos en la percha.

En pantalones y shorts, chest significa el muslo y center la pierna. En el tote bag, son un estampado pequeño y uno grande.

Color de la prenda

El mockup toma el color de la variante elegida. Crea una opción Color y da a cada valor una muestra en el panel de Shopify. Sin muestra, el tema prueba el nombre del color en inglés (black, navy…) y luego el color por defecto de Configuración del tema > Colores. Los nombres de opción tratados como colores se ajustan en Configuración del tema > Perchero y mockups.

12345

1. 1El mockup toma el color elegido
2. 2Selector Frente / Espalda
3. 3Los colores en etiquetas kraft
4. 4Las tallas en botones
5. 5Agregar al carrito y pago acelerado

30Fotos en la percha

Cualquier producto sin mockup puede mostrar su propia foto. Cuando la foto tiene el fondo transparente, Hangrail la cuelga como una prenda de verdad: en el perchero, en la página de producto, en la vista rápida y en Shop the look. En las cuadrículas de productos, la foto se muestra entera, sin percha. No hay nada que configurar: el tema lee la foto y elige cómo colgarla.

En cuatro pasos

1. 1
   Fotografía la prenda sola, en plano o en un maniquí invisible, sobre un fondo liso.
2. 2
   En el panel de Shopify, abre la imagen, elige Fondo de color › Transparente y luego Guardar como nuevo. Obtienes un PNG.
3. 3
   Pon este PNG como primera imagen del producto. No añadas la etiqueta mockup:.
4. 4
   Listo: la prenda se cuelga sola, en toda la tienda.

Lo que lee el tema

Hangrail mira la foto en tamaño diminuto y dibuja una percha a su medida. El gancho sale del cuello; la barra pasa por detrás de la prenda y termina dentro de su silueta, así que solo se ve entre dos tirantes. Una cinturilla plana, o un tipo de producto como Pantalón, Vaqueros o Falda, indica una prenda de abajo: dos pinzas sujetan los extremos de la cinturilla. Después la foto sube hasta que el gancho toca la barra.

Tres formas de colgar

• PerchaTops, vestidos, chaquetas, abrigos y sujetadores. Entre dos tirantes, la barra se ve.hanger:bar
• PinzasPantalones, vaqueros, faldas y shorts, reconocidos por el tipo de producto o una cinturilla plana.hanger:clip
• GanchoGorras, sombreros, gorros y bolsos, reconocidos por el nombre del producto en 19 idiomas.hanger:hook

El tema elige por ti. Para imponer una opción, añade la etiqueta al producto.

Tamaño en el perchero

Una junto a otra, cada foto se dimensiona para conservar las proporciones reales: un vestido largo cuelga más bajo que un blazer y un bolso es más pequeño que un abrigo. La ropa cuelga a tamaño real. Gorras, sombreros, gorros y bolsos cuelgan al 70 %: cámbialo en Configuración del tema › Perchero y mockups › Tamaño de gorras, sombreros y bolsos (100 % los deja a tamaño real). Para un solo producto, añade una etiqueta como size:75, de 30 a 150: una falda infantil en size:75, un abrigo largo en size:110.

Las fotos que mejor funcionan

• FuncionaEn planoFondo eliminado.
• FuncionaManiquí invisibleFondo eliminado.
• EvitarPuesto en un modeloEl recorte conserva el cuerpo, que también colgaría.
• EvitarJPG con fondoSe muestra enmarcado, sujeto con dos pinzas.

Usa al menos 1200 px en el lado largo, deja toda la prenda dentro del encuadre (mangas y bajos incluidos), recorta lo más cerca posible e ilumina toda la colección igual.

Perfil, espalda y giro

Más imágenes del mismo producto le dan movimiento. Márcalas en su texto alternativo (en el panel de Shopify, abre la imagen y edita su texto alternativo):

Añade el nombre del color para usar una imagen solo con ese color, por ejemplo Blazer [side] Negro. Fotografía el perfil y la espalda como el frente (misma luz, misma distancia) y recórtalos igual. Para un vídeo de giro, graba o genera de 2 a 4 segundos sobre un fondo claro y liso, con la prenda en su percha en la parte superior del encuadre; empieza de perfil y termina de frente. Las etiquetas no se leen a los clientes.

El ajuste

Configuración del tema › Perchero y mockups › Fotos de productos sin mockup: Automático (predeterminado) cuelga las fotos con fondo transparente y enmarca las demás. Recorte en percha las cuelga siempre, Foto enmarcada las enmarca siempre.

40El perchero

El perchero es la firma del tema. Aparece en la sección Perchero de ropa, en las vistas de la página de colección y en Productos relacionados.

• Espaciado: las prendas cuelgan una junto a otra. La prenda bajo el cursor se adelanta y las demás se atenúan.
• Compacto (3D): las prendas cuelgan juntas, de perfil. La prenda bajo el cursor gira hacia el cliente y se adelanta, sus vecinas se abren en abanico y se alejan con la distancia, y la perspectiva sigue al ratón. En el móvil, la prenda del centro de la pantalla gira mientras el cliente se desplaza.

Al seleccionar una prenda se abre una vista de cerca con su espalda y sus colores en etiquetas. Ver disponibilidad abre la vista rápida, donde el cliente elige su talla y agrega al carrito.

Configurar la sección

• Diseño: el título a la izquierda, o centrado sobre la barra con un subtítulo encima. El diseño centrado lleva el selector de vista, un breve Texto bajo la barra y el enlace a la colección a una fila bajo la barra.
• Forma de la barra: recta o curva, un poco hundida en el centro como una barra de verdad. Cada prenda cuelga del punto de la curva que tiene encima.
• Etiquetas de precio: una pequeña etiqueta kraft con el precio cuelga de cada gancho. En la vista compacta, solo la prenda elegida muestra la suya. Los precios rebajados se escriben en el color de las rebajas.
• Imagen de fondo: una pared, un estudio o un paisaje detrás de la barra, con una superposición del color del esquema para que el texto se lea bien.

Las vistas de perfil, de espalda y los vídeos de giro salen de las propias imágenes del producto: consulta Fotos en la percha.

50Secciones

60Los filtros de colección

Tus clientes ordenan una colección como en una tienda. Los filtros vienen de la aplicación gratuita Search & Discovery de Shopify; el tema les da su propio estilo.

12345

1. 1La disponibilidad como interruptor
2. 2Búsqueda en listas largas
3. 3Las tallas en botones, con su número
4. 4Orden
5. 5Vista de cuadrícula o lista

• Tres diseños en Colección › Diseño de filtros: una barra lateral que sigue el desplazamiento, un panel o una barra horizontal de menús desplegables sobre los productos. En el móvil, los filtros siempre se abren en un panel.
• Precio: un control deslizante sobre una cinta métrica, dos campos y rangos de precio en un clic.
• Colores: cada valor muestra su muestra en una etiqueta. Da una muestra a cada valor de tu opción de color en el panel de Shopify.
• Filtros activos: aparecen como etiquetas sobre los productos y se quitan en un clic.

70Configuración del tema

Todos los colores del tema vienen de los esquemas de colores. Cambiar un esquema actualiza todas las secciones que lo usan, perchas y etiquetas incluidas.

Cada esquema define 13 colores: fondo, texto, botón y su texto, panel y su texto, bordes, barra y perchas, etiquetas y su texto, cinta métrica y su texto, y rebajas.

• Tipografía: fuentes de títulos, texto y etiquetas, tamaño de títulos y de texto, títulos en mayúsculas.
• Diseño: ancho de página, márgenes, redondeo de botones, campos y tarjetas, ruta de navegación en las páginas de producto y colección.
• Perchero y mockups: ancho de las prendas en la barra, estilo de las fotos (recortadas o enmarcadas), acabado de la percha (madera, acero o negro), profundidad 3D y sombras (pared iluminada, sombras suaves, prendas que giran hacia el cursor, etiquetas que se mueven con suavidad), balanceo al pasar el cursor, nombres de opción tratados como colores.
• Tarjetas de producto: muestras de color que el cliente prueba en la tarjeta, espalda al pasar el cursor, vista rápida, marca.
• Carrito: panel o página, nota del pedido, cinta de envío gratis y su umbral, iconos de pago bajo el botón de pago.

80Página de producto

La columna de información del producto se construye con bloques que puedes reordenar: título, marca, precio, SKU, selector de variantes, cantidad, contador de stock, botones de compra, descripción, texto, pestaña desplegable, guía de tallas, compartir, productos complementarios, Liquid personalizado y bloques de aplicaciones.

• Las tarjetas de regalo se pueden enviar a un destinatario con un mensaje y una fecha de envío.
• Se admiten suscripciones (planes de venta), precios por unidad y Shop Pay a plazos.
• La disponibilidad para recoger en tienda se actualiza con la variante elegida.
• Los vídeos y modelos 3D se reproducen en la galería, con Ver en tu espacio en los dispositivos compatibles.
• Las reglas de cantidad (mínimo, máximo, incrementos) y los precios por volumen de los catálogos B2B aparecen bajo el selector de cantidad y siguen a la variante elegida.

90Funciones que ayudan a vender

Los temas de moda más vendidos comparten unas cuantas funciones que convierten una visita en un pedido. Hangrail las tiene, con su propio estilo de showroom. Todas son opcionales.

Contador de stock: el número mostrado es tu stock real en Shopify. Solo aparece en las variantes cuyo inventario sigue Shopify y que no se venden sin stock (Continuar vendiendo cuando no haya stock desactivado). Los productos sin seguimiento no muestran nada.

Cuenta regresiva: escribe la fecha de fin como 2026-12-24 18:00, en la zona horaria de tu tienda (Configuración > General). Cuenta atrás solo hasta fechas reales: un temporizador que se reinicia en cada visita engaña a los clientes.

100Carrito y pago

El carrito se abre como un panel lateral, o como una página si lo prefieres (Configuración del tema > Carrito).

• Las cantidades se actualizan sin recargar la página.
• Los descuentos automáticos y por código se muestran por artículo y en el total.
• Nota del pedido opcional y una cinta métrica de envío gratis con el umbral que elijas.
• Botones de pago acelerado (Shop Pay, Apple Pay, Google Pay y más).

El pago en sí lo gestiona Shopify en Configuración > Finalizar compra.

110Idiomas y monedas

Hangrail está traducido a 19 idiomas, para los clientes y para el editor de temas:

• Englishen
• Françaisfr
• Deutschde
• Españoles
• Italianoit
• Nederlandsnl
• Português (Brasil)pt-BR
• Português (Portugal)pt-PT
• Svenskasv
• Danskda
• Norsk bokmålnb
• Suomifi
• Polskipl
• Češtinacs
• Türkçetr
• 日本語ja
• 한국어ko
• 简体中文zh-CN
• 繁體中文zh-TW

1. Añade idiomas en Configuración > Idiomas. Los textos del tema cambian solos.
2. Traduce tu propio contenido (productos, colecciones, textos de las secciones) con la aplicación gratuita Translate & Adapt de Shopify.
3. Muestra el selector de idioma en el Encabezado para que los clientes puedan cambiarlo.

El selector de país muestra todos los países y monedas a los que vendes en Configuración > Mercados, con un campo de búsqueda. Shopify convierte los precios automáticamente. Los métodos de pago aceptados aparecen en el pie de página con sus iconos oficiales.

120Accesibilidad y rendimiento

• Todas las interacciones funcionan con el teclado, con el foco visible.
• Las animaciones se detienen cuando el dispositivo pide reducir el movimiento. La banda de cinta métrica tiene un botón de pausa.
• Las imágenes se cargan al tamaño justo para cada pantalla. Los mockups se dibujan con código, sin imagen que descargar.

130Preguntas frecuentes

El mockup no aparece.

Revisa la etiqueta mockup: (sin espacio) y el nombre del modelo en la tabla.

El estampado es demasiado pequeño.

Recorta el .png lo más cerca posible del dibujo, o añade print-size:140.

La prenda sigue blanca.

Da una muestra de color al valor de la opción en el panel de Shopify.

Prefiero fotos en lugar de un mockup.

Quita la etiqueta mockup:. El estilo de las fotos en el perchero (recortadas o enmarcadas) se ajusta en Configuración del tema > Perchero y mockups.

El contador de stock no aparece.

En las variantes del producto, activa Rastrear cantidad y desactiva Continuar vendiendo cuando no haya stock. El contador aparece a partir del umbral fijado en el bloque.

Los filtros no aparecen.

Créalos en la aplicación Search & Discovery de Shopify y comprueba que Activar filtrado está marcado en la sección Colección.

¿Mis clientes pueden subir su propio estampado?

No con el tema solo: muestra los estampados que añades en el panel de Shopify. La personalización por el cliente (subida, vista previa, pedido) necesita una aplicación de Shopify.

140Soporte

¿Dudas sobre Hangrail? Escribe a ibradventure.company@gmail.com. Respondemos en dos días laborables. Indica la dirección de tu tienda y, si algo se ve mal, una captura de pantalla.

150Historial de versiones