Caso Morrowfield: do catálogo à experiência editorial

Você tem um catálogo na Shopify e um site WordPress, e quer mais do que uma grade de produtos. Uma coleção, uma página de produto e um guia de compras podem usar os mesmos produtos sem repetir o mesmo conteúdo. O exemplo Morrowfield dá a cada página uma função diferente: o catálogo ajuda os visitantes a explorar, a página de produto ajuda a conferir um item e o guia ajuda a decidir.

A Morrowfield é uma marca fictícia. Os produtos, os preços e os textos dela foram inventados para esta demonstração, e nada aqui é resultado de um cliente. As páginas que você vê, no entanto, foram realmente renderizadas pelo plugin gratuito Fy2Press, versão 1.0.0, em um laboratório WordPress local. Nenhuma loja Shopify foi conectada e nenhum pagamento é mostrado. Esta página é publicada pela Pagup, a editora do Fy2Press.

A seguir: a demonstração comentada, o que ela não comprova e uma ficha para reproduzi-la no seu próprio site.

O que a demonstração pretendia mostrar?

Uma pergunta: um único catálogo pequeno consegue alimentar três páginas do WordPress que respondem, cada uma, a uma pergunta diferente do visitante, usando apenas a edição FREE? A demonstração responde com uma renderização real, e não com uma maquete, sobre dados deliberadamente fictícios.

Elemento	O que o laboratório usou
Plugin	Fy2Press FREE 1.0.0, o pacote publicado no WordPress.org
WordPress	WordPress 7.1, PHP 8.4, tema Twenty Twenty-Five
Catálogo	6 produtos fictícios em 2 coleções, Carry e Travel essentials
Imagens	Recortes de 3 fotografias licenciadas da Morrowfield; nenhuma imagem foi gerada
Shopify	Não conectada: sem token, sem carrinho, sem checkout, sem pagamento

Os seis produtos, com os nomes em inglês usados na demonstração: Transit 24 backpack (mochila, com variantes que incluem Olive), Transit 24 travel kit (kit de viagem), Commuter studio set (conjunto), Field bottle (garrafa, dois tamanhos, dois preços), Organizer pouch (estojo organizador) e Packable sling (bolsa transversal dobrável). O catálogo é pequeno de propósito: as três fotografias mostram apenas esses itens.

Como ela foi montada?

Estas são as etapas realmente executadas no laboratório.

1. Instalar o FREE 1.0.0 a partir do pacote do WordPress.org em um site WordPress descartável, acessível apenas pela máquina local e configurado para bloquear as próprias requisições de saída.
2. Deixar a Shopify desconectada: as telas do plugin continuam mostrando o aviso de boas-vindas que pede a URL da loja e um token público da Storefront API.
3. Gravar o catálogo com um script de laboratório: seis produtos fictícios com variantes e preços, duas coleções e as tags delas, armazenados diretamente no WordPress como registros de produto do Fy2Press. Nenhuma sincronização foi executada. Em um site real, esses registros vêm de uma sincronização manual com a sua loja conectada, como descrito em Revisar e sincronizar o catálogo.
4. Criar duas páginas comuns do WordPress com blocos Shortcode. A página de catálogo contém uma frase de introdução e, em seguida, [fy2press_product_search], [fy2press_collection_filter], [fy2press_collection_sort] e [fy2press_products_loop]. O guia contém duas seções curtas seguidas de [fy2press_products_loop], limitado à coleção Travel essentials. As páginas de produto são as que o Fy2Press gera para cada produto.
5. Capturar cada tela com um navegador automatizado em largura de desktop, em inglês e em francês, sem retoques. Na página de produto, a variante Olive foi selecionada antes da captura.

O script criou as próprias páginas. Elas contêm blocos Shortcode padrão, os mesmos que você pode adicionar no editor, mas a etapa de edição não foi capturada.

O que cada página faz?

A página de catálogo: explorar

O catálogo responde a uma pergunta ampla: o que está disponível? A captura mostra um campo de busca, um filtro Collection (Coleção), um controle Sort by (Ordenar por) e seis cartões com imagem, nome, preço e o botão View Product (Ver produto). O cartão da Field bottle mostra uma faixa de preços porque os dois tamanhos têm preços diferentes. Segundo a referência de shortcodes, a busca considera os títulos dos produtos na versão 1.0.0; por isso, nomes de produto claros fazem diferença.

Os controles estão visíveis, mas nenhum resultado filtrado ou ordenado foi capturado.

O que aproveitar: uma frase simples acima da grade diz para que serve a página; os cartões não precisam de parágrafos de marketing.

A página de produto: conferir um item

A página de produto responde a uma pergunta mais específica: este é o item certo? Ela mostra a imagem, o título, o preço, a coleção (Carry), uma lista Select Variant (Selecionar variação) definida como Olive, um campo de quantidade, os botões Add to Cart (Adicionar ao carrinho) e Buy Now (Comprar agora) e a descrição.

Ninguém clicou nos botões de compra: sem loja conectada, não há carrinho nem checkout para mostrar. Em um site conectado, a ação de compra leva à Shopify, onde o pagamento acontece, como explica Publicar com blocos e shortcodes.

O que aproveitar: deixe as comparações fora da página de produto, cuja função é confirmar detalhes e variantes.

O guia de compras: decidir

