Configurar TOGE

TOGE es un tema para pequeñas marcas de autor: una historia por producto, notas sobre el tejido, fotos de campo y lanzamientos. Un tema solo puede llevar su diseño y textos de muestra. Tus productos, fotos, menús y metacampos viven en tu tienda, así que una instalación recién hecha se ve vacía. Esta guía recorre lo que hay que añadir, en el orden que marca mayor diferencia.

Todo lo que sigue se hace en el panel de control de Shopify. No hace falta tocar código. Cuando un paso es trabajo habitual de Shopify, esta guía enlaza al Centro de ayuda de Shopify en lugar de repetirlo.

1. Términos que usa esta guía

Término	Significado
Editor de temas	La pantalla donde cambias los ajustes y el contenido del tema: Tienda online → Temas → Personalizar.
Sección	Una franja de una página en el editor de temas (imagen principal, novedades, pie de página…). Cada una tiene sus propios ajustes.
Plantilla	El diseño que usa una página. TOGE incluye plantillas para las páginas Acerca de, de soporte, de contacto y de políticas. La plantilla de una página se elige en el editor de la página, en "Plantilla del tema".
Handle	La última parte de la URL de una página o colección, como `about-us`. Shopify lo genera a partir del título; puedes cambiarlo en el recuadro "Publicación en motores de búsqueda" del editor de la página. El tema encuentra algunas páginas por su handle.
Metacampo	Un campo adicional que añades a productos, colecciones o publicaciones del blog, en Configuración → Datos personalizados. El tema lee algunos de ellos.
Metaobjeto	Un registro que defines tú, con sus propios campos, al que pueden apuntar los productos. TOGE usa uno para los tejidos.
Lanzamiento	La salida a la venta de un producto en una fecha fija. Antes de ella, la página de producto muestra la fecha en lugar del botón del carrito.

2. Los primeros diez minutos

Subir el tema: Tienda online → Temas → Agregar tema → Subir archivo zip. Déjalo sin publicar hasta que la página de inicio se vea bien; con "Personalizar" puedes previsualizar un tema sin publicar.
Logotipo: Editor de temas → Encabezado. Sube la imagen de tu logotipo, o déjalo vacío para mostrar el nombre de la tienda como texto. (La marca de la montaña en la página de inicio es el logotipo propio de TOGE. Para sustituirlo, edita snippets/logo.liquid o desactiva "Logotipo sobre la imagen" en la sección Imagen principal.)
Menú principal: Contenido → Menús → Menú principal. El encabezado muestra el menú que elijas en la sección Encabezado (por defecto: main-menu). Los menús anidados se abren como desplegables, hasta tres niveles.
Imagen principal de la página de inicio: Editor de temas → Imagen principal. Añade una foto ancha (2:1, 2400 px de ancho es más que suficiente). Añade una foto 4:5 aparte para móviles si el recorte no queda bien. Si la foto es clara, pon "Color del texto sobre la foto" en Tinta.

Con eso ya tienes una tienda que parece terminada.

3. Configuración del tema

Editor de temas → Configuración del tema. Se aplica en todas partes.

Ajuste	Qué hace
Colores	Dos esquemas de colores: el esquema 1 es claro y el esquema 2 es oscuro. Secciones como la banda del boletín eligen uno de ellos. Cada esquema tiene colores de fondo, texto, borde, superficie, acento, enlace y botón.
Tipografía	Fuente del cuerpo y fuente de los encabezados. Cada una incluye los pesos normal, medio y negrita. Sirve cualquier fuente de Shopify.
Diseño	Ancho máximo de la página y margen a los lados.
Radio de las esquinas de los campos	Radio de las esquinas de los campos y los botones.
Favicon	El icono pequeño de la pestaña del navegador. Cuadrado, de 32 px o más.

4. Menús y páginas que el tema busca

El pie de página y las páginas de soporte encuentran las cosas por su handle. Créalas con estos handles y aparecerán solas. Si las omites, esa parte simplemente no se muestra.

