Terrain — Documentación

Tema de Shopify para tiendas de equipo de montaña, senderismo, ciclismo, acampada y viaje · Versión 1.0.0 · English version

Nota. Terrain aún no se ha probado en una tienda Shopify real (estado: NOT_RUN). Todas las comprobaciones hasta ahora han sido locales. Consulta el apartado 9.

Las etiquetas en negrita son los nombres que ves en el editor de temas en español. Los textos entre «comillas» son los que ve el cliente.

Índice

1. Introducción
2. Instalación y elección del preset
3. Configuración global
4. Secciones y bloques
5. Plantillas
6. Funciones del tema
7. Preguntas frecuentes y solución de problemas
8. Soporte
9. Registro de cambios

1. Introducción

Terrain es un tema para tiendas de equipo para el exterior: senderismo, carga ligera, acampada, ciclismo y viaje. Muestra los datos que publicas (precio, opciones, existencias, peso de la variante) y nunca inventa ajuste, compatibilidad ni rangos de temperatura.

Terrain tiene cinco presets. Cada uno tiene su propia cabecera, menú, tarjeta de producto, página de colección, ficha de producto, vista rápida, carrito, búsqueda, pie, página de contraseña y tarjeta regalo; no son simples cambios de color:

• Terrain — un mapa de curvas de nivel organizado por actividad, con puntos de paso sobre las imágenes y «Add to pack» en las tarjetas.
• Traverse — una guía de ritmo para carga ligera: filas densas de equipo, pesos declarados y «Load it» en las tarjetas.
• Bivouac — una mesa de campamento: tarjetas cálidas que se abren como piezas sobre la mesa y «Add to the table».
• Switchback — un registro de salidas en bici: zonas de carga de la bicicleta, comparación de opciones lado a lado y segunda foto «View B».
• Wayfarer — un plan de equipaje para viajar: portada editorial, lista de equipaje que el cliente puede marcar y «Pack this».

(Los textos entre comillas son los de la tienda en inglés; en español aparecen traducidos.)

La tienda está traducida al inglés, español, francés, alemán e italiano.

2. Instalación y elección del preset

2.1 Añadir y publicar

1. En el panel de Shopify, ve a Tienda online › Temas y añade Terrain a tu biblioteca de temas. Se añade sin publicar; tu tienda en vivo no cambia.
2. Usa Personalizar para abrir el editor y Vista previa para navegar con tus productos.
3. Antes de Publicar, revisa la página de inicio, un producto, una colección, la búsqueda y el carrito. Duplica el tema antes de cambios grandes.

2.2 Elegir el preset al añadir el tema (recomendado)

Al añadir Terrain, elige uno de los cinco presets. Shopify instala sus ajustes (fuentes, esquemas de color, modo de color) y sus propias plantillas: inicio, producto, colección, búsqueda, carrito, blog, artículo, página, contacto, lista de colecciones, 404 y contraseña, además de sus grupos de cabecera y pie con los anuncios del preset. No incluye productos, imágenes ni menús: eliges los tuyos en el editor.

Todos los presets empiezan en modo claro con el selector claro y oscuro activado.

2.3 Cambiar de preset después: Composición

Configuración del tema › Apariencia › Composición (Terrain, Traverse, Bivouac, Switchback, Wayfarer) cambia el diseño y el comportamiento de la cabecera, el menú, las tarjetas, la colección, la ficha, la vista rápida, el carrito, la búsqueda, el pie y las páginas de contraseña y tarjeta regalo.

Ten en cuenta:

• Composición no cambia tus colores ni tus fuentes. Edítalos en Colores y Apariencia.
• No sustituye tus plantillas. Tu página de inicio conserva sus secciones. Las secciones propias de un preset (por ejemplo Entrada de ruta o Mesa de campamento) conservan su contenido y adoptan el aspecto del nuevo preset. Para tener la página de inicio completa de otro preset, añade de nuevo el tema y elige ese preset.
• Aplicar un estilo de tema en el editor sigue las reglas de Shopify para estilos: se copian los ajustes de diseño; las plantillas no se sustituyen.

3. Configuración global

Abre Configuración del tema en el editor.

