Cómo cambiar cada cosa del sitio

Editor de temas Textos, fotos, orden de las secciones

Es el editor visual de Shopify. Cada bloque del sitio es una sección que empieza con ANT ·. Ahí cambias títulos, bajadas, botones, fotos, qué productos aparecen y en qué orden va cada sección de la página.

Configuración del tema Reglas comerciales que se repiten en todo el sitio

Montos de envío gratis, tramos de cuotas, WhatsApp, dónde se retira. Se escriben una sola vez y se actualizan en la franja de arriba, las tarjetas, la ficha y el carro al mismo tiempo.

Navegación Qué categorías salen en el menú y en qué orden

El menú del sitio es el menú main-menu de Shopify. El megamenú de cada categoría se arma con los mismos ítems que pongas ahí. Ojo: este menú lo comparte el tema vivo, así que un cambio acá se ve también en la tienda actual.

Producto / catálogo Precio, stock, fotos, descripción y ficha técnica

Todo lo que es dato del producto sale del catálogo, no del tema: precio, precio comparativo, stock, fotos, SKU y las colecciones a las que pertenece. La descripción larga y la ficha técnica viven en campos propios del producto (ver Ficha de producto).

Configuración del tema Cuotas sin interés

Las cuotas van por tramo y se calculan producto a producto: bajo el primer tramo no se promete ninguna, sobre el primero son 3 y sobre el segundo son 6. Cambias los montos y se recalcula todo el sitio.

Configuración del tema Umbral de envío gratis

Hoy está en $50.000, que es la regla real de la tienda. El monto aparece en la franja superior, en la barra de la ficha ("te faltan $X para envío gratis") y en el carro. Si cambias la regla de envíos en Shopify, cambia también este número: el tema no la lee sola.

Configuración del tema Segundo hito del carro (kit de regalo)

Está en 0, o sea apagado: el carro muestra solo el hito de envío gratis. Si algún día hacen una promo de regalo sobre cierto monto, pones ese monto acá y el segundo hito vuelve a aparecer solo.

Configuración del tema Retiro, tienda física y WhatsApp

• Dónde se retira: hoy dice bodega en Renca. Se escribe una vez y sale en la franja, la ficha, el acordeón de envíos y el carro. La dirección exacta no va en el sitio: queda en el checkout.
• Nombre de la tienda física: Mall Sport, aparece en el pie y en contacto.
• WhatsApp: solo números con el 56 adelante. Alimenta el botón flotante, el de la ficha y el del menú móvil.

Configuración del tema Renombrar una categoría solo en el sitio

Sirve para mostrar un nombre distinto al del catálogo sin tocar Navegación ni las colecciones (que comparte la tienda viva). Se escribe Nombre real=Nombre visible, separados por coma. Cambia el menú, el menú móvil, las píldoras, el pie, el título de la colección y la barra lateral de filtros.

Hoy: Camping=Colchones y camping, Accesorios Piscinas=Accesorios y mantención de piscinas

Configuración del tema Colecciones de referencia

Dos handles le dicen al tema cuál es la colección de piscinas y cuál la de accesorios. De ahí salen el buscador de piscinas, el carro vacío, la sección de mantención y los accesorios del pack. Si el árbol de categorías cambia, hay que actualizarlos.

Hoy: piscinas-1 y accesorios-piscinas-1.

Editor Banner principal (los 4 slides)

Cada slide es un bloque con su foto, volanta, título, bajada y botones. Si dejas el botón secundario vacío, el slide queda con un solo botón. La foto vacía toma la imagen de la colección.

• Productos destacados del slide: los dos selectores Destacado 1 y Destacado 2. Si los dejas vacíos, el sitio pone los dos más caros en stock de esa colección.
• Si un producto fijado se queda sin stock, se reemplaza solo.

Editor Las tarjetas de categoría

Un bloque por categoría: colección, foto, nombre visible y bajada. El conteo de productos y el "desde $X" se calculan solos con el stock real. Para agregar o sacar una categoría, agregas o borras un bloque.

Editor "Lo más buscado del verano": elegir los productos

Se llena de dos formas, y se pueden combinar:

• Producto destacado: un bloque por producto elegido a mano. Van primero, en el orden en que los pongas. Es lo que se usa para mostrar "los ganadores" de la temporada.
• Familia (automático): un bloque por colección, con cuántos productos toma de ella. Rellena lo que quede, sin repetir los que ya fijaste.

Si un producto fijado se queda sin stock, se salta solo y el carrusel se completa con los automáticos. Para cambiar los destacados no hace falta pedirnos nada.

Editor "¿Qué piscina te cabe en el patio?"

Se editan la volanta, el título, la bajada y el consejo del pie. Los resultados salen del catálogo: mide el largo y el ancho del patio, descuenta el margen para armarla y, en las rectangulares y ovaladas de marco, suma el espacio que ocupan las patas.

Editor Banners de temporada (el grande y los dos chicos)