Qué	Dónde	Handle
Columnas de menú del pie de página	Contenido → Menús	cualquier menú; elígelos en Pie de página → bloques
Diario	Publicaciones del blog	blog `news`
Página Acerca de	Páginas, plantilla `page.about`	`about-us`
Página de soporte	Páginas, plantilla `page.support`	`support`
Página de contacto	Páginas, plantilla `page.contact`	`contact`
Páginas legales que se muestran en el pie de página	Configuración → Políticas	Privacidad, Términos, Reembolso, Envío
Páginas legales adicionales (Japón)	Páginas, plantilla `page.policy`	`tokushoho`, `cancellation`

Para crear una página, ve a Tienda online → Páginas → Agregar página. Ponle un título, elige la plantilla en "Plantilla del tema" a la derecha y revisa el handle en "Publicación en motores de búsqueda".

Las páginas legales salen de Configuración → Políticas; el pie de página enlaza las que hayas rellenado.

tokushoho y cancellation son páginas que la ley japonesa exige a las tiendas online. Si no vendes en Japón, omítelas. La plantilla page.policy muestra cualquier página con el mismo estilo que las políticas.

Las páginas Acerca de, de soporte y de contacto se construyen con secciones, así que sus textos y fotos se editan en el editor de temas, no en la propia página. El formulario de contacto envía los mensajes a la dirección de correo del remitente de la tienda. La banda del boletín añade los suscriptores a Clientes con la etiqueta newsletter.

5. Página de inicio

Sección	Qué necesita
Imagen principal	Una foto (ver arriba). El encabezado, la entradilla y el enlace son ajustes de la sección.
Banda destacada	Colecciones con el metacampo Mostrar como destacada en inicio activado (ver §8). Con una colección es una banda fija; con dos a cinco se convierte en carrusel. Sin ninguna, la sección usa sus propios ajustes de texto y foto.
Novedades	Elige una colección en la sección. Tres productos en escritorio, cuatro en móviles.
Historia	Una foto, o un video corto en bucle (mp4 subido en Contenido → Archivos; se reproduce sin sonido). El texto va sobre la imagen; desactiva "Texto sobre la imagen" para ponerlo debajo.
Diario	Elige el blog. Las tres publicaciones más recientes.
Vistos recientemente	Se llena solo desde el navegador del visitante. No hay nada que configurar.

Con "Agregar sección" puedes añadir más secciones a la página de inicio: Producto destacado (un producto con sus fotos, opciones y botón del carrito), Preguntas frecuentes, Guía de soporte, Formulario de contacto, y otra Historia, Colección destacada, Novedades o Diario. La banda del boletín forma parte del pie de página, así que aparece en todas las páginas.

6. Productos

La página de producto funciona con un producto normal: título, precio, fotos, opciones. Cada punto de abajo añade una parte más a la página. Todo es opcional, y la página oculta lo que está vacío.

Qué hay en la página

De arriba abajo: foto principal y frase principal → nombre, opciones, precio, carrito y el acordeón de detalles → combina bien con → fotos del producto → historia → capítulo del tejido → nota → fotos de campo → productos relacionados → vistos recientemente. Todo lo que va desde "Combina bien con" hacia abajo es una sección propia en el editor de temas, así que puedes reordenarla o quitarla.

La sección Página de producto tiene ajustes que controlan la parte superior:

Bloque Color y talla: qué opción es el color y cuál la talla (ver abajo), el umbral de "Pocas unidades", la etiqueta de talla y una página de guía de tallas.
Bloque Cantidad: cantidad máxima por pedido (0 significa sin límite) y una nota debajo del campo.
Bloque Carrito: botones de pago dinámico (Shop Pay y similares) y el formulario de destinatario para tarjetas de regalo.
Bloques Acordeón: cada uno es una fila de los detalles. Una fila puede mostrar una política de la tienda, la descripción del producto, la guía de cuidados, la tabla de tallas o el material y el origen.

Opciones y fotos

