La mayoría de webs y tiendas online empiezan con una imagen principal en la 'home' que va cambiando cada cierto tiempo, ¿te suena?
Las imágenes tienen una importancia muy grande a la hora de que una web tenga una presencia profesional.
Siempre aconsejo a mis clientes que si no pueden realizar imágenes originales de un fotógrafo por tiempo o coste, que usen bancos de imágenes.
Como desarrolladores, lo que queremos hacer es que los gestores de los ecommerce tengan la mayor autonomía y versatilidad posible.
Que sea sencillo de configurar y también que sea robusto para que siempre mantenga una apariencia visual en armonía con el tema.
¿Qué características debe tener un slider?
Tenemos una serie de características globales que aplican a todo el slider, las cuales son:
- Tamañoen los diferentes dispositivos
- Tiempo detransiciónentre imágenes
- Elemento que nos indique que es un slider:bulleto flechas
- Overlay: color y opacidad
Cada slide tendrá una serie de características particulares:
- Título
- Descripción
- Color del texto
- Botón de call to action
- Imágenes para móvil, tablet y desktop
- Posición de estos elementos dentro de la imagen
Veamos cómo desarrollar un slider que soporte todas estas características para que sea gestionado por una persona no técnica, a través del CMS de Shopify.
▶️ Dale al PLAY y aprende cómo crear tu propio slider
¿Cómo crear un slider en Shopify con HTML, CSS, Liquid y Javascript?
Para este desarrollo nos vamos a apoyar en el que considero el mejor slider de Javascript Vanila que he utilizado hasta el momento:Swiperjs。
1. Necesitamos su librería
帕拉empezar,我们incluir拉librería de swiperjs。
Utilizaremos el CDN, que es la manera más sencilla de hacerlo.
2. Incluir el javascript
Tenemos que incluir el javascript y el css dentro de las etiquetasen nuestro fichero
theme.liquid
。
3. Crear en nuestro editor de código
Vamos a crear en nuestro editor de código un nuevo fichero dentro de la parte desections
a la que llamaremosslider-swiper.liquid
。
Aquí es donde introduciremos todo el código necesario para crear este slider de imágenes.
Antes de continuar, es importante entender qué son lassections
en Shopify.
Son plantillas de código Liquid que tienen acceso a los mismosobjetos,etiquetasyfiltrosglobalesque otras plantillas, pero pueden ser de dos tipos diferentes:
- Unasección estáticase puede incluir en varias plantillas, perosolo existe una instancia de esa sección。当您在做什么cuando se形成层配置uración de una sección estática en un lugar, ese cambio se aplicará a todos los demás lugares donde se incluye la sección. Por ejemplo secciones comunes de este tipo son el footer, el header, la sección de newsletter,... que si las modificas en una página te gustaría que se modificase en todas las páginas de la web.
- Lassecciones dinámicasse pueden agregar a lapágina de inicio del tema únicamentey la configuración de estas serán accesibles automáticamente en el editor de temas con lo que definamos dentro de su
{% schema %}
。Se pueden agregar un máximo de 25 secciones dinámicas a la página de inicio desde el CMS donde pone "Add Section".
Además, las secciones tienen las siguientes características:
- Las variables creadas fuera de las secciones no están disponibles dentro de las secciones y viceversa.
- Las secciones no pueden incluir otras secciones.
Para poder explicar cómo funciona cada línea de código he realizado un vídeo explicativo en el que iré contando cómo funciona y explicando cada una de las líneas creadas.
Así vas a entender y adaptar el código si es necesario.
¿Tienes una idea de negocio?
Comienza a usar Shopify gratis, sin necesidad de ingresar los datos de tu tarjeta de crédito
4. Incluye el código en tu proyecto
Aquí tienes un repositorio de Github público donde podréis acceder al código e incluirlo directamente en vuestros proyectos.
Vemos que es un fichero que está compuesto aproximadamente por:
- 180 líneas de CSS
- 20 líneas de javascript
{% javascript %}
- 55 líneas de html y código liquid
- 380 líneas de configuración
{% schema %}
Aquí puedes ver el video explicativo del código:
¡Comienza hoy mismo a crear sliders en tu tienda Shopify!
Cuando creamos un nuevo bloque para un tema, es importante tener en mente que sea lo suficientemente flexible para que se ajuste a la mayoría de casuísticas de los diferentes temas.
总理又,basado mi experiencia, dar posibilidad de configurar demasiados parámetros en muchos casos suele suponer más problemas que beneficios.
sections
sean rápidas y sencillas de utilizar.¿Aún sigues sin tener una tienda online propia?
Un carrusel o slider es lo primero que suele aparecer en casi todas las páginas de una web.
Así que ¡dale cariño y mimo para que se vea lo mejor posible en todos los dispositivos donde te visiten tus potenciales clientes!