• Grande: foto, título, texto y enlace. La escalera de 4 precios de abajo se arma sola con la colección elegida, de menor a mayor, con el precio tachado cuando hay oferta.
• Ofertas: el porcentaje y la cantidad de productos se calculan solos. En el texto se escriben [max] (mayor descuento real) y [n60] (cuántos productos tienen 60% o más). Así nunca queda una cifra vieja.
• Mantención: el "desde $X" sale del precio más bajo en stock de la colección que elijas en el bloque, usando [desde].

Editor "Míralo en acción" (los videos)

Cada bloque es un video vertical, su portada, el producto que promociona, una etiqueta y un título corto. Para cambiar un video: subes el nuevo a Contenido › Archivos y lo eliges en el bloque. El precio y el botón de agregar salen del producto que asocies.

Los videos deben ser 9:16 (vertical). La portada es un fotograma: si no la pones, Shopify muestra un cuadro gris.

Editor "Arma tu piscina completa"

Puedes fijar la piscina base y hasta 3 accesorios, o dejarlo en automático.

• Si no fijas nada: toma la piscina familiar más cara sin filtro incluido y la completa con un accesorio por tipo (bomba, cartucho y escalera o cobertor), nunca dos del mismo.
• Si fijas una base y se queda sin stock, vuelve sola al modo automático. Lo mismo con cada accesorio.
• El total y las cuotas se recalculan cuando el cliente destilda algo.

Editor Mantención, banda editorial y newsletter

• ANT · Mantención: colección, título, bajada y texto del enlace. Muestra 4 productos: puedes fijar cuáles con bloques Producto (hasta 4) y lo que falte se completa solo con la colección.
• ANT · Banda editorial: la franja con foto grande: volanta, título, texto y dos botones.
• ANT · Newsletter: título, texto, botón y línea legal. Los correos llegan a Clientes con la etiqueta newsletter.

Editor Mover secciones sin romper el ritmo visual

La portada alterna fondo blanco y gris. Si mueves una sección de lugar, revisa el interruptor Fondo gris de "Lo más buscado" y "Video shopping" para que no queden dos grises seguidas.

Producto Descripción, ficha técnica, garantía y sello oficial

No salen de la descripción normal de Shopify: están en campos propios del producto, cargados desde las fichas reales de la marca. Se editan en la ficha del producto, al final, en la sección de metacampos.

Producto El SKU que se muestra

Es el SKU de la variante, tal cual está en el producto. Aparece chico y gris a la derecha de la línea de stock, y también en la tabla comparativa. Si el SKU está vacío, no se muestra nada.

Editor Textos de envío y de cambios

Los dos acordeones del final de la ficha se escriben una vez para todos los productos. Dentro puedes usar [retiro] para que tome lo que esté configurado en ANT · Comercial.

Editor "Complétalo y ahorra" y "Se compran juntos"

Los accesorios que se ofrecen salen de las colecciones que están listadas en el ajuste Colecciones de accesorios de la ficha (hoy accesorios de piscina, infladores y accesorios de spa). Los títulos y bajadas se editan en cada sección.

Se calcula solo La tabla "Compáralo con otros"

Toma los productos de la misma categoría con el precio más cercano: uno más barato y dos más caros. Muestra miniatura, SKU, medidas traducidas, precio, cuotas y stock. No se elige a mano.

Si un producto no está en ninguna colección del menú, la ficha no muestra ni comparativo ni relacionados: hay que agregarlo a su categoría.

Se calcula solo Las medidas en lenguaje simple

La línea "Mide 3 × 2,01 m y 0,66 m de alto. Con las patas ocupa…" se arma leyendo el título del producto. En las redondas dice diámetro, y en las rectangulares y ovaladas de marco suma el espacio de las patas. Si un título trae las medidas mal escritas, se corrige el título.

Editor La foto de cabecera de cada categoría

Por defecto usa la imagen de la colección. Si quieres otra, agregas un bloque con esa colección y su foto. Las subcategorías heredan la foto de su categoría madre.

Editor Los filtros de la barra lateral

Cada colección puede mostrar una faceta distinta: por forma, por capacidad o por tipo de accesorio. Se configura con un bloque por colección. Los conteos de cada filtro son reales y se actualizan solos con el stock.

Los grupos "Precio" y "Stock y ofertas" salen en todas las categorías y no se configuran.

Se calcula solo La página de resultados

La búsqueda usa la misma grilla, las mismas píldoras de categoría y los mismos filtros que una colección. El buscador de arriba sugiere mientras escribes. El texto del campo ("Busca piscinas, spas, bombas…") sí se edita, en la cabecera.

Editor El carro

El carrito lateral muestra la barra de envío gratis, y cuando falta poco sugiere un accesorio barato para cruzar el umbral. Los productos que aparecen cuando el carro está vacío son los dos más caros en stock de la colección de piscinas configurada en ANT · Comercial.

Navegación Qué categorías salen en el menú

Se arma en el menú principal de Shopify. El sitio respeta ese orden y usa las subcategorías para la primera columna del megamenú. Para esconder un ítem solo en este sitio (sin sacarlo del menú de la tienda viva), lo escribes en Ítems del menú que NO se muestran de la cabecera; hoy está "Marcas".