Color y talla se eligen por posición, no por nombre, así que la opción puede llamarse Color, Colour o カラー. Define "Posición de la opción de color" y "Posición de la opción de talla" (1 a 3) en la sección Página de producto si las tuyas no son 1 y 2.
Una tercera opción (largo, corte…) también se muestra como botones. No hay nada que configurar.
Las muestras de color usan la foto de la primera variante de cada color (vertical 4:5, 1080 × 1350 funciona bien). Pon la misma foto a todas las variantes de un color.
Foto principal: la imagen grande de arriba es el metacampo custom.hero_image, o si no, la primera foto del producto. Está pensada como la imagen del "mundo" del producto, no como una foto de catálogo.
Galería: las fotos del producto que no se usan como muestras de color se colocan debajo de la historia. Los videos, los enlaces de YouTube y Vimeo y los modelos 3D añadidos al producto también aparecen ahí.

Metacampos que lee la página de producto

Créalos en Configuración → Datos personalizados → Productos → Agregar definición. Ponle a la definición el nombre que quieras; lo que debe coincidir es el espacio de nombres y la clave (escríbelo como namespace.key en el formulario de la definición) y el tipo. En cuanto existe una definición, cada producto tiene un campo para ella al final de su página de edición.

Espacio de nombres.clave	Tipo	Se muestra como
`descriptors.subtitle`	Texto de una línea (estándar)	La frase de una línea debajo de la foto principal
`descriptors.care_guide`	Texto de varias líneas (estándar)	"Cuidados" en el acordeón de detalles
`custom.hero_image`	Archivo (imagen)	Foto principal de arriba; también la foto al pasar el cursor en las tarjetas de producto
`custom.hero_video`	Archivo (video)	Se reproduce en lugar de la foto principal, sin sonido y en bucle
`custom.gender`	Texto de una línea	Etiqueta pequeña junto al nombre del producto. Enlaza a la colección con el mismo handle, si esa colección tiene productos
`custom.gender_collection`	Referencia a colección	Adónde enlaza la etiqueta en su lugar, si los handles no coinciden
`spec.material`	Texto de una línea	"Material" en los detalles
`spec.origin`	Texto de una línea	"Hecho en" en los detalles
`spec.size_table`	Texto de varias líneas	Tabla de tallas. Una fila por línea, celdas separadas por `\|`. La primera línea es el encabezado: `Talla \| Largo \| Pecho \| Manga`, y después `S \| 66 \| 50 \| 20`. Se imprime tal como se escribe, sin transponer
`color.names`	Texto de una línea	Nombres a mostrar para los colores, como pares `CODE:Name` separados por `\|`: `SUMI:Tinta\|SAND:Arena`. El código es el valor de la opción
`drop.mode`	Texto de una línea	`pre` para un lanzamiento que todavía no ha abierto: el carrito se oculta y en su lugar aparece el panel de "avisarme"
`drop.next_at`	Fecha	Fecha del próximo lanzamiento, mostrada en el panel de "avisarme"
`drop.label`, `drop.qty`, `drop.note`	Texto de una línea	Texto del botón y la línea corta debajo de él antes de un lanzamiento
`drop.end_variants`	Texto de una línea	Combinaciones descatalogadas como `Color / Size`, separadas por `\|`: `SAND / XS\|SAND / XL`
`nav.parent`	Texto de una línea	Handle de la colección que se muestra en la ruta de navegación (ver abajo)
`story.gallery`	Lista de archivos (imágenes)	Fotos de "campo": la tira horizontal de fotos de estilo de vida
`story.fabric`	Referencia a metaobjeto → Tejido	El capítulo del tejido (ver §7)

La mayoría también existen como ajustes de la sección Página de producto (imagen principal, frase principal, género, material, origen, nombres de los colores, combinaciones descatalogadas, estado de venta). El ajuste de la sección se aplica a todos los productos y el metacampo tiene prioridad sobre él, así que una tienda con uno o dos productos puede prescindir por completo de los metacampos.

