Cómo mostrar diferentes imágenes de banner en Shopify – Desktop y Movil
Si estás intentando hacer que tu tienda Shopify tenga una imagen de banner diferente a la que tienes en desktop, es decir, una imagen específicamente para Móvil. Podrás haber notado, si estás usando el tema Dawn, que este tema, al usar la sección de banner, permite ingresar dos imágenes, pero ambas las muestra en ambas versiones (móvil y desktop). Haciendo que no se pueda ver bien dicho banner en ambas versiones. Bueno, si estás en una encrucijada y no sabes cómo resolver eso, aquí te dejo la solución para ese problema.
Primero tendrás que ingresar a tu dashboard de Shopify, y dirigirte a themes o temas si lo tienes en español. Ahí podrás visualizar el tema que tienes en este ejemplo Dawn, ahora podrás ver que está el botón que conocemos Customize, calma ahí que en esta ocasión no entraremos ahí o bueno aún no.

Dirígete al menú de tres puntos que está alado de Customize, en ese menú podrás ver que te salen varias opciones más, pero la que nos interesa en esta ocasión es la de Edit Code, da clic ahí y podrás ver todos los archivos del tema.

Una vez ahí, tocará buscar el siguiente archivo, (venga, no te la compliques, usa el buscador que nos proporcionan). section-image-banner.css, así es, en este archivo agregaremos el código que nos ayudara a que podamos mostrar diferentes imágenes de banner en Shopify.
Bueno venga basta de rodeos, es hora de introducir nuestro código CSS que nos solucionara esto. Da clic al siguiente link como mostrar diferentes imágenes de banner en shopify. Serás dirigido a mi GitHub en donde encontraras el código del que te hablo.
Listo ya lo tienes, ahora tienes que copiarlo y es no queda más que regresar a nuestro archivo en Shopify, dirígete hasta el final de todo el archivo y ahí podrás pegar el código, no olvides dar en guardar. Con esto reescribiremos algunos estilos de Dawn, logrando que la imagen secundaria cumpla con la función de mostrarse solo en móvil logrando lo que queríamos.

Hemos terminado con esto, es hora de ir a custimoze dentro de nuestro tema y poner la imagen que queramos mostrar en móvil, ¿Donde?, bueno en imagen secundaria o second image.
Ahora second image será tu imagen en movil y first image seguirá siendo tu imagen para desktop, listo ya puedes personalizar como se ve tu banner en ambos dispositivos. Ofreciendo una experiencia a tus visitantes de un sitio responsivo que se visualice bien tanto en móvil como en desktop.