Cómo editar la página de error 404 en Shopify

Convierte un "error" en una oportunidad. Te explicamos cómo ligarte a tu usuario y convertirlo en cliente desde un error 404.

Ari de impossiblebakers.com me comentó que quería editar la página de error 404 en su Shopify. En Pango Studio lo hemos hecho en muchas ocasiones y como es un tema que puede ayudar muchas personas que utilizan Shopify para vender online, nos hemos animado a publicarlo por aquí, si os sirve, ¡comentadnos cómo han quedado vuestras ideas!

Tenemos que aclarar una cosa: un error 404 es un comportamiento correcto de tu web, sea Shopify, WooCommerce o cualquier otra cosa. Cuando un usuario llega a una URL que no existe, lo que debe obtener es un error 404.

Es normal que tengas algo de tráfico a tu 404, sobre todo si tu sitio web tiene ya un tiempo de vida y has eliminado productos.

Lo primero que tienes que plantearte es si es correcto que la URL no existe, por ejemplo, en el caso de un producto que has descatalogado, a lo mejor te interesa mantener viva esa URL e intentar llevar al usuario a un producto similar que sí sigas vendiendo; esto depende del caso y no lo vamos a ver ahora, así que centrémonos en cómo editar la página 404 en Shopify.

Algunas ideas para la página 404

• Ofrece productos relacionados con la URL que ha introducido

Pongo un ejemplo exagerado, si el usuario ha entrado en tiendamolona.com/product/aves-domesticas y tienes una tienda de camisetas con distintos diseños, entre ellos, diseños relacionados con aves, ¿por qué no mostrarle camisetas con diseños de aves?

Un ejemplo más probable es que el usuario caiga en un producto que ya no existe, por ejemplo “Cojines de Picasso”, en este caso tiene sentido mostrar productos relacionados (con Shopify se puede hacer) y el resultado sería, por ejemplo: “Cojines de Dalí”, “Funda de Almohada Gernika”, etc.

• Ofrece productos personalizados basados en la navegación del usuario o en el perfilado del mismo (género, rango de edad, etc.)

[Modo venta ON] (Si no sabes cómo hacer estas dos cosas, escríbenos, que te ayudamos 😎)

• Una suscripción a tu newsletter, esto es útil si trabajas el marketing de contenidos, si no, ahórrale la pérdida de tiempo al usuario

• Ofrece un cupón de descuento a modo de “disculpa”, si tu relación con el usuario tiene un tono informal, un mensaje como “Te regalamos 5€ en tu próxima compra por las molestias 😅, introduce el código UPSI404 en tu próxima compra” es una estrategia diferente que puede conquistar el corazón de tu usuario

• Un juego o algo interactivo, es algo más complejo de implementar, pero puedes implementar algo parecido al dinosaurio de Google que tenga algún propósito de venta al final (llevar a algún producto, regalar un código de descuento…). Un buen ejemplo es Figma, que aprovecha el 404 para mostrar un ejemplo de su UX:

  

• Links de enlaces importantes dentro de tu sitio: home, productos más vendidos o incluso, tus redes sociales

• Chat de ayuda, puedes implementar un chat para dar soporte al usuario y convertirlo en cliente

• O simplemente añade un mensaje gracioso (o un gato, un gato siempre funciona)

  

Qué no debes hacer

• No hagas una redirección 301, lo admito, yo he hecho esto durante años, y confieso que ha funcionado mucho, pero el comportamiento técnicamente correcto es un 404. Eso sí, aprovecha y ofrece algo que ayude a resolver la búsqueda del usuario, alguna de las ideas que ya hemos comentado te pueden servir

• Poner un mensaje de 404 y nada más. ¿Por que no aprovechar para resolver la búsqueda del usuario? Lo mínimo es enlazar a la home fíjate en el ejemplo de Amazon.es. Ellos tienen un mensaje de error simple, pero dejan un solo enlace hacia la home, evitando que el usuario se pierda:

  

• No pongas ningún tipo de mensaje engañoso ni hagas que la página 404 tenga un a experiencia de usuario similar a la home u otras páginas, generarás una UX pésima.

• Redirección 404 a URLs similares, otra práctica común (que también he aplicado), puede servir para un blog, pero incorrecta en ecommerce, estas redirecciones no son siempre fiables y pueden generar una experiencia muy mala, ¿comprarías en una tienda que te redirige a algo que no tiene que ver con lo que buscaste?

Shopify y Shopify 2.0: Cómo editar la página de error 404

“Vale Fausto, ¿pero cómo edito la pagina 404 en Shopify?” Venga, que te lo explico, es muy sencillo.

Shopify 2.0

Si estás usando un theme actualizado ridículamente sencillo:

Canales de venta → Tienda online → Temas

Ahora, elegimos el tema que queremos editar y le damos a Personalizar.

En el buscador de la parte superior encuentra la página 404:

Ahora ya puedes añadir desde aquí Secciones como en cualquier otra plantilla.

Si necesitas una sección personalizada o alguna que has visto y que no aparece ahí y quieres usarla escríbenos, te podemos ayudar con eso.

Ya sólo es cuestión de jugar con el contenido.

Themes antiguos de Shopify o sin soporte para secciones

Si tu theme es más antiguo o simplemente no tiene soporte para el personalizador, aún puedes modificar tu 404, es sencillo pero necesitas un poco de código.

Vamos a ir a Canales de venta → Tienda online → Temas → Editar código

Una vez aquí, buscamos 404 en el buscador de plantillas y podremos acceder al archivo liquid, una vez allí puedes editar lo que quieras con html, js, css y Liquid.

Ejemplo con código

Puedes añadir un input de búsqueda con el siguiente código (Fuente: https://www.shopify.com/partners/blog/best-404-pages)

<form class="search" action="/search"> <input type="text" placeholder="Search" name="q" value="{{ search.terms | escape }}" /> <input type="submit" value="Search" /></form>

Espero que esta pequeña guía te haya servido de algo, ya es todo tuyo.

Si necesitas ayuda siempre puedes escribirnos o dejarnos un comentario por aquí. ¡Será un placer poder ayudar!