La ruta de navegación sobre el nombre del producto se decide en este orden: etiquetas bread1-apparel, bread2-tops (el tema busca colecciones con los handles apparel y tops; sin ellas, las palabras se muestran sin enlace) → el metacampo nav.parent → la primera colección a la que pertenece el producto. La etiqueta bread1- también decide qué productos aparecen en "Productos relacionados".

La historia en sí es la descripción del producto. Encabezados (h3), párrafos e imágenes son todo lo que necesita; el tema añade el índice de la derecha a partir de los encabezados.

7. Capítulo del tejido (metaobjetos)

El capítulo del tejido es una parte de la página de producto que cuenta la historia de un tejido: nombre y entradilla, una fila de números grandes (gramaje, grosor…), fotos del derecho y del revés, tres pasos de "cómo funciona" y gráficos comparativos. Es un metaobjeto por tejido, compartido entre productos. Solo el nombre es obligatorio; cada una de las demás partes aparece cuando su campo tiene contenido.

Crea las definiciones en Configuración → Datos personalizados → Metaobjetos con estas claves de campo. Los nombres y el nombre de la propia definición pueden ser cualquiera; el tema sigue la referencia story.fabric del producto y lee los campos por clave. Crea primero las definiciones pequeñas, porque las grandes se refieren a ellas: Fila del tejido → Gráfico del tejido, Paso del tejido, Dato del tejido → Tejido.

Tejido (el que se asigna a los productos)

Clave	Tipo
`name`, `eyebrow`, `headline`	Texto de una línea
`lead`	Texto enriquecido
`stats`	Lista de Dato del tejido
`views_heading`, `views_note`, `face_title`, `face_tag`, `back_title`, `back_tag`	Texto de una línea
`views_body`, `face_body`, `back_body`	Texto enriquecido
`face_image`, `back_image`	Archivo (imagen)
`how_heading`	Texto de una línea
`how_body`	Texto enriquecido
`steps`	Lista de Paso del tejido
`charts`	Lista de Gráfico del tejido
`note`	Texto de varias líneas

Dato del tejido: value, unit, label, prefix (todos de una línea). Se muestra como la fila de números grandes, p. ej. value 90, unit g/㎡, label Peso.

Paso del tejido: image (archivo), title (una línea), body (texto enriquecido). Tres pasos forman la tira de "cómo funciona".

Gráfico del tejido: title (una línea), body (texto enriquecido), axes (lista de una línea), rows (lista de Fila del tejido), note (una línea). Con axes relleno, el gráfico es una tabla de valoración de cinco puntos; sin él, son barras horizontales.

Fila del tejido: label (una línea), value (decimal), display (una línea, lo que se imprime en lugar del valor en bruto, p. ej. unos 30 min), scores (lista de enteros, uno por eje, de 1 a 5), highlight (booleano, marca tu propio tejido).

Los gráficos se animan al entrar en pantalla. Los números cuentan desde cero.

8. Colecciones

En Configuración → Datos personalizados → Colecciones:

Espacio de nombres.clave	Tipo	Se muestra como
`toge.home_feature`	Verdadero/falso	Pone esta colección en la banda destacada de la página de inicio
`toge.feature_heading`	Texto de una línea	La línea grande de la banda y de la parte superior de la página de la colección
`toge.feature_image`	Archivo (imagen)	Foto de la banda, si es distinta de la imagen de la colección
`toge.feature_video`	Archivo (video)	Se reproduce en la banda en lugar de la foto
`nav.parent`	Texto de una línea	Handle de la colección superior, para la ruta de navegación (`all` para "todos los productos")

La descripción de la colección es el texto corto debajo del encabezado. Los filtros, el orden y el número de productos por página son ajustes de la sección Colección.

9. Barra de anuncios

La barra de arriba del todo se controla con publicaciones del blog, así que puedes escribir, programar y retirar anuncios como cualquier publicación.