3.1 Apariencia

• Composición — el preset (2.3).
• Fuente de títulos y Fuente de texto — cualquier fuente de la biblioteca de Shopify.
• Activar movimiento expresivo — activa o desactiva las animaciones del preset. Quien pide movimiento reducido en su dispositivo recibe siempre transiciones tranquilas.

3.2 Colores y esquemas

Terrain usa los esquemas de color de Shopify. Cada preset trae ocho esquemas. Cada esquema tiene: Fondo, Degradado de fondo, Superficie, Texto, Texto secundario, Enlaces y acentos, Resalte, Texto sobre resalte, Botón principal, Texto del botón principal, Borde del botón principal, Botón secundario, Texto del botón secundario, Bordes y campos, Contorno de foco, Sombra, Fondo de imagen, Insignia de oferta, Texto de la insignia de oferta, Mensaje de éxito y Mensaje de error.

En Áreas eliges qué esquema usa cada parte: Esquema de color de la página (fondo detrás de todas las secciones), de las tarjetas, de las insignias, del carrito lateral, del pie del carrito, de la vista rápida, del menú, de la búsqueda, de las ventanas emergentes y de los avisos (barra de envío gratis y avisos breves). Muchas secciones tienen además su propio Esquema de color.

3.3 Modo oscuro

En Colores › Modo oscuro:

• Modo de color — Claro, Oscuro o Según el dispositivo del visitante. El modo oscuro cambia cada esquema claro por el esquema oscuro que elijas abajo.
• Mostrar selector claro y oscuro — añade un selector en la cabecera y el pie. La elección del visitante se guarda en su dispositivo.
• Esquema oscuro para página y firma, Esquema oscuro para suave e invertido, Esquema oscuro para acento — los tres esquemas del modo oscuro.

Tras editar un esquema, revisa el contraste de tus colores en los dos modos.

3.4 Marca y compartir

• Favicon — se muestra a 32 × 32 px en la pestaña del navegador.
• Imagen de respaldo para compartir — solo si la página no tiene imagen y no hay imagen para compartir definida en Shopify.

El logotipo se configura en la sección Cabecera (3.6).

3.5 Tarjetas, existencias y envío

• Compra rápida en tarjetas — añade la variante elegida sin salir del listado. Los productos con varias opciones abren la vista rápida.
• Segunda foto en tarjetas — usa la siguiente imagen del producto y omite las asignadas a otra variante. Por producto, el metacampo entero custom.card_second_view elige la posición (0 la desactiva).
• Etiquetas: Etiqueta «Novedad» para productos publicados en los últimos (días; 0 la oculta), Etiqueta de rebaja (Porcentaje de ahorro, Importe ahorrado u Oculta), Mostrar la etiqueta «Agotado», Prefijo de etiquetas (una etiqueta como label:Reciclado muestra «Reciclado») y Metacampo de etiqueta (texto de una línea, por ejemplo custom.card_label).
• Existencias: Mostrar existencias en la ficha (solo variantes con seguimiento de inventario) y Mostrar la cantidad exacta a partir de (por encima se muestra «En existencias»).
• Progreso hacia el envío gratis: Umbral de envío gratis (moneda de la tienda) y Umbrales en otras monedas (ver 6.3).

3.6 Cabecera y menú

La sección Cabecera (grupo de cabecera) tiene: Esquema de color, Logotipo, Menú, Nombre de marca (opcional), Producto de referencia del menú, Segundo producto de referencia, Imagen de contexto del menú, Nota del menú, Página de guía de campo y Texto del enlace de la guía. Los productos, la imagen y la nota aparecen en el panel del menú abierto, cuya disposición cambia con el preset.

Configuración del tema › Navegación › Menú de actividades lo usa el preset Terrain para listar las colecciones por actividad en el menú, la búsqueda y la ficha. Si está vacío, usa los hijos del primer enlace del menú principal que tenga hijos.

Sobre la cabecera, la Barra de anuncios tiene Esquema de color, Alineación, Cambiar los anuncios automáticamente y Cambiar cada, con bloques Anuncio (Texto, Enlace, Texto del enlace, Abrir el enlace en una ventana nueva).

