Crear una guía de compra en WordPress con productos Shopify

Puede que ya tengas un artículo en WordPress que ayuda a los lectores a elegir. Si los productos están en tu tienda Shopify, cada recomendación puede obligar al lector a salir a buscar el artículo adecuado. Puedes construir la página al revés: redactar la decisión en WordPress, mantener los productos, los precios y el proceso de pago en Shopify, y dejar que un componente de Fy2Press muestre los productos seleccionados desde tu catálogo sincronizado. No vuelves a escribir ningún precio ni mantienes un segundo catálogo.

Antes de empezar, necesitas una tienda Shopify existente (su suscripción es independiente de Fy2Press), el plugin instalado y conectado, y una primera sincronización. Esta página la publica Pagup, el editor de Fy2Press. La plantilla de planificación sirve para cualquier integración; los nombres de los componentes corresponden a Fy2Press 1.0.0. Si todo lo que necesitas es un botón de compra en un artículo, puede bastar un enfoque más ligero: consulta nuestra guía para elegir entre un botón de compra, un plugin y un catálogo.

¿Qué muestra la guía de demostración terminada?

La página anterior procede de nuestra demostración Morrowfield. Tiene un título que plantea la situación del lector, dos secciones breves que explican lo que importa y un shortcode que muestra los productos de la colección Travel essentials (aquí solo con su atributo esencial):

[fy2press_products_loop collection="travel-essentials"]

Cada tarjeta muestra una imagen, un título, un precio y un botón View Product (Ver producto en la interfaz en español) que abre la página del producto en WordPress, donde aparecen la elección de variante y las acciones de compra. La demostración también tiene límites: sus productos se escribieron directamente en un sitio WordPress de prueba local, no se sincronizaron desde Shopify, así que no se demuestra ninguna conexión con la tienda, ningún carrito ni ningún pago. En un sitio real, el pago siempre se realiza en Shopify.

¿A qué pregunta de compra debe responder la guía?

Empieza por la decisión, no por el catálogo. Escribe una frase que nombre al lector y la elección que debe poder hacer al final. «Voy al trabajo con un portátil varios días por semana: ¿qué debería llevar?» es una decisión. «Nuestros productos de viaje» es una lista.

Después escribe de dos a cuatro criterios que cambien de verdad la respuesta, como la capacidad, el tipo de uso o el rango de presupuesto, y nombra las necesidades que tu guía no cubrirá. Cada criterio debe poder comprobarse en la información de tus productos. Si una recomendación solo se puede justificar con «excelente calidad», la guía no está lista.

¿Cómo eliges los productos sin crear un segundo catálogo?

Conserva solo los productos que responden a un criterio. Cada uno necesita una razón para estar ahí y un caso en el que el lector debería elegir otra cosa.

Después haz que la selección exista en Shopify, donde ya están tus productos. Una colección a la que añades los productos a mano da a la guía una lista estable que gestionas con el resto de tu catálogo (Centro de ayuda de Shopify: Colecciones). Comprueba que la colección y sus productos están disponibles en el canal de ventas Headless que lee Fy2Press, tal como se configura en Conectar Shopify con seguridad.

Dos hechos sobre Fy2Press condicionan este paso:

• En FREE, inicias cada sincronización a mano, y no es instantánea. Un producto que añadas a la colección en Shopify no puede aparecer en la guía antes de la siguiente sincronización.
• Las nuevas páginas de producto se publican directamente al sincronizarse. Decide su visibilidad y su dirección preferida en Google y SEO antes de la primera ejecución.

¿Cómo deben organizarse las secciones?

Da a cada parte de la página una sola función:

1. Apertura: la situación del lector y una respuesta breve.
2. Una sección por necesidad: el criterio, por qué importa y, después, el producto que responde a él.
3. Comparación, si es útil: una tabla breve de criterios expresados con palabras, no con precios.
4. Siguiente acción: adónde ir cuando ninguna de las opciones encaja.

La regla clave: el texto lleva el razonamiento y los componentes llevan los datos comerciales. Los precios, la disponibilidad y las variantes proceden de los datos de catálogo que muestra Fy2Press, así que déjalos fuera de tus frases. Un precio escrito en un párrafo hay que corregirlo a mano cada vez que cambia en Shopify.

¿Qué componente de Fy2Press va en cada lugar?

