Desarrollo de Tema Shopify: Creando un Clon del E-commerce de Adidas desde Cero | Sección de Tabs

¿Te gustaría aprender a crear un sitio web de e-commerce como el de Adidas usando Shopify? En este video educativo, te guiaré paso a paso en el desarrollo de un tema personalizado con Liquid y la creación de secciones desde cero. Ideal para principiantes y desarrolladores avanzados que desean mejorar sus habilidades en Shopify.
En esta ocasión estaremos creando una sección de tabs con parametros configurables y reutilizables.
🔍 Qué aprenderás:
1. Uso de Liquid para personalizar tu tienda.
2. Añadir bloques dentro de una sección
3. Usar custom elements en Shopify
4. Mejores prácticas para el diseño y funcionalidad de un sitio de e-commerce.
💡 Beneficios:
- Mejora tus habilidades de desarrollo web.
- Crea un sitio profesional y funcional.
- Domina las herramientas y recursos de Shopify.
📌 Recursos mencionados:
- Enlace a la documentación de Shopify: shopify.dev/docs/api/liquid
- Enlace a la documentación de Custom Elements: developer.mozilla.org/en-US/d...
🔗 Conéctate con nosotros:
Suscríbete para más tutoriales y guías.
Síguenos en nuestras redes sociales para actualizaciones y contenido exclusivo.
¡No olvides darle like y compartir si encuentras útil este tutorial!
Capítulos:
00:00 Intro
00:59 Presentación
01:36 Creando nueva sección de liquid
02:10 Agregando schema de la sección
07:15 Creando estructura HTML usando liquid
10:40 Usando el concepto de "forloop" de liquid
12:16 Agregamos una referencia a una colección en el schema
13:11 Seguimos con la estructura HTML
16:16 Usando "forloop.first" para agregar un atributo al primer elemento dentro de un "for"
18:16 Agregando css para ocultar o mostrar el contenido
21:47 Vinculando archivo javascript
23:39 Creando custom elements con javascript
30:06: Creando metodo para eliminar los atributos "Active" de los títulos
31:58 Creando logica para seleccionar un tab
37:07 Creando logica para mostrar el contenido de la tab seleccionada
44:36 Demo de como reutilizar los custom elements
48:16 Estilos css para los títulos de las tabs

[@MikeDev97]

Hola chicos! Si quieres entender con una mejor explicación com hacer una sección de tabs con javascript te recomiendo este video: kzbin.info/www/bejne/hImyhmSCaNOhb7M Si no te quedo claro como funciona el forloop de liquid, esta es la documentación: shopify.github.io/liquid/tags/iteration/#forloop-object Lista de reproducción del curso de desarrollo de temas para Shopify: kzbin.info/aero/PLLb4R-guXi12Vs4m5C4kYNz5eetvlfsiL

[@miguelmoyamontero5624]

Me encantan tus videos, estoy aprendiendo mucho, soy diseñador Ux-Ui, y me sirven un montón, una pregunta algun curso de liquid..?? Que me recomiendes..?? Gracias

[@MikeDev97]

Hola! Muchas gracias por tu apoyo!! En español la verdad que no he encontrado, pero si buscas en inglés habrá un par que vale la pena! Aún no me atrevo a hacer in curso así muy desde cero, quiero tener más soltura para hablar y con la cámara para que sea de calidad, pero un curso así está dentro de mis planes.