3.7 Pie

La sección Pie de tienda (grupo de pie): Esquema de color, Título, Texto, Menú, Título del menú principal, Menú de ayuda, Título del menú de ayuda, Destino de contacto, Texto del enlace de contacto, Mostrar enlaces a condiciones publicadas, Mostrar suscripción al boletín, Título del boletín, Mostrar Seguir en Shop y Mostrar selectores de idioma y país. Las redes sociales se configuran en Configuración del tema › Redes sociales (Instagram, Facebook, X (Twitter), YouTube, TikTok, Pinterest; los campos vacíos no se muestran).

3.8 Carrito

El carrito se abre como panel lateral desde la cabecera y también tiene página completa. Ambos muestran las líneas con control de cantidad, la barra de envío gratis, la nota del pedido, el total con la nota de impuestos y el botón de pago. Sus colores vienen de Esquema de color del carrito lateral y Esquema de color del pie del carrito. La plantilla del carrito incluye además Detalles opcionales de regalo (5.1).

3.9 Búsqueda

El botón de búsqueda de la cabecera abre un diálogo con sugerencias mientras se escribe: productos, páginas y artículos del blog, con una presentación propia en cada preset. Escape lo cierra. Sus colores vienen de Esquema de color de la búsqueda. Al pulsar Intro se abre la página de resultados, con filtros y orden.

4. Secciones y bloques

4.1 Secciones generales (todos los presets)

• Pase de diapositivas — Composición, Altura, Ancho completo de la página, Cambiar las diapositivas automáticamente, Cambiar cada, Descripción del pase de diapositivas; bloques Diapositiva con Imagen, Vídeo, Subtítulo, Título, Texto, botón y Posición del texto.
• Imagen con texto — Imagen, Proporción de imagen, Posición de la imagen, Ancho de la imagen, Alineación vertical del texto, Etiqueta de la imagen, título, texto y hasta dos enlaces.
• Texto enriquecido — Composición, Alineación, Ancho del texto, Tamaño del título, texto y botón.
• Lista de colecciones — Colecciones, Proporción de imagen, Columnas en escritorio, Composición en móvil (Cuadrícula o Deslizar), Mostrar número de productos, enlace «Ver todo».
• Entradas de blog — Blog, Artículos que mostrar, Columnas en escritorio, Proporción de imagen, Composición en móvil, mostrar imagen, fecha, autor, extracto y número de comentarios.
• Vídeo — URL de YouTube o Vimeo o Vídeo subido, Reproducir el vídeo subido sin sonido y en bucle, Imagen de portada, Título del vídeo, proporción y textos.
• Producto destacado — Producto, Esquema de color y los mismos bloques que la ficha (5.2).
• Selección de productos — Título, Colección, Productos a mostrar, Esquema de color.
• Selección destacada — Título, Texto, Colección, Productos a mostrar.
• Boletín — Título, Texto, Esquema de color.
• Historias del blog — Blog, Título, Introducción, Artículos.
• Contenido editorial — Imagen, Título, Texto, Enlace, Texto del enlace.
• Estudio de imágenes editorial — dos imágenes editoriales con etiquetas, pie, Producto, Enlace y Nombre del dato.
• Introducción de paisaje — Título, Texto, Colección, dos imágenes, Producto, Menú.
• Índice de actividad / Explorador de actividades — bloques Actividad con Colección, Título, Nota de contexto (e Imagen en el explorador).
• Guía de capas — bloques Capa con Producto, Título, Texto. Solo editorial: no calcula temperaturas.
• Comparación de equipo — bloques Referencia de comparación (Producto, Referencia exacta de opción 1, Título).
• Tu carga seleccionada — bloques Pieza de referencia (Producto).
• Checklist de equipaje — bloques Elemento de viaje; Recordar la lista de viaje en este dispositivo.
• Lona del campamento — bloques Recordatorio de campamento (Tipo de recordatorio, Nombre del dato, Título, Texto, Producto, Página de guía).
• Liquid personalizado — tu propio código Liquid.