Editor El megamenú de cada categoría

Hay un bloque por categoría del menú. Se emparejan por el título, así que el Título del ítem del menú del bloque debe escribirse igual que en Navegación.

• Columna 1: las subcategorías del menú (automáticas) más hasta dos enlaces extra.
• Columna 2: una o dos facetas con conteo real (por forma, por presupuesto, por capacidad, por tipo de accesorio).
• Columna 3: una faceta sobre otra colección, tres enlaces, y un segundo grupo opcional (así quedaron los infladores eléctricos y manuales en Colchones y camping).
• Panel azul: volanta, título, texto, botón y enlace.

Editor La franja que se mueve arriba

Cada mensaje es un bloque con un ícono y un texto. Puedes poner negrita con dobles asteriscos y usar los comodines [envio], [cuotas], [pago], [retiro] y [tienda], que se llenan con la configuración comercial. Para sacar un mensaje, borras el bloque.

Editor Logo, buscador y accesos de la cabecera

Logo, texto del buscador, enlace de Favoritos, el ítem extra del menú (hoy "Guías"), el acceso extra del menú móvil y la cajita de suscripción del escritorio (se puede apagar con un tilde).

Editor El pie

Logo, texto, Facebook e Instagram, medios de pago (separados por coma), las dos columnas de enlaces, correo, teléfono y el enlace de la tienda física. La primera columna toma las categorías del menú; los enlaces de servicio al cliente se escriben a mano.

Blog Escribir o editar una guía

Se crea como artículo del blog "Guías". Dos etiquetas tienen efecto en el diseño:

• buscador: agrega el buscador de piscinas al final de esa guía.
• productos:bomba|cartucho|cobertor: define qué productos se muestran al pie, buscando esas palabras en la colección de accesorios.
• La primera etiqueta que no sea una de esas se usa como volanta (por ejemplo "Mantención").

Editor Páginas de contenido y contacto

Las páginas normales (envíos, cambios, términos, preguntas frecuentes) usan el mismo diseño: escribes el contenido en la página y listo. La de contacto suma el formulario, con título y texto editables.

Editor Lista completa

Ejemplo real: el título del banner de ofertas está escrito Hasta [[[max]%]] de descuento y en el sitio se lee "Hasta 83% de descuento", con el 83% marcado en amarillo.

Se calcula solo La lista

• Los conteos del megamenú, de las píldoras y de los filtros (solo productos con stock).
• Los "desde $X" de las tarjetas de categoría y los banners.
• El porcentaje de descuento de cada producto y la etiqueta de oferta, que aparece sobre 60%.
• El mayor descuento y la cantidad de productos en oferta del banner.
• La línea de cuotas de cada producto, según los tramos configurados.
• Las medidas traducidas y el espacio de las patas.
• Los destacados del banner, de "Lo más buscado" y de Mantención solo cuando no fijas productos a mano; en las tres secciones puedes elegirlos tú.
• La piscina y los accesorios de "Arma tu piscina completa" en modo automático.
• Los productos del comparativo y de "También en…".
• Las sugerencias del carro para llegar al envío gratis.
• Las fechas de entrega estimada de la ficha.

Pídeselo a ANT Cambios de código

• Colores, tipografías, tamaños y espaciados del diseño.
• Secciones nuevas o cambiar la estructura de una existente (por ejemplo, agregar una cuarta columna al megamenú).
• Las reglas de cálculo: el 60% desde el que se muestra la etiqueta de oferta, cómo se eligen los comparables, qué tipos de accesorio entran al pack.
• El traductor de medidas y el cálculo de las patas.
• Publicar el tema o volver atrás.
• Cargar en bloque descripciones, fichas técnicas o videos de muchos productos.
• Un tipo de sección que hoy no existe (los productos destacados, en cambio, ya se eligen desde el editor).

Coordinar con ANT Si cambia el árbol de categorías

Mover productos de colección o renombrar colecciones afecta al menú, al megamenú, a los filtros, al buscador de piscinas y a las secciones que apuntan a una colección concreta. Cuando definan la estructura nueva, ANT ajusta esas referencias de una vez para que nada quede apuntando a una colección que ya no existe.

Con ANT El paso a producción

• Antes de publicar se traen los cambios que se hayan hecho en el tema actual para que no se pierda nada.
• Se corrige la zona horaria de la tienda, que hoy está en Nueva York y descuadra informes y descuentos programados.
• Se guarda el id del tema anterior: volver atrás es un clic.
• Después de publicar, este mismo manual sirve igual: cambia solo que los cambios se ven en vivo.

Editor Cómo revisar lo que editaste

Guardas en el editor y abres la vista previa. Es la tienda real con el catálogo, los precios y el stock de este momento, pero con el diseño nuevo. El link se puede compartir con cualquiera del equipo.

Ronda del 15 de septiembre

Ronda del 21 de septiembre

Los destacados ya no dependen de nosotros: desde el editor se eligen producto por producto en el banner, en "Lo más buscado" y en Mantención. Queda pendiente de su lado el árbol de categorías nuevo.