En Configuración → Datos personalizados → Publicaciones del blog, crea toge.announce (verdadero/falso) y toge.announce_text (texto de una línea).
En la publicación, activa announce. La barra muestra announce_text, o el título de la publicación, y enlaza a la publicación.
Gana la publicación más reciente con la marca activada. Sin ninguna, no hay barra.

Los visitantes pueden cerrar la barra. Permanece cerrada durante siete días, o hasta que cambie el texto.

10. Lo que aparece solo

Estas partes del tema siguen la configuración de tu tienda. No hay nada que ajustar en el tema.

Parte	Aparece cuando
Selector de país e idioma (pie de página)	La tienda tiene más de un mercado o más de un idioma
"Impuestos incluidos" junto a los precios	Los precios incluyen impuestos (Configuración → Impuestos y aranceles).
Nota de envío debajo del precio	El mercado tiene un metacampo `custom.shipping_note` (texto o importe)
Disponibilidad de recogida en la página de producto	Una ubicación ofrece retiro local y el producto tiene existencias allí.
Pagos a plazos con Shop Pay	La tienda cumple los requisitos de Shop Pay Installments
Formulario de destinatario de tarjeta de regalo	El producto es una tarjeta de regalo.
Follow on Shop (pie de página)	Shop Pay está activado y el ajuste correspondiente de la sección Pie de página está activado
Icono de cuenta en el encabezado	Las cuentas de cliente están activadas (Configuración → Cuentas de cliente)
Sugerencias de búsqueda al escribir	El idioma de la tienda es uno de los que admite la búsqueda predictiva de Shopify (el japonés todavía no)

11. Tamaños de imagen

Dónde	Tamaño
Imagen principal de inicio	2:1, 2400 px de ancho. Los móviles la recortan a 4:5, o usan la imagen aparte para móvil
Historia de inicio	2:1, 2400 px de ancho. Los móviles la recortan a 4:5
Banda destacada de colecciones	16:9, 1600 px de ancho o más. Los móviles la recortan a 4:3
Foto principal del producto (`custom.hero_image`)	3:2, 2000 px de ancho. Los móviles la recortan a 4:5
Fotos de variantes (muestras de color)	4:5, 1080 × 1350. Las tarjetas de producto y la galería muestran 4:5; la muestra de color recorta un cuadrado del centro
Fotos del producto (galería)	4:5
Fotos de campo (`story.gallery`)	2:3, vertical
Derecho y revés del tejido	Cualquiera, pero la misma forma para ambos; 1200 px de ancho
Pasos del tejido	Dibujos sobre fondo blanco; el blanco se funde con la página
Imagen de la publicación del blog	4:3 en la lista del diario, 1600 px de ancho o más
Favicon	Cuadrado, de 32 px o más

Shopify redimensiona todo para cada pantalla, así que más grande no es problema.

12. Idiomas

Todos los textos de muestra del tema están en inglés. Las etiquetas propias del tema (botones, carrito, búsqueda) y el editor de temas vienen en inglés, japonés, alemán, francés, español, portugués (Brasil), italiano, chino tradicional, chino simplificado y coreano; la tienda sigue el idioma configurado.

Tu propio contenido, como los textos de las secciones, los productos y las páginas, se traduce con la app gratuita Translate & Adapt de Shopify. App

13. Actualizar el tema

Cuando sale una nueva versión, Tienda online → Temas muestra un aviso de actualización en el tema. La actualización conserva los ajustes del editor de temas y tu contenido. Los cambios en el código del tema no se conservan, así que apunta los cambios que hayas hecho antes de actualizar.

14. Lo que el tema no incluye

Fotos y videos. Los temas de Shopify no pueden incluir archivos multimedia, y las fotos de la demo tienen licencia solo para la demo. Donde falta una foto verás un dibujo gris de marcador de posición.
Productos, publicaciones, páginas, definiciones de metacampos. Son datos de la tienda. Esta guía enumera todo lo que el tema puede usar.
Apps. No hace falta ninguna. Translate & Adapt solo sirve para idiomas adicionales, y una app de suscripciones solo si vendes suscripciones.