Pase de diapositivas, Imagen con texto, Lista de colecciones, Entradas de blog y Vídeo no se pueden añadir a los grupos de cabecera ni de pie; Texto enriquecido no se puede añadir al grupo de cabecera.

4.2 Secciones de cada preset

Están diseñadas para un preset, pero se pueden añadir con cualquier Composición.

En las secciones con bloques Pieza elegida, elige un producto distinto en cada bloque; los vacíos o repetidos se omiten. Incluir al inicio decide si la pieza empieza seleccionada.

4.3 Secciones de la ficha de producto

• Producto — sección principal, formada por bloques (5.2).
• Lectura de producto (solo plantilla de producto) — Composición de lectura (la del preset o una de las cinco), imagen, introducción y pie editoriales, Mostrar enlaces a condiciones publicadas de la tienda. Bloques: Capítulo de lectura, Pregunta y respuesta, Enlace a guía, Comparación de referencias y Referencia complementaria independiente. Cada bloque puede pertenecer a un producto (Producto al que pertenece este contenido) o aplicarse a todos (Esta información se aplica a toda la tienda).
• Productos complementarios — productos de las recomendaciones complementarias de Shopify (7).

5. Plantillas

5.1 Resumen de plantillas

Cada preset instala su propia versión de estas plantillas con secciones de acompañamiento distintas. La tabla indica la sección principal.

Para usar la plantilla de contacto, crea una página en Tienda online › Páginas y elígela en Plantilla del tema.

5.2 Bloques de la ficha de producto

Título, Precio, Opciones, Estado del inventario, Información de impuestos, Destinatario de la tarjeta regalo, Botones de compra (Mostrar botones de pago dinámico), Descripción, Recogida, Proveedor (Enlazar el nombre del proveedor), Liquid personalizado, bloques de apps y:

• Dato asociado — un valor declarado con Nombre del dato, Unidad y referencias exactas de opción opcionales.
• Texto de producto asociado — un texto para un producto.
• Información por tarea — título, texto y Página de guía de campo, opcionalmente para variantes exactas.
• Guía de formato del producto — guía de los formatos de un producto, enlazada a una Página de guía de campo.

La ficha incluye además galería con ampliación, vídeo y modelos 3D del producto, mensajes de existencias, precios por cantidad cuando tu tienda los usa y un resumen de compra que aparece cuando el botón de añadir sale de la pantalla.

6. Funciones del tema

6.1 Vista rápida y compra rápida

Las tarjetas abren una vista rápida con las opciones y los botones de compra, sin salir de la página. Con Compra rápida en tarjetas activada, los productos de una sola opción se añaden desde la tarjeta, con un texto propio en cada preset. Los productos con varias opciones abren la vista rápida.

6.2 Vistas Galería y Detalles, comparación y Cargar más

• Galería / Detalles — en la colección, el cliente alterna entre una cuadrícula visual y una lista detallada (Activar vista de detalles).
• Comparar — el cliente selecciona hasta tres productos y compara precio, disponibilidad, peso declarado (el peso de la variante en Shopify) y código de referencia de la opción elegida (Activar comparación de productos). El tema nunca elige un ganador.
• Cargar más — carga la página siguiente en la cuadrícula (Botón «Cargar más»); los enlaces de página siguen disponibles sin JavaScript.
• Segunda foto — cada tarjeta tiene un botón para ver la segunda foto, también en táctil y con teclado.

6.3 Barra de envío gratis

Aparece en el carrito lateral y en la página del carrito cuando defines Umbral de envío gratis (moneda de la tienda). Usa el mismo importe que en tus ajustes de envío. Para otras monedas, añade pares en Umbrales en otras monedas (por ejemplo USD:120, GBP 95.50); las monedas sin par ocultan la barra y no se aplica conversión. La barra recuerda siempre que destinos y tarifas se confirman en el pago.

6.4 Búsqueda predictiva

Ver 3.9. Las sugerencias muestran productos, páginas y artículos del blog.

6.5 Filtros y orden

La colección y la búsqueda usan los filtros que configures en Shopify (app Search & Discovery): casillas, rango de precio, número de resultados, Borrar filtros y Ordenar por. Los cambios se anuncian a los lectores de pantalla.

