Implementar recetas en Shopify sin Apps

Si vendes productos alimentarios, o "cosas con las que tus consumidores cocinan", una buena forma de llegar a un público extra, es a través de recetas que pongan en valor tu producto, ¡mira cómo!

Los Pangolines han estado muy liados, y han dejado de lado su newsletter (había que priorizar), pero ya volvemos al lío.

Hoy vamos a ver un caso real, en este caso queremos ofrecer contenido de valor a los compradores de roigourmet.com dándoles ideas sobre cómo consumir el producto, y además, queremos que estos contenidos indexen bien en Google y traigan “tráfico aspiracional”. (Te contaré qué es esto, aquí, o en otra newsletter, ya veremos 😆)

Antes de nada, si te han pasado este enlace:

Es un producto realmente muy bueno, que además vela en su producción por promover la sostenibilidad, biodiversidad y subsistencia de las especies.

Hoy tenemos de todo, código, SEO, y comida.

¿De qué partimos?

ROI&co tiene un producto que es la hostia (ve a verlo), tan bueno, que da un poco de miedo “consumirlo mal”, en el sentido de desperdiciarlo tomándolo en un mal momento o con un mal maridaje. Lo sé porque al probarlo tuve ese miedo.

En contrapartida, tiene un equipo detrás de profesionales de cocina de renombre al más alto nivel dispuestos a desarrollar recetas top.

Fotos inmejorables; hechas en el restaurante Punta Cabalo en la Illa de Arousa, nos proveen de fotos de producto y de los platos con la esencia de la marca.

¿Qué hacemos en Pango Studio?

Bien, vamos a hacer que ese contenido de alta calidad tenga la misma calidad en un sentido técnico, esto se traduce en:

• Apertura de un blog específico (ya sabes que el concepto de “blogs” en Shopify es distinto al de otros CMS, si necesitas apoyo con eso escríbeme)

• Edición SEO de la receta

• Desarrollo de un template de Blog para recetas

• Desarrollo de un template para los artículos

• Desarrollo de un Schema para las recetas

Paso a paso

Crear un nuevo blog

Un vídeo dice más que mil palabras.

Este blog reunirá las recetas, y más tarde le podremos asignar una plantilla con un diseño diferente al del resto del blog.

Crear una nueva plantilla para el blog (opcional)

Otro vídeo, del código, te dejo abajo lo más relevante.

Crea una plantilla para el post

Repite el proceso pero esta vez con el tipo de plantilla “article”, lo usaremos para cargar las recetas.

Como base, copiamos el contenido de “article-main.liquid” y lo pegamos en el archivo que acabamos de crear, lo usaremos como base.

Agrega una nueva sección:

Crear un metacampo

Crea un metacampo de tipo JSON para el artículo de blog, hazlo sin validación de datos.

Si necesitas ayuda con esto, tenemos un equipo de desarrolladores expertos en Shopify y te podemos echar un cable.

Si todo está bien, ahora podrás añadir el contenido del schema JSON de receta a tu artículo del blog, se hace así (sí, esa cajita de metacampos antes no estaba ahí 😉.

Editar plantilla liquid para el post

Preparamos las plantillas

Edita los archivos liquid que has creado, nos vamos a centrar en el del artículo, que es el más relevante, y dentro de eso, lo más básico, que es añadir el código para cargar correctamente el schema de la receta.

Estoy resumiendo bastante para no hacerte el cuento largo, si quieres saber lo que hemos hecho al completo contactanos y te contamos con gusto.

Primero vamos a article.recipe.liquid y vas a pegar este código, esto cargará la plantilla que hemos creado:

{% section 'custom-blog-article' %}

En segundo lugar, vas a copiar el contenido de main-article.liquid y vas a pegarlo en custom-blog-article.liquid

Añadimos el Schema a la plantilla

Todo esto era para añadir el Schema JSON-LD, que, en resumen, indica a los motores de búsqueda que este contenido es una receta, lo que ayudará al posicionamiento:

Tienes más información sobre SEO para Shopify en nuestra web.

Esto es bastante sencillo, simplemente añade este código justo antes de {% schema %}:

{% if article.metafields.custom.recipe_schema %}

<script type="application/ld+json">

{{ article.metafields.custom.recipe_schema }}

</script>

{% endif %}

Ahora, cuando abras tu receta, podrás ver que hay un schema válido para Google.

Si te ha servido para algo, te ha interesado, o te ha abierto el apetito, aunque sea un poco, comparte con quien quién quieras esta newsletter, ¡nos hace ilusión!