O guia responde à pergunta que as outras duas páginas deixam em aberto: como eu escolho? O texto dele, escrito no WordPress, apresenta duas etapas (comece com uma bolsa, depois mantenha os itens pequenos juntos) e termina com uma grade de produtos.

Ele também mostra o limite de uma demonstração curta. A primeira etapa recomenda uma mochila, mas a grade mostra a coleção Travel essentials, na qual a mochila só aparece dentro do kit de viagem. Em um site real, coloque cada produto logo depois da recomendação que ele sustenta, com um link direto ou com o shortcode [fy2press_product], que a referência de shortcodes documenta com o handle de um produto. Esse shortcode não foi testado nesta demonstração. Para um método completo, veja o recurso sobre o guia de compras no WordPress.

Por trás das páginas: as telas de configuração

A aba Design reúne as configurações globais dos cartões (colunas da grade, proporção da imagem, cantos, bordas, sombra) com uma prévia ao vivo. Os controles responsivos estão marcados como PRO e não foram usados.

A aba Adicionar às minhas páginas oferece o editor do WordPress (Gutenberg) ou os shortcodes. A demonstração usou shortcodes.

A aba Google e SEO pergunta qual página é a versão principal de um produto (a página do WordPress ou a página do produto na Shopify) e quais páginas do WordPress podem ser indexadas. A demonstração não inspecionou o que os mecanismos de busca recebem; Escolher a superfície canônica explica como verificar isso em uma página pública.

O que esta demonstração não comprova?

• Uma conexão real com a Shopify. Nenhuma loja, nenhum token e nenhuma sincronização. Um site real precisa de uma loja Shopify existente e da assinatura dela, e no FREE você inicia cada sincronização manualmente; ela não é instantânea.
• Pagamento. Nenhum carrinho, checkout ou pedido foi criado. O pagamento sempre acontece na Shopify.
• Desempenho. Nenhuma medição de velocidade ou de carga foi feita.
• Todos os temas. Um único tema, o Twenty Twenty-Five, em largura de desktop. Outros temas, construtores de páginas e layouts de celular não aparecem aqui.
• Tráfego, posicionamento ou vendas. O laboratório era acessível apenas pela máquina local e não teve visitantes. Não existe nenhum resultado desse tipo; portanto, nenhum é alegado.
• Recursos PRO. Apenas a edição FREE foi usada.

Como reproduzir a demonstração no seu próprio site?

Esta ficha segue o método acima. Copie a estrutura dela; ela não exige dados privados.

1. Declare a natureza do caso

Demonstração fictícia ou caso de cliente autorizado? Anote a edição e a versão do plugin, a versão do WordPress, o tema e o objetivo. Se os dados forem fictícios, diga isso na própria página.

2. Prepare o catálogo

Você precisa de uma loja Shopify existente, de um site WordPress e do plugin FREE, de preferência em uma cópia de staging. Conecte a loja, escolha a página de produto principal na aba Google e SEO e depois execute a sincronização manual. As novas páginas de produto são publicadas diretamente; então, decida antes a visibilidade delas.

3. Dê uma única função a cada página

• Catálogo: explorar, com busca, filtro, ordenação e uma grade.
• Página de produto: conferir, com variantes, preço, imagem e descrição.
• Guia: decidir, com os critérios primeiro e depois os produtos que atendem a cada critério.

Ligue as páginas pela próxima pergunta do leitor: de uma recomendação do guia para o produto correspondente, e de um produto para o guia quando a escolha precisa de contexto.

4. Verifique antes de publicar

Abra as páginas públicas em um computador e em um celular, e não apenas no editor. Compare um produto com a Shopify (preço, variantes, disponibilidade). Siga a ação de compra até a Shopify sem concluir um pagamento não autorizado.

5. Associe cada afirmação à sua evidência

Afirmação que você quer fazer	Evidência necessária	Demonstração Morrowfield	Seu projeto
O catálogo é exibido e pode ser explorado	Captura da renderização real	Mostrado; resultado filtrado não capturado	A preencher
A página de produto oferece variantes	Teste em um produto identificado	Mostrado, Olive selecionada	A preencher
Os produtos aparecem dentro de um guia	Editor e renderização pública	Renderização mostrada; editor não capturado	A preencher
A sincronização funciona	Loja autorizada e resultados	Não executado	A preencher
O checkout foi alcançado	Jornada de compra autorizada	Não executado	A preencher
As vendas aumentaram	Medição adequada ao longo de um período	Não executado, nenhuma afirmação	A preencher

Não preencha as três últimas linhas por dedução a partir das três primeiras. Se não houver nenhuma medição comercial, remova a promessa em vez de substituí-la por um número plausível.

6. Regularize os direitos

Para um caso real de cliente, obtenha permissão por escrito para as imagens, as citações, o nome e a publicação. Remova de todas as capturas de tela os pedidos, os dados de clientes, os tokens, as chaves de licença e os endereços privados.

Para onde ir agora?

• Quem faz o quê entre a Shopify e o WordPress: visão geral.
• Montar as páginas: Publicar com blocos e shortcodes e Desenhar produtos e coleções.
• O que fica com a Shopify: Dados, credenciais e serviços externos.

Para testar as mesmas páginas com o seu próprio catálogo, instale o plugin gratuito pelo WordPress.org. O PRO é vendido separadamente pela Freemius, nossa fornecedora de licenças e pagamentos.