En Fy2Press 1.0.0, los bloques no declaran ningún ajuste propio de producto o de colección; siguen el contexto de la página. La pestaña Añadir a mis páginas indica que el bloque Bucle de productos (shopipress/products-loop) muestra la colección actual en una página de colección y el catálogo completo en las demás páginas. Para una selección concreta dentro de un artículo, añade el bloque Shortcode de WordPress y pega uno de estos códigos, sustituyendo el identificador por el nombre corto (handle) que Shopify usa en la dirección del producto o de la colección:

• Una selección para una sección o para toda la guía, como en la demostración anterior: [fy2press_products_loop collection="identificador-coleccion"]
• Un producto dentro de una sección, documentado en la referencia pero no mostrado en la demostración: [fy2press_product handle="identificador-producto"]

Los shortcodes de elemento, como fy2press_product_price o fy2press_buy_now, están pensados para un contexto de producto, como una página de producto. Copia los nombres exactos desde Añadir a mis páginas o Ayuda: los nombres públicos empiezan por fy2press_, y la referencia de shortcodes enumera sus atributos.

¿Qué debes comprobar antes de publicar?

Ejecuta una sincronización y abre después la página pública, no solo la vista previa del editor:

• Compara cada producto con Shopify: título, precio, moneda, variantes y disponibilidad. En nuestra demostración, las tarjetas muestran los importes con el signo $ mientras que la página de producto muestra C$; si tus lectores pueden confundir monedas, indica cuál se aplica.
• Cuenta los productos. En la demostración, un atributo limit="3" no limitó la guía a tres: la página renderizada muestra los cuatro productos de la colección. Para controlar lo que aparece, controla el contenido de la colección.
• Busca zonas vacías o valores provisionales, señal de que a un componente le falta su contexto de producto.
• Lee la página en un móvil, sin desplazamiento horizontal.
• Sigue la acción de compra hasta la tienda Shopify correcta sin completar ningún pago de prueba no autorizado.
• Identifica como tales los datos ficticios o de prueba, e indica quién seleccionó los productos y cómo, tal como recomiendan las pautas de Google sobre contenido útil centrado en las personas.

Este método acorta el camino del lector desde una recomendación hasta un producto. Por sí solo, no promete más ventas ni un mejor posicionamiento.

¿Qué plantilla puedes copiar para tu próxima guía?

Copia este esquema en tu documento de planificación. La fila de ejemplo usa el catálogo ficticio Morrowfield.

1. Decisión

• Lector: …
• Decisión al final de la guía: …
• Criterios que cambian la respuesta (de dos a cuatro): …
• Necesidades y productos que esta guía no cubre: …
• Quién selecciona los productos, y cómo (indicado en la página): …

2. Selección

Necesidad o lector	Criterio decisivo	Producto (handle)	Por qué, y cuándo elegir otra cosa
Llevar lo necesario para una semana de trabajo en una sola bolsa	Espacio para un portátil, ropa y la comida	Transit 24 backpack (transit-24-backpack)	Mochila de 24 litros para ir al trabajo; innecesaria si el lector solo lleva objetos pequeños
Por rellenar	Por rellenar	Por rellenar	Por rellenar
Por rellenar	Por rellenar	Por rellenar	Por rellenar

3. Ubicación de los componentes

• Colección de Shopify para esta guía (handle): …
• Colección y productos disponibles en el canal de ventas Headless: sí o no
• Shortcode de cada sección: …
• Precios o niveles de existencias escritos en el texto: ninguno

4. Revisión antes de publicar

• Sincronización ejecutada el (fecha): …
• Precios, moneda, variantes y disponibilidad comparados con Shopify: …
• Lectura en móvil comprobada entre 320 y 414 píxeles de ancho: …
• La acción de compra lleva a la tienda Shopify correcta: …
• Derechos de imagen confirmados, datos de demostración o de prueba identificados: …

5. Mantenimiento

• Responsable: …
• Desencadenantes de actualización: producto añadido a la colección o retirado de ella; cambio de precio, disponibilidad, variante o imagen; consejo que ya no es exacto
• Última comprobación real, introducida a mano y nunca tomada de una fecha de build: …

¿Qué viene después de la publicación?

Trata la guía como una página con una rutina de mantenimiento. Cada vez que la colección o sus productos cambien en Shopify, ejecuta una sincronización, vuelve a abrir la guía pública y repasa la lista de revisión. PRO añade una opción para programar la sincronización con una licencia activa; las ejecuciones programadas no son instantáneas y dependen de WP-Cron.

El caso de estudio Morrowfield muestra el mismo catálogo ficticio en una página de colección, una página de producto y esta guía. Para crear tu propia guía, instala el plugin gratuito desde WordPress.org y sigue después Publicar con bloques y shortcodes.