Desarrollo de temas para Shopify: crea y personaliza tu propia tienda en línea

1. Introducción: Hola y bienvenidos a Shopify Theme Development: Cómo construir o personalizar tu propia tienda online. Soy Chris, soy un maestro superior aquí en SkillShare.com, cubriendo temas como desarrollo web y freelance en línea. Y en el curso de hoy, voy a llevarte a través de un eficiente proceso para construir y personalizar tiendas en línea utilizando la plataforma Shopify. Shopify es una de las plataformas de comercio electrónico líderes en el mundo con más de 800 mil tiendas Shopify activas, y en mi opinión, el lugar más ideal para empezar a construir tu primera tienda online. Como diseñador o alguien con conocimientos básicos de desarrollo web, todo lo que necesitarás para desbloquear el poder de Shopify es algún conocimiento básico de la propia plataforma y su lenguaje de plantillas llamado Liquid. Y eso es exactamente en lo que nos metemos en este curso. En las siguientes lecciones, nos vamos a centrar en construir y personalizar el frente de tu tienda a través del uso de un tema de Shopify, que básicamente es como una plantilla que determina la forma en que se ve y se siente tu tienda online. Aprenderemos sobre la estructura temática que incluye diseños, plantillas, secciones y fragmentos, cómo editar tu código de manera eficiente y al instante actualizar tu escaparate y, por último, cómo editar tu código no solo puede actualizar el aspecto y la sensación de su sitio web, pero también proporcionar opciones dentro su administrador de Shopify para agregar y personalizar contenido dinámicamente. Al final de la clase, debes tener una sólida comprensión de lo que puedes hacer con temas de Shopify y la confianza para hacer cambios cuando sea necesario. Ya sea que quieras vender tus propios productos, o usar estas habilidades para ayudar a las empresas como freelancer o agencia, este curso te hará empezar por el buen camino con Shopify. Entonces si estás listo para empezar, click en el siguiente video y te veré por dentro. 2. Conocimientos necesarios y herramientas: Antes de empezar a hacer girar nuestra tienda en línea y editar nuestro tema, es importante discutir para quién es esta clase, y qué habilidades deberías tener al entrar en esto. En primer lugar, si eres alguien que es EVA, ya vendiendo en línea, a punto de lanzar su propia tienda en línea o trabajando en un rol donde trabajas mucho con la plataforma Shopify; definitivamente ayuda saber cómo se genera tu escaparate, para que puedas encontrar el lugar adecuado para realizar cambios. Por otro lado, podría ser alguien como yo que podría no tener su propia tienda, pero está emocionado por atender a los 800 mil vendedores más en Shopify, quienes probablemente necesitarán algo de ayuda con su tema en algún momento. Para mí, aprender el desarrollo del tema de Shopify es una gran oportunidad, para ganar una habilidad valiosa que puedes usar para ofrecer servicios a los vendedores de Shopify. No obstante, como toqué en el video anterior, este curso va a beneficiar a quienes ya tienen algunos conocimientos y habilidades en HTML y CSS. Si eres completamente nuevo en esos idiomas, te recomiendo encarecidamente que aprendas un poco de esos dos primero, y pareciendo que estás aquí mismo en habilisshare ya, un buen lugar para empezar es mi curso anterior, Desarrollo Web Fundamentos HTML y CSS. Aparte de eso va a ayudar tener algo de experiencia con un lenguaje de programación como JavaScript o PHP, como el líquido de lenguaje de plantilla de Shopify, utiliza bloques básicos de control-flujo e iteración para mostrar contenido. Hablo de cosas simples como cuatro bucles y sentencias If, que deberían ser súper familiares si has hecho alguna programación en el pasado. De no ser así, los bucles y condicionales son bastante básicos y sobre todo fáciles de entender y líquidos. No deberías tener demasiados problemas sin importar. Algo que es un poco obvio pero aún vale la pena mencionar, es que debes tener alguna familiaridad con la propia plataforma Shopify. Ya sea que eso sea tan básico como saber qué es y qué hace o mejor aún, algo de experiencia con agregar y organizar productos, páginas y publicaciones de blog dentro del administrador. Cuanto más familiarizado estés con la plataforma por supuesto, más fácil va a ser entender lo que está pasando. Shopify hace que administrar tu tienda online sea lo más fácil posible, por lo que no necesariamente necesitas haber trabajado con Shopify antes para aprender las cosas que estoy a punto de enseñarte en esta clase. Por último, para cubrir brevemente los requisitos tecnológicos, igual que cualquiera de mis clases de desarrollo web, las únicas herramientas que vas a necesitar es un navegador web y un editor de código. También estarás usando un poco la línea de comandos en este curso, pero ese es un software que viene de serie en cualquier sistema operativo. Ahora si algo de esto ya suena confuso, entonces definitivamente te recomiendo dar un paso atrás, aprender algunos Fundamentos de Desarrollo Web y volver a esta clase en una fecha posterior. Un buen lugar para empezar es mi curso aquí en SkillShare.com, Fundamentos de Desarrollo Web, una guía para principiantes a la web. Para resumir rápidamente, todo lo que necesitarás son algunas habilidades básicas de desarrollo web, con HTML y CSS, un navegador web y el editor de código, y deberías estar listo para empezar. 3. Crear una tienda en desarrollo: Para empezar a construir y personalizar nuestro propio tema de Shopify, lo que vamos a necesitar es una tienda Shopify. Por suerte para nosotros, podemos construir una tienda gratuita usando la cuenta de un socio de Shopify. Ahora esta cuenta es completamente gratuita y necesitamos unirnos al programa de socios para poder obtenerla. Alternativamente, si ya tienes una tienda, esta primera parte, donde nos registramos con socios e iniciamos sesión en la tienda a través de la cuenta del socio, no te va a aplicar. Pero todo desde cuando lleguemos a nuestra tienda de desarrollo va a aplicar a ti y a tu tienda. Todo lo que necesitas hacer es iniciar sesión en tu tienda. De lo contrario, si ya no tienes tu propia tienda, es posible que quieras crear una tienda de desarrollo. ¿ Qué es una tienda de desarrollo? Bueno, tengo un artículo de Shopify aquí mismo para indagar. Es básicamente un tema que podemos hacer todas las cosas diferentes que haríamos en un tema normal de Shopify, pero con algunas limitaciones aquí mismo. La idea de una tienda de desarrollo es como socio de Shopify, como alguien que desarrolle temas de Shopify o trabaje con clientes de Shopify, crearía una tienda, trabajaría en ella, desarrollaría, y luego se la pasaría al cliente más tarde, y entonces eso se convierte en su tienda, momento en que entonces el cliente o el vendedor, quienquiera que sea el dueño de esa tienda, va a pagar por esa tienda avanzando. Es una forma de desarrollar tiendas sin tener aún una cuenta de Shopify o un plan de Shopify. Esto es perfecto para nuestros propósitos porque estamos aprendiendo a desarrollar temas. No necesariamente queremos pagar los $30-300 mensuales a Shopify con el fin de jugar y desarrollar temas. Ya tengo una cuenta de socios de Shopify. Todo lo que necesito hacer es dar click Iniciar sesión. No voy a pasar por todo el proceso de registro, debería ser bastante directo ahora mismo porque soy afiliado, va a ir a mis tiendas referidas. Pero si hago click en arriba aquí en Tiendas de Desarrollo, puedes ver que tenemos un botón aquí para crear una nueva tienda. Voy a dar click en eso y le voy a dar nombre a la tienda, tienda Skillshare de Chris'. Voy a crear una contraseña usando mi gestor de contraseñas. Este lo hará, lo pondrás aquí, y asegúrate de guardar esa contraseña en algún lugar. Se va a requerir los detalles de tu tienda, así que voy a poner aquí algunos detalles falsos, y voy a elegir un propósito de tienda. Podemos elegir jugar alrededor. Voy a dar clic en Guardar y en cuanto haga clic en Guardar, voy a necesitar guardar esa contraseña, claro. Voy a crear un nuevo documento en cualquier lugar, puedes anotar esto de todos modos, y voy a anotar esta contraseña, Shopify Store, contraseña. Mira qué rápido fue eso. Ya tenemos una tienda, y esta tienda es gratuita de usar. No teníamos que crear un plan ni nada. Obviamente, si quisiéramos que esta fuera una tienda legítima, tendríamos que pagar un plan y luego probablemente conseguir nuestro propio dominio. Pero ahora podemos trabajar con prácticamente un tema que funcione plenamente y aprender todo lo que necesitamos saber sobre el desarrollo del tema Shopify dentro de este entorno. En este punto, si ya tenías una tienda, así es como debería verse cuando hayas iniciado sesión en tu tienda. Todos deberíamos estar en la misma página ahora mismo. Para familiarizarnos con la plataforma Shopify, voy a estar hablando de estos elementos del menú y lo que puedes hacer dentro de Shopify en un video posterior. Pero por ahora, el foco está en los temas. Podemos encontrar nuestros temas haciendo click en Tienda Online y yendo al primer elemento del menú denominado Temas, cual se selecciona automáticamente. Si queremos ver nuestra tienda, podemos dar click en Ver Tu Tienda aquí mismo. Se le ocurrirá con nuestros nombres de tienda separados por guiones. myshopify.com. Como pueden ver, tenemos un tema que funciona completamente de inmediato. Lo que Shopify ha hecho es que han cargado en un tema gratuito para que lo usemos. Este es el tema Debut, pero no necesariamente va a ser el caso para ti. Esto está sujeto a cambios, pero realmente no importa con qué punto de partida empieces. Todo lo que estamos aprendiendo de este punto será igual. Actualmente, se puede ver que estamos ejecutando tema Debut, y por aquí tenemos acciones, por lo que podemos previsualizar el tema. Podemos renombrar el tema, duplicarlo, descargar todo el tema. Podemos editar el código, y podemos editar el archivo de idioma. También podemos hacer clic aquí para personalizar y eso nos da una interfaz de usuario que podemos cambiar cosas sobre un sitio web sin indagar en ningún código. Es realmente genial. Dentro de nuestro desarrollo temático, te mostraremos cómo crear tus propias opciones de personalización, lo cual es realmente simple y una de las grandes cosas de Shopify. Nos vamos a meter en la personalización en un segundo, y te voy a mostrar eso. Pero antes de meternos en eso, quería cubrir rápidamente algo que pudiera tropezarte y eso está en tus preferencias, tendrás habilitada la protección por contraseña por defecto. Eso significa que si quieres compartir la tienda con alguien más a quien mirar, van a necesitar esta contraseña. Esta va a ser pantalla de inicio de sesión que aparece y tendrán que poner esta contraseña para poder verla. Si estás de acuerdo con que la gente lo vea, puedes desactivar la protección con contraseña. Para nuestros propósitos, no creo que realmente necesitemos protección con contraseña, pero está ahí si quieres, y está habilitada por defecto. Volvamos a nuestra sección temática y haz clic en Personalizar, y te puedo mostrar las súper poderosas opciones de personalización dentro de Shopify. Por defecto, estarás personalizando la página de inicio de tu tema, pero puedes hacer click en esta lista y te da todas las diferentes plantillas que puedes editar dependiendo de qué tema estés usando o cuántas plantillas has configurado dentro de tu tema. Esta lista puede llegar a ser larga, pero para nuestro tema de inicio, tema Debut, eso es todo lo que está disponible. Para llamar tu atención hacia la izquierda aquí, con la primera pestaña seleccionada, tenemos acceso a todas las secciones dentro de nuestra página. Las secciones de encabezado y pie de página que se incluyen con cada página, así que si entro, digamos, Páginas de colección, verás encabezado y pie de página también están ahí. Eso se mantiene estándar en todas las páginas siempre y cuando esté configurado en el archivo del tema. Nos meteremos en eso, la estructura de código real en un video posterior, pero aquí está la representación visual. Si hago clic en alguna de estas secciones, tengo opciones personalizables. Puedo agregar una imagen de logotipo en lugar del nombre de la tienda. Puedo personalizar el menú, y esto está todo configurado desde dentro del código, tienes acceso a estas opciones de personalización, lo cual es realmente genial. Obviamente, el pie de página es lo mismo, pero al final de la página y aquí se puede ver lo que se llama bloques. Vamos a aprender a usar bloques en un video posterior, pero esencialmente, podemos agregar un bloque extra aquí. No sé si se va a actualizar de inmediato. Sí, los enlaces rápidos ya están aquí. Si eliminamos ese contenido, verás que aquí tenemos menos columnas. En realidad podemos pasar, agregar y eliminar diferentes bits de contenido. Podemos eliminar el boletín y luego ahora tenemos dos bloques y automáticamente llenan el espacio de manera uniforme, lo cual es realmente genial. Voy a recargar porque no quiero que ese cambio guarde, y luego hablaremos de las secciones entre encabezado y pie de página. Ahora esta parte aquí de nuestro personalizador de secciones va a ser diferente en diferentes páginas. Si vamos a Páginas de Colección o Lista de Colecciones o alguno de estos, verás que hay una sola sección y no podemos agregar ni quitar esa sección de la página. Eso se debe a que esa sección está codificada en la página y lo veremos más adelante cuando veamos el código. La diferencia entre casi todas las demás páginas de tu sitio Shopify en comparación con la página de inicio es que tenemos este contenido para la sección de índice. No debería usar la sección de palabras porque voy a confundirte. Pero tenemos esta parte de la barra lateral de secciones que podemos añadir una sección a través de estos diferentes presets. Digamos que queríamos añadir un mapa. Si esta sección está configurada en nuestro código, entonces podemos agregarla y tenemos todas estas opciones de personalización. Podemos reordenar las secciones, así puedo poner mapa en la parte superior en caso de que quiera hacer eso prominente. Puedo mostrar y ocultar la sección y luego puedo quitarla. Básicamente en la página principal, cómo está configurado es que tienes tu encabezado, tienes tu pie de página, y luego tienes una lista de secciones que se apilan encima de la otra que puedes personalizar. Probemos un ejemplo más práctico, no hay página Acerca, pero digamos que estás en una página Acerca y que querías poner ese mapa. Definitivamente podrías insertar esa sección, pero lo harías desde dentro del código. Te mostraré cómo hacer eso una vez que indagemos en nuestro código temático. mí me preocupa un poco porque este video es probablemente un poco largo. Pero para cubrir la otra pestaña, esta es tu configuración de tema, y también podemos editar qué ajustes aparecen en esta sección también a través de nuestro código de tema. Pero estos ajustes de portada que se van a utilizar a lo largo de toda la página web, por lo que encabezados y enlaces, textos corporales, precio de venta, cuál va a ser el color de los botones. Se trata de cosas de todo el sitio, así que podemos poner lo que queramos aquí a través de nuestro propio desarrollo de tema, pero tenemos algunas opciones estándar aquí, y esto afectará a todo el lado. Tenemos la pestaña Secciones, la pestaña Configuración del tema. Tenemos este selector aquí para seleccionar diferentes páginas a personalizar. Aquí arriba, podemos ver nuestra página web en diferentes tamaños de pantalla. Si queremos verlo completamente expandido, podemos hacer clic en este botón y ampliará todo el ancho de la pantalla. El único problema con ese es que no obtienes acceso a tu personalizador. Alternativamente, puedes hacer clic en este y puedes ver cómo se ve tu sitio web en el móvil. Es posible que tengas diferentes opciones de personalización para móvil o para escritorio, lo que es posible que quieras previsualizarlas o ver cómo se ve tu sitio web en el móvil. Muchas tiendas en línea, el tráfico es más del 50 por ciento móvil, lo que es muy importante echar un vistazo a esa pestaña. Entonces, cuando hayas terminado de personalizar, querrás hacer clic en Guardar. Una cosa más que no cubrí, acciones temáticas. Este es el mismo menú que el que tenías. Si volvemos a donde estábamos antes, este tema las acciones son las mismas, o tal vez un poco menos opciones, pero es esencialmente lo mismo que las acciones aquí mismo. Vamos a dar click en Acciones probablemente en el siguiente video, pero quería mostrarte el personalizador. Si hacemos clic en Guardar, esos cambios estarán en vivo sobre este tema. Pero no quiero hacer ningún cambio, así que voy a dar clic en Recargar y luego todos estamos en el mismo punto de partida. Esencialmente, esta es la interfaz de usuario que tienes para interactuar con tu tema. Ahora lo que vamos a hacer es indagar en el código de tu tema. En combinación con lo que haces en tu código más lo que haces en tu personalizador, tienes prácticamente control total sobre todo tu tema, todo tu look y sensación de tu tienda online. Pasamos por encima del personalizador en esta lección. Vamos a sumergirnos en el código en los próximos videos. 4. Introducción a Online Store 2.0: En el video anterior, mencioné que es sólo la página de inicio en la que puedes personalizar y reordenar secciones. Ese ya no es el caso con las actualizaciones 2.0 de la tienda online de Shopify. Pueden notar que mi aparición en su video es bastante diferente a la intro, y eso se debe a que este video, así como algunos otros dispersos por toda la clase, se han grabado un par de años después de que esta clase fuera publicada por primera vez. Dicho esto, estos videos deberían encajar bastante a la perfección en la estructura de la clase y proporcionar un buen complemento a los videos existentes. Algo que habrás notado es que el personalizador de temas, ahora llamado editor de temas en la mayoría de los videos de esta clase, se verá bastante diferente al tuyo. Si estás viendo esta clase en 2021, por ejemplo, notarás que ahora aparecen bloques en esta vista de árbol, mientras que en la mayoría de los videos de esta clase, aparecerán así. Es importante tener en cuenta que Shopify está cambiando constantemente la interfaz de usuario del personalizador de temas, y no hay necesidad de preocupación inmediata ya que los fundamentos básicos de las secciones y bloques se han mantenido iguales a lo largo del tiempo. El gran cambio del que los desarrolladores de temas deben estar conscientes es algo llamado “plantillas JSON”. Vamos a profundizar en las plantillas JSON más adelante en esta clase, pero por ahora entendemos que las plantillas pueden ser de dos tipos, Liquid o JSON. Esto se está adelantando un poco a nosotros mismos aquí, pero es importante tener en cuenta como si optara por usar plantillas JSON sobre plantillas Liquid, no podrá usar Themekit, que es lo que les mostraré en el siguiente video. En cambio, puedes usar algo llamado Shopify CLI, que usaré en el video directamente después. Creo que es una buena idea saber usar Themekit. Si estás trabajando con temas modernos, esos son los temas que crearon después del 29 de junio de 2021, quizás quieras saltarte el siguiente video. 5. Configurar Themekit: En este video, vamos a configurar algo llamado Theme Kit con el fin de desarrollar y editar nuestro código en nuestra propia computadora. Si has hecho algún desarrollo web en el pasado, entiendes que editar desde un navegador web en línea como una interfaz como la que tenemos aquí, no va a ser la mejor práctica. Podemos por supuesto, si queríamos hacer algún cambio a nuestro tema, entrar aquí entonces tenemos acceso a cada archivo temático dentro de nuestro tema y podemos cambiar las cosas. Pero es mucho más limpio y mucho mejor flujo de trabajo por lo general para desarrollarse localmente. Por eso estaremos usando Theme Kit. Para advertirte por anticipado, Theme Kit sí requiere un poco de configuración. Sé que la configuración es mi parte menos favorita del desarrollo web. Seguro que a ustedes tampoco les gusta. Pero sólo para que lo sepas, esta es una lección aquí de configurar Theme Kit y luego estaremos directamente en desarrollar y cambiar nuestra tienda en línea. Para aprender sobre Theme Kit y qué es, solo voy a escribir Shopify Theme Kit en Google. El primer resultado si has redactado correctamente tu consulta, es éste justo aquí.Esto nos dirá en una palabra qué hace Theme Kit. Se trata de una herramienta de línea de comandos para los temas de Shopify. Acabamos de descargar la aplicación y con un poco de configuración te vas a las carreras de creación temática. Tan solo para dar algún contexto y explicar por qué necesitamos una herramienta como Theme Kit y qué hace. Esencialmente, estamos usando un sistema propietario de terceros con Shopify. Cuando estés desarrollando otras aplicaciones y sitios web, podrías activar tu propio servidor en tu propio equipo. Después tienes tu código corriendo en ese servidor y puedes editarlo directamente desde dentro de tu computadora. El lugar donde se está sirviendo tu código, y el lugar donde estás editando tu código es el mismo. Con Shopify no puedes hacer eso exactamente porque no puedes ejecutar una tienda Shopify en tu propia computadora, y por lo tanto, no puedes ejecutar un tema de Shopify en tu propia computadora. Cómo funciona es que vamos a estar interactuando con el código que acabo de mostrarte en nuestro tema de Shopify. Para poder ver todos nuestros cambios que estamos haciendo al código, en realidad tenemos que ejecutar el tema en servidores de Skillshare e ir y verlo como lo hemos hecho de antemano. Con eso en mente, antes de empezar a jugar con tu tema y hacer ediciones a tu código, que podría romper tu sitio web, querrás hacerlo en un tema diferente al que estás ejecutando actualmente. Si estás familiarizado con la puesta en escena y el desarrollo web, esto es esencialmente cómo puedes escenificar tus cambios con el desarrollo de temas. Lo que voy a hacer es en lugar de editar este tema que actualmente está en vivo en la página web, sé que esto es solo para la práctica y lo estamos usando sólo para la práctica y nadie va a ver este sitio. Pero digamos, por ejemplo, que querías editar un tema que ya estaba en vivo. No quieres editar el código que ya se está ejecutando, el código temático que ya se está ejecutando en tu sitio web. A lo mejor la gente ya está navegando por tu sitio y haciendo compras. Quieres crear esos cambios en un tema separado y luego moverlos cuando tengas confianza con ellos. De la forma en que vamos a hacer eso, es todo lo que tienes que hacer es dar click en acciones y luego hacer clic en duplicar. Ahora lo que va a pasar es que va a crear un tema y va a por defecto copiar de, el nombre del tema. Pero como eso está girando, podemos renombrarlo. Voy a llamar a este tema de Skillshare Dev. Voy a renombrar eso. Para poder ver cómo sería nuestra página web o cómo sería nuestra tienda con este tema, hacemos click en acciones, vista previa, en lugar de ver. Entonces cuando lo miramos, la URL va a ser la misma, lo cual es confuso. Pero aquí mismo sabemos que estamos previendo nuestro Skillshare Dev Theme porque tenemos este bar aquí. Entonces si quieres compartir esta vista previa con alguien en la que realmente puedes hacer clic, comparte vista previa y obtienes este enlace para compartir con cualquiera durante los próximos 14 días. También puedes ocultar la barra, que no recomendaría a menos que tengas que hacerlo porque, no quieres confundirte sobre qué tema estás editando actualmente. O bien, puedes hacer clic en cerrar vista previa, y esto te llevará de vuelta a tu tienda real que está ejecutando el tema en vivo. Porque acabamos de duplicar el tema y no hicimos ningún cambio, va a quedar exactamente igual. Entonces, volviendo a Theme Kit, lo que vamos a hacer es primero instalarlo y luego vamos a configurar Theme Kit para que estemos interactuando con ese tema en particular. Entonces, vamos a descargar nuestro tema a nuestra computadora y luego podremos empezar a editarlo. Por lo que las cosas que vamos a necesitar para instalarlo probablemente sea un gestor de paquetes. Yo uso Homebrew en los macOS. Podría estar usando Windows en el que recomiendan Chocolatey. Ya tengo instalado el Theme Kit, así que no voy a pasar por la instalación yo mismo. Ojalá al revisar estas instrucciones, puedas averiguar cómo instalar Theme Kit, pero debería ser bastante simple. Acabo de ejecutar estos comandos y funcionó para mí. Ahora tengo Theme Kit instalado en mi computadora. Si entramos en comandos, podemos ver el comando configure. Ahora mismo si abrimos nuestra Terminal. Entonces es Terminal en Mac y Command Prompt, creo en Windows. Pero esencialmente sea cual sea tu herramienta de línea de comandos, mía en realidad es iTerm no Terminal, pero todo es lo mismo. Voy a navegar al directorio en el que quiero que mi tema entre. Voy a hacer código. Creo que lo tengo en corriente personal. Ahora estamos en este subdirectorio de mi carpeta de códigos donde pongo mis proyectos actuales personales. Lo que necesitamos hacer desde aquí es configurar un archivo llamado config.yml con estos detalles para decirle a Theme Kit qué tema realmente queremos editar porque en este momento lo acabamos de descargar. Todavía no sabe conectarse con este tema. Entonces por eso necesitamos configurarlo. Ya verás aquí, necesitamos una contraseña, necesitamos una ID de tema, y necesitamos la URL de la tienda. Entonces el primero, tu contraseña API. Podría ser un poco difícil sacar la cabeza como no desarrollador, pero esencialmente una API significa una Interfaz de Programación de Aplicaciones. Especialmente con algo como Skillshare, que es un sistema propietario de terceros, vamos a necesitar acceso a la API con el fin de cambiar cualquier cosa sobre nuestra tienda. estos momentos, sólo tenemos acceso a lo que hay en este menú para poder editar nuestra tienda. Solo tenemos acceso a las opciones que Skillshare nos da a través de esta interfaz de usuario, a través de este panel back-end. Pero para poder realizar cualquier cambio fuera de esto, se tiene que hacer a través de una app. Entonces si hago clic en apps aquí, hay algunos tipos diferentes de apps. Una de ellas es una app pública. Cualquiera puede crear una app y ponerla a disposición para comprar o usar en la App Store. Aquí puedes ver un par de populares. Estos obtienen acceso a la API de Shopify y pueden hacer cambios en tu tienda. Para nosotros, sólo queremos cambiar nuestro tema. Por lo que necesitamos configurar una aplicación muy básica, que simplemente básicamente nos proporcione la capacidad de editar nuestros archivos temáticos. Si bajo hasta aquí y encuentro este enlace oculto debajo de esos, llamados administrar apps privadas, puedo dirigirme a esta interfaz que nos permite crear nuestra propia app privada. Se puede pensar en esta aplicación privada como solo la interfaz para que podamos interactuar con nuestro código temático en nuestra propia computadora. Voy a llamar a esto un nombre descriptivo, Conexión Theme Kit porque eso es realmente todo para lo que lo estamos usando. Tengo que poner un email de desarrollador de emergencia, pesar de que solo estamos jugando. Simplemente no me dejará enviar el formulario de lo contrario, y necesitamos dar acceso a esta app para permitir la edición de plantillas temáticas y activos temáticos. De lo contrario, esta app nos va a ser inútil si no podemos editar esas plantillas temáticas. Si hago clic en guardar, veré aquí que me está advirtiendo que si creo estas credenciales API, cualquiera que tenga estos detalles puede entrar y leer y escribir código temático. Eso es genial. Entiendo. Crea la app y ahora tenemos la contraseña. El resto de detalles van a ser tu ID de tema y tu tienda. El almacén es muy sencillo. Es justo cuando haces clic en ver tienda, ese es el nombre de la misma ahí mismo. El ID del tema se puede encontrar fácilmente entrando en el personalizador. Volvamos a los temas, tengo demasiadas pestañas abiertas aquí. Recuerda que queremos editar este tema, no el tema en vivo ahora mismo. Entonces, queremos entrar aquí y queremos dar click aquí y dar click personalizar. En el personalizador, puedes ver este número oculto en la URL, y ese es el que queremos usar para nuestro ID de tema. Como dije antes, puede crear este archivo config.yml usted mismo o puede utilizar este comando línea de comandos con el fin de crear automáticamente este archivo para usted, dados los detalles. Depende de ti cómo quieras hacerlo. Voy a usar el comando en sí. Ahora que estoy en el directorio donde quiero que vaya mi proyecto, puedo ejecutar ese comando. Solo para mostrarte, ahora mismo tenemos un directorio vacío. Ese directorio actual está completamente vacío. Una vez que ejecutemos este comando va a crear un nuevo archivo para nosotros. Entonces te mostraré eso en tan solo un segundo. Vamos a correr a través, theme configure, dash dash dash password es igual. Después entramos a nuestra app privada, encontramos la contraseña, solo podemos hacer clic en copiar aquí. Pega eso en. La siguiente variable va a ser tienda. Puedes hacer click aquí, agarrar esa dirección de la tienda. El último es tema id Como te mostré en el personalizador, solo podemos copiarlo desde la URL. Revisemos nuestro código para asegurarnos de que lo tenemos todo configurado correctamente. Sí, se ve bien. Ahora, le pegaré a “Enter”. En unos segundos, debería volver sin errores. Si miramos nuestro directorio, veremos que el archivo config.yml está ahí dentro. Si abro eso con mi editor de códigos, podré ver ese archivo del que hablamos aquí está justo ahí. Ahora bien, si ejecuto comandos de Theme Kit dentro de este directorio, sabe con qué tema quiero conectarme. El siguiente paso es descargar nuestro tema. Eso es realmente sencillo. El comando para eso es descargar tema. Ya que eso se está ejecutando, solo te lo mostraré aquí. En la documentación, puede ejecutar la descarga del tema, y luego puede especificar archivos específicos después de eso, o simplemente ejecutar la descarga del tema y descargará todo el tema. Aquí puedes ver que se está descargando ahora y está al 28 por ciento. Vamos a saltarnos adelante hasta que eso termine. Eso terminó sin errores. Si revisamos el directorio ahora, podemos ver esas carpetas que vimos. Si vuelvo, ¿en cuál quiero dar click? Aquí arriba hay tantos enlaces diferentes. En realidad ya no necesitamos la contraseña de la app privada, así que puedo usar esta pestaña. Volver atrás, dar click en “Editar código”. Se puede ver que tenemos la misma estructura. Si muevo esto hacia un lado, se puede ver que tenemos la carpeta de activos aquí, config, locales, secciones, todas esas cosas que estaba en el código del tema de Skillshare Dev está ahora aquí en nuestro directorio. Algo que Shopify Theme Kit no hace es ponerlo todo en una carpeta nueva. Voy a llamar a este tema de habilidad-compartir, y necesitaré entrar en mi editor de códigos aquí y cambiar directorios por ese tema de habilidad-compartir. Está bien, también debo mencionar que hay otra opción llamada tema nuevo. En realidad se puede crear un nuevo tema. En lugar de poner un id de tema, solo pones un nombre de lo que quieres que sea ese tema, y lo creará para ti. Si haces eso, te configurará con un tema de inicio que no tiene todas las características de Debut. Te recomendaría que dupliques el tema que te da, y luego edita ese, en lugar de empezar un nuevo tema desde cero. Esa es mi recomendación. En el video posterior, estaremos cubriendo Slate, que es aún más complejo que éste. Si realmente querías construir tu propio tema desde cero, definitivamente quédate hasta el final de esta clase. Va a haber un video extra en Slate. Si quieres ir al proceso completo de desarrollar tus propios temas de Shopify, definitivamente quédate ahí para esa lección. Para esta clase de Skillshare, quería mostrarte cómo levantarte y correr lo antes posible. No creo que sea necesario rediseñar todo, reconstruir todo desde cero, por eso estamos usando Debut como punto de partida. Como les mostré justo antes, tenemos nuestro código temático aquí en nuestra computadora local, y podemos editarlos como nos plazca. Lo que voy a hacer para hacer eso es ejecutar atom dot, pero este comando depende completamente del software que estés ejecutando. Yo uso átomo, por lo que solo puedo seleccionar punto átomo. Ahora, tengo acceso a todo el proyecto. Puedo entrar, dar clic en diferentes plantillas, y editarlas. Puedo entrar aquí, hacer los cambios que quiera pero claro, voy a querer ver qué le hace eso a mi tema real. Lo último que voy a querer hacer es ejecutar el reloj de tema, para que cada vez que haga cambios en mis archivos de tema local, vaya a actualizar mi tema real, y luego pueda mirarlo en el navegador y ver qué cambios se han realizado. Para hacer eso, todo lo que tengo que hacer es ejecutar un simple comando, reloj de tema. Como verás en tan solo un segundo, ahora dice, observando los cambios de archivo al tema, y luego tiene el id ahí. Solo hagamos un cambio sencillo para mostrar cómo funciona esto. No espero que sepas navegar por las plantillas temáticas todavía como te mostraré eso en un video posterior. Pero digamos que queremos deshacernos de estos iconos en el encabezado. Se puede entrar en el encabezado.Plantilla líquida en secciones y buscar esa parte en particular del encabezado. Parece que está justo aquí. Voy a encontrar la etiqueta div de apertura y cierre y simplemente eliminar eso todo juntos. Voy a pegarle ahorrar en eso. Si pasamos a nuestra terminal, verás que empezó a procesar ese encabezado, y luego lo actualizó sobre nuestro tema en vivo. Si no lo tienes ya, necesitas entrar en tu tema con el que realmente estás trabajando y hacer clic en Vista previa. Lo tengo justo aquí, y puedes ver definitivamente estoy previendo este tema de SkillShare Dev aquí mismo. Si actualizo la página nuestros iconos deberían haber desaparecido. Ahí lo tienes, no hay iconos ahí. Obviamente, este es un cambio que probablemente no querrías hacer.Podemos volver atrás y controlar Z para volver a ponerlo, y entonces esos cambios se van a actualizar con bastante rapidez. Me impresiona lo rápido que Shopify hace esto. No ralentiza demasiado el desarrollo, pero ahí tienes, ya están de vuelta. Ahora, puedes ver que somos capaces de editar código en nuestra computadora local, y se está actualizando en nuestro tema. Este es el flujo de trabajo. Tenemos nuestro tema de desarrollo funcionando, que es solo una palabra elegante para un tema que no es el tema actual porque no quisiéramos editar el tema actual si se trata de una tienda en vivo. Corremos nuestra vista previa, y luego tenemos reloj temático corriendo, y solo editamos el código y hacemos lo que nos plazca. Tenemos entorno configurado esencialmente. Ahora, una nota final antes de pasar al siguiente video es que todavía tendrás acceso para entrar aquí, y editar tu código desde dentro del sitio web de Shopify. Yo recomendaría en contra de esto porque esto crearía discrepancias entre el código que tienes en tu computadora, y el código en tu tema real. Puedes entrar y cambiar esto, pero no se va a actualizar en tus archivos locales a menos que ejecutes la descarga de tema. Para ser claros, este proceso de reloj temático solo ocurre de una manera. Es solo cuando editas tus archivos localmente, pero si los editas en tu sitio web de Shopify, no va a llegar a tu computadora local. Yo elegiría dónde quieres editar tu código y pegarte con él. Si lo vas a estar editando en tu propia computadora, lo cual te recomiendo encarecidamente, no lo edites aquí. Si lo haces, solo tienes que saber que tendrás que actualizarlo en tu propio equipo. Ahora, tenemos nuestra configuración de entorno, y tenemos todas las herramientas que necesitamos para modificar nuestro sitio web de Shopify y personalizar nuestro propio tema. En el siguiente video, vamos a tomar un descanso del código real. Habla de la propia plataforma Shopify porque es bueno tener cierta familiaridad con eso, y luego en el video después de eso vamos a entrar realmente y explicar todo este código que acabamos de empezar a mirar. Te veré en el siguiente video. 6. Nuevos comandos en Shopify CLI v3: Hola alumnos. En este video, voy a cubrir rápidamente los cambios que ocurrieron en 2023. Lo que pasó fue Shopify CLI actualizado a una nueva versión dos, versión tres, lo que significa que algunos de los comandos en el siguiente video, voy a ser un poco Cubrí cómo migrar y los diferentes tipos de comandos en comparación con la versión dos en mi canal de YouTube. Para que puedas ir a ver ese video. Es una buena idea en general, si quieres estar al día cuáles son los cambios de Shopify porque la plataforma está cambiando mucho para ver mi canal gratuito de YouTube y puedes ver lo que sale Nuevo, Shopify. Lo actualizo con más frecuencia de lo que estoy creando clases aquí en Skillshare Entonces lo que estás a punto de ver algunos de los nuevos comandos en la versión tres de la CLI Si por alguna razón estás usando CLI versión dos, entonces puedes seguir el siguiente video como de costumbre Pero algunos de esos comandos van a ser diferentes en la versión tres, que al momento de la grabación es la última versión. Entonces me lo voy a tirar a mí mismo a principios de año para hablar estos comandos para ustedes chicos para que no estén en problemas en el siguiente video, bien. Se me llamó la atención de una revisión de uno de ustedes que los comandos estamos desactualizados. Así que solo quería lanzar este video para asegurarme de que ustedes se den cuenta de que hay una nueva versión y algo ordena. He cambiado. Así que mira primero este. Si estás en CLI versión tres, ahora que todos estamos en la versión tres, entonces el siguiente paso es entender los nuevos comandos Para recuperar una lista de los comandos Theme. En la versión tres, podemos verificar la documentación oficial o ejecutar el comando Shopify theme desde dentro de la propia CLI Lo primero que podrías notar es que ya no hay un comando de servicio. Este comando era lo que solíamos ejecutar nuestro código de tema localmente, pero ahora ha sido reemplazado por el comando dev, que funciona casi exactamente de la misma manera. La gran diferencia aquí es que no es necesario ejecutar primero un comando separado para iniciar sesión en una tienda. En su lugar, agrega la bandera de tienda al comando con la dirección de la tienda en la que desea iniciar sesión para golpear Enter. Y en cuanto estés autenticado, el CLI, empezaremos a servir ese tema Código Se puede ver esta diferencia así como algunas otras documentadas aquí en la Guía oficial de Migración. Y puedes ver la lista completa de comandos aquí en esta página. Animo a todos los que están migrando en este momento a que simplemente revisen la tabla de cambios de flujo de trabajo en la documentación Y una vez que los internalizas, debería ser fácil adaptarse a los nuevos cambios 7. Shopify CLI para el desarrollo temático en Online Store 2.0: En el video anterior, aprendimos a configurar Theme Kit. Pero desafortunadamente, Theme Kit no es compatible con el nuevo sistema de plantillas JSON presente en temas modernos. Para comprobar si tu tema usa plantillas JSON, puedes dirigirte a la sección temática de tu administrador de Shopify y hacer clic en “Editar código” en el tema que deseas inspeccionar. Entonces simplemente mire dentro del directorio de plantillas y vea si sus plantillas tienen.json al final de ellas o.liquid. Pueden ser algunos aquí que tienen.liquid en ellos en la sección de clientes y tal vez la plantilla de tarjeta de regalo. Pero si tus mayores tienen article.json, cart.json, index.json, pageproduct.json, si estos son todos.json, entonces estás trabajando con un tema que usa plantillas JSON. En este caso, querrás usar la CLI de Shopify en lugar de Theme Kit. Así es como hacemos eso. Lo que voy a hacer es volver a la sección temática aquí, y voy a abrir el artículo oficial sobre cómo usar Shopify CLI para temas. Voy a escribir eso literalmente en Google Shopify CLI para temas. Deberías encontrar este artículo sale hacia arriba hacia arriba. Haga clic en ese en el sitio web oficial del desarrollador de Shopify. Aquí puedes leer todo sobre Shopify CLI para temas. Shopify CLI ha existido desde hace un tiempo, pero sólo recientemente en el momento de la grabación permite el desarrollo de temas también. Como puedes ver aquí, Shopify CLI reemplaza a Theme Kit para la mayoría de las tareas de desarrollo de temas. Debes usar Shopify CLI si estás trabajando en temas de la Tienda Online 2.0. Eso son esencialmente temas con plantillas JSON. Bajemos y veamos cómo instalamos Shopify CLI. Sólo voy a abrir eso en una nueva pestaña para mantener esta abierta. Aquí puedes ver la guía para instalarlo. No nos adentraremos en la instalación en este video. Aquí te dejamos las instrucciones, dependiendo de si estás en una computadora Windows, Mac o Linux, solo asegúrate de tener Ruby 2.7 o superior instalado en tu computadora. Cómo se verifica que es abrir la terminal. Para la mayoría de los usuarios vas a usar la app Terminal. Pero tengo algo llamado Item, que es mi app terminal. Voy a ejecutar el comando ruby-v para descifrar mi versión. Como puedes ver aquí, estoy ejecutando Ruby 3.0.2, que es mayor que 2.7, así que estamos bien. Aquí puedes ver las instrucciones en Mac. Tengo instalado Homebrew, así que acabo de pasar por estas instrucciones de instalación y fue bastante fácil. Te daré un segundo para instalarlo, si aún no lo has hecho. Pausa este video y vuelve a él cuando hayas terminado de instalar. Para verificar que has instalado, solo tienes que escribir la versión de Shopify y debes recuperar un número de versión si tienes instalada la CLI correctamente. Ahora que tenemos instalada la CLI, cierra esta ventana y vuelve a nuestra guía de inicio. Voy a desplazarme aquí abajo a las referencias de comandos, cómo funciona Shopify CLI. Es un poco diferente a Shopify Theme Kit en el sentido de que Theme kit, tienes este único archivo de configuración, el config.yamlfile. Pasas a ese archivo una contraseña, un ID de tema, y la tienda a la que deseas conectarte y cómo se autentica es a través de una app privada, donde pones esa contraseña de la app privada en ese archivo config.yaml. Habrías visto todo esto en el video anterior así que si no sabes de qué estoy hablando, vuelve a ese. Pero cómo lo hace Shopify CLI es que autentican en un principio. Una vez que estés autenticado, puedes empezar a servir temas localmente. Cómo hacemos eso, voy a entrar primero en la referencia de comando core de Shopify CLI. Demos click en ese y miremos el inicio de sesión. Login te autentica a la CLI de Shopify. Este es el primer paso para básicamente hacer cualquier cosa en Shopify CLI. Algo importante a tener en cuenta aquí es que no puedes usar la CLI con tiendas de desarrollo si solo tienes acceso a miembros del personal asociado. Lo que eso significa es si voy a socios.shopify, que a menudo hago, y me conecto a la tienda a través de mi cuenta de socio, así que voy a ir a tiendas y luego ver aquí, tienda Chris Testing. Si hago clic en iniciar sesión a través de este enlace, estaré ingresado a través de la cuenta de socio y probablemente obtendré un error al intentar autenticarme con la CLI de Shopify. Eso es algo importante a tener en cuenta. Si estás trabajando con una tienda de desarrollo, no puedes usar tu login de pareja. Lo que debes asegurar en cambio, si vuelvo a mi tienda Shopify aquí y entro a mi configuración, es que estoy conectado con la cuenta de usuario admin o store. Al hacer clic en plan aquí, lo siento no plan, usuarios y permisos, puedes ver aquí que el dueño de la tienda es Chris Testing shop admin, y esa es la cuenta con la que estoy conectado como. Esto debería funcionar. Regresando a los temas de la tienda en línea, ejecutemos el comando de inicio de sesión de Shopify. Voy a volver a mi terminal aquí, correr claro para aclarar esos comandos anteriores y vamos a ejecutar Shopify login con el perímetro de tienda y luego solo copiamos la dirección de mi Shopify de la tienda. Voy a entrar aquí, copia eso. Pulsa “Enter” y empezará a iniciarnos sesión. Ahora logueado. Por lo general se abre una pestaña separada, creo que porque ya estoy conectado a la tienda. No se le ocurrió esa ficha, sino sólo para mostrarte. Entonces si cierre sesión, Shopify cierre sesión, ya puedes ver que he cerrado sesión con éxito la cuenta. Voy a despejar de nuevo y luego ejecutar ese comando, Shopify login con la dirección de la tienda. Golpea eso y verás que abre una nueva pestaña para que yo inicie sesión. De esta lista de cuentas de aquí, tengo que elegir la que es el dueño de la tienda, que creo es ésta y dice ahora autenticada con éxito, ahora puede cerrar esta página. Yo solo voy a buscar en mi terminal y puedes ver aquí dice que has ingresado a la tienda. Debería estar todo bien para irme ahora. Eso es todo lo que realmente necesitamos de los comandos core, login, logout. También puedes poblar tu tienda con datos. Mucha chísimas características frescas de esta herramienta aquí mismo. Te animo a revisar la documentación. Pero voy a ir hacia atrás y entrar en la referencia de comando tema ahora. El botón justo debajo de la referencia del comando core. Vamos a entrar aquí y puedes leer todo sobre los diferentes comandos. El primero, el tema Shopify en él esencialmente hace lo que dice aquí clona un repositorio de Git a tu máquina local y también crea una copia del tema de ejemplo Dawn. Si quieres iniciar el desarrollo del tema desde cero, este es un buen comando para usar. Pero lo que voy a hacer en su lugar es igual que lo haríamos en Theme Kit, me voy a conectar con un tema existente. El modo de hacerlo es a través de Shopify tema servir. Pero necesitamos el código de ese tema descargado primero en una máquina local antes de poder servirlo. Si vuelvo aquí, se puede ver a pesar de que esta tienda fue creada antes del 29 de junio de 2021, he instalado el tema Dawn. Este es el nuevo tema que utiliza el paradigma de la Tienda Online 2.0. Como vimos antes, es uno de estos temas modernos que tiene ficheros.json en la carpeta de plantillas, como se puede ver aquí. Eso es lo que voy a usar como mi tema en el que voy a trabajar con la CLI de Shopify. Lo que voy a hacer es igual que hacemos con Theme Kit, voy a encontrar el ID de tema de ese tema, que puedo encontrar entrando en el personalizador y agarrando esa parte de la URL. Ya tengo eso en mi portapapeles. Lo que voy a escribir aquí es uno de los comandos que puedes ver aquí, que es Shopify theme pull. Para usar este comando solo tienes que escribir Shopify theme pull y luego pones en este parámetro —themeid, seguido del ID del tema. Lo que voy a hacer es primero hacer un directorio dentro de este directorio de Skillshare. Puedo hacerlo a través del Comando en Mac, MKDIR. Ese es el comando para hacer un directorio. Voy a llamarlo igual que el tema, amanecer-principal. Ahora tengo que ejecutar el comando CD dawn-main para navegar dentro de eso. Desde aquí puedo ejecutar el comando. Voy a hacer Shopify theme pull —themeid es igual seguido del ID del tema, que parece haber perdido aquí. Simplemente voy a ir rápidamente agarrarlo de nuevo y golpear “Enter” en eso. Se puede ver que está sacando los archivos del tema de ese tema en particular. Tirar solo significa descargar. En unos segundos, veremos que eso va a terminar. Voy a adelantar rápido y nos encontraremos al final. Eso terminó de descargar ahora, así que voy a dirigirme a ese directorio. Ya verás en mi carpeta de Skillshare aquí, hay un directorio llamado amanecer principal. Ese es el que creé con este comando mkdir amanecer-main. Dentro de ella, puedes ver que tengo todo mi código temático. Ahora que estamos dentro de esta carpeta, podemos empezar a ejecutar el comando Shopify tema servir para servir ese código de tema localmente. Pero antes de hacer eso, porque vamos a estar editando algún código, voy a dejar de usar iTerm y empezar a ejecutar comandos dentro de mi aplicación de editor de códigos. Esto es un poco diferente, creo, de los videos originales de la clase. Pero ahora estoy usando una herramienta llamada VS Code proporcionada por Microsoft. Yo voy a abrir esa. Se verá un poco diferente a los otros editores de código de esta clase. Pero aún así, se aplican todos los mismos principios. Simplemente tenemos esta terminal aquí que podemos correr dentro del editor de código. Voy a despejar esta terminal igual que hicimos en iTerm y desde dentro, lo que voy a hacer es ejecutar el comando Shopify theme serve. Shopify tema sirven y mientras eso se está cargando, como pueden ver aquí, voy a entrar en la documentación y hablemos de lo que esto está haciendo. Se va a subir el tema actual. De donde esté corriendo tu terminal, si hay código temático ahí dentro, va a correr eso y va a crear un tema de desarrollo. Ahora bien, este es un nuevo concepto. El tema de desarrollo es como un tema Pseudo fantasma. Verás en tan solo un segundo que crea un ID de tema y podemos verlo y editar el código. Pero en realidad no lo verás en la biblioteca temática de tu tienda Shopify. Eso lo verás en tan solo un segundo. En cambio, obtendrás un enlace al tema de desarrollo y un enlace al editor en línea como acabo de mencionar, y un enlace de vista previa. Para todos los intentos y propósitos, obtienes todas las mismas características que un tema de vista previa normal, como si estuvieras usando y trabajando con temas en Theme Kit. Pero este se genera cuando ejecutas Shopify theme serve y desaparece cuando ejecutas Shopify logout como dice aquí. Por supuesto, el código temático sigue estando en tu computadora y también puedes empujar y publicar el código una vez que estés listo para salir a vivir. Pero lo veremos en tan solo un segundo. Si vuelvo ahora a mi editor de códigos, verás que el proceso ya ha terminado. Yo sólo voy a abrir una terminal para que veas más aquí. Se puede ver que está sirviendo a esta dirección local que podemos ver en el navegador. Lo interesante es que aquí puedes ver que tenemos un ID de tema. Se puede ver el enlace de vista previa tiene ese ID de tema y el enlace del editor de temas también tiene ese ID. Podemos entrar, podemos personalizar el tema como usualmente lo haríamos usando el mismo editor de temas que utilizaríamos en cualquier tema, y podemos previsualizar el tema usando este enlace y compartirlo con personas en Internet. Si compartimos con ellos este enlace, en realidad no podrán verlo porque se trata de un enlace local. Pero este de aquí es un enlace público que podemos compartir con la gente. Como puedes ver aquí, tenemos este extraño nombre de tema, desarrollo seguido de un pequeño código. Como mencioné antes, si entramos aquí a nuestra biblioteca temática, aunque refresquemos la página, el tema no aparecerá en nuestra biblioteca temática. Es como un tema desechable que tiene una identificación, tiene un personalizador, pero en realidad no se almacena en tu tienda Shopify. Si volvemos a ese enlace personalizador de tema, podemos, por supuesto, mover algunas cosas aquí y editar esto. Pero lo que es raro de este editor de temas en el tema de desarrollo es que no parece que estos cambios se almacenen fuera de esta sesión que estamos ejecutando. Si cambio a mi enlace local, verá que se produce el cambio. Estoy hablando de los cambios del editor de temas aquí. Verás que ocurre, pero cuando empujemos nuestros cambios de código de tema a la tienda más adelante, verás que esto en realidad no empujará a la tienda. Aquí podemos personalizar y jugar con el editor de temas, pero esto en realidad no ahorrará una vez que empujemos. Ten mucho cuidado con esto con la CLI. No estoy seguro de cuál es el pensamiento aquí de Shopify, pero lo he ido y probado y los datos en realidad no cambian donde debería. Esto es sólo todos los datos desechables. Voy a cerrar eso y voy a cerrar este enlace público hacia abajo así como ya no lo necesitamos. Simplemente voy a refrescar nuestro enlace de desarrollo local. Ahora lo genial de Shopify CLI en comparación con Shopify Theme Kit es lo que sucede con Theme Kit es que en realidad no está ejecutando un servidor en absoluto. Lo que hace es editar archivos directamente en tu tienda Shopify. Entonces tienes que, por supuesto, hacer clic en Ver o Vista previa en ese tema para poder ver esos cambios y todo se sirve a través de la tienda Shopify. Shopify CLI cambia esto ahora porque podemos servir ese tema localmente y lo que esto significa es que se actualiza mucho más rápido. Déjame mostrarte lo que quiero decir con esto, porque esto es un poco de selección de desarrolladores y para esos principiantes de ahí fuera, tal vez no entiendas del todo de lo que estoy hablando aquí. Pero si entro y hagamos una edición. Digamos que editamos esta barra aquí arriba. Estamos buscando anuncio-bar__mensaje. Solo voy a usar mi editor de códigos para encontrar esa pieza de código. En lugar de block.settings.text escape, sólo voy a poner en. Yo solo quiero mostrarles esto lado a lado para que puedan ver esto sucediendo. Cierra esto, cierra esto hacia abajo. Echemos un vistazo a lo que sucede cuando cambio este código. Cambiemos esto a Texto de barra de anuncio, algo genérico como eso. Voy a pegarle a Save ahora mismo y mira lo que pasa. Ya verás que sin que yo siquiera recargue la página por aquí, cambia. Es detectar cambios y actualizarlo aquí en nuestro servidor local. Ahora recuerda este tema no existe en nuestra biblioteca temática por aquí. Simplemente existe en nuestra computadora local. Por supuesto, tenemos estos enlaces aquí, podemos compartir con otras personas. Pero en realidad no estamos afectando el código sobre el tema de un tema que está almacenado en nuestra biblioteca temática aquí. Todo esto se sirve de manera local. Digo eso un montón de veces sólo para que se hunda. Pero verás con experiencia si aún no tiene sentido, qué significa eso si comparas el trabajo con Theme Kit en comparación con Shopify CLI. Voy a hacer otro cambio aquí. Vamos a cambiar el color de fondo de esta barra de anuncios a algo aleatorio como el azul. Hit Save en eso. Ya verás que eso también se actualiza. Ese es un cambio bastante obvio. Abramos de nuevo estos a pantalla completa. Lo que voy a hacer es empujar estos cambios a nuestra tienda Shopify. Volvamos a la documentación. En nuestros comandos temáticos, puedes ver este comando aquí para Push. Antes de hacer eso, sin embargo, también hay este comando aquí que podríamos querer ejecutar llamado Theme Check. Sólo hemos hecho un cambio muy menor. Pero si hemos hecho muchos cambios, tal vez queremos ejecutar este comando el cual revisará nuestro tema para detectar errores. Yo sólo voy a cerrar el servidor porque estamos listos para hacer que este cambio en vivo. Ejecutar Shopify Theme Check. Ya verás aquí hay un montón de ofensas. Mucho de esto no es particularmente crítico. Obviamente, estos errores probablemente se estaban ejecutando antes de que incluso hiciera esos cambios. No estoy seguro de qué quieres hacer con eso, pero esa es una opción. Si quieres ejecutar Theme Check, estoy seguro de que se le ocurren errores críticos. Si tienes alguno en tu código, mayoría de las veces ahora está bastante claro ver cuándo surgen esos errores en tu navegador. Pero lo que voy a hacer ahora es dirigirme a empujar y aquí puedes ver podemos subir temas locales a Shopify, anulando el tema remoto si se especifica. Podemos poner aquí un objeto de opciones, o simplemente podemos escribir Shopify. Creo que voy a volver a correr estos de lado a lado, para que puedas ver. Aumentemos el tamaño de esto. Voy a hacer un tema de Shopify, empuje. Aquí, si no especifico ninguna opción, en realidad me preguntará dónde quiero empujar este código. Puedo empujarlo a cualquiera de los temas ya en mi biblioteca temática, que es bastante cool. Voy a golpear Command o Control C para salir de eso y lo que voy a hacer es hacer Shopify Theme push —inédito. Golpea eso y ahora creará un nuevo tema en mi biblioteca temática para crear una nueva versión de este tema con. Empujará el código que he creado mi tema local en la biblioteca temática. Voy a llamarlo amanece-dos, solo llamémoslo así. Ahora, básicamente va a desplegar ese código a un nuevo tema llamado amanecer dos en mi biblioteca de temas en la tienda a la que estamos conectados. Eso tardará un poco de tiempo en completarse, así que los veré después de que eso termine completando. Ahora, dice que mi tema fue empujado con éxito y que ahora puedo verlo o personalizarlo. Pero también puedo dirigirme a mi tienda, ampliando mis ventanas aquí y refrescando en la tienda. Ya verás que tengo un nuevo tema llamado amanece-dos aquí. Si hago clic en Vista previa en eso, tiene todos los cambios que hicimos encima del tema del amanecer original que hicimos antes en este video. Esencialmente acabamos de crear un nuevo tema de vista previa. Último paso aquí, y esto no es realmente necesario usar la CLI para, pero también podemos usar la CLI para publicar temas también. Si vuelvo a mi terminal aquí, voy a ejecutar Clear y luego ejecutar Shopify theme, publicar sin opciones. Me va a preguntar cuál de los temas que no están publicados actualmente quiero publicar. Voy a seleccionar amaneca-dos aquí y me preguntó, ¿ estás seguro de que quieres hacer del amanecer dos tu nuevo tema en vivo? Si golpeo Sí, eso ahora completará ese proceso. Si vuelvo a la biblioteca temática y refresco la página, verás que amanece-dos es ahora mi tema en vivo, y amanecer-main ha sido derribado a mis temas de vista previa. Es así como usar la CLI de Shopify para el desarrollo de temas. Es un poco más complicado que Theme Kit, diría yo. Pero tiene características más modernas y es más amigable con los desarrolladores, así que tómese un tiempo para acostumbrarse. Si tienes alguna pregunta en absoluto, obviamente, déjala en los comentarios. Pero esa es la CLI Shopify. En los próximos videos, estaremos aprendiendo sobre algún administrador básico de Shopify y luego entrándonos en nuestra estructura temática. Después de hablar de nuestra estructura temática, entonces hablaremos más a fondo sobre estas nuevas plantillas JSON. Te veré en el siguiente video. 8. Organización de productos, variantes y personalizador: Antes de sumergirnos en este código y aprender cómo está todo configurado, hay una cosa más que falta tienda y eso son los productos. Una tienda en línea sin contenido no es muy buena, y el contenido principal que tendrías en una tienda en línea por su naturaleza son los productos. Aquí mismo puedes ver que al menos, Shopify te da algunos tenedores de lugar, pero si haces clic en estos, no son productos reales con los que puedas interactuar. Lo que vamos a necesitar son algunos productos. Ahora bien, si estás desarrollando tu propio tema de Shopify y solo estás siguiendo este curso para aprender más sobre cómo puedes personalizar tu tema. A lo mejor ya tienes algunos productos. A lo mejor ahora es un buen momento para agregar productos a tu tienda. Pero si solo estás aquí para aprender desarrollo de tema de Shopify, y no tienes un almacenado o trabajo en este momento, vas a necesitar algunos productos de demostración. Tan afortunado para nosotros, Shopify proporciona un pequeño conjunto de productos demo a través de su tema de madera. Si vamos y buscamos Shopify madera o tema de madera Shopify en Google, debería ser el primer enlace que surja. Voy a dar click en eso para darte un poco de contexto, madera es archivos ahora ya no está en uso, pero esto solía ser lo que ahora es Slate. Solía ser este tema de inicio que Shopify proporcionó, ahora usan Slate, que mencioné anteriormente, pero entraremos en más detalle en Slate y en video posterior. El motivo por el que te estoy trayendo aquí al tema del timbre repositorio de Git es que aún lo tienen arriba y tienen este archivo CSV para importar algunos productos a tu sitio web. Si descargamos este archivo CSV, ya lo tengo descargado ahí mismo, así que no lo volveré a descargar, y luego volvemos a nuestra tienda online. Entramos en nuestro menú de productos y hacemos clic en Importar, justo debajo de los productos. Podemos agarrar ese archivo. Haga clic en Subir, simplemente haga clic en Iniciar importación. Podría llevar un poco de tiempo ejecutar eso, pero cuando eso esté hecho, ahora verás productos importados, y tienes un montón de productos de ejemplo, todos ellos, básicamente zapatos. Si entramos en alguno de estos, podemos hacer clic en Ver. Abrirá una nueva pestaña en la que podremos ver la página del producto con este producto en particular cargado en. Ya tenemos una página de producto bastante bonita porque estamos usando un duplicado del tema debut, pero puedes editar esto tanto como quieras. Se puede tener el diseño diferente. Depende de ti, ahora tienes acceso a todo el código temático. Una cosa que tenemos es la entrada rompe con la varianza. Vamos a tener que volver aquí, y a la baja en varianza, sólo vamos a eliminar toda varianza. Al estar dirigiendo una tienda en línea, los productos son centrales para su tienda. Este video se va a centrar principalmente en los productos. Aquí en tu página de productos en el administrador de Shopify, tienes la capacidad de duplicar vista y promocionar. Se puede cambiar el título, la descripción. Aquí es donde agregas tus imágenes de producto. Bastante simple, bastante autoexplicativo, poniendo su precio, pero las partes de su página de producto en las que quiero entrar y discutir más sobre en esta lección son varianza y organización, por lo que tipo de producto, proveedor, colecciones y etiquetas. En primer lugar, la varianza. Una variante son básicamente las diferentes variaciones del producto. Empezarás a ver a qué me refiero con eso en tan solo un segundo. Si hago clic en Agregar variante, me da la opción de establecer un nombre de opción y una lista de valores posibles. Una bastante estándar es talla, y definitivamente es relevante para un producto como este, no todos van a querer el mismo tamaño de zapatilla. Lo que podemos hacer es poner en diferentes valores separados por una coma, y ya verás qué pasa cuando meto la coma. Si presiono 8, 9, 10, 11, 12, se puede ver que tengo este tamaño de opción y tengo cinco valores posibles. Entonces estoy diciendo que estos zapatos están disponibles en estas cinco tallas. Si vas aquí abajo, ha creado una tabla de varianza. Porque solo tengo una opción, y tengo cinco valores de opción, solo consigo cinco varianza porque solo se puede pedir el zapato en cinco variaciones posibles. Pero si fuera a añadir otra opción, digamos por color. Digamos que puedo conseguir todas las tallas ya sea en rojo o negro. Entonces de repente mi lista de varianza se expande y se duplica. Eso se debe a que necesitamos multiplicar el número de valores en un campo de opción con el resto de los campos de opción, eso te dará la cantidad total de posibles variaciones dado que somos capaces de tener rojo en nueve, negro en ocho. Todas estas diferentes opciones combinadas juntas crean varianza diferente. Podemos agregar un tercero aquí, dice material por defecto. No sé de qué material están hechos los zapatos. Vamos sólo con un algodón material común. Eso no va a aumentar la cantidad de varianza que tenemos aquí porque solo hay un valor posible, derrota todo el propósito de usar varianza si solo va a ser un valor, así que tenemos que poner más. Digamos, Lycra, probablemente no tenga sentido para los zapatos. Pero sólo se me viene con cosas de la parte superior de mi cabeza. Tres opciones es el máximo en Shopify. Si agrego más valores a todos estos, puede empezar a multiplicarse y salir de las manos con bastante rapidez y en realidad Shopify límites a ti también 100 varianza posible en cada producto. Esto obviamente depende de si tengo todas las combinaciones posibles en stock, y como ese producto disponible, ¿tengo zapatillas de algodón rojo talla ocho y zapatillas de deporte rojo-negro 10. Eso depende de mí averiguar qué variables o qué variaciones tengo en mi propia tienda, y ponerlas en. Esto es irrelevante, así que voy a quitar eso. Con estas diferentes opciones, va a crear 10 variantes para nosotros. El punto que quiero cruzar por aquí, y lo que me tropezó es, estas son la varianza aquí. Estas son tus opciones. Está bien. Estos son varianza, estos son. Si hago clic en Guardar en eso, verás que obtenemos esta bonita mesa aquí y podemos actualizar SKU aquí o agregar en variantes imágenes para varianza específica. También podemos filtrar selecciones haciendo clic en un valor de opción. Entra aquí y solo revisa los que queremos editar y editarlos a granel. Pero para ver qué aspecto se ve eso en el front end, qué voy a hacer, ya hemos tocado Save, así podemos hacer clic en View, y podemos ver cómo le va a quedar eso al usuario. Como se puede ver aquí en el front end, el usuario apenas consigue dos opciones, y yo la quiero en talla nueve, y yo las quería negras. Entonces se sumarán al código. Para nosotros, con el fin de cumplir con las necesidades del cliente que pueda tener estas opciones, vamos a necesitar todas estas en negro y todas estas en rojo, así que necesitaré 10 zapatos diferentes en total. Pero para el usuario, solo llegan a tener más opciones de personalización. Esperemos que eso despeje la varianza y lo deje bastante claro. Hay una cosa más que podemos hacer para proporcionar una mejor experiencia al cliente, y es usar imágenes variantes. Tengo una foto aleatoria de zapatos negros en mi escritorio. Lo que voy a hacer es hacer clic en Negro, y voy a actualizar imágenes para todos los zapatos negros. Doy click en Agregar imagen, y tengo aquí estas zapatillas Nike que son de color negro. Se los va a subir. Simplemente vas a tener que ignorar el hecho de que estos no son exactamente el mismo zapato. Si guardo la página y hago clic derecho en “Ver” y selecciono “Negro”, verás que cambia automáticamente a esa imagen del producto que representa esa variante. El tamaño va a verse casi igual, por lo que no tiene sentido, pero el color es un ejemplo perfecto de cuando cambias esto, quieres que cambien las imágenes de tus productos. Sólo funciona de una manera, me olvidó poner esto a Red, así que funciona al revés también, pero tú tienes el punto, ¿de acuerdo? En realidad, solo entraré ahí y lo haré ahora solo para ser minuciosos, actualizar imágenes de todo el rojo, y ponerlo como la imagen variante. El siguiente es Organización y las principales aquí son Colecciones y Etiquetas. Estas son las más importantes por mucho fuera de sus opciones de Organización. Estas son opciones adicionales de Organización que tienes para Tipo de Producto y Vendedor. Vendedor es un buen lugar para categorizar tu stock por la marca, así que tal vez quieras hacer el Vendedor de este, Nike, y Tipo de Producto, tal vez quieras ponerte zapatos. En mi experiencia, lo que he encontrado es Colecciones y Etiquetas son las principales formas en que puedes categorizar tu contenido. Hablando de la categoría de palabras, se puede pensar en Colecciones como categorías, pero a diferencia de las categorías en algún otro tipo de plataformas como WordPress, por ejemplo, con las que he trabajado en el pasado, no se puede anidar colecciones. Tienes que ser más estratégico sobre cómo anidas tus productos en diferentes categorías. En la parte superior de tu Organización la estructura debe estar Colecciones. Si voy a mi tienda aquí, asegurándome de que estoy en vista previa, y escribo en mis colecciones URL/todo, verás que hay una colección que viene por defecto con la plataforma Shopify y esa es la colección todo. No necesitas configurarlo en tu backend, en realidad no lo verás en tu backend, pero si vas a colecciones/todo en cualquier sitio web de Shopify, verás todos los productos que son públicos en ese sitio web. Podrás pasar y revisarlos. Esto, por cierto, está mostrando tu plantilla de colección, lo que nos meteremos en eso cuando nos metamos en código. Pero si vas a tus Plantillas aquí, el código que fijaste aquí, está enlazando a una sección, así que déjame entrar en esa sección, este es el código que se ejecuta cada vez que golpeas una página de colección. Ahora, obviamente, los productos y otras características podrían cambiar, pero eso es dinámico basado en el código que pones en este archivo de plantilla y sección. Lo sentimos, saltando un poco por ahí, solo quería hacer nota de que cada vez que veas una colección, estás viendo dentro de una plantilla de colección. Como acabo de mencionar, esta es una página de colección predeterminada automática que obtienes con cada tema de Shopify. Pero si queremos crear nuestra propia colección, podemos hacerlo entrando en el menú Productos y haciendo clic en “Colecciones”. Podemos ir Crear Colección y llamemos a este, productos destacados. Podemos agregar una descripción si queremos y luego seleccionamos el “Tipo de Colección”. Se puede agregar manualmente los productos uno por uno, y se puede hacer eso ya sea en el producto ellos mismos o aquí mismo, después de guardar, o se puede hacer Automático en base a ciertas condiciones. Puedes usar Etiqueta de Producto, Precio, Vendedor, Tipo, Comparar en Precio, Peso, para crear tu filtro personalizado y luego ponerlo en una colección. Podrías usar precio para tal vez mostrar todos los productos que están a la venta por menos de $10 y tal vez, esa es una colección que quieres crear. Pero para nuestros propósitos, solo voy a ir con Manual y voy a dar clic en “Guardar” y eso refrescará la página con el fin de que sumemos algunos productos. Puedes usar esto para buscar o puedes hacer clic en “Examinar”. Yo quiero seleccionar estos al final, definitivamente necesito seleccionar “Gnarly Shoes”, Dios mío, Good Old Shoes, oh sí. Yo quiero los Zapatos Locos, Dios mío, eso suena genial. Tenemos nuestros cinco productos diferentes en nuestra colección, y parece que eso se guarda automáticamente. Si voy y hago clic en “Ver” ahora en esa colección, obtendremos una página similar a la que vimos antes, pero ahora tiene nuestro nombre de colección personalizado, y tiene los zapatos o productos que agregamos a esa colección nosotros mismos. Ahora aquí mismo, tienes ordenar por y eso viene bastante estándar con la mayoría de los temas, pero podemos filtrar de nuevo usando etiquetas. Volvamos a nuestra zapatilla de deporte y en lugar de poner a Nike, que parece ser la marca, con este Nike marcado ahí, lugar de poner eso en Vendor, lo cual sería un buen lugar para poner una marca, digamos que queremos que sea una etiqueta porque eso es más fácil de filtrar y las etiquetas son muy poderosas como verás a lo largo de tu viaje de Shopify. Sólo pongamos a Nike como etiqueta. Voy a dar clic en “Guardar” en eso. Ahora, quiero que noten lo que le pasa a esta barra cuando actualicemos la página. Ya verás, podemos filtrar por etiqueta, y esto está integrado en nuestro tema. Podemos entrar aquí, filtrar de nuevo, y la otra cosa que quiero que noten es nuestra URL. Recuerda antes de ir a colecciones/todos, ahora estamos en colecciones/featuredproducts, que es el nombre de nuestra colección, y luego después de eso, tenemos Nike. En realidad podemos poner el nombre de la etiqueta en la URL. Si fuera a compartir esto con alguien, entonces ellos verían el mismo filtro. Es una forma bastante genial de filtrar tus productos y construir básicamente casi como colecciones anidadas. A pesar de que, este título todavía dice productos destacados, está filtrando por Nike aquí, lo que puedes ver ese feedback allá, pero esta es una forma de filtrar desde dentro de tus colecciones más grandes. Al final del día, también podríamos crear una nueva colección para Nike destacado. Podemos entrar en Colecciones, Crear una Colección y digamos, llamamos a eso destacados zapatos o productos Nike. Digamos que, en nuestra mente, es una categoría anidada de esa otra colección. Bueno, desafortunadamente, como mencioné, Colecciones no pueden anidar, pero lo que podemos hacer es establecer una condición que la etiqueta del producto debe igualar a Nike y luego podríamos configurar otra condición y etiquetar todos esos productos en la colección destacada con otra etiqueta que dice destacada, digamos. Hagámoslo ahora. Todavía no tengo eso, así que sólo voy a salvar a las Nike. Ah, aquí vamos, tenemos que quitar eso. Esto sólo va a mostrar todos los productos que tienen Nike en ellos, y puedes ver aquí es autopoblador, pero digamos que queremos todos estos. De nuevo, esto no es súper limpio, pero si entré en todos estos productos y luego les di una etiqueta de destacados. Si, sólo me voy a apresurar por esta parte. Ahora que he agregado la etiqueta destacada a todos los productos destacados, puedo entrar en productos destacados de Nike, agregar otra condición para etiqueta de producto ha destacado. Hit save. Ahora podemos ver que zapatillas impresionantes vienen a través porque se destaca y es Nike. Para volver atrás y aplicar esta misma lógica a nuestros productos destacados, tal vez queremos hacer esto automático. Afortunadamente, ya lo hemos configurado manualmente. Tendríamos que ir a borrar esa. Vamos a crear otra que se llame Colección Destacada. Cuando se destaque la etiqueta, incluiremos todos esos productos en la Colección Destacada. Ahora podemos entrar a Featured Collection que teníamos antes, pero ahora es automático basado en etiquetas. Y podemos filtrar por Nike. O si quisiéramos tener algún contenido personalizado, como tener una descripción o queríamos que cambiara este título, podríamos ir a cómo, creo que lo fue, volvamos atrás y solo podemos verlo desde dentro de aquí, Productos destacados de Nike. Como verás, esto es similar a esto, pero se acaba de configurar de una manera ligeramente diferente. Si tenemos una colección, hay más opciones disponibles para mostrar el título que aparece. También tenemos acceso al objeto de colección, lo que nos permite agarrar todos los productos dentro de esa colección. De nuevo, eso me está adelantando un poco. Pero puedes ver en la parte superior, las colecciones es una forma de organizar tu tienda. Siempre podrías simplemente organizar tu tienda solo con etiquetas, como si eso fuera posible. Pero la mayoría de los temas, tienen una página de colección y luego se filtra por etiqueta, que es la forma shopify estándar de hacerlo. Así es esencialmente como normalmente organizarías tus productos. Como dije, también se puede organizar por tipo de producto y proveedor, pero esto no es particularmente importante para nosotros. Tan solo otra forma en la que puedes filtrar y otras variables a las que tienes acceso dentro de tu código de tema. Pasé mucho tiempo en la página del producto. Aquí hay otros elementos de menú en el panel shopify, obviamente. Órdenes que realmente no van a tener mucho sentido hasta que alguien pida un producto. clientes son los detalles de las personas que han hecho un pedido contigo y analíticas puedes entrar y ver quién está usando tu tienda y cuántas ventas has hecho, marketing. Todo este tipo de relacionarse con el funcionamiento diario de tu tienda. No necesariamente relacionado con tu tema. Pero lo que quería hacer era entrar en productos porque los productos tipo de, eso es como el contenido de tu sitio web. Se relaciona mucho con el desarrollo del tema y por eso quería cavar un poco más en productos y colecciones. Volviendo a nuestra tienda online aquí, puedes ver que también podemos crear otro contenido a modo de publicaciones y páginas de blog. Ahora vamos a añadir una página más adelante en esta clase y una entrada de blog si has usado algún otro tipo de plataforma que haga blogging. Una entrada de blog es esencialmente una página con una marca de tiempo en ella y luego se pone en un feed que muestra primero el artículo más reciente. Estás familiarizado con un blog. Técnicamente, realmente es lo mismo que una página, pero sólo tiene un propósito diferente. También puedes entrar aquí, y aquí es donde actualizas tu navegación, que en tu código se llama lista enlazada. Puedes entrar aquí y añadir en un menú. No estoy seguro si nos metemos en eso en esta clase en particular. Pero ahora mismo se puede ver que estamos corriendo, qué menú voy a estar corriendo, el Menú Principal aquí. Entonces en nuestro personalizador que hemos establecido, es tirar en Menú Principal. Si entramos a la navegación aquí podemos ver que tiene Inicio y Catálogo, que es lo que tenemos ahí. Eso coincide. Dominios, preferencias. Preferencias que vimos antes cuando desactivamos la contraseña para el sitio. Aquí hay algunas otras cosas que puedes poner en código de Google Analytics o cambiar tus datos SEO. Pero lo último que quería terminar en esta lección en particular y la parte de tu tienda que más se relaciona con el tema, por supuesto, va a ser tu personalizador de temas. Ya pasamos por encima de este personalizador brevemente en una lección anterior. No quiero pasar demasiado tiempo repasando los mismos detalles. Pero esencialmente, mencionamos antes la Página de Colección. Puedes entrar y modificar aquí mismo es incumplible contar con los productos Nike. Pero podemos entrar, cambiar la grilla. Podemos mostrarle a los vendedores de productos y se va a mostrar los tets. No sé qué son los tets, pero esa es la alegría de los productos demo. Se puede mostrar la imagen de colección, que para esta colección no tenemos. Todo esto se configura dentro de una sección llamada Páginas de colección o en nuestro back-end, se llama Plantilla de colección. Te mostraré que todas estas opciones vienen a través de un esquema que aquí hemos escrito. Eso es solo para darte un adelanto de lo que está por venir en esta clase. Creo que esa es una bastante buena visión general de tu back-end Shopify. Obviamente, los productos son lo principal que tu sitio va a estar promoviendo y lo principal con lo que estarás interactuando, con tu código, será tu personalización de tu tienda generalmente va a estar por ahí presentando tus productos de la mejor manera con las mejores opciones, filtrando de una manera que tenga sentido para el usuario. Después tener buena navegación, lo cual es bastante autoexplicativo. Configurar buenas páginas para que esa navegación se vincule a. Si tienes una página Acerca o una página Contáctanos. Pero sí, ese tipo de cubre una visión general de la experiencia de la tienda online Shopify desde la perspectiva del vendedor. Ahora en los próximos videos, vamos a indagar en tu código temático. Entonces aquí es donde nos metemos en el desarrollo del tema real de Shopify o la personalización del tema porque no estamos desarrollando algo desde cero. Pero vamos a estar entrando en el código y cómo básicamente puedes editar cualquier cosa sobre tu tema y en realidad dónde encontrar el código que quieres ir y editar. Te veré en el siguiente video. 9. Código del tema: recursos, configuración e idiomas: Bienvenidos de nuevo a todos. En este video, por fin vamos a sumergirnos en nuestro código temático y hablar de lo que está pasando. Vamos a abrir nuestro editor de códigos, o si quieres seguir adelante en la sección de código de edición de tu tema, cualquiera está bien. Como mencioné anteriormente, te recomiendo que hagas todos tus cambios aquí. Pero solo por mirar el código, puedes mirarlo aquí si lo prefieres. Simplemente lo voy a ver en el editor de código porque ahí es donde vamos a estar editando, pero verás aquí que si contrato todas estas tablas de padres, tenemos activos, config, layout, localizaciones, secciones, fragmentos, y plantillas. Plantillas, fragmentos, secciones, y diseño son las principales carpetas de tu tema. son los que vas a estar editando para editar el look y la sensación de tu sitio web, lo que esperarías de un tema. Pero aquí hay otras carpetas de soporte importantes; activos, config, y locales. En esta lección, los vamos a cubrir primero, y después vamos a entrar a las principales, desglosarlas en las dos lecciones siguientes. Para empezar con los activos. Activos, si eres nuevo en el desarrollo web, cosas como imágenes, hojas de estilo y archivos JavaScript. Eso es realmente lo que tenemos aquí. Tenemos imágenes que usamos dentro del tema, podemos poner aquí. Tenemos archivos JavaScript. Este es para cuando haces tarjetas de regalo. Tenemos archivos SCSS y se puede ver que hay un.líquido al final ahí. El más importante de tu archivo de activos probablemente sería tu tema.scss.liquid. Algo con lo que puede que no estés familiarizado es una tecnología llamada SAS. SAS es básicamente un lenguaje de compilación CSS. Básicamente viene antes de CSS y nos permite hacer llamadas cosas como funciones, y variables, y anidar. Lo que hace es que compila o se transforma en CSS regular cuando o elegimos compilarlo, o, y esto es lo genial de Shopify, es que SCSS se compila para nosotros. Cuando ves un archivo SCSS, básicamente puedes poner en cualquier CSS que quieras ahí. CSS es retrocompatible con SCSS, pero esta es básicamente tu hoja de estilo de todo tu tema. Ahora, la razón por la que está got.liquid al final de la misma, es porque somos capaces de ponerlo en variables líquidas. Nos vamos a meter en líquido en un video posterior, pero puedo buscar esto aquí mismo. Aquí puedes ver que estamos cargando en algunas variables SAS con variables que se establecen en nuestro personalizador. También vamos a ver esto en un segundo en nuestra configuración. Pero la configuración aquí, el objeto de configuración global, es lo que es nuestra configuración temática. Si volvemos a aquí, esto va un poco demasiado profundo demasiado rápido, pero llegaremos allí. Si entramos aquí, así que vamos a la parte del personalizador de eso, entonces entramos en la configuración del tema. Aquí en ajustes texto de color, eso va a ser en colores, y probablemente va a ser uno de estos, probablemente el texto del cuerpo. Esencialmente es poner qué selección tienes aquí en tu personalizador dentro de una variable SAS. Entonces lo que puedes hacer en lugar de llamar a un color específico, puedes llamar a esto. Se pueden buscar usos de esa variable. Como se puede ver aquí, este es bastante normal CSS aparte de las variables SAS. Si no estás familiarizado con SAS, definitivamente recomiendo buscarla. No es demasiado complicado aprender si ya conoces CSS. Si estás abrumado por esto y no esperabas aprender SAS así como aprender desarrollo de Shopify, no te preocupes en absoluto, no tienes que usar SAS. Puedes lanzar CSS regular aquí. Si quieres pensar en esto como tu archivo CSS principal, puedes seguir adelante y hacer eso. No te preocupes demasiado por SAS si eres nuevo en ello. Pero si estás familiarizado con SAS o quieres aprenderlo, es genial que Shopify haga compilar SAS y te permita hacer cosas como te mostré dónde, veamos si puedo encontrarlo de nuevo, es demasiado difícil de encontrar, pero básicamente donde puedes establecer una variable en tu configuración de tema a una variable en tu hoja de estilos y luego llamarla en toda tu hoja de estilos. Muy cool. El otro es tu theme.js. Ahora bien, esto podría ser fácilmente tema.js liquid, pero con este tema, parece que no hay variables líquidas que se van a insertar en este archivo. Es sólo theme.js, y eso va para aquí también. Si no estás insertando ningún líquido en él, no tienes que pontar.líquido en el extremo. Esto va a contener todos tus temas JavaScript. Si no estás demasiado familiarizado con JavaScript, esto podría ponerse un poco grosero también. Lo mejor es dejar esto a menos que necesites cavar en el JavaScript. Aquí tienes algunas otras bibliotecas de JavaScript. Lazysizes es algo que muchos temas de Shopify usan con el fin de optimizar tamaños de imagen en diferentes pantallas. De nuevo, no necesitas preocuparte demasiado por lo que está pasando aquí. Lo que sí necesitas saber es que la carpeta de activos está ahí, y ahí es donde encuentras tu hoja de estilos, que probablemente estés editando, y tu archivo JavaScript. Continuando, tenemos otra carpeta aquí llamada config. Config es interesante porque sabes cómo hablamos de cómo se configuró ese texto en color en tu personalizador, en settings.colortext. Bueno, en realidad puedes buscar ese valor en tu setting_data. Si fuéramos a hacer eso, averíguese cómo se llama texto en color. Si copio eso y entro en nuestros datos, realidad puedo encontrar dónde se establece eso. Aquí, se puede ver que hay trece de ellos. Echemos un vistazo. Actual. Aquí en actual, que es lo que estamos usando en este momento, se puede ver que el texto en color está establecido en este valor específico. Pero si fuéramos a entrar y cambiarlo aquí, se va a actualizar en ese tema settings_data.json. Todos los datos en Shopify están configurados en formato json, así que eso es J-S-O-N. Nuevamente, si eres nuevo en el desarrollo web, eso podría ser algo con lo que no estás familiarizado, pero es bastante simple, anidas dentro de estos corchetes rizados. Digamos por ejemplo, que querías llegar a current.colortext, entrar en corriente, entrar en texto de color, y ahí lo tienes. Cosas bastante simples. En settings_schema, esa es la capa que se sienta fuera de qué datos tienes aquí dentro. Aquí tienes el valor para texto en color, pero en tu esquema, lo estableces como un valor que los usuarios pueden editar dentro del personalizador. Como puedes ver aquí, ajustes, Id, color_text, esto es lo que lo configura como una opción de personalización, y el tipo es una selección de color. Para mostrarte, si fuéramos a borrar esto por completo, esta opción, verás que ya ni siquiera aparece en el personalizador. Presiona guardar en eso. Miraré el reloj temático. Por cierto, si cometiste algún error, debería venir aquí. Definitivamente mantener un ojo en esto. Si hay algún error, en realidad no compilará y enviará hasta la tienda. Pero si quiero refrescar aquí al editor y dirigirme a mi configuración de tema, entrar en colores, se puede ver que el color se ha ido, y en realidad no era el texto del cuerpo, era el que estaba encima. No puedo recordar cómo se llamaba esa, pero si traemos esto de vuelta, se puede ver que la etiqueta era encabezamientos y enlaces. Si guardo eso, lo que he hecho, se va a volver a subir. Refresca la página, el tema , la configuración, los colores, y ahí tienes, esa opción está ahí de nuevo. Esta es una primera introducción a los esquemas para nosotros. Básicamente tenemos un esquema gigante que se sienta encima de todo el tema con un montón de configuraciones diferentes, y esto refleja lo que tenemos en nuestra configuración temática. Esto es como el desarrollador backend JSON representación de todos los datos que tenemos aquí dentro. Podría incluso cambiarlo aquí, y se actualizará por aquí en nuestro tema real. O puedo cambiarlo aquí, y eso se actualizará en nuestro tema aquí. Ambos están atados juntos. Ahora, cuando eliminé esto antes y lo traje de vuelta, te darás cuenta de que todavía tiene ese valor. Ahora, ese probablemente sea el valor predeterminado que se establece aquí. Pero aunque no lo fuera, aunque no hubiera valor por defecto, los datos aún guardan. Si entras en tu esquema y borras algo como lo hicimos, en realidad no elimina los datos también, y tal vez quieras eliminar eso. Pero normalmente cuando estás haciendo desarrollo de temas, esto es específico de la tienda y no necesariamente quieres editar este material. Por lo general dejaría en paz estas cosas. Sí es útil cuando tal vez estás migrando una tienda y has hecho algunos cambios en la configuración, es posible que quieras copiar esas configuraciones que están todas enumeradas aquí cuando realices esos cambios. Si eso fue un poco abrumador o se fue un poco por encima de la cabeza, no te preocupes demasiado. El principal motivo para saber de estas cosas es, digamos por ejemplo, si querías crear tu propio entorno. Si quisieras crear tu propio entorno, podrías venir aquí, tal vez quieras crear otro tipo de texto en color. Podrías simplemente tirar eso ahí, cambiar el nombre del ID, cambiar la etiqueta, y luego de repente tendrías eso en tu lista de opciones aquí y luego dentro de tu código, podrías referirlo igual que teníamos en nuestro ejemplo aquí. Puedes hacer referencia a esa nueva variable que estableces en cualquier lugar dentro de tu plantilla. Ese es el verdadero beneficio de tener aquí el esquema para editar. Puedes crear ajustes de tema a partir de este archivo y luego éste solo almacena tus datos. Probablemente no deberías necesitar cambiar nada aquí a menos que quisieras hacer una migración y no quisieras tener que pasar y actualizar todos estos valores diferentes tú mismo a través del Personalizador. Final uno y luego pasaremos a lo real como archivos de diseño es Locales. En Locales, básicamente son tus idiomas. Si volvemos a nuestra tienda online y en la sección temática, click en acciones y editar idiomas, podemos ver una interfaz de usuario para que cambiemos todas las opciones de idioma. Ahora, ¿cuáles son estas opciones de idioma? Bueno, si miramos a través de nuestro código, así que vamos a entrar, sólo vamos a elegir cabecera y podemos ver aquí un montón de ellos ya. Podemos ver {layout. navigation.search} y luego podemos ver este símbolo de pipa aquí con ' T.' El 'T' básicamente dice, filtrar por lenguaje. Por qué eso es importante es, lugar de codificar duro en valores aquí, podemos configurarlos en idiomas y luego podemos traducirlos. Esperemos que esto tenga sentido, podría dar un ejemplo más adelante en la clase, pero veamos uno más obvio, solo con fines de demostración. Uno común es el lenguaje del carrito. Si hago click en lo voy a hacer con mi cliente, bien podría hacerlo aquí. Si entro aquí y veo tu carrito en la plantilla de cuna. Déjame entrar en plantillas, carrito y enlaza directamente a una sección llamada plantilla de carrito. Voy a entrar a esa sección. Si trato de encontrar tu carrito, no está ahí, no lo puedo encontrar y la razón por la cual es porque tu carrito está configurado en la configuración de idioma, así ves aquí tu carrito. Si quisiéramos cambiar esa etiqueta, podríamos entrar aquí, encontrar donde se encuentran las variables del lenguaje. Creo que es éste {carrito. General. Título}. Entremos y cambiemos eso. Voy a deshacerme de esa etiqueta líquida y sólo poner, > este es el carta<. Voy a guardar eso, comprobar que todo está funcionando bien con kit de tema y luego [inaudible]. Déjame solo hacer clic en él desde aquí, asegurándome de que estamos en el tema correcto. No es esa, así que obviamente hemos editado la equivocada, pero en realidad puedo encontrar lo que es [inaudible] aquí. Este es el archivo del idioma inglés y estamos corriendo inglés en este momento como pueden ver y si iba a ir a buscar título. Déjame solo buscar carrito y ellos tendrán título general, tu carrito. Necesito encontrar ese carrito título general. Algún título de producto, lo siento, hay algunos usos de la palabra título aquí. Parece que estábamos editando el correcto, pero simplemente no tenemos ningún artículo en nuestro carrito por eso este encabezado en realidad no está apareciendo. Solo agreguemos algo a nuestro carrito para demostrarlo, así que aún no tenemos productos enteros mostrando en una página de inicio, pero podemos ir a la colección antigua. Vamos a añadir esto a nuestro carrito. Ahora estamos en nuestra página de carrito y como puedes ver, el texto que ponemos, este es el carrito se está mostrando. Obviamente podemos meter valores de código en nuestro proyecto aquí mismo. Tan solo para mostrar esto es el carrito del carrito para dejarlo en claro, como estoy editando esta página en particular. Yo lo estoy editando aquí mismo, no queremos hacer eso y la razón por la cual es, si cambiamos a decir, por ejemplo, alemán y ofrecemos este sitio web también en alemán y queremos tener cierto idioma que sea fácil traducido a ese idioma para venir a través y estar en ese idioma, se va a llegar con este es carrito de carrito mientras todo lo demás se ha traducido. Por eso utilizamos idiomas. Si digamos por ejemplo y puede que no te importen otros idiomas, puede ser que solo estás anunciando al único mercado. A lo mejor no nos importan en absoluto los idiomas, pero aún así, es una mejor práctica usar estas variables. Entraré aquí y En lugar de cambiar eso en el código aquí, voy a actualizar la variable. En lugar de tu carrito, pon, este es carrito de carrito. Yo sólo estoy haciendo realmente obvio que lo estamos cambiando. Porque nadie diría que esto es carrito de carrito, bastante obviamente. Si actualizamos la página se le ocurrirá este es carrito de carrito. Esencialmente el mismo resultado, pero solo una mejor práctica para tener todas estas palabras comunes en un archivo en tus locales, luego llamar a esa variable dentro de tu plantilla. Ya verás aquí usamos mucho lenguaje estándar y te podría tropezar un poco si no supieras de estos archivos de idiomas porque podrías entrar y ser como, bueno, quiero cambiar este texto. Vamos a refrescarlo de nuevo, vuelta a su carrito. Ya sabes, te podría tropezar si quieres seguir, bueno, quiero cambiar esa palabra en mi tema de Shopify. Déjame buscar tu carrito en plantilla de carrito. Qué demonios, no lo encuentro. Al igual, ¿cómo voy a cambiar esto? Por eso necesitamos hablar variables de lenguaje porque si quieres cambiar algo así, vas a tener que cambiarlo aquí. Todo codificado, como dije, codificación dura no es la mejor práctica. Si quieres cambiar el lenguaje así, ese estándar a través del tema, cámbialo aquí y si alguna vez en el futuro, cuando lo traduzca a un idioma diferente, tienes estos otros archivos aquí. Se puede ver carrito título general y esto es lo que es en inglés. Si entramos en esto que creo que es alemán, puedes ir carrito título general y ese valor sobre un alemán [inaudible] va a ser esta palabra en su lugar, que ni siquiera intentaré pronunciar porque se ve duro y no hablo alemán. Eso es locales, eso es config y eso son activos. A lo mejor me apresuré un poco a través de esto porque hay mucho que cubrir con temas de Shopify, pero esencialmente, aquí es donde guardas variables relacionadas con el lenguaje. Aquí es donde se almacenan datos de esquema o como datos Configuración general y aquí es donde se definen qué opciones están disponibles en su esquema, que se traducen directamente a su Personalizador. Por último, revisar los activos. Activos es donde pones tu hoja de estilo, archivo JavaScript y cualquier imagen u otros archivos que necesites llamar en los activos de Frontend que ayudarán a que tu tienda se ejecute. Pero de nuevo, no deberías tener que editar ninguno de estos, es solo tema. SCSS. líquido que es el más importante porque inevitablemente vas a querer cambiar algo de CSS en tu página. Se puede hacer eso usando líquido, se puede hacer eso usando SAS. Pero también puedes simplemente poner en simple CSS viejo que funcionará para, todas esas opciones están disponibles para ti. En el siguiente video, me emociona meterme en las otras partes de tu plantilla temática. Espero verlos en el siguiente video. 10. Código del tema: disposición y plantillas: Para prepararnos para las siguientes dos lecciones sobre la edición de nuestro código temático, he cerrado un montón de pestañas y ahora solo tengo mi tienda, mi cuenta de pareja y este diagrama que me he preparando para desglosar lo que está pasando con nuestro tema. Ahora bien, esto podría parecer nula, pero debería proporcionar una buena visión general de cómo funciona todo. Esencialmente, tenemos estas cajas de colores y éstas representan más bien las cuatro secciones principales de las que vamos a estar hablando. Si volvemos a nuestro código, secciones, fragmentos, plantillas, y diseño. En la parte superior, este es el punto de entrada. Cualquiera que entre a nuestra página web, van a conseguir el layout. Entonces dentro del diseño, podrías tener fragmentos por lo que tienes esta línea bajando aquí. Es posible que tengas secciones de hecho, es muy probable que tengas secciones. Dentro del contenido para layout, que está en medio de tu layout, obtendrás una plantilla. Estas líneas muestran el flujo de la estructura de plantillas. En la parte inferior tienes secciones aquí, luego las secciones fluyen en esta plantilla, pero también pueden fluir en diseño que también pueden fluir en contenido para índice. Entonces tienes esta plantilla que fluye hacia el diseño. Por lo que el diseño se sienta en la parte superior. Tratando de encontrar otra palabra que no sea diseño, pero básicamente es la estructura que se sienta en la parte superior de cada página. Entonces te sirven la plantilla y luego las secciones son realmente geniales piezas dinámicas de código, secciones dinámicas que podemos poner en nuestra página de inicio, tirar a nuestro diseño, tirar a nuestra plantilla, y luego los fragmentos son solo bits de código reutilizables que básicamente podemos lanzar de todos modos. Ahora tengo estas nubes aquí también. Yo lo convertí en una nube porque es contenido dinámico. En realidad no podemos editar una plantilla de tema para contenido de encabezado o contenido de índice. Vincula a diferentes partes de tu tema con esta doble línea. El doble renglón es sólo para significar un vínculo dinámico. En tu diseño, se está vinculando al contenido del encabezado, que debido a que se denota con una Nube es comunicando que en realidad no podemos editar esto específicamente, pero es una capa de salida. Lo mismo para el contenido para el índice. En realidad esta línea aquí probablemente no debería estar aquí. Esto es sólo en una plantilla específica, la página de inicio. Por lo que podría borrar ese enlace. Pero como pronto verás, y algo que he tocado brevemente es que el contenido para índice es lo que se sienta en tu página de inicio y puedes agregar en secciones dinámicamente. Este diagrama podría parecer un poco nula al principio, pero después de estas dos lecciones esperemos que la relación entre todas estas partes tenga un sentido bastante claro. En este video vamos a hablar de diseños y vamos a hablar de plantillas, y luego vamos a romperlo por lo que en la siguiente lección hablamos de secciones y fragmentos. Empecemos en el punto de entrada. Vayamos a previsualizar nuestro tema. Cuando el usuario llega a nuestra tienda, se les presenta esto que es una mezcla de todo lo que tenemos aquí. En primer lugar, se va a golpear un archivo de diseño. Por eso el diseño, si volvemos al diagrama, se sienta en la parte superior. Vamos a entrar a nuestra foto de diseño. Por lo general solo tienes un diseño y es tema.líquido. Como verás en este video, somos capaces de crear nuestros propios diseños, pero el diseño estándar es teme.liquid. Si no has establecido un diseño personalizado, se va a ir al tema.liquid. Asumamos que no has establecido un diseño personalizado. Se va a ir tema.líquido. Este es el código que generará lo que ves aquí. Eso va para no sólo la página de inicio, va para casi todas las páginas que no tienen un diseño alternativo. Esta es la piel que se ejecutará en cada página de tu sitio web. Pero como veremos, aquí hay algunos bits dinámicos de contenido. Tenemos etiquetas líquidas como puedes ver aquí, cuales son denotadas por los dos corchetes rizados que terminan en corchetes rizados. Hay otro que podrías ver que tiene en lugar de dos corchetes rizados, corchetes rizados y a, ahí vamos. Corchetes rizados, signo de porcentaje, y un guión para eliminar el espacio en blanco, vamos a entrar en líquido y cómo funciona en un video posterior. Pero yo sólo quería pasar y vamos a ver donde esta página enlaza a otras partes de nuestro tema. Tenemos algo de lógica líquida aquí. No te preocupes demasiado por eso. Lo que busco es este primer contenido de etiqueta para encabezado. Básicamente poniendo contenido para encabezado aquí justo antes de la etiqueta de cabeza de cierre, lo que está diciendo es tomar lo que tengamos y ponerlo justo aquí. De nuevo, aparentemente no puedo editarlo, podría ser difícil entender lo que realmente entra aquí, y es por eso que he escrito esta caja aquí. Esto es de acuerdo con la documentación de Shopify, ese contenido para cabecera de variable debe colocarse entre las etiquetas de apertura y cierre. Inserta en la cabeza los scripts necesarios de Shopify, que incluyen scripts para Google Analytics, Shopify analytics para aplicaciones Shopify, y más editables en preferencias. Eso responde a la pregunta de a dónde iría yo a editar eso? Para que pueda entrar, dar click en Preferencias. Entonces cosas como código de Google Analytics. Si tuviera algún código de Google Analytics, lo pegaría aquí. Eso entraría dinámicamente en contenido para encabezado. Entonces con esta etiqueta líquida, básicamente controlando hacia dónde va en nuestro diseño de líquidos. Pero es algo con lo que realmente no deberías meterte. Solo te estoy haciendo saber que ahí es donde se inserta. Realmente no tiene sentido moverlo porque necesita estar en esa etiqueta de cabeza. Bajando por la página, podemos ver esta palabra incluir e incluir seguida de una cadena aquí. Lo que eso está haciendo es incluir un fragmento. Si entro en la carpeta Mis fragmentos no vamos a estar cubriendo fragmentos en este video, pero puedes ver si busco la búsqueda de iconos bajando, aquí hay muchos iconos diferentes. Justo ahí está. Es solo un archivo SVG, pero básicamente puedo incluirlo en cualquier lugar que quiera sobre todo mi tema. Volviendo al tema.líquido. Déjame desplazarme hacia abajo de nuevo poniendo en include y luego el nombre del fragmento. Volviendo al diagrama, se puede ver que podemos incluir fragmentos en cualquier lugar de nuestro código temático, diseño, plantilla o secciones. Por eso la línea enlaza con esos tres. Si nos desplazamos hacia abajo por la página, podemos ver otra palabra clave aquí, que es sección. Al igual que incluir, podemos traer en la sección de encabezado mediante el uso de la palabra de sección. Por lo que Incluir para traer un fragmento, sección para traer una sección. Si entramos en nuestra carpeta de secciones, debería haber un archivo llamado header.liquid. Recuerda que no tenemos que usar el.liquid para llamar a un fragmento de sección o plantilla, solo ponemos la palabra sin el.liquid. Liquid sabe lo que estás tratando de hacer. Como puedes ver, tenemos otra sección aquí, y en el medio, tenemos esta otra etiqueta líquida dinámica llamada contenido para maquetación. Volviendo a mi diagrama aquí, podemos leer qué es el contenido para el diseño. El contenido para la variable de diseño debe colocarse entre la etiqueta de cuerpo de apertura y cierre. Emite contenido dinámico generado por todas las demás plantillas. Index.Líquido, producto.líquido y así sucesivamente. Como puedes ver, tengo esta caja entre diseño y plantilla. Eso se debe a que aquí es donde entra la plantilla. Si entramos en nuestras plantillas aquí, el código en estas plantillas se cargará aquí. Podría estar preguntándose, bueno, ¿cómo sabemos qué página cargar aquí? La respuesta es, depende de la URL en la que te encuentres. Si estoy aquí y voy a colecciones.todos, como lo hemos hecho de antemano. Todavía estoy en el diseño del tema. Todavía estoy en este archivo de diseño. Pero entonces una vez que golpeo contenido para el diseño, ve que estoy en una página de colecciones. Cargar la plantilla de recolección. Estamos en la plantilla de colección ahora mismo. Como ves, aquí casi no hay nada aparte de una sección. Entraremos en más detalles o más razones para por qué eso es en el próximo video. Pero esencialmente la razón principal por la que, y si profundizamos brevemente en esta sección, es porque queremos que toda la sección sea personalizable usando un esquema. Podemos establecer un montón de opciones aquí, y luego podemos usar eso dentro del código. Si alguna vez tienes curiosidad de por qué tendrías un archivo de plantilla y luego de repente lo tienes vinculado a solo una sección, ¿por qué es ese el caso? Por eso. Porque en nuestras plantillas no tenemos un esquema para editar nada. Como te mostré antes, si entramos en el personalizador, así que me voy a salir de las preferencias y voy a dar clic en personalizar en nuestro tema. Voy a ir a la página de recolección. Se puede ver aquí que tenemos este bloque de sección aquí. Por lo que somos capaces de editar configuraciones dentro de esta colección. También podemos agregar en una sección aleatoria si quisiéramos, lo cual haremos solo en un segundo, o podemos eliminar esto por completo y no hay contenido en el archivo de plantilla. Pero sólo para demostrar si iba a deshacerme de esta sección y solo tal vez poner un div aleatorio. A lo mejor aún traigo el contenido de colección porque estamos en la plantilla aquí. Para que pueda traer una colección. No voy a hacerlo, sólo voy a teclear hola. Sólo para demostrar. El reloj temático está funcionando bien. Voy a previsualizar el tema para que no tengas que salir del personalizador. Ir a esa página otra vez, colecciones.todo. Ahora se puede ver que tenemos sólo Hola. Estás bien, eso tiene sentido, pero ahora si entramos en páginas de colección en nuestro personalizador, verás que solo tiene contenido de colección. Aquí no hay una pequeña sección para que entremos y editemos ajustes. Esperemos que eso lo haga un poco más claro por qué solo enlaza directamente a una sección. Nos da la capacidad de entrar en una pestaña aquí mismo y no solo tener nuestro contenido ahí dentro, sino que también tenemos opciones para editarlo desde dentro de aquí también. Eso cubre más o menos el diseño. Si volvemos a líquido. Puedes leerlo aquí en el código en sí o puedes echar un vistazo al diagrama, pero las principales etiquetas líquidas que tienes son el contenido del encabezado, contenido para el diseño por aquí y los fragmentos o secciones que quieras incluir en tu diseño también. Voy a demostrar diseños alternativos en tan solo un segundo, pero hablemos más de plantillas. Mostramos un ejemplo rápido de la página de colección, pero lo que quiero hacer es crear una plantilla para About page. Vamos a entrar en nuestras plantillas aquí y como puedes ver, tenemos página, tenemos contraseña, productos, búsqueda. A lo mejor quiero crear una nueva página. Déjame entrar en mi back-end aquí, click en páginas, agregar una página y esto debería parecer bastante familiar. Es bastante similar a los productos, es solo título y contenido. Voy a poner en Sobre Nosotros y voy a generar algo de Lorem Ipsum sólo para llenarlo. Yo sólo voy a buscar un generador aleatorio Lorem Ipsum, solo agarra un montón de texto ficticio para ponerlo ahí. Voy a dar clic en Guardar y lo que quiero que noten aquí, porque es una página, tenemos el sufijo de plantilla de página, eso es por defecto. Si vamos y hacemos clic en Ver página, puedes ver aquí que una vez más, está cargando nuestro diseño temático, que va a suceder en cada página a menos que especifiquemos lo contrario y luego porque es una página, está cargando esto. Entonces dentro de aquí, tenemos nuestro contenido dinámico, que acabamos de montar en nuestro back-end aquí, un título y contenido. Se puede ver aquí entre las etiquetas h1 es título y en nuestro div aquí está el contenido. Podríamos cambiar esto hacia arriba, podríamos estructurar esto como tú lo desees. A lo mejor queremos llevar esto aquí y la primera línea que queremos decir, esta es la página para Guardar eso y volvemos a aquí y se puede ver esta es la página para Acerca de Nosotros y luego continúa con el contenido. No muy práctico, pero puedes ver aquí, podemos tomar esas dos variables y podemos usarlas como queramos, esto es totalmente personalizable. Pero quiero mostrarles un ejemplo más práctico, y eso es poder incluir una sección en esta plantilla. Para eso, voy a crear mi propia plantilla personalizada. Yo puedo hacer eso yendo, Nuevo Archivo, y así es como crearías una plantilla de página alternativa. Haces página, luego colocarías un punto después de eso, y luego ponías en nombre de tu suplente. El mío va a ser Sobre y entonces por supuesto necesitas terminar con.líquido. Si una página sobre, voy a copiar exactamente el mismo contenido que la página, pero voy a hacer un cambio y es decir, quiero traer una sección de mapa. Si miramos aquí en nuestras secciones, tenemos esta sección llamada mapa. Como te mostraré en un video posterior, las secciones son geniales porque podemos jalarlas a cualquier área de nuestra página web a través de plantillas. Voy a agregar en una sección como vimos antes, el mapa de secciones, presione Guardar y ver si eso funcionó. Ahora va a haber un proceso de dos pasos para cambiar esta página a la plantilla About Us. Esto es lo que esperarías que sea el comportamiento. Esperarías poder entrar aquí y simplemente cambiar tu About. Lo tienes en tu código de tema. Deberías poder entrar aquí y actualizar ese sufijo de plantilla. Bueno, el gotcha aquí y algo que sólo vas a tener que recordar que hacer si alguna vez te atrapan en este paso, es que la plantilla alterna necesita estar realmente en el tema en vivo también. Esto no es un problema, es sólo un paso extra. Si entramos en nuestro tema actual, haga clic en acciones, haga clic en editar código. Podemos crear una plantilla del mismo nombre y no tiene por qué tener el mismo contenido. Simplemente tiene que tener el mismo nombre para que podamos seleccionarlo desde dentro de esa zona de administración. Sé que esto suena tonto, pero esto es lo que tienes que hacer dentro de Shopify, porque este menú de página aquí, esto es para todo. Esto no cambia las páginas, las entradas de blog que tienes en tu sitio en base a qué tema tienes. Eso responde a la pregunta por qué no está relacionado con el tema que has publicado porque va a sacar las plantillas del tema publicado. Nuevamente, creo que debería tener todas las plantillas que están disponibles en todos los temas, pero no es así como funciona Shopify. De todos modos, solo un poquito de gotcha y la forma en que podemos movernos eso es crear lo mismo, pero usamos esta interfaz de usuario aquí en el sitio web de Shopify y lo que podemos hacer es simplemente elegir página y el se llama a alterna, y luego Shopify lo van a crear con el nombre correcto, página.acerca de.líquido. Una vez hecho eso, podemos refrescar la página y podemos bajar aquí al sufijo de plantilla y tenemos esa página.about. Voy a dar click en eso, click Guardar. Ahora, cuando volvamos a nuestra página Acerca de Nosotros, tendremos una sección de mapa debajo. Mira eso, ¿no es genial? Ahora, lo que también tendremos porque queremos poder personalizar esto. Desafortunadamente, no podemos personalizar la sección dentro esta página desde dentro de nuestras páginas porque sólo podemos editar título y contenido, pero lo que podemos hacer es encontrar esta plantilla en nuestro personalizador de temas haciendo clic aquí. Desafortunadamente no está ahí, sólo vamos a refrescar la página. Vuelve a dar click ahí y como puedes ver, tenemos esta nueva sección aquí para páginas con About Us. Ahora podemos entrar y vemos esta sección aquí, en realidad podemos entrar y editar la sección. Store es la tienda Skillshare o como quieras llamarla en Fake St. Toronto, Canadá y puedes agregar una imagen ahí o lo que quieras hacer. Ese es un gran ejemplo de tal vez quieras insertar una sección en una determinada página. No quieres que suceda en todas las páginas así que creas una plantilla alternativa y luego puedes llamar a esa plantilla alterna en cualquier página. Ahora recuerda, dije que también hablaría de diseños alternativos porque ¿de qué sirve tener este archivo de diseño aquí en una carpeta si no puedes cambiar el diseño? El modo en que hacemos eso también está en la plantilla de página. Llegamos a usar un poco de líquido al inicio de la plantilla. Vamos a usar un poco de líquido al inicio de nuestra plantilla para llamar al layout que queremos usar. Como dije, por defecto es tema.líquido, pero podemos elegir otro si así lo elegimos. Lo que voy a hacer es que puedo hacer esto en cualquiera de los dos ordenes. Este es probablemente el orden al revés de hacerlo, pero lo que puedo hacer es que primero puedo escribir la etiqueta y luego crear el diseño. Voy a llamar a esto desnuda, y la razón es que voy a quitar un montón de cosas del tema estándar.líquido. Voy a crear un duplicado de eso y en lugar de teme.liquid, voy a llamarlo naked.liquid y voy a quitar el encabezado y pie de página. No me preguntes por qué estoy haciendo eso. Sólo lo estoy haciendo con fines de demostración. Si presiono Guardar en eso, si vuelvo aquí, no hay errores y refresco la página porque recuerda que ya estamos usando esta plantilla. Ya verás que el encabezado y el pie de página han desaparecido y eso se debe a que he señalado esta plantilla en particular para usar el diseño de desnudo. Aquí mismo establecemos un layout alternativo basado en el tema.liquid, que es el layout estándar. Quitar el encabezado y el pie de página de eso. Ahora somos capaces de actualizar el diseño en esta plantilla en particular. Esos son básicamente los puntos principales con plantillas temáticas y diseños temáticos. Terminando en el diagrama aquí, ojalá este diagrama empiece a tener un poco más de sentido ahora. Tenemos el contenido del encabezado que proviene de las preferencias y otras áreas entrando en nuestro diseño. Tenemos el contenido para el layout, que trae en la plantilla y luego podemos pegar secciones ya sea en la plantilla o en la maquetación y también podemos meter fragmentos en donde sea. En el siguiente video, vamos a ir más abajo de la cadena aquí, hablar de secciones y fragmentos. Los fragmentos son bastante simples, pero las secciones son realmente emocionantes y poderosas. Creo que podemos cubrirlos a ambos en el siguiente video. Me emociona mostrarles eso y terminar esta sección en el código temático. Te veré en el siguiente video. 11. Código del tema: secciones y fragmentos: En esta lección, vamos a repasar secciones y fragmentos. Obviamente, ya hemos tocado un poco secciones y fragmentos en las lecciones anteriores. En efecto, va a haber alguna superposición en toda esta estructura, pero vamos a sumergirnos más profundamente en hablar más específicamente de secciones y fragmentos en esta lección. Una de las plantillas que no te mostré en la lección anterior fue la plantilla para la página de inicio, lo cual es interesante. Si vuelvo a AdAM y puedes ver aquí, colección utiliza esta plantilla de colección de selección. Debo haber metido accidentalmente eso ahí dentro, déjame guardar eso. Si te metes en muchos de ellos o tienen un montón de su propio contenido personalizado o simplemente enlazan a una sección como la página de colección, solo enlaces a la plantilla de colección, la página del blog simplemente va a la plantilla del blog. Como pronto lo averiguaremos para que podamos utilizar características de las secciones que incluyen la personalización en el personalizador. Eso habíamos mirado un poco, pero quiero mostrarte primero la plantilla index.liquid. Esta es la plantilla que carga en nuestra página de inicio e incluye este contenido dinámico de etiquetas para índice. Si volvemos a estructura temática Búho, tenía esta plantilla vinculada al contenido del índice, pero la eliminé al inicio de dos lecciones atrás. Eso se debe a que no está relacionado con cada plantilla, pero sí aparece en una plantilla, y esa es la plantilla de la página de inicio. Pero sabes qué, podría estar equivocado porque tal vez podríamos poner contenido para índice en cada plantilla. Vamos a ejecutar ese experimento ahora mismo y honestamente, nunca he probado esto antes, así que no sé si va a funcionar, pero vamos a ver si podemos simplemente meter eso en alguna de nuestras plantillas. Esa es la plantilla de colección. Si entro a mi personalizador. Sé interesante ver qué pasa con esa etiqueta dinámica. ¿ Algún error en nuestro reloj temático? No. Vamos a la lista de colecciones. Perdón, esa es la equivocada. Queremos páginas de colección. Curiosamente, tenemos aquí esta sección que ha sido codificada en la colección. Pero entonces también tenemos la selección que teníamos en nuestro contenido de página de inicio para índice, lo que nos permite agregar, quitar y ordenar secciones dinámicamente . Bastante cool. Nunca lo había probado antes y no sé si eso es demasiado práctico, pero cómo se configura por defecto. Voy a revertir esto a cómo era antes. Está en la página de inicio, tienes este contenido para índice. A lo mejor necesito volver a poner esa cosa en mi diagrama ahí vamos. Tienes acceso a esta etiqueta súper impresionante llamada contenido para índice, que te permite tener una lista dinámica de secciones y si tiene sentido que pongas en cualquier otra página que no sea la página de inicio. Siéntase libre de hacerlo, pero en la página de inicio, por defecto, tiene contenido para índice. Ahora por supuesto, puedes entrar y hacer esta plantilla como cualquier otra plantilla. Esta plantilla está aquí para que la utilices no tiene que ser solo contenido para índice, sino que el contenido para índice es genial porque podemos, como mencioné antes, agregar secciones. Ahora vamos a profundizar en secciones en un video posterior creando nuestra propia sección y entonces realmente vas a aprender el poder de las secciones. Pero por ahora, vamos a sumergirnos en el código de uno de ellos. nos hemos metido un poco en esto ya pero si entramos en plantillas y miramos una plantilla para carrito, todo está contenido dentro de una sección. Si entramos aquí sección para plantilla de carrito, entonces tenemos todo lo que aparece en nuestra página de carrito con un esquema para la edición. Esta es básicamente la parte que separa secciones de cualquier otro de los archivos en código de tema Owl. El esquema podría parecer un poco desalentador al principio, pero es una forma increíble de agregar opciones personalizables que usamos a lo largo de nuestro código aquí y permitimos al usuario editarlas. Como puedes ver aquí, hay un montón de datos de idiomas diferentes y esto convierte la etiqueta o el nombre del esquema en función de tu idioma. Pero no tienes que hacer eso, solo puedes deshacerte de este objeto todos juntos. Si solo quieres hacerlo en un idioma, puedes haber cortado página. La mayoría de los temas en realidad en los que trabajo son así. No hay tantas opciones diferentes para idiomas. Simplemente voy a deshacerme de ese objeto y simplificarlo y se puede ver aquí, tenemos el nivel superior de nuestro esquema. Tenemos el nombre de esta sección, ajustes, y luego dentro de nuestra configuración, tenemos todas las diferentes configuraciones que podemos cambiar. Al igual que teníamos aquí en nuestros configuraciones.schema, podemos crear un esquema para cada sección individual y luego solo llamar a esas opciones cuando las necesitemos. Funciona de manera similar al esquema en nuestro esquema de configuración, esto es para todo el tema. Si entramos en una sección específica, ¿qué teníamos antes? Teníamos plantilla de colección, ¿no? De todos modos, en realidad no importa. Todos son similares en cómo operan. No fue éste pero echemos un vistazo a éste también. Tenemos un nombre, páginas de colección, y aquí está nuestra configuración. Tenemos diferentes tipos de entrada aquí, y los diferentes tipos de entrada que tenemos disponibles podemos repasar en este momento. Yo sólo voy a entrar en la documentación. Simplemente escribiendo en Google, Shopify tipos de entrada, configurando los ajustes del tema. Déjame echar un vistazo y ver si este es el documento que buscamos. Ajustes de entrada si hago clic en eso, aquí vamos. Ahora tenemos en la documentación, los diversos ajustes de entrada. Se pueden crear diferentes entradas en base a si vamos a utilizar textos, si vamos a seleccionar una imagen, si va a ser una selección booleana verdadera o falsa como una u otra, si va a ser un selecto caja, rango de casilla de verificación. Podemos ver esto funcionando si entramos en nuestro personalizador y podemos ver la rica gama de diferentes tipos de entrada que tenemos aquí. Esto va a ser una imagen uno. Si voy a aquí, este va a ser picker de imagen. Vuelvo a mi personalizador, estos son selects. Si entro aquí, eso es un texto. Este es un área de texto, y esto en realidad es un campo de enlace o URL. Déjame revisar el nombre en ese para ver si es un enlace o URL, lista de enlaces. Había URL. Entonces el tipo de entrada para ese, que mayoritariamente parece un libro de texto estándar, pero no lo es. Si realmente haces clic en él, surgen algunas opciones y podemos configurarlo usando el tipo de entrada de URL. ¿De acuerdo? Entonces veamos la presentación de diapositivas, ¿de acuerdo? Porque ese es un buen ejemplo. Si entro aquí y encuentro esa sección en nuestro código temático. Y miré hacia abajo el esquema. Este esquema representará directamente lo que está pasando aquí. Entonces si miro las cosas en la parte superior, tiene que tener un nombre y tiene que tener ajustes. Entonces el nombre de la misma es la presentación de diapositivas, y eso es lo que viene aquí arriba. El clase, es para establecer clases CSS en la sección real. Entonces en realidad no podemos verlo aquí, pero está ahí dentro. Y luego entramos en nuestra configuración. De acuerdo, este será nuestro primer escenario. Y es seleccionar la altura ideal de presentación de diapositivas y la etiqueta es altura de diapositiva. Entonces si entramos aquí, ahí está, altura de deslizamiento. Y entonces qué define aquí estas opciones? Bueno, eso también está en el esquema. Y podemos bajar a este campo llamado Opciones. Y luego tienes una lista de opciones aquí. De nuevo, tienes tanta información del idioma que solo lo hace confuso. Entonces solo voy a borrar algo de esto para que sea más sencillo para ustedes. Aquí todos estamos hablando inglés. Por lo que aún podrás entender lo que está pasando aquí sin configurarlo en tantos idiomas diferentes. De acuerdo, entonces primera opción, la etiqueta es adaptar una primera imagen y el valor cuando seleccionen eso, se va a adaptar. ¿ De acuerdo? Adaptarse a primera imagen. Y luego va a establecer este valor que el usuario no ve. Pero este es el valor que llegamos a ver dentro de nuestras plantillas. Entonces si busco adaptarme ahora, puedo ver que si buscamos, ese no es un gran ejemplo. Pero tendremos que echar un vistazo a dónde se está utilizando esto. Solo busquemos la altura de la presentación de diapositivas porque no tiene sentido configurarla si no se usa en el código. Por lo que esto debería estar en otro lugar del código. Y puedes ver aquí, podemos llamar a esa opción llamándola primero sección de objetos, luego entrando en ajustes, y luego buscando la altura de la presentación de diapositivas. Y en realidad había adaptador ahí mismo. Entonces es decir si la altura de la presentación de diapositivas está configurada para adaptarse, esa opción que miramos antes. Aquí, acompáñate. Entonces queremos hacer todo esto, ¿de acuerdo? Entonces estamos usando el valor que hemos establecido en nuestro esquema, que el usuario puede editar por aquí. Y directamente estamos poniendo eso en el código. Entonces ojalá puedan empezar a ver que esto es realmente poderoso. Puedes crear un montón de personalizaciones dentro de tu nuevo código que una vez construido, en realidad puedes entrar aquí y usar una interfaz de usuario para interactuar. Y eso va a ser bueno para si estás desarrollando un sitio web por digamos, un cliente. Y va a ser bueno incluso solo para ti. Lo construyes una vez y luego ya no tienes que entrar en el código. Es una opción para que personalices. A lo mejor quieres volver a cambiarlo cada tanto, esa es una opción para que lo hagas. Entonces sé que el esquema podría parecer un poco confuso y honestamente una vez que comienzas a anidarte a niveles más profundos, empieza a ser aún más difícil de leer. Pero con el tiempo, debes empezar a relacionar lo que ves aquí, lo que ves aquí. Y debería ser fácil crear más opciones. ¿Está bien? Entonces, justo como ejemplo, ¿qué es algo que podemos agregar a esta presentación como personalización? A lo mejor queremos cambiar el tamaño del texto. Esa fue idea mía, pero ahora puedo ver que ya se hizo. Sí, cualquier cosa básicamente que quieras cambiar sobre todo o darnos una opción de personalización en el personalizador, puedes configurar en tu esquema y luego hacer referencia en tu código de sección. Muy bien, así que solo para recapitular cómo podemos usar las secciones. Podemos o bien seleccionarlos en contenido para índice. Podemos deslizarlos específicamente en el código en una plantilla, o podemos deslizar la sección en un laboratorio. Y por supuesto, encabezado y pie de página, por qué aparecen en cada página es porque son secciones incluidas en el diseño. Estos encabezados y pies de página van a estar en cada página a menos que por supuesto, entráramos. Y digamos que borramos el encabezado de sección del tema.líquido. Actualizamos la página. Después de confirmar que la página está actualizada, recargamos la página. Ahora veremos que el encabezado se ha ido y se ha ido para cada página que utiliza esa plantilla, que como mencioné antes, para teme.liquid es estándar. Por lo que incluso encabezado y pie de página que incluyes en el diseño del tema es una sección también. Por lo tanto, volviendo al diagrama, se pueden insertar secciones dinámicamente en contenido para índice, en plantillas codificándolas rígidas, o en diseños también codificándolas de forma dura. Y solo para recapitular cómo hacemos eso, es solo con esta etiqueta líquida aquí. Los corchetes rizados, la sección de signos porcentuales, y luego el nombre de la sección. Entonces, ojalá lo consigas ahora que las secciones son bastante poderosas y como que se sientan en el corazón de tu tema. Ahora, como mencioné, vamos a construir nuestra propia sección, y eso va a martillar a casa esta teoría un poco más para ustedes. Por lo que vas a conseguir algo de experiencia con esta sección y realmente aprenderás el poder y cómo puedes desarrollar tus propias secciones personalizadas. Pero tenemos una cosa más que repasar, y eso son fragmentos. Por lo que los fragmentos, se puede pensar como casi como una sección tonta. Básicamente solo una pieza de código que quieres reutilizar en diferentes partes de tu sitio. Entonces, por lo general no pasa nada demasiado elegante aquí. Todo lo que hace es traer, digamos que se trata de productos. ¿ Cómo se llama éste? Precio del producto.líquido. Entonces si quiero ir a buscar en mi tema, buscar en carpeta para product-price, me va a mostrar todas las referencias y puedo ver aquí donde se ha incluido ese fragmento. Entonces, puedo entrar en colección.Líquido. Y puedes ver aquí, estoy incluyendo ese fragmento. Entonces, si quería editar el contenido aquí, tendré que sumergirme en el fragmento y editar ese código dentro del fragmento. Solo para mostrarte básicamente creando nuestro propio fragmento basado en contenido que ya tenemos. Digamos que queríamos reutilizar una sección dentro de aquí y sólo tenía más sentido tenerla como fragmento. Entonces, digamos que sólo queremos que este cajón de búsqueda sea un fragmento. Para que yo sólo pudiera tomar todo esto, quitarlo. Poner una etiqueta líquida. Correcto. Incluir cajón de búsqueda. Entonces lo llamaré cajón de búsqueda. Vale, guarda eso y asegúrate de tener ese código guardado en tu portapapeles. O puedes simplemente Ctrl + Z para recuperarlo. Y lo que voy a hacer, es seguir adelante y crear ese fragmento ahora. Entonces, voy a llamarlo por el mismo nombre exacto que he puesto junto a la inclusión. Buscar cajonero.líquido. No olvides el.liquid, y lo pondré ahí dentro. Entonces, ahora si volvemos a nuestra página web. Me pregunto si esto sigue usando el desnudo, ese todavía está usando el layout desnudo. Pero si volvemos a nuestra página de inicio volveremos a tener un encabezado. Y el cajón de búsqueda es lo que surge al hacer click en esto creo. Sólo comprobemos eso. Está aquí arriba. Cajón de búsqueda es esta cosa que aparece en la parte superior. Y se puede ver, a pesar de que el código ya no está ahí, lo estamos incluyendo todavía de otra fuente. Entonces como puedes ver, realmente podrías salirte con la tuya sin fragmentos, pero es una práctica realmente buena usarlos si planeas reutilizar código o tal vez solo quieres limpiar este archivo y no tener tantos componentes diferentes ahí dentro. A lo mejor esto lee un poco mejor para ti. Entonces, entras en tu tema.líquido, ves todo incluye cajón de búsqueda, luego entra en el encabezado. Está bien, genial. En el otro lado, significa que vas a tener que ir a buscar más archivos si usas más fragmentos. Entonces, ese es el comercio allá con el uso de fragmentos. Es que se llega a ponerlos en un bonito lugarcito que podrás reutilizar más adelante. Pero entonces obviamente vas a tener que entrar y encontrar ese fragmento, que estoy tratando de hacer ahora. Y vas a tener que editarlo ahí, genial. Por lo que eso cubre casi todo en este diagrama. Entonces, hemos hablado de diseño, hemos hablado de estas etiquetas líquidas dinámicas, contenido de encabezado y contenido para índice. Hemos hablado de contenido para maquetación. Y hemos hablado de cómo interactúan juntas las cuatro áreas principales de tu tema, diseño, secciones de plantillas y fragmentos. Y una vez que comienzas a jugar con Shopify, realmente empieza a tener sentido por qué se crea de esta manera. Y te da una buena estructura para hacer realmente lo que quieras con tu tema. Entonces es realmente genial. Lo único que podría haberte confundido a través de todo esto es por supuesto el líquido. Entonces, hemos estado viendo mucho de este lenguaje de plantillas llamado líquido. Aquí hay un gran ejemplo, mucho líquido aquí. En el siguiente video, vamos a sumergirnos profundamente en líquido. Entonces, no te preocupes, vamos a cubrir lo que está pasando con este código líquido. A lo mejor no específicamente en esta plantilla, pero vamos a hablar de líquido en el próximo video. Entonces, me emociona continuar en este viaje y te veré en el siguiente video. 12. Código del tema: plantillas JSON: En este video, vamos a hablar de plantillas JSON. Las plantillas JSON son una alternativa más nueva a las plantillas Liquid que proporcionan una mayor flexibilidad en el editor de temas, lo que nos permite crear secciones reordenables en el admin no sólo para la página de inicio, sino también para las otras plantillas. Si miramos el archivo de índice en el tema predeterminado anterior de Shopify Debut, verás el contenido de la etiqueta para índice. Esta etiqueta genera dinámicamente nuestra página de inicio basada en una lista de secciones. Esta lista de secciones que podemos editar tanto en el admin, como dentro del archivo settings_data.json. Si echa un vistazo al archivo settings_data.json, verás aquí la lista de secciones en la página principal bajo el objeto actual. Si me desplazo hacia abajo al contenido para índice, puedes ver esta es la lista de secciones que aparece en la página de inicio para este tema en particular. Observe si volvemos al archivo index.liquid aquí, no hay código líquido en este archivo aparte de este singular contenido de etiqueta para índice. ¿ Y si en lugar de esta etiqueta aquí, almacenamos la lista de secciones que encontramos sobre settings_data.json dentro de este archivo en su lugar? Esto es esencialmente lo que Shopify ha hecho en su nuevo tema, Dawn. Si navego hasta el tema Dawn que he guardado aquí mismo, haga clic en Editar código, verás que la plantilla de índice es ahora un archivo JSON. Al igual que nuestro archivo settings_data.json en nuestro tema Debut, puedes ver que ahora existen datos similares en la plantilla misma. Aquí está el orden de las secciones, igual que teníamos en el contenido para matriz de índices sobre el tema anterior que miramos. La plantilla de índice es ahora un archivo JSON que almacena la lista de secciones como es la plantilla de producto, la plantilla de artículo, la plantilla de página, y así sucesivamente. Esto es lo que habilita las secciones reordenables en todas nuestras plantillas ahora, no solo la plantilla de la página de inicio. El resultado de esto es que necesitarás todo el código líquido que pueda haber sido almacenado dentro de estas plantillas para ser trasladado a secciones en su lugar, aunque solo pienses tener una sección en tu plantilla. Echemos un vistazo más profundo al código que entra en estas plantillas JSON. Aquí, tengo el tema del amanecer dos que configuré antes en esta clase. Es exactamente lo mismo que el tema principal Dawn con una edición menor, pero al parecer está publicado y está aquí mismo, voy a editar este. Si entro en Editar código y luego hago clic aquí para Agregar una nueva plantilla, verás que ahora hay una opción aquí para crear tu plantilla ya sea como plantilla Liquid o como plantilla JSON. Mantengamos seleccionada aquí la opción JSON, y en lugar de artículo, voy a cambiar esto a producto. Tenemos product.json, y lo voy a dejar con este nombre predeterminado de alterna. Vamos a crear eso y al igual que vimos hace algunos videos sobre plantillas, podemos crear plantillas alternas con JSON también. Te mostraré cómo eso aparece en el último personalizador de temas en tan solo un segundo. Ahora, como siempre, lo que me gusta hacer es abrir la documentación y eso lo teníamos justo en nuestra pantalla hace un segundo. Volvamos a ello ahora y lo que voy a hacer es ponerlos uno al lado del otro. Pon esto a la izquierda y luego voy a cerrar eso, poner esto a la derecha, y acercar nuestro código. Desafortunadamente, parece que no puedo deshacerme de esto así que sólo voy a mover esto, y ahí vamos. Leamos sobre las plantillas JSON. Como dice aquí, las plantillas JSON permiten controlar el aspecto y la sensación de diferentes páginas de la tienda en línea utilizando secciones, y ahora son archivos de datos que almacenan la lista de secciones a renderizar en lugar de plantillas que contienen Código líquido. Te animo a leer todo en esta página, pero vamos a desplazarnos hacia abajo hasta lo importante, la estructura de plantillas. Las plantillas JSON deben ser archivos JSON válidos, la raíz debe ser un objeto con los siguientes atributos, así que tenemos algunos aquí que se requieren y algunos aquí que no son obligatorios. Obviamente, vamos a necesitar tener los campos requeridos rellenados en nuestro objeto por aquí. Pero para los que no son obligatorios, no necesariamente necesitamos ponerlos en el objeto, pero sí podemos si queremos. Como puede ver aquí, esto ya se ha poblado con el objeto de una sección y una matriz de orden. Lo que falta es la cadena de nombre aquí, así que voy a agregar eso ahora. Nombre, y lo voy a llamar Plantilla Alterna porque no se me ocurre nada más en este momento. Vamos a golpear Guardar en eso, asegúrate de que no hayamos llegado a ningún problema. Aquí vamos. Las secciones no pueden estar en blanco y el orden no puede estar en blanco, por lo que te dará esto cuando se inicie. Pero entonces si intentas ahorrar en él, se le va a dar un error. Para solucionar esos errores, lo que vamos a tener que hacer es llenar este objeto y esta matriz. Voy a abrir este objeto y dentro, lo que vamos a tener que hacer es crear un objeto de sección. Lo que tenemos que hacer antes de hacer eso es decidir en qué sección vamos a cargar porque necesitamos al menos una sección, y en el tema Dawn, tenemos una sección llamada producto principal que va en la plantilla principal de producto también. Solo usemos esa, y así solo voy a llamar a eso uno principal. Abramos un objeto para esta sección principal y dentro de aquí, lo que hacemos es desplazarnos hacia abajo y mirar los datos de la sección. Nuevamente, tenemos esta tabla de los diferentes campos que se requieren, y básicamente, todo lo que se requiere dentro de esta sección misma, a menos que nos metamos en bloques es el tipo de sección. Como dice aquí, es el nombre de archivo de este archivo de sección para renderizar sin la extensión. Eso es muy sencillo. Todo lo que tenemos que hacer es poner el principal producto aquí sin el.liquid. Tenemos tipo y luego dentro tipo, tenemos producto principal. Ahora, claro, el otro error que tenemos que arreglar es que el orden no puede estar en blanco, así que hay que poner aunque solo haya una sección, tenemos que poner en lo que hay aquí, el nombre como definimos aquí dentro del objeto de sección, necesitamos poner eso en nuestra matriz de órdenes. Si golpeo Save en eso, no deberíamos obtener ningún error. Todos estamos bien, y ahora si voy a Personalizar tema, abro eso, voy a abrir esto al máximo, minimizaré un poco, y luego pincho arriba aquí para elegir la plantilla que estamos editando. Voy a entrar en Productos. Aquí podrás ver la plantilla alterna que acabamos de crear a la que simplemente nombramos alterna. Si hago click en esa, ahora verás que tenemos esta sección de información del producto aquí la cual es de hecho principal. Ahora tenemos nuestra sección aquí y podemos empezar a agregarle nuevas secciones. Es importante tener en cuenta que cualquier cambio que hagamos aquí ahora se almacenará dentro de la plantilla misma porque esta plantilla JSON almacena la lista de secciones y también almacena la configuración. Ahora ya no tenemos esta necesidad de que se almacenen tantos datos en este único archivo JSON. Los datos de cada plantilla individual y sus personalizaciones se almacenan en la plantilla misma. Incluso si hacemos clic en settings_data.json, verás que este objeto actual está completamente vacío porque esos datos se han movido a la plantilla de producto específica. Lo que voy a hacer aquí es agregar en una sección extra aquí, y verás esto reflejado en el personalizador. Yo sólo voy a copiar este objeto aquí y ¿qué debemos agregar? Añadamos en una sección de newsletter. Solo vamos a llamar a este boletín y luego dentro del tipo, recuerda que tenemos que usar el nombre del archivo real menos el.liquid. Newsletter.Líquido, quita el.iquid y ahí está nuestro tipo ahí mismo. Por supuesto, tenemos que añadir eso a nuestro pedido aquí así que voy a añadir coma y luego voy a poner newsletter. Voy a pegarle a Save en eso. Ahora pasemos a nuestro personalizador y actualicemos, asegurándonos de que estamos en la plantilla alternativa, y aquí puedes ver que tenemos información del producto y registro por correo electrónico. Ahora, recuerda dije que cualquier cambio que hagamos aquí se reflejará de nuevo en nuestro expediente también. Acabas de ver que hicimos una edición aquí al propio archivo y esos cambios se reflejaron en el editor de temas. Bueno, funciona en ambos sentidos en el sentido de que si cambiamos el orden de estos o agregamos bloques, también se reflejará en el archivo. Si presiono Guardar en eso, reordenando el registro de correo electrónico por encima de la información del producto. Todo esto está roto de todos modos, pero nos refrescaremos por aquí, y como pueden ver, ahora tenemos newsletter primero y segundo principal en nuestro orden, y también hemos tenido algunos ajustes predeterminados que se están agregando a nuestro objeto aquí. Escribiré newsletter que teníamos antes. Ahora está en la parte superior y tenemos algunos ajustes predeterminados poblados en este objeto de configuración. Como mencioné, tenemos enlace de datos bidireccional aquí así que si cambiara esto aquí, se reflejaría en el personalizador. Si subo al email registrnup, puedes ver todos estos esquemas de color, fondo uno, fondo también. Voy a suponer que el ID para el segundo es fondo-2, así que voy a cambiar eso en el propio archivo. Presiona Guardar en eso, vuelve a la actualización del personalizador y verás que el fondo 2 ya está almacenado. Entonces de nuevo, puedo cambiar eso a fondo 1 , vuelve aquí y verás que esa configuración está almacenada en el archivo. El cambio de paradigma es éste. JSON contiene datos, dondees.liquid los archivos contienen código líquido. Aquí puedes ver que el nuevo sistema de plantillas está teniendo plantillas como datos, no Liquid. Lo que eso nos permite hacer es hacerlos más dinámicos y hacerlos para que podamos editar nuestros datos de sección y orden de sección en el personalizador, lo que nos permite hacer eso en cada plantilla ahora porque tenemos datos de plantilla almacenados en el plantilla en sí. Ahora lo que tenemos son datos almacenados en plantillas en lugar de Liquid, y lo que eso nos permite hacer es tener personalización en cada página, mientras que anteriormente solíamos codificar en etiquetas de sección en diferentes partes del código Liquid para decir poner la sección aquí. Ahora todo son solo datos y es mucho más dinámico. Una cosa más a tener en cuenta aquí son los datos de bloque, y no recomiendo tratar de hacer esto manualmente en el archivo. Sólo tienes que ir directamente a tu personalizador aquí, Añadir bloque. Digamos, queremos tener un encabezado aquí, suscríbase a nuestro correo electrónico. Estos son todos los ajustes por defecto y ponerlo en forma de correo electrónico. Vamos a golpear Guardar en eso y vamos a echar un vistazo a cómo eso afecta a nuestro objeto JSON. Refrescando la página por aquí, verás que igual que dice en la documentación con los bloques y etcétera Déjame pasar esto. Se puede ver que tenemos un ID de bloque para el bloque. Tenemos el tipo de bloque que es arbitrario. Es justo lo que tu código responda y luego tenemos un objeto de configuración para almacenar los ajustes dentro de ese bloque. Toda la documentación está aquí, y nuestra documentación puede ser difícil de leer para algunos principiantes, ahí, por qué estoy aquí brindando este tutorial. Pero esencialmente los puntos principales a entender aquí es que estamos almacenando datos, no código Liquid en nuestras plantillas cuando estamos usando JSON. Esta es la forma de avanzar para que podamos tener la mayor cantidad de flexibilidad para nuestros administrativos entren aquí y editen lo que quieran y reordenen secciones en diferentes plantillas. Ha sido una gran frustración de los usuarios de Shopify desde hace mucho tiempo tener una página de inicio donde pueden reordenar secciones como esta característica ha estado disponible desde hace mucho tiempo en la página de inicio, pero no ha estado disponible en otras plantillas hasta ahora, hasta plantillas JSON y esta es la tecnología que lo habilita. Por supuesto, puedes seguir usando plantillas Liquid si así lo deseas. Pero ahora tenemos estas plantillas JSON y empezarás a ver que más comúnmente a medida que pasa el tiempo, esta es la forma moderna de hacerlo. De ahí, por qué he agregado esta sección a la clase. Cualquier pregunta, obviamente, las deja en los comentarios, y en el siguiente video, vamos a sumergirnos un poco más en el líquido Shopify. 13. Liquid: "lenguaje de programación" de Shopify: Muy bien chicos, bienvenidos de nuevo. En esta lección vamos a hablar todo de Liquid. En las lecciones anteriores, miramos nuestro código temático y hablamos de la estructura, y te mostré ese diagrama, pero a lo largo de nuestro código temático, si vamos a alguna de nuestras secciones de plantillas o fragmentos, Inevitablemente vamos a ver algo de líquido. Mira este, por ejemplo. El producto de la plantilla dash. Tenemos líneas y líneas de Líquido. Deberías estar familiarizado con el HTML. Aquí se puede ver, hay HTML, pero también hay mucho líquido a su alrededor y también hay líquido en su interior. Liquid es como el lenguaje de plantillas de tu tema Shopify. Es como un lenguaje de programación tonto que, como dice aquí, te da alguna lógica de programación que le dice a una plantilla qué hacer. Las etiquetas se envuelven en estos personajes excepto cuando solo estamos dando salida a una variable simple. En lugar de usar el signo de porcentaje, ponemos un segundo corchete rizado. Si te preguntas cuál es la diferencia entre estos que empiezan y terminan con dos corchetes rizados y éste que empieza con un corchete rizado y un signo de porcentaje, es cuando estamos realizando lógica, y esto es cuando sólo estamos dando salida a una variable a la pantalla. Este guión aquí también, recientemente aprendí eso, eso elimina los espacios en blanco. Entonces, si solo elimino esto de cualquier lado, va a registrar una nueva línea en tu código y así vas a conseguir algunos espacios en blanco. En realidad no afecta la lógica, todavía va a funcionar, pero verás en tu archivo de salida, si no usas estos guiones, que obtendrás mucho espacio en blanco y eso podría hacer que tu sitio se cargue más lentamente. De igual manera una nota al margen. ¿ Cómo vamos a romper esta sección? Obviamente hay mucho que cubrir con Liquid. Vamos a hablar de etiquetas variables, etiquetas temáticas, etiquetas de flujo de control y etiquetas de iteración, de una especie de manera amplia de alto nivel, y si quieres profundizar en alguno de estos, inevitablemente vas a tener que hacerlo el más profundo entras en el desarrollo del tema, este es el lugar que te gustaría buscar. También hay una referencia rápida llamada Shopify Liquid Cheat Sheat. Si solo escribo Liquid Cheat Sheat, puedo agarrar esto. Este es el original que creo, pero ahora está roto, así que el que está en el sitio web de Shopify, probablemente va a ser mejor. Ahora se puede ver la hoja de tramposos, que básicamente tiene todas las diferentes opciones y lo que hacen. Diga por ejemplo, si solo presiono Comando-F o Control-F en Windows, ahora puedo buscar en la página y tal vez quiera encontrar el título de un producto. Voy a teclear, productos dot title, y luego puedo aprender más sobre lo que hace. Simplemente devuelve el título del producto. Estaba pensando, tal vez es un nombre de producto, busca eso, eso no sale, titulo. Esa es la palabra clave que tengo que usar o tal vez iré solo al producto y ver qué variables tengo disponibles en el objeto del producto y luego, ya veo, esa es la que busco. La hoja de tramposos es realmente valiosa. Algunas personas recomiendan imprimirlo y tenerlo en tu escritorio, pero tienes este enlace aquí en todo momento y al menos puedes buscar si está en tu navegador. Siempre me gusta tener a mano la hoja de tramposos, pero por suerte, sólo está a una corta búsqueda en Google. Definitivamente referencia a esto como una referencia rápida, y luego tienes tu documentación de Shopify para aprendizajes más profundos. Lo que voy a hacer es empezar de abajo hacia arriba. Primero voy a hacer clic en etiquetas variables, y aprendamos sobre nuestras etiquetas variables. Como puedes ver aquí, hay un resumen y podemos ir a cada una de estas diferentes formas de interactuar con variables. El principal va a ser Asignar. Si has hecho alguna programación en el pasado, deberías estar familiarizado con la asignación. En Liquid, solo necesitamos usar la palabra asignar, y luego un nombre de variable, luego el signo igual, y luego el valor que queremos asignarle. Como puedes ver aquí, un ejemplo muy básico, asigna manzanas a la comida favorita, y luego cuando usamos la sintaxis de corchetes dobles, podemos simplemente generar el valor de eso, y entonces tu salida va a ser esta. Si entramos en nuestro código, podemos ver aquí muchos de los signos para producto, dash, plantilla. Asignaciones nos facilitan decirlo, por ejemplo, tenemos un valor que queremos utilizar varias veces en la página, tal vez sea una buena idea asignarlo como variable en la parte superior y luego puedes cambiarlo en un solo lugar o tal vez tú tienen una cadena muy larga como este producto dot guión bajo seleccionado o subrayado primero, así sucesivamente, así sucesivamente. No se quiere tener que escribir eso cada vez, por lo que se puede poner en un nombre de variable más pequeño que quizá sea más descriptivo. Aquí, tenemos una Declaración de Caso al que llegaremos en un segundo, donde estoy asignando el valor de las cosas en base a diferentes casos. Si tomo esto, obviamente aquí es donde se está asignando y lo busco otro código. Esto de aquí es obviamente donde se está generando. Puedes asignar variables tú mismo, pero lo más probable es que estés usando variables que están en objetos. Si volvemos a nuestra referencia, y entramos en nuestra hoja de tramposos temática, podemos bajar y mirar los diferentes objetos y qué variables están disponibles para ellos. Entonces, tenemos un objeto para corte, tenemos un objeto para checkout, objeto para artículo, objeto para dirección. Tantos objetos diferentes. Los más obvios, los productos se oponen aquí mismo. Cuando estamos trabajando con los productos, queremos poder acceder a todas estas variables diferentes dentro de un producto. Tenemos el objeto de la página justo aquí. Lo bueno de Shopify es que es bastante lógico en el sentido de que si estoy en la plantilla de página, tengo acceso al objeto de página. Si estoy en la plantilla de producto, tengo acceso al objeto de producto. Simplemente mostrándote como ejemplo, hemos echado un vistazo a la plantilla de página antes. Si voy a este de aquí, ya ves que estamos en una plantilla de página ahora mismo. Tenemos acceso al objeto de página, y luego podemos llamar a una variable del objeto de página aquí mismo yendo título de punto. Puedes ver aquí, no he asignado un título a página. No hay asignación en el propio código. Lo que está haciendo es mirar la página en la que estamos actualmente y encontrar el título, como dijimos en nuestro área de administración de páginas. Eso es probablemente más común, al menos al principio, que asignar tus propias variables, vas a estar mirando variables que vienen en el objeto con el que estás lidiando y vas a cualquiera de las salidas ellos o hacer otras operaciones con ellos. Eso cubre “etiquetas variables”. Obviamente, había algunos otros ahí dentro. Perdón, sólo volveré a ello. Es posible que desee mirar “captura”, “incremento”, “decremento”, pero “asignar” es la principal. Definitivamente te recomiendo que regreses y leas esta documentación, pero vamos a pasar por esto en esta lección porque solo es una lección para repasar la totalidad de Liquid. Está bien. Entonces entrando en nuestra sección de etiquetas de “tema”, estas son cosas como “incluir”, “diseño” que vimos antes, “sección”, así que en cualquier momento incluimos un “fragmento”. Si voy a “tema.liquid” probablemente vamos a ver el mejor ejemplo de todos estos. Entonces recuerda que creamos este “fragmento” antes que se considera una etiqueta de “tema”. Y obviamente si bajamos, tenemos “secciones” y luego “layout” fue uno que usamos en nuestra “page.about”. Decidimos usar un “layout” alternativo que nos pusimos en nuestra “carpeta de maquetación”, ¿de acuerdo? ¿ Qué otros tenemos aquí? También tenemos “Comment”. Entonces si queremos hacer un comentario en el código, podemos hacerlo usando la etiqueta de “comentario” bastante común en cualquier lenguaje de programación. “ Incluir” para “fragmentos”. También podemos enviar variables al “fragmento”. Si incluyo este nombre de fragmento, obviamente va a incluir el contenido de eso, pero entonces también le va a dar acceso a ese “fragmento” a las variables que le envié. Está bien. También si estás creando un “formulario” en lugar de usar una etiqueta estándar de “formulario” en HTML, puedes usar una versión más inteligente en Liquid mediante el uso de las etiquetas “formulario” y “endform”. Está bien. Nos vamos a reventar por eso porque podríamos quedar atrapados en “formas” durante bastante tiempo en sí mismo. Shopify hay un montón de “formas” diferentes. Y si usamos esta sintaxis, podemos aprovechar alguna de la lógica incorporada de Shopify. Está bien. “Layout” que usamos antes. “ Paginación”. Esto es realmente genial porque la “paginación” puede ser un dolor en el culo programarse pero en Liquid, es bastante simple. Simplemente necesitamos “envolver” lo que queremos “paginar” en esta etiqueta “paginar” y “terminar paginar”. Está bien. Entonces podemos “paginar” por cinco o el valor que queramos. “ Raw” nos permite sacar Líquido en forma cruda. No sé por qué alguna vez necesitarías hacer eso. “ Sección” que vimos y podemos usar “estilo” para generar algunos estilos en una plantilla real. El motivo por el que tal vez quieras hacer eso es porque nos permite hacer actualizaciones a color en vivo desde el editor de temas sin una actualización de página completa. Entonces si lo viste antes cuando estábamos trabajando con nuestro “personalizador” y editamos algo y luego surgió “en vivo”. Como si cambiáramos un color y justo al lado en la vista previa, se actualizó al instante. Es porque estamos usando estas etiquetas de “estilo líquido”. Estoy bastante seguro si pones tus propias etiquetas de “estilo” que no sean Liquid, así que si solo pones las HTML estándar que se ven así, no se actualizará automáticamente, pero seguirá funcionando. Es mejor solo usar esto porque entonces obtienes retroalimentación instantánea. Las etiquetas “Theme” son útiles. Se usan a lo largo de tu tema. Son los que son más de los “tipos de programación” que verías en cualquier lenguaje de programación. “ Control-flujo e iteración”. Vamos a repasar esos ahora mismo. El “flujo de control” es básicamente condicionales. Entonces si ya has hecho alguna programación antes, habrías visto una declaración “si entonces”. Entonces aquí mismo, dice “si el título del producto es igual a zapatos impresionantes” entonces saldrá eso. Si ese es el caso, conseguirás esto. Si no, no conseguirás nada, a menos que sea lo contrario de “si”. Básicamente es lo mismo que “si el título del producto no iguala zapatos impresionantes” entonces lo obtienes. También puedes agregar en un “else if”. Si golpea esto y no lo hace, entonces ve este, y si coincide con eso, entonces emita esto. Pero si no lo hace, entonces puedes ir a un “else” y luego terminas el “if”. Eso es bastante estándar en cualquier lenguaje de programación. También una declaración de “caso”. Si tienes una variable y quieres comprobar el valor en eso para una variable diferente. Esta es una forma más agradable de escribir condicional en lugar de tener que hacer “si”, “else-if” y una y otra y otra vez. Si quieres tener múltiples condiciones, puedes usar las palabras clave “y” y “o” lo cual es bueno porque es solo lenguaje estándar. No es pipa u otro tipo de personajes raros. Esto se lee bastante bien. “ Si line_item.grams es mayor a 2 mil y customer_address.city es igual a Ottawa” entonces generará este código entre estas etiquetas. Eso lee bastante bien. Simplemente tiene sentido en inglés leerlo. En el lado del tirón puedes usar “o”. Echaremos un vistazo a algunos ejemplos en tan solo un segundo. Vamos a entrar en etiquetas de “Iteración” finalmente. Esto son cosas como bucles. El principal que vas a ver una y otra vez en líquido es “para”. El lenguaje para “para” en líquido es bastante autoexplicativo también. Vas a recorrer cada producto en “collections.products” y vas a agarrar ese objeto de producto en particular usando esta palabra. Esta palabra podría ser lo que quieras. Lo mejor es usar una palabra descriptiva. Para producto en “collection.products” tienes acceso ahora dentro de ese ciclo de bucle al producto en particular, a ese objeto en particular, y luego puedes hacer cosas con eso. Sé que eso es vago, pero hay muchas cosas que puedes poner aquí dentro, pero este es un gran ejemplo de que vas a querer recorrer una colección de productos en algún momento. Esto es bastante estándar en Liquid y cualquier lenguaje de programación para ese caso. También puedes poner una declaración “else” dentro de un “for”. Se puede romper el bucle si coincide con la condición sónica. También puedes omitir un ciclo del bucle si algo coincide con una determinada condición y puedes limitar el desplazamiento, definir un rango de cosas diferentes con “para”. Pero por lo general, es tan simple como esto de aquí, simplemente recorriendo una lista de objetos y dando salida lo mismo para cada uno de esos objetos en esa colección de objetos. Como dije, probablemente tenga más sentido verlo en realidad. Echemos un vistazo a algún código Liquid al azar ahora y veamos qué está pasando. En realidad, antes de que hagamos eso, hay una cosa más que necesitamos mirar con Liquid que te va a tropezar si no lo sabes, y eso es “filtros”. Rápidamente, sólo vamos a echar un vistazo a los “filtros” antes de sumergirnos en el código. “ Filtros” es una especie de cosa única para Liquid. Si estás familiarizado con otros lenguajes de programación, normalmente utilizarías funciones o métodos para obtener el mismo resultado que lo que hace un “filtro” en líquido. Una vez que te acostumbras a “Filtros líquidos” encontrarás que en realidad son bastante simples y es bastante fácil poder “filtrar” contenido que en realidad tiene sentido. Veamos un ejemplo aquí mismo. Tenemos el título del producto que solo queremos dar salida en la pantalla. Pero ahora tenemos un “filtro” que dice “upcase”. Lo que eso hace, es que tomará lo que sea aquí y lo hará en mayúsculas. Tu salida va a ser, si el título del producto era “zapatos impresionantes” que está aquí, va a crear una versión mayúscula de eso y luego emitir eso a la pantalla. Hay, por supuesto, muchos “filtros” diferentes. Uno de ellos es “quitar”. Este filtro eliminará “impresionante” del “product.title” por lo que solo conseguirás zapatos. También puedes “encadenar” múltiples filtros juntos. Tienes “title del producto” “upcase” y “remove”. Vamos a “upcase” el “product.title” y después de eso vamos a quitar “awesome” de él. Entonces solo consigues “zapatos” en mayúsculas. Echemos un vistazo a algunos otros. Obviamente, no vamos a poder atravesarlos todos. Sí, en realidad, hay demasiados que mirar. Permítanme echar un vistazo a algunos que podríamos ver a menudo. etiqueta “Imagen” es buena. Podemos simplemente poner el nombre de la imagen y podemos agarrar la “URL del activo” de eso. También podemos “envolver” eso en una etiqueta de “imagen” y así conseguirás esto, que es bastante genial. Ese es un ejemplo donde las etiquetas realmente son útiles, en lugar de tratar de encontrar la dirección de esta imagen y luego tener que poner etiquetas alrededor de ella, literalmente puedes simplemente definir el nombre de la imagen en tus activos y luego encuentra la envoltura de “URL de activos” que alrededor de eso y luego encuentra la etiqueta de “imagen”, envuelve eso alrededor de la salida de esos y tienes esto. Se puede “encadenar” a un montón de ellos. A veces se quiere poner un colon y algunas opciones. Otras veces simplemente pones el “filtro” por sí mismo, pero sin entrar en todos los diferentes “filtros” eso es esencialmente lo que está pasando cuando ves una “tubería”. Verás una pieza de “contenido” luego verás una “pipa” y luego un nombre de “filtro”. Si no sabes lo que está pasando, todo lo que tienes que hacer es buscarlo hacia arriba.Si busco esto en nuestra hoja de tramposos. Puedo entrar aquí y ver que devuelve la URL de un archivo en la carpeta de activos de un tema. Muy descriptivo, y nos muestra un ejemplo bastante bueno aquí mismo. Entonces, eso es lo último. Tenemos nuestras etiquetas, y hablamos de objetos y filtros también es importante, pero los filtros van bastante profundos. Sumémonos en el código ahora y veamos algunos ejemplos, porque creo que ahí es donde va a tener más sentido y golpear más a casa. De acuerdo, entonces aquí mismo tenemos una plantilla realmente básica. A mí me gusta mostrar la plantilla de página, porque es bastante básica, pero inevitablemente vamos a conseguir unas son un poco más complicadas. Si entro en la plantilla de guión del producto en secciones. Ya verás aquí tenemos un montón de variables que estamos asignando. Entonces tenemos una declaración de caso, y la declaración de caso es averiguar qué vamos a asignar a estas variables en función del tamaño de imagen establecido en nuestra configuración de sección. Ahora recuerda, cuando veamos la configuración de punto de Sección, eso se establece en el siguiente esquema. Muy bien, vamos a sumergirnos más profundamente en secciones en la siguiente lección. Entonces vamos a tener un poco más de exposición a las secciones, que aprendas un poco más sobre lo que está pasando aquí y cómo usarlo. Aquí podemos ver un bucle for. Y esto for loop, como probablemente podemos decir por solo leerlo, saca la imagen de las imágenes del producto. Para cada uno de ellos, hace un montón de cosas entre sólo mostrar la imagen. Si te preguntas qué es todo esto, así es como hace las imágenes receptivas. En lugar de simplemente hacer la imagen SRC, esto es como una cosa de New Age HTML donde podemos generar muchas imágenes diferentes basadas en el tamaño y la resolución de pantalla. Sólo una nota al margen para aquellos que no están familiarizados con las imágenes receptivas, ¿de acuerdo? Podemos ver a lo largo de nuestra plantilla, estamos obteniendo solo variables que queremos generar en diversas secciones de HTML, y podemos ver que el bucle está terminando aquí. Ahora podemos ver una etiqueta if aquí. Entonces si los productos, tamaños de imagen de punto, tamaño de punto. Eso es básicamente si la longitud de las imágenes del producto o cuántas imágenes de productos hay, si eso es mayor que uno entonces hacemos todo esto, y si es mayor que tres entonces queremos habilitar miniaturas. Entonces, mucha lógica aquí dentro. No vas a poder ponerte la cabeza alrededor de él de inmediato en algo tan complejo como esto. Pero, pronto veremos cuando trabajemos con bloques en una sección en la siguiente lección, empezarás a ver que for-loops, declaraciones de caso, si las declaraciones son muy comunes y luego no tan aterradoras. Es sólo que en esta, estamos viendo mucho de todo emparejado juntos. Aquí puedes ver un filtro. Aquí te mostramos un ejemplo de un filtro que vas a ver a lo largo de tu proyecto, es el de traducir. Esta es una especial porque busca esta variable en nuestro archivo de idiomas, y genera el texto en función del idioma en el que estamos. Un filtro más común, echemos un vistazo, escape. Usando lo que te mostré antes, si quisiéramos averiguar qué está haciendo este filtro. Obviamente estamos dando un valor, pero queremos ver qué hace el escape. Vayamos a nuestra hoja de tramposos y tecleemos escape. Aquí vamos, filtros de cadena. Escapar. Escapa de una cuerda. Ese es un mal ejemplo porque básicamente lo que estamos haciendo es, estamos tomando la cadena y queremos realmente dar salida a las etiquetas HTML. Busquemos otro. Otro filtro. Aquí vamos, pipa json. Está bien, así que veamos aquí. Podemos ver filtros generales. Entonces, ¿qué hace el filtro json? Convierte una cadena en formato json. Nuevamente, no el mejor ejemplo porque es un poco complicado, pero estamos tomando un trozo de cadena aquí, convirtiéndolo a json y verás aquí que obtenemos esta versión json del objeto. Intentemos encontrar un filtro más simple, porque no quiero abrumarte con estos filtros locos y solo piensas que son demasiado duros o demasiado complicados. Podemos ver la URL de la imagen aquí. Estamos tomando el logotipo que hemos establecido en nuestra configuración de sección. Lo estamos ejecutando a través de un filtro de URL de imagen, con el argumento de uno por uno. Busquemos ese en la hoja de tramposos. URL de imagen. Haga clic en este, devuelve la URL de una imagen, acepta el tamaño de la imagen como parámetro. Entonces, si ponemos uno por uno, se va a poner una imagen uno por uno. Se podría estar preguntando por qué estamos poniendo uno por uno. Bueno, lo estamos ejecutando a través de reemplazar de nuevo con un ancho dinámico. Probablemente otro ejemplo complicado, pero intentaremos usar algunos filtros más simples en un video posterior. Aquí hay una que es un poco más simple, anexa. Si buscamos append, simplemente agrega un carácter a una cadena. Entonces, las ventas anexan JPEG, simplemente lo agrega a la cadena. Entonces, esa es una simple. Simplemente estamos tomando esto y estamos agregando una X al final de la misma. Eso es bastante simple, terminemos con eso. Volviendo a nuestra documentación, si necesitas revisar más sobre líquido, definitivamente te recomiendo entrar y leer más. Probablemente la forma en que vas a aprender mejor, es entrando en el código y sólo tratando de averiguarlo. Empieza primero con las plantillas menos complicadas, y si ves un filtro que no reconoces, que va a ser prácticamente todas ellas si eres nuevo en esto. En realidad entra, búscalo en la hoja de tramposos, o en la documentación. A veces es posible que necesites más información. El cheat sheet es bueno, porque si haces clic en aprender más, te va a llevar a esa parte de la documentación. Pero los tramposos hacen una buena referencia porque tienes todo en una sola página y solo puedes buscarlo. Obviamente, hay mucho en esta página y hay mucho en la documentación, no tenemos para siempre que repasar cada opción en líquido. Pero creo que es una buena idea hacer todo lo que puedas cuando estás desarrollando tu tema. Y siempre que te encuentres en algo, mira la hoja de tramposos, mira la documentación, y ojalá puedas empezar a entender qué etiqueta líquida necesitas o qué etiquetas líquidas que ya están en tu proyecto están haciendo. Entonces, eso es líquido. En la siguiente sección vamos a traer nuestro conocimiento de la estructura de nuestro código de plantilla y lo que acabamos de aprender con líquido para construir nuestra propia sección personalizada, y luego lo vamos a incluir en una plantilla. Entonces me emociona empatar y lo que ya hemos aprendido y mostrarte el emocionante poder de las secciones en el siguiente video. Entonces te veré ahí. 14. Cómo crear una sección personalizada: Para esta lección, he cerrado nuestra documentación líquida y nuestra hoja de trucos, y he traído de vuelta nuestra tienda en línea porque en esta lección, vamos a aprender a desarrollar nuestra propia sección especial de Shopify para nuestro tema personalizado aquí mismo. Siento que las secciones son el mejor lugar para que entremos y hagamos algún desarrollo personalizado porque las secciones son realmente el centro de todo tu tema. Es el lugar donde realmente puedes poner en esquemas para que puedas tener esas opciones de personalización dentro de tus páginas y tus plantillas. Entonces como un buen pequeño proyecto para esta clase en particular, lo que quiero hacer es realmente crear una sección de miembro del equipo en nuestra página sobre. Está bien. Entonces si volvemos a aquí, da click en personalizar. Voy a abrirla en una nueva pestaña. Vamos a la página Acerca de Nosotros que creamos anteriormente. Recuerda que codificamos duro en una sección para mapa. Yo quiero reemplazar eso por nuestra propia sección para miembros del equipo porque en nuestra página Acerca, quizá queramos tener una sección sobre los diferentes integrantes del equipo trabajando en, digamos que somos una firma o algún negocio o alguna tienda, obviamente siendo un Tienda Shopify. A lo mejor queremos destacar algunos miembros clave del equipo o las personas que trabajan para nuestra empresa. En primer lugar, me voy a deshacer de esa etiqueta de diseño porque no creo que tenga sentido no tener un encabezado y un pie de página. Voy a ir a la página punto sobre, quitar esta etiqueta de diseño, guardar eso. También me voy a deshacer del mapa de secciones y lo voy a llevar de vuelta a básicamente, exactamente lo mismo que la página normal. Está bien. Refresca la página en nuestro personalizador. Puedes ver aquí tenemos una plantilla de página estándar y entre encabezado y pie de página, acabamos de obtener contenido de página. El contenido de nuestra página, por supuesto, somos capaces de cambiar en nuestras páginas elemento de menú aquí. Después, haga clic en la página. Aquí es donde editamos ese contenido. Está bien. Entonces lo que voy a hacer es entrar de nuevo al editor de códigos. En secciones, voy a crear una sección con el nombre de la sección que queremos. Voy a llamarlo miembros del equipo punto líquido. Podrías llamarlo staff dot liquid, lo que creas que es un buen nombre. Está bien. Ahora con el fin de construir esta sección de integrantes del equipo, voy a referirme a otras áreas de nuestro código y podemos copiar alguna estructura que ya existe. Para empezar, lo que vamos a necesitar es algún tipo de div donde vamos a poner en nuestro código. Entonces vamos a necesitar un esquema. Ahora recuerda cuál es el esquema, son las opciones en nuestro personalizador. Para esto, aún no tenemos una sección dinámica aquí pero lo viste en otras páginas, como la página del producto, tenemos una sección personalizable aquí. Todo esto está definido por el esquema. Esperemos que eso ya haya sido martillado en casa. Volviendo a la página Acerca de Nosotros, vamos a poner aquí nuestro propio esquema, como tal. Entonces necesitamos una etiqueta de esquema final. Dentro de estas etiquetas de esquema de apertura y cierre, lo que queremos poner es un objeto JSON. Está bien. Ahora puede que no estés familiarizado con JSON, pero como ya he dicho en las lecciones anteriores, es bastante sencillo. Comienza con corchetes rizados, y ahora tenemos que definir algunos atributos de nuestro esquema. En realidad voy a hacer referencia a la documentación en esta lección porque a veces es bueno refrescar la memoria y me olvido todo el tiempo qué atributos necesitamos para nuestro esquema. Déjame solo buscar temas, esquema y Shopify. Secciones temáticas. Saltemos a aquí, esquema en la parte de secciones temáticas. Está bien. Las secciones deben tener un nombre. Entonces ponle un nombre y lo vamos a llamar miembros del equipo. ¿ Qué más necesita? Podemos poner en una clase, y esa es la clase CSS que entrará en el div. Le daremos una sección de clase de integrantes del equipo. Esta es la clase a la que podemos hacer referencia en nuestro CSS. Entonces, por supuesto, ajustes. Ahora, podemos escribir los ajustes probablemente antes incluso de escribir cualquiera del código HTML real. Para definir nuestras configuraciones que van a ser una matriz, necesitamos abrir y cerrar corchetes, y luego podemos agregar algunos objetos JSON más. Para cada una de las configuraciones, necesitamos un ID, un tipo, y una etiqueta. Hay otras cosas que podemos poner como un valor predeterminado pero vamos a necesitar un ID, tipo y etiqueta para cada configuración de sección. El tipo es el tipo de entrada que pasamos en una lección anterior apenas brevemente. El rótulo es lo que aparece en el personalizador y el ID es la variable que usaremos dentro de nuestro código fin de hacer referencia a lo que el usuario ha puesto en este campo o al valor predeterminado en el caso de que no haya nada puesto ahí. Verás que todo esto sucede a medida que construimos. El primero que vamos a necesitar, ID y el primer ajuste que quiero para nuestra sección de integrantes del equipo es un título de sección. Yo lo voy a llamar título. Para tipo, va a ser texto y etiqueta va a ser título de sección. Puedes configurar esto como quieras, solo tiene que tener sentido. El tipo definitivamente tiene que ser texto porque ese va a ser el tipo de entrada que aparece en el personalizador. Todo lo demás puedes configurar a lo que quieras. Esta variable se puede llamar otra cosa. Lo que sea que aparezca al usuario en el front-end, eso puede ser lo que quieras también. Basta con tener en cuenta eso. Tiempo para agregar en otro objeto. Ahí va a ser donde defina los bloques. Lo que quiero hacer es que realidad no hemos mirado mucho los bloques en este curso ya. De hecho, apenas lo tocamos. Qué bloques nos permiten hacer, y te mostré en la sección de presentaciones de diapositivas, es nos permite básicamente agregar contenido en bloques. No sé de qué otra manera decirlo, pero nos permite básicamente agregar bloques de contenido los cuales podemos eliminar o agregar múltiples. El límite de cuántos bloques podemos agregar lo definimos nosotros. Creo que los bloques tienen sentido en la sección de un miembro del equipo porque número uno, lo más probable es que vamos a tener más de un miembro del equipo. Número dos, es posible que necesitemos agregar o eliminar a los miembros del equipo en el futuro. Creo que tiene total sentido usar un bloque. Volviendo a Acerca de Nosotros. No sé por qué sigo dando clic atrás en esto porque aún no tenemos una sección importada. Hagamos eso ahora mismo. Esto aún no está completamente formado, pero voy a ir a saltar un poco adelante y tirar esa sección aquí porque cuando esté lista para ir, estará justo dentro de esta plantilla, lista para que podamos personalizar. Esta sección se va a llamar miembros del equipo. Esa palabra ahí se relaciona con lo que hemos etiquetado nuestra sección en nuestro archivo de secciones, obviamente sin el líquido punto. De hecho voy a crear un valor predeterminado para esto para que en cuanto ejecutemos la página, vamos a obtener un valor sin que tengamos que escribir nada. Yo sólo voy a decir, es conocer a nuestro equipo, equipo en capitales. Ese va a ser el valor por defecto. Hagamos una pausa aquí por un segundo con el esquema. Cierra eso con un solo ajuste y en realidad usa ese ajuste ahora para que realmente podamos verlo venir a través en el personalizador. Lo que voy a hacer para eso es, voy a robar la estructura de otra sección de nuestra sección de secciones. Demasiadas secciones. Permítanme encontrar un buen ejemplo aquí. A lo mejor, colección destacada, columnas de características. Aquí puedes ver que si el título de la sección no está en blanco, queremos ponerlo en pantalla y queremos usar esta estructura HTML porque ya hay CSS asociado a eso, vamos a sacar algunos estilos automáticos de la derecha la puerta. Hagamos eso. De hecho, vamos a usar este contenedor de ancho de página también. Eso va a asegurar que el contenido que tenemos se ajuste al ancho de página. Ya tenemos la etiqueta div de cierre para eso ahí. Básicamente acabo de agregar el ancho de página de la clase. Entonces, dentro tengo si configuración de sección título de punto no está en blanco, entonces lo ponemos y escapamos de cualquier HTML que se ponga ahí. Porque etiquetamos nuestro título como el DNI del título, esto es en realidad todo lo que necesitamos hacer. No necesitamos cambiar el nombre de la variable. Si guardo eso, comprueba dos veces no hemos cometido ningún error con el reloj temático, todos estamos bien, y refresco esta página en el personalizador, lo que ahora verás es una sección de miembro del equipo disponible para nosotros para personalizar entre el encabezado y el pie de página. Si hago clic en esto, puedes ver nuestra única opción que definimos para título de sección. En lugar de Conocer al Equipo, tal vez podría decir nuestro equipo. Esto se actualiza dinámicamente justo frente a nuestros ojos. ¿ Qué tan guay es eso? Estoy contento con Conoce al Equipo. Ahora, quiero definir algunos bloques. Vámonos a mirar aquí y busquemos bloques. Representación de bloques de sección. Eso no es lo que buscamos. Bloques. Aquí vamos. Las secciones pueden definir bloques en sus esquemas y sus contenedores de configuraciones y contenido que se pueden agregar, quitar y reordenar dentro de una sección. Esa es una explicación bastante buena de una frase de lo que intentaba explicar antes. Un bloque necesita tener un nombre y un tipo, y luego le das algunos ajustes, al igual que lo harías, normalmente, la misma manera que hemos hecho para nuestra configuración de sección. Después de nuestra configuración aquí, después de este pequeño corchete cuadrado, lo que vamos a querer hacer es poner en bloques. Funciona de manera similar a la configuración. Tenemos que poner en una matriz y así vamos a utilizar de nuevo los bloques cuadrados. Por cierto, acabo de expandir y contraer eso solo para que nos sea más fácil, pero lo volveré a expandir. Dentro de bloques, tenemos un objeto. En ese objeto, como dice, necesitamos un nombre y un tipo. Nombre va a ser miembro del equipo porque es un solo miembro del equipo. En realidad, podemos simplemente escribirlo en inglés legible. Entonces vamos a necesitar establecer el tipo y el tipo es lo que queramos que sea, porque esto es un bloque. Depende de nosotros establecer nuestros propios tipos. Voy a llamarlo personal-perfil. Ahora definimos ajustes. Al igual que hemos hecho aquí arriba con ajustes, vamos a poner en los ajustes para cada bloque. Vamos a abrir un corchete cuadrado y vamos a necesitar de nuevo tipo de identificación y etiqueta. El primer escenario va a ser el nombre del funcionario. Voy a llamarlo nombre-personal. El tipo de eso sólo va a ser un campo de texto. El sello será nombre. Porque todos, el nombre de todos va a ser diferente no tiene sentido tener un defecto. Entonces siguiente opción, voy a poner como el título de personal. Este es su papel en la empresa. Hágalo teclear como texto también. Etiqueta va a ser título de empleo. Desplázate hacia abajo para darnos un poco más de espacio. Le daremos un ajuste más y eso será bio. Lo llamaremos staff-bio. Esta vez, vamos a usar área de texto en lugar de texto y la razón por la que estamos usando área de texto, es el mismo pensamiento que en HTML normal, va a ser una biografía multilínea, muy probablemente. En realidad no queremos tener texto porque eso sólo nos va a dar una entrada de una línea. Queremos un poco de un área para que escribamos la bio. Ahora que tenemos estos atributos, lo que vamos a querer hacer es ponerlo en HTML aquí arriba. Lo que voy a hacer es usar el bucle for que vimos antes. Lo que vamos a tener que hacer es recorrer recorriendo los bloques de esta sección y luego ponerlos todos fuera. Voy a hacer por bloque en section.blocks, creo, y luego voy a terminar mi bucle. Este objeto aquí en el esquema, si estás siguiendo a lo largo, es la sección en sí y luego en aquí las cosas que podemos hacer referencia. El nombre de punto de sección, la clase de punto de sección, ajustes de sección, bloques de sección. En realidad una cosa que cambiaré es darle a esto un nombre más descriptivo. Voy a llamarlo personal en section.blocks. Porque sólo tenemos un tipo de bloque y es un perfil de personal y sabemos que todos estos bloques van a representar a un miembro del personal. Sólo lo estoy llamando personal. En realidad, el personal puede ser plural, así que tal vez sólo diga miembro. De nuevo, puedes nombrar esto como quieras, justo lo que sea que lo haga más sentido para ti y más legible. Lo que voy a hacer es poner un div para cada miembro del equipo y dentro de ese div, voy a dar salida a estas tres variables que aquí hemos definido. Lo que voy a hacer para eso es un h3 por el nombre del miembro del personal. Voy a hacer un lapso para el título de los miembros del personal y luego voy a poner una etiqueta de párrafo para su bio. Aquí, aquí es donde ponemos nuestras etiquetas líquidas y solo queremos dar salida a lo que esté en la configuración de bloques. Entonces voy a tomar el objeto de miembro, que es lo que tenemos aquí arriba, ir por su configuración y seleccionar nombre del personal. Voy a copiar esto porque lo único que necesitamos cambiar es la parte final y en lugar de nombre del personal, voy a poner en título de personal probablemente no necesitó poner en el personal al inicio de la misma. En realidad, podría entrar y cambiar eso ahora. Probablemente no tiene sentido tener. Sólo voy a entrar y deshacernos del personal porque realmente no lo necesitamos. Podemos simplemente hacer nombre, título, y bio. Ahora deberíamos tener suficiente para una función de dos. Vamos a necesitar hacer algunos cambios más, pero al menos para que salga en pantalla, vamos a tener un cuidado después de que ahorremos. No hay errores en nuestro reloj temático. Deberíamos ser dulces y si vamos a nuestra página en las personalizaciones, refresca la página. Ahora si entro a Team Members, ya verás que podemos añadir un bloque. Voy a añadir un miembro del equipo. Voy a darle el nombre de miembro del equipo, sólo démosle mi nombre. Desarrollador Web. Como puedes ver, está saliendo de inmediato. Voy a añadir un poco de Lorem ipsum, solo cópialo desde arriba aquí como el comprador y ahí vas. Tenemos algún contenido insertado en la página. Si agrego a otro miembro del equipo, digamos que es Christopher Dodd de nuevo. No se me ocurrió otros nombres de miembros del personal en preparación, así que sólo vas a tener que lidiar con ver mi nombre dos veces. Pero como puedes ver, es agregar otro div con todo el contenido que hemos establecido aquí. Cicla a través de los bloques y luego suma en este contenido. Muy cool. Voy a dar clic en “Guardar” aunque parezca basura. Hagamos un poco de estilo. Podemos aprovechar el sistema de cuadrícula en nuestro tema. Esto es algo ligero que sucede en casi todos los temas que usan luz para construirse o los temas libres de Shopify estarán usando la ligera cuadrícula. Lo que puedo hacer es envolver esto en una cuadrícula. voy a poner un div alrededor de esto, llámalo grilla. Para este div, voy a darle una clase de elemento de cuadrícula, y también voy a agregar una clase para definir columnas. Hay algunos tamaños de pantalla desarrollados en el sistema de rejilla. Si quieres conocer la cuadrícula de pizarra, déjame solo ver si hay información disponible. Cuadrícula pizarras. Podría haber alguna información disponible en Google. Aquí estilos con líquido. No. Déjame salir de la ligera documentación. Haga clic en “Ejemplos CSS”. Aquí vamos. Aquí mismo tenemos nuestros puntos de ruptura CSS, medianos, grandes, de pantalla ancha, canalón es el espacio entre elementos de cuadrícula. Si me desplazo aquí abajo, se pueden ver algunos ejemplos del sistema de cuadrícula. Por ejemplo, si quisiéramos que la columna ocupara la mitad de la página en tamaños de pantalla que son medios y superiores. Esta es la clase que usaríamos. De hecho, esa es la clase exacta que quiero usar para nuestra sección de pequeños integrantes del equipo. Voy a poner eso ahí dentro. Como puedes ver, es similar a lo que han definido aquí, tienen una cuadrícula y luego tienen elementos de cuadrícula, y luego tienen la especificación de columna. Se pueden apilar estos con un tercio pequeño, un sexto. Se puede hacer que cambie la anchura de la columna en función del tamaño de la pantalla. Pero para nosotros, medianos arriba, la mitad debería estar bien. Ir a mi tema, ver todo dulce. Voy a volver aquí, refrescar la página. Ahora verás que nuestra sección de integrantes del equipo está en esta bonita cuadrícula de dos columnas. Si iba a añadir un tercer miembro del equipo, di que es mi nombre otra vez. Se puede ver. Que tenemos otra sección aquí. Obviamente aquí hay temas de espaciado. Una forma fácil de arreglar esto es simplemente dando algún margen superior a todos estos elementos de cuadrícula. De nuevo, probablemente deberíamos estar haciendo esto en CSS, pero solo por el interés del tiempo, solo lo voy a poner aquí en línea. Voy a darle un margen superior de 15 píxeles. Guarda eso. Reloj temático es feliz, refresca la página y ahora tenemos un poco más de margen. Podemos aumentar ese margen por lo que sea que establezcamos aquí. A lo mejor lo queremos a los 30 en su lugar, no es un gran problema. Depende de ti lo que quieras hacer con tu estilo. Volviendo a nuestra sección sobre nosotros, hay una cosa más que siento que nuestros perfiles de miembros del equipo necesitan, y esa es una imagen. Ahora he dejado imagen a perder porque es un poco más complicado que agregar un campo de texto. Mirando nuestras opciones de entrada. No estoy seguro si hay opciones de entrada aquí, déjame echar un vistazo. Tipos de entrada. Supongo que estamos en la página equivocada para los tipos de entrada. Si busco la documentación, ¿es ésta? ¿ Tipos básicos de configuración de entrada? Aquí vamos. Aquí puedes ver que podemos usar un recolector de imágenes para subidas de imágenes. esto hay dos partes, obviamente, tengo que añadir la opción en nuestro bloque y luego tengo que agregarla a nuestro HTML real. Voy a ponerlo en realidad por encima de nombre. Voy a crear un nuevo objeto aquí y por dentro, voy a tener el id de foto, tipo va a ser lo que te mostré antes de picker de imagen, y etiqueta es foto. Podemos decir lo que queramos. Yo guardo eso y ahora tenemos esa opción en nuestra configuración. El siguiente paso será ponerlo en nuestro contenido real. Voy a poner una etiqueta de imagen aquí arriba y la forma en que voy a hacerlo es usando un filtro que vimos antes. Voy a abrir una apertura cerrando corchetes rizados, y voy a agarrar ajustes de miembros. ¿ Fue imagen o foto a la que la llamamos? Foto. Configuración de miembro foto. Entonces lo voy a ejecutar a través del filtro URL de imagen para obtener la URL de esa foto. Entonces lo voy a ejecutar a través de la etiqueta de imagen para que la etiqueta salga en la pantalla. Si guardo eso, comprueba si he hecho algún error, luce tan bien. En el reloj temático, refresca la página. Ya verás aquí que tenemos un montón de No Image. Lo que debemos hacer en realidad es primero comprobar si hay una imagen. De lo contrario nos vamos a poner esa fea No Image. Este es un paso opcional, pero va a hacer que se vea más bonito. Pondremos aquí un condicional, miembro, ajustes, foto. Lo pondremos y si no, no saldrá nada. Guarda eso. A ver si tenemos algún error de Liquid , no, todos estamos bien. Actualiza la página. Ahora puedes ver que no aparecen imágenes, hasta que las sumamos nosotros mismos. Si entro en esta sección, me meto en una cuadra. Ya puedes ver que tengo esta entrada de foto. En realidad puedo explorar Imágenes gratis a través de la base de datos de Shopify, o puedo seleccionar mi propia imagen. Lo que voy a hacer es encontrar una imagen de mí misma y subir eso. Aquí vamos. Una vez que eso esté dentro, entrará en el contenido. Si salgo aquí y agrego imágenes para las otras secciones. Solo agreguemos el mismo. Ya verás que viene aquí arriba en el bloque real también, lo cual es bastante genial. Se puede identificar más fácilmente a los diferentes integrantes del equipo. Ya verás que tengo la foto, el nombre, el título, y un comprador. Ahora, por supuesto, queremos arreglar este relleno y espaciado. Podemos hacer eso en CSS, pero ese no es el punto de esta lección. El punto es mostrarte estos bloques, y cómo podemos construir nuestra propia configuración en el personalizador a través de nuestro código. Ahora hay un tema más que tenemos con esto, y que el tamaño de la imagen es muy pequeño. Eso es porque si usas URL de imagen sin ningún parámetro, va a aparecer con una imagen que creo que es un 100 por 100, bastante pequeña. Lo que vamos a hacer para rematar, es agregar un parámetro aquí, que le va a decir a Liquid lo grande que queremos la imagen. Voy a decir 500x. Eso hará una imagen con 500 por 500. Guarda eso, refresca la página, y ahora puedes ver que tenemos una imagen de 500 por 500 en cada uno de los integrantes de nuestro equipo. Eso en realidad es un poco demasiado grande, así que voy a escalar eso a 300, y voy a sumar en otro miembro del equipo, que sólo va a ser yo otra vez, sólo para mostrarles la extensión de la grilla. Christopher Dodd, Puesto de Trabajo: Desarrollador Web, Bio, solo copiaremos de los otros. Ahí vas. Guarda eso, y ahora puedes ver tenemos esta cuadrícula de dos columnas con los miembros de nuestro equipo. Podemos entrar, podemos eliminar bloques, podemos reordenarlos, o podemos agregar nuevos miembros del equipo y todo eso sin usar código. Como puedes ver, lo hemos configurado una vez en el código. Hemos configurado nuestras opciones. Hemos configurado donde queremos que esos valores que configuramos aparezcan en nuestro código, y hemos desarrollado nuestra propia sección. Ahora, hay una cosa más que quiero mostrarles, y eso es agregar un preset, que podamos usar esta sección en nuestro contenido para etiqueta de índice. Volvamos a nuestra documentación aquí, y tal vez la encontremos en este lugar, presets. No, así que vamos a tener que volver a la página en la que estábamos antes. Configurando los ajustes del tema, ¿fue eso? Secciones temáticas. Aquí vamos. Preajustes. Aquí vamos. Si hacemos clic en “Preajustes”, podemos ver esta sección, que podemos definir un nombre y una categoría para que podamos utilizar en nuestro contenido para sección de índice. Si entramos en nuestra página Inicio donde se está ejecutando contenido para índice, y hacemos clic en “Agregar sección”, vamos a ver. Ahí hay Contenido personalizado. Eso no es lo que buscamos. Textos ricos, Mapa, Boletín. Mira, en realidad no tenemos nuestra sección de miembros del equipo aquí. Si queríamos agregarla como una de nuestras secciones en contenido para índice, solo necesitamos agregar un preset. Voy a agarrar esto como ejemplo sólo para ahorrar tiempo. Entra aquí. Cierra bloques para que sea un poco más fácil de leer, y pon presets. Ahora bien, no necesitamos bloques porque esto sólo va a establecer un preset en nuestros bloques, lo cual podemos hacer si queremos, pero no es necesario. Todo lo que quiero hacer es darle un nombre y categoría, que podamos usarlo en nuestro contenido para índice. Esa categoría debería coincidir con uno de estos aquí. Creo que lo más apropiado tal vez Información de la Tienda. Sólo vamos con eso. Yo lo voy a llamar Información de tienda, y como está en mayúsculas, no estoy seguro exactamente si debo poner capitales míos o no. Yo sólo voy a ver cómo lo hacen con la plantilla de mapa. Bajando al mapa y desplazándose hacia abajo hasta la parte inferior para ver el preset, podemos ver el nombre es Mapa y la categoría es Información de tienda. Al igual que lo hemos escrito. Categoría, información de la tienda, y el nombre va a ser Miembros del Equipo. Presione “Guardar” en eso. ¿ Hemos conseguido los errores? No, no lo hemos hecho. En realidad lo hacemos. Tenemos un JSON inválido. Eso se debe a que no hemos cerrado esto, y en realidad tampoco hemos cerrado el corchete cuadrado. ¿ Cómo arrancamos eso? Ojalá no tengamos ningún error JSON ahora. Actualizado. Ahora bien, si actualizo nuestra página de Inicio en el personalizador, haga clic en “Agregar sección”. Ahora en la Información de la Tienda, no sé por qué viene dos veces, pero al menos la tenemos aquí. Podemos añadir nuestra sección Conoce el Equipo. final, podemos sumar miembros del equipo tal como lo hicimos antes, y aparecerá en una bonita cuadrícula. A medida que actualicemos el contenido, surgirá automáticamente, y podemos reordenar esa sección, dentro de todas nuestras otras secciones. Ahí vas. ¿Qué tan bueno es eso? En realidad no voy a guardar eso porque no quiero conocer esta sección Equipo en mi página Principal. Pero eso concluye prácticamente arrancando tu propia sección de Shopify. Ahora, como dije antes, querrás darle un estilo un poco diferente. Tendrás que agregar algunos ya sea estilos en línea o entrar en tu tema.scss.liquid, y agregar algunos estilos usando clases para apuntar a lo que has puesto en esta nueva sección. A lo mejor poner en clase de miembro del equipo, subrayado, nombre de subrayado, y luego hacer lo mismo por tu título y bio. Esta sería una buena manera de dispensar tu CSS usando BEM, Block Element Modifier es lo que eso significa. Si quieres saber más sobre por qué estamos usando subrayado, subrayado aquí y por qué se utiliza en todo el FEM, BEM es lo que necesitas para investigar. Pero eso está fuera del alcance de esta clase, desafortunadamente. Lo que acabo de hacer aquí es poner en algunas clases que podemos ir y apuntar en tema.scss.liquid. Esto no es específicamente una clase CSS, así que no me meteré en eso. Pero sí, eso es todo. Esa es tu sección personalizada construida. Ojalá eso te muestre el poder de las secciones. He trabajado con otras plataformas en el pasado, y no he visto nada como esto donde solo puedes definir un montón de opciones en un bloque JSON, y luego de repente puedes usarlo directamente encima y tener una interfaz de usuario tan agradable para la personalización. Si volvemos a esa página Acerca de Nosotros, donde hemos codificado duro esta sección ahí dentro. Podemos utilizar esta encantadora interfaz de usuario la cual actualiza lo que tenemos aquí en la vista previa en vivo. Eso es realmente genial. Espero que hayan disfrutado aprendiendo a hacer esto. En los próximos videos, vamos a terminar este lado, mostrarte cómo enviarlo a un lado del cliente o a una tienda adecuada donde realmente vas a pagar un plan si así lo deseas. Quedate por ahí para eso. Te veré en el siguiente video. 15. Cómo mejorar tu aprendizaje: Entonces en este curso aprendimos cómo girar rápidamente una tienda de desarrollo Shopify, cómo editar el código del tema debut que venía con la tienda y en el proceso, aprendimos cómo funcionan los temas y las opciones disponibles para personalizar prácticamente cualquier cosa que ver con nuestro amigo de la tienda en línea. Ahora solo este conocimiento podría ser suficiente para satisfacer tus necesidades básicas de Shopify. Pero inevitablemente, vas a necesitar hacer cambios más allá del alcance de este curso. Ahora en la siguiente lección extra, les voy a presentar una forma mucho más compleja de desarrollar temas de Shopify, empezando casi desde cero. Pero antes de eso, voy a suponer que el tema debut o cualquier otro tema que te lleve fantasía, proporciona una buena base para cómo quieres que funcione tu sitio. Y esto definitivamente es lo que recomiendo a todos los que están desarrollando temas de Shopify. Hay muchos grandes temas por ahí y sobre todo cuando estoy trabajando con clientes, usualmente uso un tema existente como punto de partida. No siempre tiene sentido reinventar la rueda a menos que realmente necesite algo personalizado. Y por eso vamos a hablar de pizarra en la lección extra. También vamos a hablar, después de esta lección sobre, cómo llevar tu sitio en vivo. En realidad he puesto esta lección antes, esa, porque una vez que realmente transfieras la propiedad de tu tienda, puedes perder acceso a ella. A menos que la persona o la cuenta a la que has transferido la propiedad empiece en un plan de pago. Por lo que si estás listo para ponerte en un plan de pago, definitivamente puedes aprender sobre cómo mover tu sitio a tu plan de Shopify real en el siguiente video. Pero por ahora, de lo que quería hablar brevemente es de cómo darías el siguiente paso en aprender qué quieres hacer con tu tema de Shopify a continuación. Así que vamos a sumergirnos en nuestro tema y hablar un poco de tal vez algunas personalizaciones que quisiéramos hacer. Ahora la primera personalización que quizá quieras hacer es un cambio de estilo. Y eso es muy normal y eso probablemente va a suceder en algún momento con tu tema. Podría querer cambiar digamos el margen entre este rubro y este aquí mismo. Entonces entras a tu sección y buscas esa opción en tu personalizador y no tienes opción en tu personalizador para cambiar el margen aquí. Entonces tienes dos opciones. Puedes entrar y simplemente crear el cambio, o puedes crear una opción en tu código de sección para permitirte hacer esto en tu personalizador. Entonces si es un cambio de estilo y solo quieres aplicarlo a lado sin convertirlo en una opción personalizable, lo que puedes hacer es simplemente tirarlo en tu tema.scss.liquid. Entonces, solo usemos ese ejemplo del que acabo de hablar. Averigamos qué es esto. Por lo que estamos en la imagen con sección de superposición de texto, y lamentablemente no podemos buscarla por el nombre de la plantilla. Vamos a tener que buscar en la carpeta y encontrar imagen con superposición de texto. Entonces imagen con superposición de texto y luego aquí podemos ver dónde aparece eso y ese nombre aparece en el esquema de esta sección justo aquí, hero dot liquid. Por lo que este es el apartado que estamos viendo actualmente. Si lo miramos aquí mismo, tal vez no esté claro cuál de estos divs se relaciona realmente con lo que vemos en la página. Entonces podríamos querer inspeccionar y esto es algo que hago a menudo. Usando nuestras herramientas de desarrollo, podemos ver qué es eso. Y como se puede ver aquí, es este div con una clase de R-T-E dash setting subtítulo mega dash, subtítulo mega dash, dash, dash, large. Por lo que buscando aquí mi código, puedo buscar mega subtítulo. Ya lo veo, pero sólo para que quede claro. Entonces tenemos mega subtítulo, y mega título. Aquí vamos. Lo tenemos en algunos lugares diferentes, pero éste es el que buscamos. Entonces si quisiéramos convertirla en una opción en el personalizador, lo que podríamos hacer es agregar un estilo en línea y establecer margen top y lo definiríamos tal vez como, así que entramos en la configuración de punto de sección y tal vez lo llamamos margen superior. Ahora también quisiéramos comprobar si en realidad hemos establecido primero el margen superior. Por lo que quisiéramos poner una declaración if alrededor de esto. Pero digamos que queremos cambiar el margen superior en todo el sitio. Por lo que entraríamos en nuestro punto temático S-C-S-S punto líquido, desplazaríamos todo el camino hacia abajo. Este es un archivo muy grande y vamos a crear una regla para el subtítulo mega dash. Y aquí dentro, vamos a poner el margen superior a algo ridículo, sólo para que veamos que está funcionando. Entonces voy a presionar guardar en eso. Comprueba que no hayamos hecho ningún error. Sí, está actualizada ahora y si refresco esta página, puedes ver ahora que tenemos este ridículo margen top que está afectando a cualquier elemento con una clase de subtítulo mega dash, que esperemos que solo sea esa sección dentro de esta sección o de esa pieza de texto dentro de esa sección. Entonces acabo de quitar eso. Se actualiza nuestro código. Si vuelvo a refrescar la página, volvemos a la normalidad. Entonces ese es un escenario. A lo mejor quieres actualizar el estilo. Para que puedas hacer eso con CSS. A lo mejor quieres actualizar algo que sucede con JavaScript. Entonces no estoy seguro de cuánto ajax tenemos aquí. Si pongo eso hasta tres, parece que el tema debut no es pesado en el JavaScript. Tengo que dar clic en actualizar aquí cuando la cantidad se actualiza. Pero esta podría ser una opción de personalización. En lugar de tener que hacer clic en Actualizar, tal vez queremos que esto se actualice cada vez que hacemos click en esto. Y debido a que este es un cambio de página en vivo, nos gustaría hacer eso con JavaScript. Entonces investigarías cómo hacer eso y luego irías, y probablemente lo pongas en tu tema dot js. Entonces digamos que queremos hacer eso, ¿cómo habríamos dicho problema? Abre una nueva pestaña y busca en Google, haz que el precio de actualización de cantidad de forma automática, y luego por supuesto, necesitamos poner en qué plataforma estamos usando; Shopify. Está bien. Entonces hay un montón de artículos diferentes aquí. En realidad no he buscado esto antes, pero este es el proceso al que iría para encontrar la respuesta. Entonces este no es el mejor hilo. No siempre vas a encontrar la respuesta perfecta en tu primera búsqueda. Aquí vamos. Aquí hay algo que se ve bien. Entonces a juzgar por mi conocimiento de JavaScript ya, y por supuesto, este no es un curso de JavaScript, así que si quieres profundizar en JavaScript, tengo un curso sobre JavaScript aquí en skillshare.com también. Pero vas a querer configurar aquí un oyente de eventos para comprobar cuándo esto cambia y luego vamos a tener que actualizar estas partes aquí, lugar de tenerlo actualizado cuando hagas clic en el botón de actualización, que puedes ver aquí es recargar toda la página. Entonces esa es una personalización que tal vez quieras hacer. Por supuesto, antes de personalizar algo con código, debes comprobar si en realidad puedes simplemente personalizarlo usando las entradas que ya tienes en tu personalizador de temas. Es decir, por eso están ahí para que lo uses sin tener que cavar en tu código. Y como nota al margen, si estás cavando en tu código y estás creando algo que tal vez quieras cambiar más adelante, hazlo una opción en tu esquema y de esa manera puedes editarlo aquí y voltearlo sin tocando siempre el código. Esa es una de las razones por las que usar este esquema en absoluto. Por lo que podría ser un cambio de estilo, podría ser un cambio que podrías arreglar fácilmente con tu esquema, podría ser algunas cosas dinámicas de JavaScript. Pero es probable que te vayas a topar algo que ya no sabes hacer. Nuevamente, como mencioné en este curso, sólo tenemos tiempo suficiente para hacer una visión general. Entonces tus mejores lugares para ir encuentren algunas respuestas, si estás de acuerdo con la lectura de la documentación, volvamos a la documentación de Shopify y vayamos a los temas. Aquí es donde vas a poder buscar toda la información que Shopify pone a tu disposición para que desarrolles temas. Entonces si queremos conocer las secciones, busca secciones en la documentación. Haga clic en Secciones temáticas. Y luego puedes aprender sobre el esquema. Puedes aprender sobre cómo incluir hojas de estilo JavaScript, renderizar bloques de sección, todo tipo de cosas. Entonces la documentación temática debe ser tu Biblia, debe ser tu libro de texto sobre estas cosas. Y luego también la hoja de trucos de Shopify, que miramos antes. Entonces si vas y haces clic en el primer enlace, esto es como una versión resumida de la documentación, y pudimos usar el comando F o Control F en un Windows para buscar cuáles son las diferentes variables en un objeto en particular como producto. Entonces esos son los dos lugares principales que quizá quieras buscar. Obviamente, hay otros dos cursos en Shopify, en esta plataforma, skillshare.com. Están un poco anticuados y uno es bastante básico, y el otro simplemente va realmente avanzado muy rápido. Entonces supongo que escoge tu dirección con eso. Pero por lo demás, en realidad estaba pensando en crear un curso de Shopify de principio a fin. Si hay suficiente interés, si ustedes chicos quieren aprender eso, definitivamente háganme saber en el cuadro de discusión de abajo y si tienen algún problema o alguna personalización que quieran hacer dentro Shopify que son luchando por averiguarlo, definitivamente déjalo como comentario en el cuadro de discusión abajo y haré todo lo posible para señalarte en la dirección correcta. Entonces como mencioné en el siguiente video, vamos a hablar de tomar tu sitio en vivo y luego en el video después de eso, vamos a hacer un bono en Slate. Entonces Slate es si quieres ponerte realmente en serio sobre el desarrollo del tema y empezar desde básicamente cero, ahí es donde quieres mirar. Entonces dos lecciones más y luego vamos a terminar. Espero que estén disfrutando del curso. Te veré en el siguiente video. 16. Cómo activar tu sitio: Muy bien, entonces para esta lección, una vez más he cerrado esas pestañas y nos he traído de vuelta a nuestra tienda. También tenemos la pestaña de nuestra cuenta de socios de Shopify aún abierta. Lo que voy a hacer en esta lección es mostrarte cómo esencialmente llevar tu sitio en vivo o migrarlo. O prepárate para convertirse en un tema en vivo en internet. Para que entren usuarios, usa el tema en un frente de tienda real. Entonces hay una gama de diferentes maneras en que haríamos eso. Entonces el primer escenario, digamos, es que se trata de una tienda existente. Por lo que la tienda de compartir habilidades de Chris es una tienda que se está ejecutando. Llegan pedidos por ahí ya hay productos aquí, clientes. Esta es una tienda en vivo. Muy bien, así que hemos hecho nuestro desarrollo en un tema separado, que no es en vivo, que es la forma en que debemos hacerlo. Si estamos listos para que ese tema se ponga en marcha, todo lo que tenemos que hacer es dar click en Acciones y luego dar clic en Publicar. Ahora si estás trabajando en una tienda existente, quieres tener cuidado con las cosas que editas, que no son el tema en sí. Entonces si estás redesarrollando un sitio web y estás agregando páginas, esas páginas van a estar en vivo en el sitio en el momento en que las crees. Pero no es tan grande a menos que realmente necesites que esas páginas sean privadas porque no vas a estar vinculando a esas páginas muy probablemente. La otra cosa, la navegación. Por lo que podría tener que crear algunos menús nuevos. En tu tema vas a enlazar a esos menús. Esos menús van a estar ahí con los menús existentes que están en la tienda en vivo todos en el mismo lugar. Entonces cosas como blogs, páginas, navegación, y productos están en tu propia tienda. Está bien, no están específicamente relacionados con el tema, así que tenemos que tener cuidado con eso también. Entonces escenario número dos, estás trabajando con una tienda de clientes, pero estás desarrollando tu tema en una tienda de desarrollo. Ahora quizá quieras hacer eso por esta razón en particular que acabo de mencionar, porque tienen sus propios productos, páginas de post de blog y navegación ya configuradas y quieres crear algo que esté completamente separado. Entonces lo que vas a querer hacer es quizás empaquetar este tema. Entonces Descárgalo y luego Subirlo a la otra tienda y luego migrar las otras cosas que quieres encontrar también, como productos, entradas de blog, páginas, y navegación. Esa sería la forma más laboriosa y manual de hacerlo. Por lo que normalmente tratarías de evitar eso. Por lo que una buena mezcla entre esos dos escenarios es desarrollarse en una tienda real. Pero ten cuidado con lo que creas en los productos, publicaciones y páginas del blog, y en la medida de lo posible, tal vez ocultarlas u ocultarlas o no tenerlas vinculadas a cualquier lugar de tu sitio web actual. Si aún están en desarrollo y no están listos para salir a vivir, quieres asegurarte de que sean casi invisibles para el público. Pero si esta era tu tienda y aún no te has ido a vivir, has desarrollado tu tema. Acabas de golpear Publicar. Tan simple como eso. Entonces digamos escenario tres, solo tienes la cuenta de tu pareja y acabas desarrollar esta tienda como una tienda de desarrollo y ahora quieres que sea una tienda real donde puedas aceptar pedidos y básicamente convertirte en una tienda legit de su propio dominio. O tal vez quieras trasladar esta tienda a alguien que vaya a hacer eso. Entonces tal vez desarrollaras esto para un cliente y puedes transferir esta tienda a su cuenta para que puedan empezar a pagar por Shopify. Ahora tienen un duplicado de la tienda que acabamos de crear por cuenta propia. Entonces eso es realmente para lo que se construyen los temas de desarrollo. Están construidos para que podamos desarrollar un tema, prepararlo para el cliente. Ya sea que esa sea otra persona o que sólo seamos nosotros. Prepara el tema y luego pasa a un plan de Shopify que paga. Entonces, una advertencia antes de que demos a prueba esto, tan pronto como lo hagas, se va a transferir más. Es probable que perdas el acceso. De hecho, en realidad estoy bastante seguro de que una vez que transfieras esta tienda de desarrollo de tu lista de tiendas de desarrollo al plan de un cliente, entonces durante el tiempo que tarden en dejar de pagar ese plan, ninguno de ustedes tendrá acceso a ese sitio. Entonces advirtiendo, no migren ni transfieran la propiedad de un sitio hasta que alguien esté listo para pagar por Shopify. Entonces si [inaudible] fuera del camino, pasemos por el proceso. Entonces en realidad cerraré la tienda e iré al recuento de socios. Simplemente refresca esto porque los enlaces en realidad caducan. Por lo que queremos asegurarnos de que tenemos la página más reciente. Como puedes ver aquí, tenemos la tienda de compartición de habilidades de Chris bajo las tiendas de desarrollo. Ahora para hacer de esta una tienda real, queremos transferir la propiedad a alguien. Entonces aquí mismo nos advierte lo que va a pasar y este punto punto de aquí es la advertencia que di justo antes. No se puede acceder a la tienda hasta que el nuevo propietario seleccione un plan. Está bien, así que vamos a entrar aquí. este momento, no podemos seleccionar ningún nuevo propietario porque lo que tenemos que hacer es agregar una cuenta de personal. Por lo que voy a dar clic en “Añadir una cuenta de personal” y nos va a llevar de vuelta a nuestra tienda. Por lo que me voy a crear como cuenta de personal, Freelancer.com. Esta cuenta de personal tendrá permisos completos. Por lo que voy a dar clic en Enviar Invitar. En realidad ya he hecho esto. Entonces veamos si puedo encontrar otro correo electrónico para hacer esto en. Tengo algunos correos electrónicos diferentes, por suerte. Ahora he enviado la invitación. Entonces puedes ver aquí el dueño de la cuenta es el administrador de la tienda de habilidades share de Chris, que es nuestra cuenta de socio, pero ahora tenemos esta cuenta de cosas. Entonces si entro a mi bandeja de entrada, realidad puedo aceptar esa invitación. Entonces déjame hacer eso ahora mismo. Aquí vamos adelante, tardó un poco. Pero ahora está aquí y me está pidiendo que cree una cuenta de personal. Entonces voy a crear una cuenta de personal. Voy a tener que poner un número de teléfono y una contraseña. Déjame generar una nueva contraseña con mi app de gestión de contraseñas. Yo sólo voy a usar este mismo en realidad como usamos para la tienda. Entonces voy a dar clic en Crear cuenta. Ahora estoy conectado a la tienda. Pero como puedes ver aquí, mi nombre es Christopher Dodd y no la tienda de recursos de Chris. Por lo que misma tienda, diferente usuario conectado. Ahora tengo permisos completos para acceder a la tienda. Puedo hacer lo que quiera. Pero el tema con esto es que sigo en una tienda de desarrollo. Entonces si quiero llevar esta tienda en vivo, voy a tener que volver a la cuenta de socio. Entonces al salir de estas tiendas y voy a refrescar la página que corremos antes. Ahora debería tener esa opción de transferir. Entonces si entro al cuadro Seleccionar ahora, puedo ver a Christopher Dodd, ¿de acuerdo? Por lo que puedo dar click en Christopher Dodd, Transferir la tienda y aquí es donde perderé el acceso a toda la tienda. Está bien, así que puedes ver aquí que esta tienda de compartición de habilidades de Chris. Si vuelvo a tiendas de desarrollo, Ya no está ahí. En realidad, se va a pasar a administrar tiendas. En realidad, está justo aquí. De hecho hice una prueba antes. Como puedes ver, está inactivo. Pero si hago clic en Entrar, parece que aún podría poder acceder a él. No, así que no puedo acceder ahora mismo. ¿ Qué va a pasar? Como decía, en la advertencia anterior, tendré que esperar a que la cuenta a la que la transferí empiece a pagar un plan. ¿ Está bien? Entonces si refresco la página ahora en esa cuenta me metí como Christopher Dodd. Intentaremos volver a iniciar sesión en la tienda. Afortunadamente, no me está dejando. Esto es conveniente. Pero permítanme volver atrás y escribir este nombre de tienda explícitamente [inaudible]. De acuerdo, así que tenemos esto. Regresa pronto. Voy a dar click Iniciar sesión. A lo mejor es porque estoy conectado en dos cuentas diferentes. Entonces sólo voy a abrir una ventana privada. Tienda de compartición de habilidad de Chris. ¿ Fue la tienda de compartición de habilidades de Chris? Sí. Haga clic Inicia sesión aquí. Esperemos que nos permita iniciar sesión. Sí.Así que ahora podemos iniciar sesión con esa cuenta de socio que creamos y ojalá mi contraseña siga guardada en el portapapeles. No, no lo es. Sólo voy a agarrar eso de mi edición de texto. Eso ya lo tengo. Ahora me está registrando. Lo que vas a ver subiendo justo en este punto es elegir tu plan. Entonces es por eso que te advertí sobre hacer esto hasta que estés listo para empezar realmente a pagar por un plan porque no hay otras opciones una vez que inicias sesión en esa cuenta de personal, que empezar a pagar por un plan. Por lo que elegirías y pasarías por las mociones y configurarías tu facturación y todo eso. Entonces desde la perspectiva de la pareja, así que estoy conectado en la cuenta de socio aquí. Es una tienda administrada a la que en realidad no puedo acceder ni acceder hasta que esta cuenta de personal, la persona o la cuenta que en realidad va a tomar la tienda e ir a vivir con ella, elige un plan, y empieza a pagar por Shopify. Eso es lo que es esa caja. Pero supongamos que el cliente o usted mismo o a quien esté asociada esta cuenta, escoja un plan y empiece a pagarlo. Bueno, ahora podrás acceder a la tienda en tu cuenta de pareja aún haciendo clic en iniciar sesión. Por lo que pasará de como ya lo ha hecho, de tiendas de desarrollo a gestionar tiendas. Entonces puedes empezar a gestionarlo como una cotización, sin cotización, socio de Shopify. Entonces esto tiene sentido total si estás desarrollando una tienda para un cliente, has transferido a ellos, les has dicho, empieza a pagar por Shopify. Tu sitio está a punto de salir a vivir. Hacen esto. Entonces como eres el desarrollador o el socio que trabaja con ellos, aún puedes iniciar sesión y colaborar y trabajar en su sitio web también. Entonces así funciona con tiendas de desarrollo. De nuevo, como mencioné, y ya no vamos a tener acceso a la tienda. ¿ Estamos? Sí, así que ahora hemos estado totalmente bloqueados. Pero como mencioné antes, desafortunadamente, no puedo mostrarles porque estoy desconectado en la tienda. Pero como les mostré antes, podríamos simplemente descargar el archivo de tema en sí y luego subirlo a otro lado. Si no quisiéramos pasar por todo este traspaso propiedad parte de todo el proceso. Entonces hay algunas formas de hacerlo, pero esto es esencialmente como tomarías tu sitio en vivo. El paso número uno es que necesitas realmente convertir ese tema en vivo. Entonces necesitas empezar a pagar por un plan si no lo estás ya. Después tienes una tienda Shopify en pleno funcionamiento. Por lo que prácticamente concluye todo el proceso desde hacer girar una tienda Shopify con un tema predeterminado, entrar, explorar el código, crear una sección personalizada, personalizarla tanto como quieras, y luego finalmente, transferirlo cuando estés listo a otra cuenta para que empieces a pagar por Shopify y empieces a ejecutar tu tienda. Entonces ese es todo el proceso. En el siguiente video, en realidad te vamos a mostrar un proceso diferente, empezando por Slate. Entonces si te interesa eso, quédate por ahí, de lo contrario, te veré en la conclusión. Muchas gracias por ver chicos. Espero verlos en el siguiente video. 17. Extra: Slate, Parte 1: En el siguiente video, hablaremos más a fondo sobre una herramienta de desarrollo de la vieja escuela para la que Shopify terminó de apoyar atrás en enero de 2020. Hablo de algo llamado Pizarra. Desde enero de 2020, ha quedado claro que Shopify se ha alejado de Slate, y ahora con el anuncio de que la CLI de Shopify se ha ampliado para permitir el desarrollo de temas también, veo poca o ninguna razón por la que alguien debería empezar un nuevo proyecto Shopify usando Slate. Dicho esto, he dejado el siguiente video en como tutorial para cualquiera que haya obligado a usarlo. Algunos temas más antiguos podrían seguir usando Slate, y por lo tanto este conocimiento no es completamente obsoleto. Si tienes alguna opción en el asunto sin embargo, definitivamente recomiendo usar la última herramienta para el trabajo, y esa herramienta es actualmente la CLI Shopify. 18. Extra: Slate, Parte 2: Bienvenidos de vuelta chicos. En esta lección, he cerrado todas esas otras pestañas, he cerrado mi editor de códigos, y he cerrado mi terminal que estaba ejecutando el reloj de tema, porque vamos a aprender de Slate en esta lección, ¿de acuerdo? Entonces si ya has usado Theme Kit antes en este curso, y Theme kit es genial porque nos permite editar temas sobre la marcha, y Slate hace algo parecido, pero también tiene otro elemento a eso, y es que crea un tema totalmente nuevo para nosotros. En realidad, podemos hacer lo mismo en Theme Kit. Probablemente mencioné tema, nuevo como uno de los comandos para Theme Kit. Crea un tema que es, una especie de tema Stata. Por lo que no puedes hacer algo similar dentro de Theme Kit. Pero si te tomas muy en serio el desarrollo de un tema personalizado de Shopify, vas a querer usar Slate, y Slate es un poco más complicado. La estructura de carpetas va a ser un poco diferente y se necesita un poco más de esfuerzo para configurarla. Pero por eso es una lección extra en este curso de Shopify. No pensé que pudiera hacer un curso de desarrollo temático de Shopify sin al menos hablar de Slate. Entonces, vamos a hablar un poco de Slate, configurarlo en tu computadora y si quieres saber más al respecto, puedes avisarme en el recuadro de discusión de abajo, ¿de acuerdo?. Entonces, sólo busquemos Slate ahora. Entonces si voy de compras/pizarra, ya pasamos por la documentación y miramos, la grilla. Aquí hay dos enlaces. Déjame echar un vistazo. Este es el repositorio de GitHub. Pero lo que quiero buscar es el sitio web real, para Slate, que está justo aquí. La información aquí no es la mejor, sobre todo con empezar, así que en realidad te recomiendo que sigas esta clase en lugar de seguir las instrucciones aquí, porque en realidad aprendí a empezar con Pizarra a través de un video, en el canal de YouTube de Shopify. Entonces, si escribo el video de YouTube de Shopify Slate, tal vez salga, sí. Entonces aquí mismo puedes ver un video de la cuenta de YouTube del socio Shopify, y así es en realidad como aprendí a los pasos de instalar Slate. Entonces también puedes referirte a esto o simplemente puedes escucharme en esta lección aquí mismo, ¿de acuerdo? Entonces, antes que nada, realidad hay una diapositiva en este video, que habla de la historia de Slate, y en realidad viene de Timber, así que recuerda que mencioné a Timber antes, y tienen una diapositiva en aquí para decir por qué ahora es Slate. El marco maderero era demasiado obstinado y esto es como una palabra de programación, lo que significa que, decidió demasiadas cosas para los desarrolladores por anticipado, así que lo despojaron aún más y crearon, Slate, ¿vale? Entonces Timber ahora es Slate, y pizarra es en realidad el punto de partida que los propios Shopify usan para todos sus temas de Shopify que desarrollan. También es el punto de partida para una gran cantidad de temas que encontrarás en la Theme Store, y de hecho, he trabajado con temas antes de eso se desarrolló a partir de los desarrolladores del partido, no necesariamente Shopify, que aún usan el Slate responsive cuadrícula. Es bueno conocer un poco de Slate aunque quieras salir y desarrollarte de una manera diferente, más probable es que vayas a usar Slate si quieres desarrollar temas personalizados, porque esto es básicamente lo que Shopify recomienda y lo que ellos mismos usan. Como dije, tienes la documentación aquí, y por supuesto va a ser una buena referencia, pero en cuanto a instalar Slate, te recomiendo que solo sigas estos pasos, los cuales he encontrado más fácil que lo que dice aquí. Entonces el primer paso es que necesitas el gestor de paquetes Node para aquellos que no lo saben, Node es un entorno de desarrollo de JavaScript, por lo que buscamos un Node. Técnicamente es un tiempo de ejecución de JavaScript, ¿de acuerdo?. No necesitas saber qué es eso. Todo lo que debes saber es que necesitas Node y necesitas Administrador de paquetes de nodos, el fin de comenzar a usar Slate o instalar Slate. Entonces descarga e instala Node, luego quieres, descarga e instala Node Package Manager, que es sólo npm para abreviar, y en realidad no voy a pasar y mostrarte cómo instalar Node y npm porque yo ya lo tengo en mi computadora. Deberías poder encontrar instrucciones bastante detalladas sobre cómo hacerlo tanto en sus sitios web, muchos artículos, en línea al respecto también. Entonces, una vez que hayas instalado Node y Npm, vas a buscar el paquete para Slate CLI así que voy a hacerlo, haz click en la primera opción aquí. Se puede ver este que no es el correcto, no sé qué es eso. Creo que necesitamos, ser un poco más específicos y decir Shopify Slate, y como puedes ver aquí, estamos buscando el que tiene a @Shopify delante, así que tal vez solo, lo escribo como yo sé, Shopify, Slate, ahí estamos son, coincidencia exacta. No sé por qué eso no surgió en el cuadro de búsqueda. Aquí tienes Slate CLI y si no estás seguro si estás en la correcta, necesitas estar en la que dice @Shopify /pizarra, ¿vale? Entonces esto es todo, este es el que necesitas instalar y tienes instrucciones de instalación aquí mismo. Entonces estás usando un comando npm para instalar Shopify Slate y por eso necesitas npm, porque necesitas npm instalado para poder instalar este paquete aquí mismo. Ahora como mencioné anteriormente, ya tengo instalado Slate, así que no necesito hacer esto, pero digamos que ejecutas ese comando y ahora tienes Slate instalado. Lo siguiente que vas a querer hacer es igual que hicimos con el kit de temas, navega al directorio en el que quieres iniciar tu nuevo proyecto de Slate y luego ejecutar un comando en particular. Entonces voy a, abrir de nuevo mi terminal, y voy a navegar hasta donde quiero que esté eso. Entonces voy a icd, código/personal/actual, y ahora que estoy en la corriente, el comando que voy a ejecutar va a estar en una documentación de Slate por lo que, debería ser un elemento de menú aquí para los comandos que hay, y lo que queremos hacer es crear un nuevo proyecto con Slate. Entonces, en realidad no lo tengo aquí que es por eso. Siento que la documentación no es tan genial. A lo mejor está aquí. Tema de pizarra, no. Está bien. Bueno, ese Comando que estás buscando es Slate, tema. Entonces el nombre del tema que quieres crear. Voy a llamarlo Clean Slate, ocurrió ese nombre todo por mí mismo, y se va a descargar el tema de pizarra y configurarlo todo para que lo uses. Esto podría tardar un poco, así que te atraparé al final de la instalación. Ahora se terminó de descargar pizarra, y la razón por la que se tardó tanto en configurarla es porque también está descargando un montón de dependencias. Si entramos a nuestra carpeta actual ahora, tengo el tema de Skillshare aquí, y ahora se puede ver en el directorio también tengo pizarra limpia. Voy a dar clic en eso, y abrir eso en mi Ventana del Finder aquí, pero lo que voy a hacer es también cambiar a ese directorio por aquí. Ahora que estoy en ese directorio, puedo ejecutar Atom dot porque estoy ejecutando atom, y puedo abrir ese directorio, ese proyecto arriba en mi editor de código. Muy bien, entonces vamos a contratar algunas de estas carpetas aquí, y se puede ver que la estructura de carpetas en el nivel superior es bastante diferente. Tenemos este archivo config.ylm que necesitamos configurar también, pero como puedes ver, tenemos una carpeta en la parte superior con módulos de nodo. Esta es una larga lista de dependencias y por eso tardó mucho en descargarse, creo que para mí tomó tal vez un minuto, lo cual es bastante tiempo. Entonces tienes esta carpeta src, que dentro debes reconocer algunas de las carpetas. Tienes activos, config, iconos, layout, locales, scripts, secciones. Hay algunos otros como estilos, guiones e iconos que iban en el tema que desarrollabas antes, pero esto es básicamente en la carpeta src, ese es básicamente tu tema donde realmente realizas tus cambios. La gran diferencia con la pizarra es que en realidad no subimos esto a tu sitio, lo que hace es, compila todo esto y vamos a crear una versión diferente de esto y entonces eso entrará en tu tema. Ya veremos cómo funciona eso en tan solo un segundo. Lo que vamos a necesitar ahora sin embargo, es una tienda real para ejecutar este tema, y desafortunadamente, ya transferimos esa tienda de desarrollo, así que voy a tener que crear una nueva tienda. No es bigy sin embargo, voy a usar la misma contraseña y voy a llamar a esto, el Tema Slate Skillshare, si ese nombre está disponible. Sí, y voy a usar la misma contraseña que antes. Ponga una dirección aleatoria y luego podemos decir que es para probar una App o un tema, haga clic en Guardar. Todo esto debería ser bastante familiar, ya lo hemos hecho antes, es crear una tienda. Ahora necesitamos pasar por un proceso similar a lo que hicimos antes. Ahora porque vamos a crear un nuevo tema y vamos a subirlo a la tienda, no necesitamos un ID de tema, lo que necesitamos sin embargo es el nombre de la tienda, que podemos encontrar aquí, y también la contraseña de la API. Al igual que lo hicimos antes en la clase, necesitamos entrar en Apps, Administrar Apps Privadas, Crear Nueva App Privada. Perdón, voy un poco más rápido esta vez porque ya lo hemos hecho antes. Yo lo voy a llamar Conexión de pizarra. Obviamente tiene que poner en un correo electrónico en desarrollo de emergencia, y necesitamos darle el mismo acceso de lectura, escritura como lo hicimos anteriormente a las plantillas temáticas y activos temáticos. Aparte de eso, estamos bien para ahorrar, entiendo, Crear la App. Ahora tenemos dos de los ingredientes que necesitamos para configurar realmente pizarra. El motivo por el que necesito una contraseña API para la tienda y el nombre de la tienda es porque vamos a ejecutar unos comandos similares, un reloj de kit de tema, que es reloj de pizarra. Estamos haciendo esto antes de tiempo, pero no lo necesitamos todavía, lo que necesitamos hacer es realmente construir nuestro tema y luego subirlo a la tienda. Voy a hacer clic derecho aquí, así que aún tenemos acceso a nuestra contraseña para hacer referencia más adelante, y En nuestros Comandos por aquí, se puede ver el comando para construir, y se construirá una versión lista de producción del mediante la compilación de los archivos en la carpeta dist. Esto es algo que sucede detrás de bambalinas con kit de tema, pero para pizarra , está sucediendo justo frente a tus ojos y lo que quiero decir con eso es pronto verás que tenemos nuestros activos, nuestros estilos, desglosados en múltiples archivos. Se pueden ver estados en blanco, formas, la cuadrícula, recuerda con nuestro tema anterior, sólo teníamos un archivo css o archivo scss que contenía todo. Bueno, la pizarra es un poco más modular, es un poco más compleja, es más una forma escalable de hacer shopify temas porque estás separando lo que sería un gran archivo css, que es lo que quieres cuando lo ejecutas en tu sitio web real, pero en términos de desarrollo, es más agradable tener diferentes carpetas y diferentes archivos, pero lo que quieres es todo lo que compilado en css JavaScript en un solo archivo, ¿de acuerdo? Por lo que puedes ver aquí un montón de guiones diferentes y en nuestros estilos, un montón de estilos diferentes. Entonces una de las cosas que va a pasar cuando ejecutemos la compilación de pizarra va a compilar todo eso en como una hoja de estilo o un archivo JavaScript, y veremos que sucede una vez que ejecutemos el comando build, así que de nuevo, es solo herramientas de pizarra construyen, creo que en realidad podemos usar la palabra pizarra sin herramientas, ahí vamos, eso pasó bastante rápido. Si entramos a nuestro editor de códigos ahora puedes ver una carpeta llamada dist, y en dist podemos ver activos y ahora podemos ver theme.scss.liquid y theme.js, que es a lo que estamos acostumbrados. Entonces tomó todos los estilos de todas estas hojas de estilo diferentes y los puso juntos en esto, y tomó todos nuestros guiones y lo armó en esto, ¿de acuerdo? Entonces eso es parte de lo que está haciendo cuando está compilando. Entonces aquí es donde queremos desarrollarnos, pero aquí es donde queremos subir a la tienda. Por lo que en realidad podemos comprimir este archivo, convertirlo en un zip y luego subirlo a la tienda, pero en realidad tenemos un comando dentro de pizarra donde podemos hacerlo automáticamente. Entonces voy a llamar a pizarra zip, y ahora tenemos una carpeta de carga con slate.zip limpio, ¿de acuerdo? ¿ Cómo bienes que? De acuerdo, así que volvamos a nuestra tienda y como ves, está protegida por contraseña así que quizá queramos deshabilitar contraseña, pero lo que voy a hacer es hacer click, Subir tema. Voy a tener click, elegir archivo, ir a mi directorio donde tengo ese archivo zip, Subir carpeta, dar click en slate.zip limpio o como llamaste tuyo, subir ese archivo. Se va a empezar a dar vueltas, y luego voy a dar clic en “Acciones”, “Vista previa”, para ver cómo se ve nuestro tema. Ahora se trata de un Tema de Pizarra. Es super bare-bones, casi ningún estilo en absoluto, pero es un tema que funciona plenamente. Entonces si quisiera poner algunos productos en mi tienda, en realidad podría seleccionarlos, agregarlos a un carrito y comprarlos, créanlo o no, en esta tienda de aspecto terrible, ¿vale? Ahora este es el punto completo sobre Slate y la razón por la que te recomiendo que partas de un tema existente, a menos que quieras desarrollar tus propios temas personalizados que puedas estar vendiendo en la plataforma Shopify, o tienes tal vez un cliente o necesita que un muy particular, probablemente no quieras empezar desde este punto de partida. Pero, para eso, tienes a Slate aquí para que lo uses, ¿de acuerdo? Entonces ahora tienes tu tema Slate en tu tienda online, pero al igual que hicimos con Theme Kit, vamos a querer poder editar ese tema a través de nuestra propia computadora, como tenemos con nuestros archivos de código aquí, ¿de acuerdo? No queremos editarlo dentro de aquí por razones que mencionamos anteriormente, ¿de acuerdo? Entonces al igual que Theme Kit, podemos actualizar el archivo config.yml, así que podemos entrar aquí y poner los detalles allá, o bien podemos ejecutar el comando configure que es bastante similar a nuestro Theme Kit o theme configure. Entonces otra vez no puedo ver ninguna documentación sobre configurar, así que hagámoslo de otra manera. Vamos a ponerlo en nuestro archivo de config real. Entonces averigüemos el nombre de nuestra tienda, que está justo aquí. Escoge eso, pon eso aquí. ID del tema, en realidad vamos a hacer la contraseña siguiente. Pon la contraseña ahí, y luego recuerda cómo encontramos el id del tema.Simplemente entramos en nuestro personalizador y luego en nuestro personalizador, podemos sacarla de la URL. Está bien. Entonces ahora tenemos nuestro proyecto realmente apuntando a este tema que hemos subido. Entonces ahora están esencialmente configurados para conectarse entre sí, ¿de acuerdo? Y como puedes ver, aún podemos personalizar incluso este tema de huesos desnudos usando nuestra sección de personalización de temas aquí, ¿de acuerdo? En la configuración del tema, debería estar bastante desnudo, lo cual es, porque no hay muchas reglas CSS configuradas, pero eso es para nosotros decidir qué queremos poner en estos ajustes del tema, ¿de acuerdo? Ahora, si queremos, podemos ejecutar slate deploy, y cualquier cambio que hagamos localmente a nuestro tema, porque hemos configurado con config.yml para apuntar a este tema en particular en esta tienda en particular va a subir todo y desplegarlos en nuestra página web. Pero como acabamos de ver, todo lo que hicimos fue comprimir el tema original y ya hemos subido, así que en este momento ambas versiones de nuestro tema, la que tenemos en nuestro propio ordenador y la la tienda online real deberían ser exactamente lo mismo. Entonces lo que podemos hacer para detectar cambios locales es ejecutar “Slate Watch”. Entonces lo voy a hacer ahora mismo, “Slate Watch”, y si nuestro archivo config.yml está configurado correctamente, esto debería empezar a ver los cambios. Ahora la diferencia entre Slate y Theme Kit es que en realidad crea una dirección local para que veamos el tema también. Y en realidad hay algunos pasos aquí en la documentación para crear un certificado SSL autofirmado, pero esto puede ser un poco engorroso y molesto de hacer, así que una forma de evitar este error de privacidad es solo decir que lo aceptes y vas a proceder al anfitrión local. Está bien. Entonces vamos a cerrar ahora y podemos entrar usando la contraseña. Entonces en realidad no desactivamos la protección con contraseña, así que en lugar de apagarla, solo voy a averiguar cuál es la contraseña en nuestras preferencias. Te da una contraseña realmente básica por defecto. Voy a poner eso aquí para acceder a nuestro tema, y aquí tienes. Tienes el tema, igual que lo harías entrando aquí en tus temas, y haciendo clic en “Vista previa”, tenemos lo mismo, pero en una dirección local, cual es un poco engañoso porque todavía lo estamos ejecutando a través de la plataforma Shopify que en realidad no es local, pero crea este pequeño entorno aquí para nosotros, lo que al menos sabemos que estamos trabajando con Slate en el tema del desarrollo. Entonces, sólo para concluir su trabajo y que en realidad está observando los cambios, en realidad editemos algo. Entonces recuerda que entramos en el directorio SRC para editar nuestro tema, y hagamos un cambio básico. Entonces solo estoy haciendo lo que sea para demostrarme. Inspeccionemos este elemento y veamos qué es eso, es el logotipo del sitio. Entonces, solo eliminemos eso. Esto probablemente va a estar en la sección de encabezados, así que voy a entrar aquí, buscar un logotipo del sitio, aquí está, y sólo eliminemos este todo, una etiqueta. Creo que voy a pegarle a “Save” en eso. Echemos un vistazo a lo que está pasando en nuestra terminal. Se puede ver aquí, hay algunas cosas pasando, recargar navegadores, cambiar archivos es exitoso, sincronizar para almacenar y ahora si actualizamos esto, deberíamos ver que ese logotipo del sitio, que era solo texto, ahora está desaparecido, y si lo traemos de vuelta, pulsa “Guardar”, debería registrar ese archivo cambia correctamente sincronizado para almacenar. Perdón eso es un trabalenguas. Y refresca la página. Está de vuelta otra vez, ¿de acuerdo? Entonces no voy a pasar por cómo vas a configurar este tema para realidad se vea presentable porque eso sería un curso en sí mismo, pero esto debería proporcionarte un buen punto de partida para tal vez tomar tu Shopify conocimiento al siguiente nivel. Entonces al aprender cómo realmente personalizar esto y cambiar esto en un tema que funcione plenamente. Si bien está funcionando completamente, pero quiero decir que es solo terrible experiencia de usuario. Simplemente se ve terrible. Si pudieras transformar esto en una tienda realmente genial, entonces realmente vas a conocer la plataforma Shopify. Y tal vez eso es algo que quieres hacer. A lo mejor quieres crear toda una tienda personalizada. Depende de ti. Por eso puse en esta pequeña sección sobre Pizarra al final. Si tiene alguna pregunta, por supuesto déjalas en el recuadro de discusión [RISAS] a continuación. Muchas gracias por ver chicos. Te veré en la conclusión. 19. Conclusión: Eso concluye más o menos esta clase sobre el desarrollo del tema Shopify. Para tu proyecto de clase, quiero que crees tu propia tienda y la compartas con el resto de los alumnos en la sección de proyectos de clase a continuación. Por supuesto, no te preocupes si tu tienda es solo para practicar ya que estamos todos aquí para aprender habilidades. Tan solo asegúrate de compartir la contraseña o eliminar la protección por contraseña por completo, para que otros estudiantes puedan verla. En cuanto a mayores aprendizajes, hay mucha información sobre los diversos aspectos de los temas líquidos y Shopify en el sitio web oficial de Shopify. Además, puedes acceder a la Academia de Socios a través tu cuenta de pareja haciendo clic en el enlace Educación. Dicho esto, si necesitas algún consejo o orientación, asegúrate de dejar un comentario en el recuadro de discusión, y haré todo lo posible para señalarte en la dirección correcta. En fin, chicos, gracias por ver y espero volver a verlos en algunos de mis otros cursos.