Caso Morrowfield: del catálogo a la experiencia editorial

Tienes un catálogo de Shopify y un sitio WordPress, y quieres algo más que una cuadrícula de productos. Una colección, una página de producto y una guía de compra pueden usar los mismos productos sin repetir el mismo contenido. El ejemplo de Morrowfield da a cada página una función distinta: el catálogo ayuda a los visitantes a explorar, la página de producto les ayuda a comprobar un artículo y la guía les ayuda a decidir.

Morrowfield es una marca ficticia. Sus productos, precios y textos se inventaron para esta demostración, y nada de lo que aparece aquí es un resultado de un cliente. Sin embargo, las páginas que ves las renderizó de verdad el plugin gratuito Fy2Press, versión 1.0.0, en un laboratorio local de WordPress. No había ninguna tienda Shopify conectada y no se muestra ningún pago. Esta página la publica Pagup, el editor de Fy2Press.

A continuación: la demostración comentada, lo que no demuestra y una ficha para reproducirla en tu propio sitio.

¿Qué pretendía mostrar la demostración?

Una pregunta: ¿puede un único catálogo pequeño alimentar tres páginas de WordPress que respondan cada una a una pregunta distinta del visitante, solo con la edición FREE? La demostración responde con un renderizado real, no con una maqueta, sobre datos deliberadamente ficticios.

Elemento	Qué usó el laboratorio
Plugin	Fy2Press FREE 1.0.0, el paquete publicado en WordPress.org
WordPress	WordPress 7.1, PHP 8.4, tema Twenty Twenty-Five
Catálogo	6 productos ficticios en 2 colecciones, Carry y Travel essentials
Imágenes	Recortes de 3 fotografías de Morrowfield con licencia; no se generó ninguna imagen
Shopify	Sin conectar: sin token, sin carrito, sin proceso de pago, sin pago

Los seis productos, con los nombres en inglés que muestran las capturas: Transit 24 backpack (mochila con variantes, entre ellas Olive), Transit 24 travel kit (kit de viaje), Commuter studio set, Field bottle (botella con dos tamaños y dos precios), Organizer pouch (estuche organizador) y Packable sling (bandolera plegable). El catálogo es pequeño a propósito: las tres fotografías solo muestran estos artículos.

¿Cómo se construyó?

Estos son los pasos que se ejecutaron realmente en el laboratorio.

1. Instalar FREE 1.0.0 desde el paquete de WordPress.org en un sitio WordPress desechable, accesible solo desde el equipo local y configurado para bloquear sus propias peticiones salientes.
2. Dejar Shopify desconectado: las pantallas del plugin siguen mostrando el aviso de bienvenida que pide la URL de una tienda y un token público de la Storefront API.
3. Crear el catálogo con un script de laboratorio: seis productos ficticios con variantes y precios, dos colecciones y sus etiquetas, guardados directamente en WordPress como registros de producto de Fy2Press. No se ejecutó ninguna sincronización. En un sitio real, estos registros proceden de una sincronización manual con tu tienda conectada, como se describe en Revisar y sincronizar el catálogo.
4. Crear dos páginas normales de WordPress con bloques Shortcode. La página de catálogo contiene una introducción de una frase y, después, [fy2press_product_search], [fy2press_collection_filter], [fy2press_collection_sort] y [fy2press_products_loop]. La guía contiene dos secciones breves seguidas de [fy2press_products_loop], limitado a la colección Travel essentials. Las páginas de producto son las que Fy2Press genera para cada producto.
5. Capturar cada pantalla con un navegador automatizado en ancho de escritorio, en inglés y en francés, sin retoques. En la página de producto, se seleccionó la variante Olive antes de la captura.

El script creó las páginas por sí mismo. Contienen bloques Shortcode estándar, los mismos que puedes añadir en el editor, pero el paso de edición no se capturó.

¿Qué hace cada página?

La página de catálogo: explorar

El catálogo responde a una pregunta amplia: ¿qué hay disponible? La captura muestra un campo de búsqueda, un filtro Collection (Colección en la interfaz en español), un control Sort by (Ordenar por) y seis tarjetas con imagen, nombre, precio y un botón View Product (Ver producto). La tarjeta de Field bottle muestra un rango de precios porque sus dos tamaños tienen precios distintos. Según la referencia de shortcodes, en la versión 1.0.0 la búsqueda se basa en los títulos de los productos, así que conviene que los nombres de producto sean claros.

Los controles son visibles, pero no se capturó ningún resultado filtrado ni ordenado.

Para recordar: una frase sencilla sobre la cuadrícula dice para qué sirve la página; las tarjetas no necesitan párrafos promocionales.

La página de producto: comprobar un artículo

La página de producto responde a una pregunta más concreta: ¿es este el artículo adecuado? Muestra la imagen, el título, el precio, la colección (Carry), una lista Select Variant (Seleccionar variante) con Olive elegida, un campo de cantidad, los botones Add to Cart (Añadir al carrito) y Buy Now (Comprar ahora), y la descripción.

Nadie hizo clic en los botones de compra: sin una tienda conectada, no hay carrito ni proceso de pago que mostrar. En un sitio conectado, la acción de compra lleva a Shopify, donde se realiza el pago, como se explica en Publicar con bloques y shortcodes.

Para recordar: deja las comparaciones fuera de la página de producto, cuya función es confirmar detalles y variantes.

La guía de compra: decidir