6.6 Piezas guardadas y vistas recientemente

En todas las páginas salvo el carrito, el cliente puede guardar productos y ver los que exploró hace poco. La lista se guarda solo en su navegador, en ese dispositivo.

6.7 Herramientas de cada preset

• Switchback — comparación lado a lado de los formatos de un producto frente a una referencia, con diferencia de peso y enlace para compartir.
• Wayfarer — lista de equipaje que se puede marcar, guardar en el dispositivo y compartir como enlace.
• Traverse — resumen de peso de las piezas elegidas, solo con pesos publicados.
• Bivouac y Terrain — imágenes de escena con puntos de producto y selecciones que añaden cada pieza como una línea propia del carrito.

Estas herramientas ordenan la elección. No calculan ajuste, capacidad de carga, compatibilidad ni condiciones.

6.8 Opciones de regalo

Destinatario de la tarjeta regalo permite enviar una tarjeta regalo por correo con mensaje y fecha de envío. En la página del carrito, Detalles opcionales de regalo permite guardar un mensaje con el pedido y, si eliges uno, añadir un producto de envoltorio.

7. Preguntas frecuentes y solución de problemas

Cambié la Composición y mi página de inicio no cambió. La Composición cambia el aspecto y el comportamiento, no las secciones de tus plantillas. Para la página de inicio de otro preset, añade de nuevo el tema y elige ese preset (2.3).

La Composición no cambió mis colores ni mis fuentes. Es lo esperado. Edita Colores y Apariencia › Fuente de títulos / Fuente de texto.

No aparece la barra de envío gratis. Define Umbral de envío gratis (moneda de la tienda). Si el cliente usa otra moneda, añade su par en Umbrales en otras monedas.

Productos complementarios no muestra nada. La sección usa las recomendaciones complementarias de Shopify. Configúralas para tus productos en la app Search & Discovery.

Mi colección no tiene filtros. Los filtros vienen de la app Search & Discovery. Añádelos allí.

El peso o la comparación muestran «No declarado». Introduce el peso de cada variante en Shopify. El tema nunca estima valores que faltan.

No se ven las existencias en la ficha. Activa Mostrar existencias en la ficha y comprueba que la variante tiene seguimiento de inventario.

El modo oscuro no se ve bien con mis colores. Revisa los tres esquemas oscuros en Colores › Modo oscuro y el contraste de textos y botones en cada uno.

Las animaciones son demasiado intensas. Desactiva Activar movimiento expresivo. Quien tiene activado el movimiento reducido en su dispositivo ya recibe transiciones tranquilas.

La segunda foto de la tarjeta no es la correcta. Define el metacampo entero custom.card_second_view en ese producto (0 la desactiva).

Una sección muestra contenido de muestra. Hasta que elijas productos, colecciones o imágenes, las secciones muestran marcadores. Completa sus ajustes en el editor.

8. Soporte

Escríbenos desde https://lizardassets.com/pages/soporte. Indica la URL de tu tienda, el preset y los pasos para reproducir el problema.

Respondemos en un plazo de 24 horas. El soporte se mantiene mientras el tema esté a la venta.

Cubre: dudas de uso de los ajustes del tema y defectos del tema.

No cubre: código personalizado, apps de terceros ni diseño a medida.

9. Registro de cambios

1.0.0 — primera versión pública

• Cinco presets (Terrain, Traverse, Bivouac, Switchback, Wayfarer), cada uno con cabecera, menú, tarjetas, colección, ficha, vista rápida, carrito, búsqueda, pie, contraseña y tarjeta regalo propios, y sus propias plantillas.
• Esquemas de color con modo oscuro, selector claro y oscuro opcional y movimiento tranquilo para quien lo pide reducido.
• Vista rápida y compra rápida, vistas Galería y Detalles, comparación de productos, Cargar más, filtros y orden, búsqueda predictiva y barra de envío gratis con umbrales por moneda.
• Secciones propias de cada preset y Lectura de producto para el contenido de la ficha.
• Tienda en inglés, español, francés, alemán e italiano.
• La prueba en una tienda Shopify real está pendiente (NOT_RUN); las comprobaciones de esta versión fueron locales.