La guía responde a la pregunta que las otras dos páginas dejan abierta: ¿cómo elijo? Su texto, redactado en WordPress, propone dos pasos (empezar con una sola bolsa y después mantener juntos los objetos pequeños) y termina con una cuadrícula de productos.

También muestra el límite de una demostración breve. El primer paso recomienda una mochila, pero la cuadrícula muestra la colección Travel essentials, donde la mochila solo aparece dentro del kit de viaje. En un sitio real, coloca cada producto justo después de la recomendación que respalda, con un enlace directo o con el shortcode [fy2press_product], que la referencia de shortcodes documenta con el handle de un producto. Ese shortcode no se probó en esta demostración. Para un método completo, consulta el recurso sobre la guía de compra en WordPress.

Detrás de las páginas: las pantallas de ajustes

La pestaña Diseño reúne los ajustes globales de las tarjetas (columnas de la cuadrícula, proporción de imagen, esquinas, bordes, sombra) con una vista previa en directo. Los controles adaptables (Responsive controls en la captura) aparecen marcados como PRO y no se usaron.

La pestaña Añadir a mis páginas ofrece el editor de WordPress (Gutenberg) o los shortcodes. La demostración usó shortcodes.

La pestaña Google y SEO pregunta qué página es la versión principal de un producto (la página de WordPress o la página del producto en Shopify) y qué páginas de WordPress pueden indexarse. La demostración no inspeccionó lo que reciben los buscadores; Elegir la superficie canónica explica cómo comprobarlo en una página pública.

¿Qué no prueba esta demostración?

• Una conexión real con Shopify. Sin tienda, sin token y sin sincronización. Un sitio real necesita una tienda Shopify existente y su suscripción, y en FREE inicias cada sincronización manualmente; no es instantánea.
• El pago. No se creó ningún carrito, proceso de pago ni pedido. El pago siempre se realiza en Shopify.
• El rendimiento. No se hizo ninguna medición de velocidad ni de carga.
• Todos los temas. Un solo tema, Twenty Twenty-Five, en ancho de escritorio. Aquí no se muestran otros temas, constructores de páginas ni diseños para móvil.
• Tráfico, posicionamiento o ventas. El laboratorio solo era accesible desde el equipo local y no tuvo visitantes. No existe ningún resultado de este tipo, así que no se afirma ninguno.
• Las funciones PRO. Solo se usó la edición FREE.

¿Cómo puedes reproducirlo en tu propio sitio?

Esta ficha sigue el método anterior. Copia su estructura; no necesita datos privados.

1. Indica la naturaleza del caso

¿Demostración ficticia o caso de cliente autorizado? Anota la edición y la versión del plugin, la versión de WordPress, el tema y el objetivo. Si los datos son ficticios, dilo en la propia página.

2. Prepara el catálogo

Necesitas una tienda Shopify existente, un sitio WordPress y el plugin FREE, idealmente en una copia de pruebas (staging). Conecta la tienda, elige la página principal del producto en la pestaña Google y SEO y ejecuta después la sincronización manual. Las nuevas páginas de producto se publican directamente, así que decide antes su visibilidad.

3. Da a cada página una sola función

• Catálogo: explorar, con búsqueda, filtro, ordenación y cuadrícula.
• Página de producto: comprobar, con variantes, precio, imagen y descripción.
• Guía: decidir, con los criterios primero y después los productos que responden a cada criterio.

Enlaza las páginas según la siguiente pregunta del lector: de una recomendación de la guía a su producto, y de un producto a la guía cuando la elección necesita contexto.

4. Comprueba antes de publicar

Abre las páginas públicas en un ordenador y en un móvil, no solo el editor. Compara un producto con Shopify (precio, variantes, disponibilidad). Sigue la acción de compra hasta Shopify sin completar ningún pago no autorizado.

5. Asocia cada afirmación con su prueba

Afirmación que quieres hacer	Prueba que necesita	Demostración Morrowfield	Tu proyecto
El catálogo se muestra y se puede explorar	Captura del renderizado real	Mostrado; resultado filtrado no capturado	Por rellenar
La página de producto ofrece variantes	Prueba con un producto identificado	Mostrado, con Olive seleccionada	Por rellenar
Los productos aparecen dentro de una guía	Editor y renderizado público	Renderizado mostrado; editor no capturado	Por rellenar
La sincronización funciona	Tienda autorizada y resultados	No ejecutado	Por rellenar
Se llegó al proceso de pago	Recorrido de compra autorizado	No ejecutado	Por rellenar
Las ventas aumentaron	Medición adecuada durante un periodo	No ejecutado, ninguna afirmación	Por rellenar

No rellenes las tres últimas filas deduciéndolas de las tres primeras. Si no existe ninguna medición comercial, elimina la promesa en lugar de sustituirla por una cifra verosímil.

6. Resuelve los derechos

Para un caso de cliente real, obtén permiso por escrito para las imágenes, las citas, el nombre y la publicación. Elimina de cada captura los pedidos, los datos de clientes, los tokens, las claves de licencia y las direcciones privadas.

¿Adónde ir después?

• Quién hace qué entre Shopify y WordPress: visión general.
• Construir las páginas: Publicar con bloques y shortcodes y Diseñar productos y colecciones.
• Qué se queda en Shopify: Datos, credenciales y servicios externos.

Para probar estas mismas páginas con tu propio catálogo, instala el plugin gratuito desde WordPress.org. PRO se vende por separado a través de Freemius, nuestro proveedor de licencias y pagos.