Shopify sin código: cómo crear plantillas personalizadas con aplicaciones para crear páginas + el editor de temas

1. Introducción: Entonces quieres crear diseños personalizados en tu sitio Shopify Pero no quieres tener que sumergirte en el código del tema ya que tal vez no eres un desarrollador o tal vez simplemente no has construido ese conjunto de habilidades todavía. Entonces, ¿cuáles son tus opciones? Bueno, en esta clase de skillshare, vamos a estar cubriendo exactamente eso Si no has visto mi cara antes, soy Christopher Dodd. Soy un maestro top aquí en SkillShare.com Y lo más importante, un experto en Shopify con algunas de las clases de Skillshare más vistas en SkillShare.com Y lo más importante, un experto en Shopify con algunas de las clases de Skillshare más vistas en Shopify Desarrollo. En esas clases, así como mi propio canal de Youtube. Profundo en el lado del desarrollo de las cosas cuando se trata de Shape Fi, pero en esta clase vamos a sacar la cabeza del editor de código y ver qué se puede lograr en Shape Fi sin ningún tipo de codificación. Sé que muchos de ustedes son dueños de tiendas o creativos que no necesariamente quieren ser desarrolladores como yo. Así que he creado esta clase solo para ti. Por supuesto, vamos a comenzar con el enfoque puramente nativo usando el editor de temas propio de Hope Fi. Pero luego echaremos un vistazo a algunas de las aplicaciones de creación de páginas que existen que son más ilimitadas en términos de opciones de personalización. El objetivo principal de esta clase no es solo ejecutar un montón de características de Page Builder, sino ayudarte a desarrollar una comprensión de dónde encajan estas opciones sin código en tu tienda. Comprender los límites de estas aplicaciones y lo que realmente está sucediendo detrás de escena. Entonces si al Fv lo hace, si estás listo para aprender a personalizar tu tienda Shopify sin codificación, clic en el siguiente video y te veré por dentro 2. Prefacio: Aquí mismo, puedes ver una de mis tiendas Shopify. Es lo que se llama una tienda de desarrollo, lo que significa que tiene casi todas las características de una tienda Shopify normal Pero en realidad no puedo vender nada en él, es solo para fines de prueba y desarrollo. Idealmente, tienes tu propia tienda hope fi para trabajar. Pero si no, siempre puedes crear una tienda de desarrollo libre como yo. No voy a pasar por todo el proceso en esta clase ya que he cubierto esto varias otras veces en otros cursos y clases. Pero si quieres ver un tutorial sobre cómo hacerlo, puedes encontrar uno de cada menos de tres aquí en mi clase anterior llamada Shopify Store configurado De hecho, si eres nuevo en Shopify y necesitas una cartilla sobre cómo funciona todo, recomendaría ver la totalidad de esa clase antes de esta, especialmente la cuarta lección de esa clase, la de la arquitectura de la tienda Shopify Haré una pausa aquí un segundo para darte un breve momento para considerar si quieres hacer eso. Si es así, pausa este video y regresa a esta clase después de que termines de ver la otra clase. Bien, ¿listo para seguir moviéndose? Empecemos por centrar nuestra atención en el canal de venta de tiendas en línea. Dentro del canal de venta de tiendas en línea, tenemos nuestros temas, nuestras entradas de blog, nuestras páginas personalizadas, nuestras listas de enlaces, también conocidas como menús que se sientan aquí en la sección de navegación. Y luego algunos ajustes aquí relacionados específicamente con este canal de ventas. Si nos dirigimos a los temas, espero que estés familiarizado con los temas conceptuales. Básicamente, toma el contenido que pones en tu tienda y muéstralo al front end. Por ejemplo, si tuviéramos que mirar una página de producto, el título y el precio aquí provienen de lo que sea que fije el precio y el título para estar en el administrador de ese producto en particular. Dicho esto, la estructura que rodea esta información está determinada por el tema que estás viendo actualmente. Si no hay una barra de vista previa en la parte inferior de la pantalla que le indique en qué tema se encuentra actualmente, entonces lo más probable es que esté en el tema actualmente en vivo de su tienda, que puede ver aquí en la parte superior de la página para los temas. Ahora bien, si sabes cómo escribir código de desarrollo web front-end, los temas son súper flexibles porque todos están construidos sobre código. En ese ejemplo anterior, si echamos un vistazo al título del producto y el precio del producto dentro del tema, puedes ver el código circundante. Esta parte de aquí se llama código Chop Fi Liquid y le dice a shop Fi que inserte el título aquí y el precio aquí. Es importante tener en cuenta que independientemente de si quieres tocar el código o no, el resultado final siempre es código. Lo que quiero decir con esto es que cualquiera de las opciones que usamos para evitar el código simplemente creará código para nosotros. Puede que no tengamos que aprender a codificar, sino simplemente entender que el código siempre se crea. Puedes ver prueba de esto mirando cualquier página de la web, sitio web de Shopify o de otra manera Todo lo que necesitas hacer es hacer clic en Ver fuente de página. Y como puedes ver, el resultado siempre es código. Puede que aún no entiendas esto, pero el tema es la forma óptima personalizar el front-end de su tienda. El único problema es que el editor de temas, que discutiremos en breve, sigue siendo muy limitado para muchos usuarios. El editor de temas, solo para darte una visión general, es la interfaz de usuario que aparece cuando haces clic aquí para personalizar tu tema. Si miramos dentro del código del tema, las opciones disponibles en su editor de temas se han codificado en el tema en sí. Y el valor de lo que establece el usuario en uno de estos campos simplemente se inserta en el código. De manera similar a como vimos antes con el título del producto y el precio. Dado que las únicas opciones en su editor de temas son las que el desarrollador de temas ha suministrado específicamente para usted. A menudo puede encontrar que la opción de personalizar cierta parte de su tema no está disponible. Y eso es lo que quiero decir con esta solución siendo un poco limitada. Es por eso que los desarrolladores de aplicaciones han creado aplicaciones llamadas creadores de páginas. Estas aplicaciones han sido desarrolladas por terceros y proporcionan su propia interfaz de usuario para crear diseños y diseños de páginas en Schobifi Cuando construyes un diseño y haces clic en Publicar en una de estas aplicaciones, código se crea para ti y se inyecta en algún lugar en el final o tema de tu tienda habi fi. Sé que esto puede sonar un poco demasiado teórico o complicado para una primera lección en la clase sobre no code shopify Pero te traigo estos conceptos para ayudarte a entender lo que realmente está pasando. Antes de pasar horas invirtiendo en aprender y construir aplicaciones sin entender cómo afectan realmente a su tienda, permítame intentar simplificarlo para usted con una tabla simple que le muestre sus opciones. La opción uno es tratar con el código del tema. Esta es la única opción en la que tendrás un control total sobre el front-end de tu tienda. Si bien lo recomiendo, sí tiene la curva de aprendizaje más pronunciada Y como esta es una clase sin código shopifi, tacharé completamente esta opción para esta La opción dos es usar las opciones disponibles dentro de su editor de temas. Este es el escenario ideal, pero depende totalmente de qué opciones tenga tu tema. Un tema podría tener cientos y cientos de opciones o cero. Todo depende del desarrollador del tema. Y al momento de grabar esta clase, los editores de temas, las capacidades de arrastrar y soltar son muy limitadas. Puede reorganizar secciones y reorganizar los bloques anidados en Y eso es todo. Entraremos en más detalle sobre esto en el siguiente video. Por último, la opción tres es instalar una aplicación Page Builder. Esta es la forma menos robusta y nativa personalizar tu escaparate Pero estas aplicaciones son muy populares ya que no hay soluciones de código, ya que están construidas específicamente para ningún usuario de código. Inicialmente, estas aplicaciones pueden sonar increíbles, pero a medida que profundizas en ellas, es posible que descubras que desviarte de la forma nativa de hacer las cosas de Shopify puede causar algunos de sus propios problemas Ahora en el siguiente video, hablaremos de la segunda opción, el editor de temas shop fi. 3. El editor de temas nativos de Shopify: El editor de temas nativo de Shopify es lo que recomiendo todos mis clientes y estudiantes que usen para personalizar su front-end Podemos personalizar cualquier tema simplemente haciendo clic en el botón personalizado para ese tema. Antes de comenzar a jugar con esta versión del editor de temas, es muy importante tener en cuenta aquí que Hopefi está cambiando constantemente y mejorando la experiencia de usuario del editor de temas Lo que estás viendo hoy podría ser muy diferente a lo que te estoy mostrando ahora mismo. Pero también quiero señalar que a medida que el sistema de edición de temas nativos mejora en Shape Fi, la necesidad de aplicaciones de creación de páginas disminuye lentamente Shabifai tiene algunas actualizaciones emocionantes para el editor de temas en camino, pero la línea de tiempo de cuándo saldrán estas actualizaciones nunca está escrita Entonces, lamentablemente, nuestra única opción es mantener la paciencia y esperar la actualización. En el siguiente video, cubriré un gran anuncio al editor de temas que se acaba anunciar pero que aún no ha sido lanzado. Pero como eso aún no ha sucedido, volvamos a cuáles son las opciones en este momento. Entonces, antes que nada, Shobifi utiliza un sistema de plantillas para que no tengas que crear looks y diseños separados para cada página de producto, página de colección, publicación de blog, etcétera, etcétera Por defecto, cada página de producto se ejecutará a través de la plantilla de producto predeterminada. Actualmente, estamos en la plantilla de página de inicio, que como solo hay una página de inicio para un sitio web solo se aplica a una página. Pero si hacemos clic en este botón, verás la lista de plantillas que podemos modificar. Vamos a hacer clic en Producto y luego hacer clic en Producto predeterminado. Podemos ver que esta plantilla está asignada a 12 productos en nuestra tienda. Y que aquí no hay otras plantillas de productos para la selección. Por lo tanto, podemos suponer que esta plantilla básicamente se aplicará a todos nuestros productos. Podemos crear una plantilla de producto alternativa aquí, pero llegaremos a eso en solo un segundo, ya que esta es la única plantilla de producto en uso en este tema. Cualquier cambio que hagamos aquí se aplicará a todas las páginas de productos junto al menú desplegable. Para elegir qué plantilla editar, tenemos un desplegable para Mercados, que es una característica novedosa que nos permite realizar ediciones que solo se aplican a un determinado Por ejemplo, si cambiamos esto a Australia, verás el cambio de redacción para agregar sección y agregar bloque. Estos ahora se convertirán en añadir sección a Australia. Agrega bloque a Australia como puedes ver aquí, vamos a recibir una advertencia con un enlace para conocer más. Y como este es un concepto más avanzado que no se aplicará a la mayoría de ustedes, lo omitiré para esta clase, pero siempre pueden hacer referencia a este documento para aprender cómo funciona el selector de mercado dentro de su editor de temas. Volviendo al contexto predeterminado, hablemos de qué más hay en esta barra superior, de izquierda a derecha, tenemos el botón para salir de nuestro editor de temas, seguido del nombre del tema actual, seguido de la insignia aquí para decir si es en vivo o no. Y luego estos tres puntos para ampliar algo más de información y opciones, siendo los principales el enlace directo para editar el código del tema o para ver el tema tal como se encuentra actualmente en la parte frontal. Obviamente tienes algunos otros botones aquí, pero el botón de vista y el botón editar código son los más prácticos. Dicho esto, como esta es una clase sin abrigo, básicamente es solo el botón de vista aquí lo que es de interés. Si ahora llevamos nuestra atención a la derecha de esta barra de herramientas, este botón desactivará el inspector, que todo lo que hace es activar y desactivar esta función, donde podrá pasar el cursor en cada sección visualmente para ver el nombre de la sección y hacer clic entre ellas para agregar nuevas O haga clic en la propia sección para abrir los ajustes de esa sección en el panel de la izquierda. En cuanto a la funcionalidad completamente visual de Dragon Drop Editor, esto es hasta donde va, actualmente con el editor de temas Shove Fi, pero hay planes para mejorar esto considerablemente Estén atentos al siguiente video de esta clase para saber más sobre eso. Por ahora, apaguemos esto y utilicemos el panel lateral izquierdo para crear, actualizar y mover secciones. Pero antes de hacer eso, solo hay algunos botones más para abordar aquí. En primer lugar, tienes este toggle aquí para ver la página en escritorio, móvil o pantalla completa, que simplemente oculta la barra lateral para que puedas ver el diseño repartido por todo el ancho de tu ventana. Entonces tienes el botón de deshacer, el botón rojo y el botón de guardar. Estos son bastante autoexplicativos. Para que estos se activen, solo necesitamos hacer un cambio nuestra plantilla y luego podremos guardarla o deshacerla. Si lo deshacemos, entonces podemos hacer clic con la misma facilidad para rehacer ese cambio también Bien, entonces con la barra superior fuera del camino, ahora podemos discutir este panel de la izquierda que es donde estaremos haciendo todas nuestras ediciones Primero verás de este tema tenemos un grupo de encabezado, un grupo de pie de página, y luego tenemos el contenido de la plantilla. Los grupos de sección son una característica bastante nueva en Shopify, por lo que es posible que no los veas en tu tema La posibilidad de agregar una sección y organizar las secciones aquí a menos que esa característica se haya agregado al tema. Independientemente, es importante tener en cuenta que las secciones fuera de este grupo de plantillas aquí se aplican a algo llamado diseño. Normalmente, los temas solo tienen un diseño, así que simplemente podemos decir aquí que estas secciones permanecerán iguales sin importar qué plantilla estemos viendo. Estas secciones, por otro lado, son específicas de esta plantilla. Y así cualquier cambio que hagamos aquí sólo afectará a la plantilla actual en la que estamos. Así que llevarte a través de cómo funcionan las secciones en secciones Shapefi son los principales bloques de construcción de los temas de Chapifi Esencialmente, cada página en habifi es solo una lista de secciones apiladas una encima de la otra Por ejemplo, si traigo de vuelta al inspector por un tiempo, podemos ver estas secciones en el grupo de encabezado, la sección de la barra de anuncios, seguida de la sección de encabezado. Y luego podemos ver las secciones que pertenecen a la plantilla. Tenemos información del producto seguida de productos relacionados. Y luego finalmente tenemos la sección Potter, que pertenece al layout dentro del grupo de fotos. Una cosa que no mencioné con este inspector es que podemos hacer clic en elementos anidados dentro de la sección llamada bloques Como ven aquí como hofer sobre estos elementos que el bloque correspondiente se resalta debajo de la sección Déjenme desactivar una vez más al inspector. Y ahora podemos ver aquí que podemos reorganizar secciones en una plantilla así como bloques dentro una sección haciendo clic y arrastrando, haciendo clic en la sección de anuncios Podemos agregar cualquiera de estas 17 secciones a nuestro tema. O si tenemos instalada una aplicación en particular que usa extensiones de aplicaciones temáticas, también podemos incluir una sección de una aplicación en particular. Esta de aquí es una app personalizada que creé para otro tutorial. De manera similar, podemos agregar bloques adicionales a nuestra sección hasta que Shopify publique la actualización que cubriré en el siguiente video La lista de opciones de bloque aquí se limitará a la lista de opciones de bloque definida en la propia sección. Entonces puedes ver aquí que debido a que esta sección solo permite un bloque de botón y un bloque de encabezado por sección, nuestra única opción aquí es agregar un bloque de texto aquí el cual podemos organizar junto a los otros bloques. Tanto las secciones como los bloques pueden tener o no su propia configuración. Así que puedes ver aquí para el banner de imagen, puedo establecer qué imágenes me gustaría usar, establecer una opacidad específica para la superposición, cambiar la altura del banner, etcétera, etcétera Entonces si me sumerjo en algunos de los bloques de aquí, puedes ver que estos también tienen ajustes. Podría cambiar el texto del botón, actualizar la dirección de donde debería enlazar ese botón. Y para guardar cualquiera de estos cambios, solo necesitaría presionar Guardar en la esquina superior derecha. Y mis cambios se aplicarán entonces al tema. Por último, con cualquier sección o bloque, podemos hacer clic en el icono del bote de basura para eliminarlo, o en el icono para mantener nuestra configuración en su lugar, pero simplemente ocultarlo del usuario final. En este punto, es un buen momento para mencionar que estas secciones y bloques se aplican a este tema específico, que es la versión 12.0 0.0 del tema Dawn de Sobi Fi Es importante tener en cuenta que cada tema es diferente y los ajustes en cualquiera de estas secciones y bloques provienen de esquemas que se han escrito en el tema mismo No voy a entrar en el código en esta clase ya que esta es una clase shopify sin código Pero solo para señalar aquí que si conoces algún código, puedes modificar estos esquemas para habilitar nuevas opciones dentro de un tema existente De vuelta al editor aquí, tengan paciencia conmigo ya que solo hay algunas otras áreas que abordar. Aquí en el panel izquierdo, notarás que aquí hay otras dos pestañas. En la segunda pestaña se encuentra la configuración de tu tema. Estos ajustes no están vinculados a ninguna sección o bloque, sino que se aplican a cualquier lugar dentro de tu tema. Por ejemplo, podemos entrar y editar colores específicos que se almacenan en la combinación de colores del tema. Todos estos se agrupan en acordeones separados para que podamos navegar entre ellos más fácilmente. Por último, la última pestaña aquí es donde podemos habilitar y deshabilitar ciertas aplicaciones incorporadas en un solo tema Lo más probable es que este sea un panel que no tendrás que tocar a menos que lo indiquen los desarrolladores de una de las aplicaciones que estás usando en tu tienda. Antes de concluir este video, una cosa de la que prometí hablar fueron las plantillas alternativas. Entonces, si recuerdas cuando hicimos clic aquí y entramos en productos, puedes ver que solo hay una plantilla de producto predeterminada Pero puedo crear este botón para crear una plantilla. Vamos a llamar a este diseño de producto alternativo. ¿Bien? Y entonces podemos elegir en qué queremos que se base. Y como solo hay una plantilla que tenemos actualmente en nuestro tema, solo tenemos una opción, que es la plantilla de producto predeterminada. Entonces vamos a crear, oh, en realidad no lo hará. Déjame hacer maquetaciones. Así que déjame hacer maquetación alternativa. La parte del producto puede ser asumida. Bien, voy a hacer clic en Crear plantilla. Lo que esto hará es crear una plantilla de producto alternativa en nuestro tema. Sólo quiero mostrarte eso rápidamente. Sé que esta es una clase sin código, pero solo para mostrarte lo que está haciendo detrás de escena porque también puedes hacer exactamente lo que acabo de hacer en el código. Está creando aquí mismo. Si entramos en dónde están los productos, este producto es la plantilla de producto predeterminada. Pero este de aquí mismo, el que llamamos layout alternativo. Esta es nuestra plantilla de producto alternativa. Bien, te voy a mostrar cómo asignar eso en sólo un segundo, pero volvamos aquí. Lo hemos creado usando el editor de temas. No tuvimos que tocar ningún código, pero solo para que sepas, como mencioné a lo largo de esta clase, siempre se crea el código. Entonces eso es lo que está pasando en la parte de atrás. Bien, entonces ahora lo que podemos hacer es crear un layout completamente diferente con esto. No sé qué haríamos. Un ejemplo más práctico sería, no dejaremos que elimine esta sección. Pero podemos agregar como, digamos por ejemplo, asignamos esto a un producto muy particular. Así que asignamos esto a un solo producto. Y podemos hablar más de ese producto en particular. Podemos decir más sobre, actualmente estamos viendo las vainas de aire en este momento. Podemos decir más sobre las vainas de aire y luego entrar aquí. Los Airpods son increíbles. En realidad no soy un gran redactor. Podemos conseguir que Shopify genere texto para nosotros, descripción o puntos de venta de Apple airpods Consigue generarlo para Mira esa experiencia, la conectividad perfecta y el sonido cristalino de los airpods de Apple. ¿Qué tan bueno es eso? Bien, y luego dale esta etiqueta de botón, en realidad simplemente borraremos el botón. Puedes tener una página de producto con ese detalle en particular. Y todo lo que tenemos que hacer es asignarlo a este producto Air Pods. Voy a presionar Guardar en eso y luego saldré del editor de temas en realidad. Y voy a entrar en productos, encontrar ese producto Air Pods en nuestra tienda admin. Y entonces aquí abajo es donde puedo cambiar la plantilla de tema. Y en lugar de producto predeterminado, puedo cambiar al que acabamos de crear llamado Alternative Layout ahora. Y presioné Guardar y haga clic para obtener una vista previa de ese producto. Mirándolo a través de nuestro tema actual, Dawn versión 12, puedes ver una vez que nos desplazamos, plast la sección Información del Producto y los productos relacionados. Puedes ver más sobre la experiencia de los airpods, la conectividad perfecta y sonido cristalino de los airpods Así es como podemos afectar el diseño de un producto en particular manteniendo la misma plantilla de diseño de los otros productos. Como puedes ver, todos estos están usando la plantilla por defecto. No van a tener esa sección extra, sino en ese producto en particular al que asignamos la plantilla alternativa, esa sección que insertamos en esa plantilla está presente en esa página del producto. Bien, así que si queremos editar esto en el futuro, no lo hacemos desde aquí, el listado real del producto. Dentro de nuestro administrador, tenemos que volver a nuestro editor de temas. Navegue hasta la plantilla de producto asignada a ese producto. Ahora puedes ver que está asignado a un solo producto. Estamos previsualizando airpods, que es el producto al que está asignado Ahora bien, si quiero editar la plantilla para este producto en particular, puedo hacerlo a través de esta plantilla. Si vuelvo a la plantilla predeterminada, puedes ver aquí que esa sección no está en la plantilla de producto predeterminada. Entonces ahí lo tienes. El editor de temas de Shopify Una de las preguntas que me hizo el equipo de Skillshare al revisar mi plan para esta clase fue la razón detrás de la declaración que hice al inicio de esta lección Que el editor de temas nativo de Shopify es lo que recomiendo a todos mis clientes y alumnos que usen para personalizar su front-end Es una afirmación difícil de explicar sin entrar en detalles técnicos. Entonces, en cambio, permítanme usar una analogía. A lo mejor has oído hablar de romper la cárcel. Es la práctica de modificar tu teléfono para que puedas disfrutar de un acceso sin restricciones a todo el sistema de archivos Este acceso permite cambios que no son soportados por el teléfono en su estado predeterminado. Bueno, usar un creador de páginas en Chobifi es algo un poco similar Se trata de una solución de hackeo que podría ir en contra del sistema de diseño temático que Chobe Fi ha creado sin entrar en demasiados detalles Es posible que a través experiencia, alejarse del sistema estandarizado de Chobe Fi pueda causar algunos problemas inesperados Algunos de los cuales podemos ver aparecer en la clase una vez que comenzamos a instalar algunos de estos creadores de páginas en tu tienda. 4. Anuncios de actualizaciones del editor de temas nativos: Dos veces al año. Shobifi hace un montón de anuncios como parte de algo llamado ediciones Shapefi En la edición Winter 2024 de Shabifi, Shobifi anunció algunas actualizaciones interesantes temas y del editor de temas Pronto, los bloques serán tan modulares como las secciones. Y quizás de manera más excitante, los bloques también podrán anidarse dentro de otros bloques en lugar de solo secciones Dos cosas importantes a tener en cuenta antes de profundizar en esta característica es el número uno, no se ha establecido una fecha específica para que esta función se lance al público. Y número dos, incluso cuando salga, tu tema necesitará poder apoyarlo. Lo que esto significa es que los nuevos temas construidos después de que este cambio entre en marcha probablemente aprovecharán esta nueva funcionalidad. Pero habrá muchos temas antiguos que permanecerán en el viejo sistema. Así que tenlo en mente por ahora. Esta función solo está disponible en la vista previa del desarrollador, lo que significa que solo socios como yo pueden jugar con ella. Dicho esto, déjame darte un pequeño adelanto de cómo debería funcionar cuando salga. Bien chicos, antes de sumergirme y mostrarles esta nueva característica genial, solo quería proporcionar un poco de contexto aquí. En lo que estoy ahora mismo es una tienda de desarrollo que tiene habilitada la vista previa del desarrollador para esta nueva característica. Entonces esta tienda, como dice aquí, está en desarrollo. Realmente no lo dice, pero esta no es una tienda en vivo, como que en realidad no puedo vender producto y usar esto para un negocio. Esto es solo para propósitos de prueba y desarrollo y para previsualizar esta nueva característica. Cómo pude hacer eso es porque tengo una cuenta de socio de Hope Fi. Y a partir de ahí puedes crear una tienda de desarrollo. No voy a entrar en el proceso de eso en este video solo porque no requiero que realmente hagas esto. Simplemente puedes ver este video para ver qué cambios vienen y decidir por ti mismo si quieres esperar hasta que estos lleguen en vivo y empezar a usarlos en tu flujo de trabajo no code, chop fi. Pero si querías previsualizar esto antes de tiempo y estás muy ansioso por comprobarlo, entonces puedes encontrar en mi canal de Youtube, del cual mencionaré más en la conclusión de esta clase, puedes encontrar un video en Shopper Fire Winter Editions 2024, que es cuando se anunció esta característica. En ese video, te muestro cómo configuré la tienda de previsualización para desarrolladores. Bien, así que por si acaso quisieras seguir adelante, así es como lo haces. Y la otra cosa que solo quería mencionar aquí es como dije, para poder aprovechar esta nueva característica, no solo necesitas estar en una tienda de desarrollo con el desarrollador Preview habilitado, también necesitas estar ejecutando un tipo específico de tema. Y como puedes ver aquí, este tema se llama tema de referencia principal. Este es un tema que ha sido creado por Hub Fi para mostrarte cómo va a funcionar cuando salga. Entonces necesitas el tema y necesitas la tienda. Es un poco de trabajo para configurar, así que decidí saltarme eso para este video. Pero si quieres saber cómo instalar el tema de desarrollo en una tienda de desarrollo, puedes ver ese video en Youtube. Pero sin febrero. Ado, vamos a saltar en el personalizador aquí y te darás cuenta de que es un poco diferente a lo que estamos acostumbrados Entonces aquí puedes ver que aquí tenemos este banner de imagen, que es, en primer lugar, el tema se parece mucho al amanecer. Creo que se basa en el amanecer. Pero está aprovechando estos nuevos bloques reutilizables temáticos. Entonces, como pueden ver, aquí hay una sección de banner de imagen que también está presente en la madrugada. Pero si miramos debajo del banner de imagen aquí, podemos ver que hay un grupo anidado llamado grupo Y dentro de este grupo tenemos bloques anidados. Ahora, no puedo agregar otro bloque debajo de aquí. Parece que puedo abotonar secundario. Ahí vamos. Ahora hemos agregado un bloque dentro de este grupo de bloques, ¿verdad? Y entonces puedo reorganizar estos bloques dentro de este grupo de bloques Y lo que me está dando este grupo es un contenedor con fondo blanco. Pero puedo cambiar la posición del contenido, puedo cambiar ciertos aspectos como el diseño aquí. Parece que cambiarlo a horizontal podría ser un poco defectuoso porque está en Developer Preview. Pero lo que hay que señalar aquí es que anteriormente tendríamos una sección y luego podríamos anidar una lista de bloques dentro de una sección. Ahora podemos poner una lista de bloques dentro de un bloque dentro de una sección. Echemos un vistazo a otro ejemplo. Bajemos a la sección personalizada. Este es probablemente un mejor ejemplo porque aquí tenemos sección personalizada. Y si miramos dentro, tenemos este bloque para el rumbo, y luego tenemos a este grupo. Y luego dentro de este grupo tenemos dos grupos, y de hecho tenemos algo en el medio. Ah, entonces tenemos básicamente tres columnas. Entonces tenemos este grupo, que básicamente es como un diseño de tres columnas. Y luego en este tercer nivel, tenemos grupo de imagen grupal. Esto es básicamente como nuestras columnas. Y luego dentro de esta primera, podemos apilar dos bloques para hacer una columna. Podría mover este al otro lado. Y esto me da un control más flexible sobre mi diseño. Bien, entonces sí, como pueden ver, tenemos, en esta sección personalizada, aquí es donde se vuelve mucho más personalizable. Podemos anidar grupos dentro de grupos, dentro de grupos. Y eso nos permite crear diseños personalizados que nunca antes eran posibles, solo teniendo un solo nivel de bloques anidados bajo una sección Bien, entonces esta es una cosa bastante emocionante. Esto va a ser un gran cambio de paradigma en el editor de temas y creo que va a ser suficiente para mucha gente no tenga que usar creadores de páginas porque me refiero a hacer algo como tener este encabezado. No estoy diciendo que este sea un ejemplo práctico, pero tener algo así como encabezarse por encima del icono de una de estas columnas, pero no todas, eso sería casi imposible de hacer. Tendrías que marcar una casilla de verificación. No sería intuitivo como si tuvieras que construir muchas opciones dentro de tu tema para conseguirlo. Pero ahora, con el hecho de que los bloques son reutilizables y pueden anidarse uno dentro del otro, realmente cambia el juego Y espero que estén empezando a ver a lo que me refiero aquí con cómo todo esto está en diferentes pequeños bloques que luego puedo hacer clic más profundo en. Entonces como aquí tenemos esta sección, luego tenemos un bloque, y luego dentro ese bloque tenemos estos otros tres bloques. Y cada uno de estos bloques y secciones tienen su propia configuración. Entonces sí, si quieres jugar con esto, pero esta lección o este video es más para solo mostrarte lo que viene para informarte si quieres invertir en un creador de páginas todavía o esperar hasta que surjan estos cambios. Por lo que es muy alentador ver estas características salir al editor de temas. Cuanto mejor sea el editor de temas, menos atractivas serán las aplicaciones de creación de páginas. Y eso siempre es bienvenido para mí como desarrollador. Dado que esta nueva funcionalidad de bloque ha hecho que se desarrolle una vista previa, deberíamos verla estrenada al público muy pronto. En cuanto a las secciones flex, algo que se anunció seis meses antes de la última edición, aún no hemos escuchado una actualización al respecto. Entonces por ahora lo que voy a hacer es terminar este video con un clip del canal oficial de Youtube de Hhave Fi donde se discute la visión del nuevo editor de temas y se introducen secciones flexibles. Bien, así que volvamos al editor de la tienda en línea, que es donde sé que muchos de ustedes dedican su tiempo haciendo que sus sitios se vean geniales. Y quiero mostrarte algunas novedades en nuestro programa, Fire Themes que ayudarán a darle vida a tu tienda un poco más. Así que aquí mismo en el editor, voy a hacer clic en la configuración de mi tema y hacer clic en Animaciones. Y aquí hay un par de cositas geniales. Así que puedes haber revelado secciones en scroll, lo que me da este bonito efecto cuando mis secciones aparecen dinámicamente a medida que me desplazo por la página. Y este otro efecto hover para tres D lift significa que al pasar el mouse sobre los elementos en la página, obtengo este bonito efecto de tres D brillante que simplemente da vida al sitio Es realmente genial. El último pequeño efecto que quiero mostrarte es en secciones donde tienes imágenes, tenemos este nuevo efecto donde básicamente puedes crear un paralaje estableciendo posiciones de fondo fijas Entonces mientras me desplazo por la página, obtenemos este bonito efecto de paralaje, que de nuevo, gran efecto visual, hace que tu sit sea un poco más animada Ahora, todo lo que les he enseñado hoy hasta ahora está en vivo y ahí fuera para que todos ustedes lo usen. Antes de que terminemos hoy, quiero darte un vistazo detrás de la cortina a un par de nuevas características que aún no están listas, pero que llegarán pronto Y estoy emocionado de que ustedes puedan echar un vistazo. Entonces el primero es algo que estamos llamando secciones flexibles. Entonces aquí abajo en el editor voy a dar click fuera de sección, igual que siempre lo haría en el recogedor de sección De hecho ahora veo las secciones un poco de vista previa antes de que realmente haga clic en ellas. Lo cual es muy agradable y útil si estoy pasando mucho tiempo probando secciones en mi tema. Ahora tengo la sección en la página, y esto es bastante bueno, pero no es exactamente lo que quiero. Ahora con secciones flex, en realidad puedo personalizar esta sección con nuevos bloques. Voy a hacer clic en este botón más y decir que quiero otra imagen aquí. Pongamos un par de imágenes reales en estos bloques. Voy a recoger las pelotas de tenis en la parte inferior, y tal vez escojamos el kit de costura para la parte superior. Ahora quiero que esto tenga un tamaño un poco diferente. Ahora solo puedo coger este asa y arrastrarla para que sea del tamaño que yo quiera. De hecho quiero dobles de esta sección, así que solo voy a hacer clic en esto, Hit Duplicar. Ahora tengo dos de ellos, pero como que quiero que este esté a la derecha. Así que vamos a recogerlo y arrastrarlo hacia el lado derecho. Como que quiero que estos sean al revés. Voy a arrastrar eso al revés. Quiero la simetría aquí, así que voy a escoger esto y voy a decir, por favor alinee eso a la derecha. A lo mejor. Vamos a obtener una pequeña variación de esta imagen. Elige una cosa de kit de costura diferente. Genial, me gusta mucho cómo se ven estas imágenes. Ahora vamos a entrar y poner un poco de copia, así que lo llamaremos hecho a mano en Estados Unidos. Entonces vamos a conseguir alguna copia de marketing aquí. En realidad no soy muy bueno en la copia de marketing. Consigamos algunos de shop fi magic copy sobre el equipo de tenis fabricado en Estados Unidos. Vamos a escoger, no sé, juguetón, generar. Bien, partido de set de juego. ¿Por qué no? Tomemos eso entonces. Lo último que quiero arreglar son estos botones. Estos botones están uno encima del otro. Preferiría que en realidad estuvieran uno al lado del otro. Bien, tengo la sección mirando de la manera que quiero ahora. Esto es en Desktop. Vamos a comprobarlo rápidamente. Se ve bien en el móvil. Es súper agradable. Simplemente se presenta responsivamente. Eso es increíble. Así como así, ya terminamos. Voy a hacer clic en Guardar. Esto se llama Secciones Flex, estamos deseando poner esto en tus manos muy pronto. 5. Introducción a las aplicaciones de creación de páginas: Idealmente, el editor de temas nativos de Chobifi debería ser suficiente para que los comerciantes de chop fi personalicen la parte frontal de su sitio web Pero desafortunadamente para los usuarios que quieren más control sobre sus diseños de front-end, terminarán siendo forzados a usar una aplicación. Estas aplicaciones de creación de páginas representan software personalizado que ofrece más controles de personalización, a menudo permitiendo más de las características que los comerciantes desean que el editor de temas Shobifi tenga como arrastrar y soltar, y componentes estandarizados con muchos ajustes de personalización Antes de sumergirnos en el uso de algunas de estas aplicaciones, solo me gustaría ayudarte a entender qué sucede exactamente cuando usas una aplicación en Chobfi Pasemos a nuestro administrador de Shopper Fire y agreguemos nuestra primera aplicación de creación de páginas. Actualmente puedes encontrar el menú de aplicaciones debajo de tu lista de canales de venta. Desde aquí, da clic en la palabra Aplicaciones y el menú desplegable se expandirá, permitiéndole ver la lista de aplicaciones instaladas actualmente, así como buscar nuevas aplicaciones para instalar. Busquemos en Page Builder y veamos qué surge. Esto nos llevará a la App Store de Shaba Fi donde podremos ver los anuncios coincidentes para el término de búsqueda Page Builder Como puedes ver, aquí hay muchas opciones, pero algunas de las principales son Page fly, show gun composer y gem pages. En esta clase, echaremos un vistazo a solo algunas de estas páginas de gemas, Replo e instantáneas Empecemos con las páginas Em. Haremos clic en el icono o el título del listado de las páginas Em aquí mismo. Y eso nos llevará a la página oficial de la aplicación en las páginas de Shopify App Store para Em Luego haremos clic en el botón para instalar la aplicación. Y esto nos dirigirá de regreso a nuestra tienda Shopify, donde Shopify nos pedirá que aprobemos ciertos accesos que requiere la aplicación Recuerda que a pesar de que la aplicación ha sido aprobada por la tienda de aplicaciones Shop Fi, sigue siendo una pieza de software de terceros. Los permisos que otorgues aquí permitirán que la aplicación se conecte a tu tienda Shopify y realice ciertos cambios Haga clic en el botón de instalar y ahora verá la interfaz para la aplicación dentro de su administrador de tiendas Chop Fi. Algunas cosas a tener en cuenta aquí es que, número uno, obviamente han diseñado su aplicación para que se vea bastante similar al resto del administrador. Pero no se deje engañar, esta interfaz está completamente determinada por la aplicación Si alguna vez has trabajado con un montón de aplicaciones en Chop Fi antes, posible que hayas notado que no todas parecen encajar perfectamente en el administrador de Hopi Fi Y eso es porque se pueden diseñar como quiera le guste al desarrollador de aplicaciones. Y número dos, de igual manera al diseño, la funcionalidad y el método exacto que una aplicación como esta puede usar para entregar los diseños que creas al tema real puede y a menudo difiere entre las aplicaciones que se utilizan. Además, como estas aplicaciones son software de terceros, el costo de la aplicación no está cubierto por Habi Fi. Así que la mayoría de estas aplicaciones tendrán algún tipo de precio de suscripción. Cobran a los comerciantes para poder utilizarlos. Si hago clic en la insignia aquí para desarrollo en la aplicación Gem Pages, puedo ver los diferentes planes disponibles y sus inclusiones para esta aplicación en particular En esta clase, sin embargo, no necesitaremos inscribirnos en ningún plan de pago para poder seguir adelante. Pero si terminas comprometiéndote con una aplicación en particular que te guste, es posible que quieras comprar uno de estos planes de pago para que se anuncien las funciones Entonces, ahora que entendemos que las aplicaciones de Page Builder son piezas externas de software que se conectan a tu tienda, llevan sus propios costos y manipulan tu tienda de manera personalizada, Pasemos a ver cómo podemos usar estas aplicaciones en 6. Páginas geminas: Bien, así que ahora que hemos cubierto cómo las aplicaciones se conectan a nuestra tienda Shopify, demos tres aplicaciones diferentes por las que más me entusiasmaron mis clientes Estas son páginas de gemas, Replo e Instant. Empecemos con las páginas de gemas, que instalamos en el video anterior. Entonces voy a hacer click sobre las aplicaciones y puedo ver aquí mis aplicaciones instaladas. Voy a hacer clic en Em Pages Builder después de darle algo de tiempo para que se cargue. Puedes ver aquí que podemos crear una nueva página, pero en realidad hay una nueva característica por aquí. Podemos crear secciones. En lugar de crear una plantilla completa, podemos crear una sección que se puede incluir en una plantilla, presumiblemente ojalá en el editor de temas Bien, ahora mismo voy a dar clic en Crear nueva página. Entonces aquí puedes ver que podemos crear a partir de una gama de plantillas, algunas de las cuales han sido completamente construidas, con todas las funciones. Si tenemos un producto que concuerda muy bien con esto, entonces podemos seleccionar uno de estos como punto de partida. Muy útil para mucha gente que no quiere diseñar a medida una landing page o una página de producto, pero necesitan algunas ideas. Y este es uno de los mayores puntos de venta de usar un creador de páginas. App Shop Pi no te va a proporcionar esto con todo el contenido de demostración también. Dicho esto, muchos de estos elementos son específicos del producto específico que se vende. Entonces no veo nada aquí para las tablas de snowboard, así que empecemos de cero. Voy a crear una página de producto desde cero. Y lo que puedo hacer aquí es insertar una fila de dos columnas, por ejemplo, y comenzar a construir mi diseño. Esto es un drag and drop, este sistema, que es bueno para muchos usuarios. Así podría arrastrar un encabezado a este lado, podría arrastrar una imagen a esta columna. Como puedes ver, esta funcionalidad de arrastrar y soltar realidad no tienes en el editor de temas propio de Shopify Ese es el punto de venta de una aplicación de creación de páginas como esta. Pero como esta es una página de producto, primero quiero construir algo de contenido dinámico. Déjame, perdón, estoy haciendo clic en las áreas equivocadas aquí. Realmente no uso aplicaciones de construcción de páginas porque soy desarrollador. Pero déjame ver. Debería poder hacer click aquí arriba. Y ahora tenemos esta sección. Voy a eliminar esa sección. Voy a desplazarme hacia abajo hasta el producto. Y esto nos permitirá traer información dinámica del producto. Como puedes ver aquí, está trayendo el producto de camiseta que está en mi tienda. Pero vamos a traer en el snowboard completo Oxygen. Creo que fue la colección snowboard Oxygen fue con la que estuvimos jugando antes. Bien, entonces usaremos esto como nuestro producto de ejemplo, ¿verdad? Así que tenemos esta sección de productos aquí y podemos cambiar el diseño. Podemos verlo en diferentes tamaños de pantalla. Y lo que es genial de las páginas de gemas, supongo, es que podemos construir diseños debajo de ellas. Entonces tal vez queremos un título de galería de productos, selector de cantidad de precios como de costumbre. Pero entonces queremos traer también algunas otras secciones debajo de él para vender realmente el producto. Para que podamos traer, ya sabes, algo así con una plantilla prediseñada Ya sabes, podemos arrastrar y soltar aquí. Así que realmente podemos poner esta imagen en cualquier lugar que queramos. Podemos traerlo de vuelta a esa columna. Podríamos reorganizar esto arriba o abajo. Así que mucha flexibilidad aquí. Y es un sistema muy agradable para los usuarios que aprecian esa funcionalidad de arrastrar y soltar. Bien, ahora obviamente esto no es contenido dinámico, por lo que probablemente solo querremos asignarlo a un solo producto o encontrar la manera de traer contenido dinámico aquí. Sin embargo, es un poco difícil con las páginas de gemas. El área donde estas aplicaciones tienden a descomponerse es cuando traemos contenido dinámico. Y lo que quiero decir con contenido dinámico es que esto de aquí mismo está tirando en el título del producto. Ya ves que no puedo editar eso. No puedo editar eso. Eso es tirar del producto en sí. Se trata de datos dinámicos, pero aquí mismo podría cambiar esto a la imagen que quiera. Cambia esto al texto que quiera. Es totalmente comestible. El único inconveniente de eso es que este contenido se aplicará a cada producto al que se asigne esta plantilla Entonces hablando de asignación, subamos aquí y hagamos clic en cero producto asignado. Y vamos a asignarlo a ese producto. Entonces la colección, Snowboard, Oxygen, creo que se llama. Haga clic en Confirmar. Ahora cuando presionemos Publicar, esta plantilla se asignará a ese producto. Una vez hecho esto, podemos hacer clic en Ver página en vivo. Y ahora podemos ver que la página del producto es igual a lo que creamos aquí en las páginas de gemas. Ahora porque soy desarrollador y creo que es importante entender cómo esto realmente se está enchufando a tu tienda Lo que esto realmente está haciendo es crear una plantilla en tu tema y luego asignarla a tu producto lo que me refiero con eso. Déjeme demostrarle eso ahora mismo. Si entro en productos y encuentro la colección snowboard Oxygen en mi lista de productos aquí, y me desplazo hacia abajo hasta donde se selecciona la plantilla. Tenemos plantilla GP que significa páginas de gemas, y este código largo que representa la plantilla que acabamos de crear, ¿verdad? Entonces no es un nombre muy fácil de usar, pero nos vincula directamente a esta plantilla que acabamos de crear, ¿verdad? Y luego, si analizamos nuestro código de tema, no te preocupes, no estaremos escribiendo ningún código de tema aquí. Pero solo quiero mostrarte el efecto que esto tiene en tu tienda. Verás que las páginas de gemas, cualquier cosa con páginas de gemas o gemas en esta lista de archivos aquí son archivos que han sido creados por páginas de gemas con solo instalar la aplicación y hacer ciertas funciones. Entonces puedes ver que tenemos cuatro archivos aquí y si entramos en nuestra carpeta de plantillas aquí mismo y nos desplazamos hacia abajo, podemos ver esa plantilla de producto con el código después de ella. Y puedes ver que enlaza dos secciones que tienen sección GP seguida de un ID único. Entonces, si nos desplazamos hacia abajo aquí, ahora puedes ver que cada sección se convierte en este archivo en nuestra carpeta de secciones también. Entonces menciono esto porque ahora mismo esto no es tan desordenado Pero si terminas construyendo muchas plantillas en tu tienda usando jam pages o una app similar, empieza a verse muy desordenada Déjame mostrarte con un ejemplo de uno de mis clientes. Aquí está el código del tema para uno de mis clientes. Y como puedes ver aquí, tenemos esos cuatro archivos en nuestra carpeta de maquetación. Pero si nos desplazamos hacia abajo, tenemos páginas de gemas, plantillas para artículos. Y si nos desplazamos una tonelada hacia abajo para las colecciones, tenemos un montón incluso para la plantilla de índice, que es la página de inicio, tenemos un montón de aquí tenemos un montón de páginas personalizadas con diferentes códigos. Básicamente tenemos muchos archivos de páginas de gemas aquí. Entonces aquí entramos en la sección de productos aquí, mira todas estas diferentes plantillas de productos sin nombres descriptivos. Solo códigos que se relacionan con productos dentro de las páginas de gemas. Por lo que es importante tener en cuenta aquí que cuando te vuelves loco con estas aplicaciones de creación de páginas, realmente agrega mucho volumen a tu tema. Aquí entramos en secciones aquí, y puedes ver si nos desplazamos hacia abajo, no es crear mucho en la forma de archivos de sección, por suerte, sino definitivamente en la forma de plantillas aquí mismo Ahora probablemente no vas a estar jugando en este editor de código, pero donde esto se manifestará es en el editor de temas. Si recuerdas este menú desplegable de antes donde podríamos ver todas las plantillas de productos. Verás aquí que tenemos una lista gigante y se asignan muchas plantillas a un solo producto. Hace que sea un poco más difícil de manejar. Si queremos usar el editor de temas, nos dificulta determinar qué plantilla en las páginas de gemas se está aplicando a qué producto. Y si tuviéramos que intentar editar esto en nuestro editor de temas, verás que no hay opciones. Ni siquiera hay una sección aquí para que la usemos. Todo viene a través de páginas de gemas. Entonces, esencialmente, realmente no juega bien con el editor de temas si estás usando páginas de gemas. Dicho esto, en el caso de que quisiéramos crear una plantilla que se aplicara a múltiples productos con secciones personalizadas que diseñamos a través de esta aplicación Page Builder, entonces las páginas de gemas probablemente no causarán demasiados problemas. Podemos entrar aquí, hacer clic en Administrar, Productos Asignados, y podemos asignar esta plantilla a un montón de productos diferentes. Así podríamos ir al snowboard completo en su lugar. Si escucho Publicar, ahora la plantilla para snowboard completo cambiará de predeterminada a esta plantilla de páginas de gemas en particular para probarlo, volvamos a nuestro administrador. Voy a salir del código del tema aquí. Entrar en productos. Y fue el snowboard completo, ¿ no? Justo aquí. Si me desplazo hacia abajo, podemos ver que este producto está usando la misma plantilla que esa otra de las páginas de Chem. Pero podemos entrar aquí y establecer esto como producto predeterminado, y eso lo configurará de nuevo para que se muestre a través de la plantilla predeterminada. Si presiono vista previa, esta es la plantilla predeterminada. Si lo volví a cambiar a la plantilla de páginas G em, presione vista previa. Ahora puedes ver que el mismo producto se entrega a través de una plantilla diferente, la que creamos en páginas de gemas. Entonces, los pros y los contras de usar páginas de gemas son vez que creamos una plantilla de página en páginas de gemas, entonces realmente no juega muy bien con el editor de temas. Si bien es posible que el editor de temas no tenga toda esta funcionalidad de arrastrar y soltar, usar páginas de gemas te va a dar menos control en el editor de temas. Pero si estás feliz de confiar en esta aplicación de creación de páginas de gemas, entonces deberías estar bien cuando se trata de crear plantillas para mucho contenido dinámico en páginas de gemas, comienza a complicarse un poco. Entonces, para lo que recomendaría más las páginas de gemas es crear páginas de destino. Obviamente una página de producto tiene sus propios datos y por lo tanto es altamente dinámica. Pero una landing page es una sola página que tiene contenido estático. Y así Em pages es un gran constructor de landing page. Si entro aquí por ejemplo, y puedo hacer clic en Seleccionar para seleccionar esta plantilla de página de destino y crear una plantilla de páginas Em. En base a eso, obtenemos esta hermosa plantilla que podemos cambiar a lo que queramos. Podemos ejecutar una venta del Black Friday y digamos que tiene 35% de descuento en su lugar. Y podemos vincular estos botones a donde queramos enlazar para cambiar esto tanto como queramos con esta hermosa funcionalidad de arrastrar y soltar. Bien, si vamos a golpear Publicar en eso, esto no es un producto, así que no va a crear una plantilla de producto. Pero creará una plantilla de página. Y no sólo eso, creará la página para ir con ella. Entonces, ¿qué quiero decir con eso? Entonces, si volvemos a hacer clic en Publicar, el botón desapareció antes. Para la página Ver en vivo, es molesto. Tienes que presionar Publicar para que ese botón se muestre. Pero aquí puedes ver que hemos creado esta página. El asa no es la mejor landing page. 18, 13, 36, 16 de marzo. Pero por supuesto podemos cambiar eso. Pero ahora tenemos esta hermosa landing page. Y lo que se hace, si nos fijamos en cómo eso ha afectado a nuestra tienda fi shop, no sólo ha creado una plantilla, sino que se ha creado una página con el fin de aprovechar esa plantilla. Entonces como puedes ver bajo tienda online, tenemos páginas personalizadas y podemos ver que esa landing page está ahí. Y en la plantilla de tema, puedes ver que es esta plantilla recién creada por Em pages. Y debido a que este contenido es todo estático, es solo una landing page. Podemos poner lo que queramos aquí. Esto tiende a funcionar bastante bien y no causar muchos problemas con la gestión del código en el futuro. Dicho esto, sin embargo, uno de los mayores problemas con estas aplicaciones de creación de páginas, prácticamente todas ellas estoy bastante seguro es que cuando golpeamos publicar, estos cambios solo se aplican al tema actualmente en vivo. Si volvemos a nuestros temas aquí, si nos fijamos en la versión amanecer 12, la que se está ejecutando actualmente, verás que todo el código de las páginas de gemas se ha puesto aquí. Pero si miramos nuestros temas de vista previa, así que veamos la versión 11 que se encuentra en la vista previa, verás que las páginas de Jem no instalaron ninguno de sus archivos aquí Entonces, si queremos utilizar temas de vista previa para previsualizar cosas, entonces queremos hacer un cambio en un tema, tal vez actualizar los datos y el editor de temas y luego verlo antes de publicarlo. Eso es algo que es un poco difícil de hacer junto con las páginas de Jem o cualquier otra aplicación de Page Builder Lo que quiero decir con esto es que si ves aquí, todos estos temas tienen un botón personalizado diferente. Entonces, si cambio contenido sobre este tema, solo se va a aplicar a este tema. Y debido a que este tema no es el tema en vivo, cualquier cosa que haga aquí no va a salir en vivo. Puedo probar un montón de cosas. Desafortunadamente, no creo que haya una manera de obtener páginas de gemas para afectar este tema en lugar del tema actualmente en vivo. Y como alguien que ha trabajado en tiendas que están usando páginas de gemas, pero también tratando de previsualizar características desarrolladas a medida en un tema de vista previa, esto se vuelve un poco complicado y difícil para que el proceso de puesta en escena funcione bien. Entonces esa es una pequeña demostración de las páginas de gemas y cómo afecta a tu tienda. Los mayores puntos de venta de las páginas de gemas, creo que son estas plantillas prefabricadas que puedes simplemente lanzar a tu tienda y reorganizar a través de arrastrar y soltar La gota de dragón parece funcionar bastante bien. Sabes, puedo arrastrar una imagen entre cualquiera de estos pedacitos de texto, mover estos trozos de texto alrededor. Es bastante agradable para alguien que quiere esa funcionalidad de arrastrar y soltar. Y como puedes ver aquí, hemos hecho un cambio. Entonces necesitamos volver a publicar, y eso va a cambiar nuestra plantilla Obviamente el efecto secundario de todo esto es cómo afecta tu tema. Pero mientras entiendas eso, pasemos a la siguiente aplicación, que es rep blo 7. Replo: Bien, en este video vamos a echar un vistazo a otra aplicación de creación de páginas llamada Replo Ahora que has visto tu primera aplicación de creación de páginas, ahora puedes ver a través comparación con Replo qué cosas son iguales y qué cosas cambian dependiendo de qué aplicación de creación de páginas estés usando Bien, así que vamos a instalar esta nueva aplicación de creador de páginas. Replo, ahí vamos. Diseñador de landing page de Replo. Haré clic en Instalar y luego volveré a hacer clic en Instalar para darle los permisos requeridos. Y Replo funciona un poco diferente porque necesitas crear un nuevo proyecto dentro de Replo Entonces ese proyecto se vincula a la tienda. Voy a llamar a esto, digamos a la clase de habilidades compartidas de Chris. Haré clic en Crear proyecto. Ahora con Replo, puedes crear una plantilla generada por IA. Eso es bastante vanguardista. Puedes crear una página en blanco o puedes navegar desde las plantillas. Déjame echar un vistazo a algunas de estas plantillas aquí. Al igual que las páginas de gemas, aquí tienes muchas cosas preconstruidas que puedes utilizar en tu tienda para que no tengas que crear un diseño tú mismo. Permítanme simplemente dar click en éste y crear una nueva página con eso. A diferencia de las páginas de gemas, Replo quiere saber el nombre y el asa antes de comenzar con esta página Diré landing page. Y como puedes ver, el asa se genera automáticamente. Pero podemos cambiar esto ahora, o podemos cambiarlo más tarde en el panel de control de Shopify Obviamente, todas las páginas personalizadas deben asignarse a una página personalizada en el sistema Shopify Así que también podremos cambiar esto en nuestro administrador. Así que voy a presionar Crear página. Y si eres como yo usando una tienda de desarrollo, te va a pedir que introduzcas la contraseña de tu tienda. Todas las tiendas de desarrollo están restringidas desde el exterior a través de una contraseña de tienda. Para que puedas bajar aquí a las preferencias dentro del canal de ventas de tu tienda online y simplemente copiarlo si te piden eso. Esta también es una característica si tienes una tienda en vivo y quieres ocultarla a vista a menos que tengas una cierta contraseña que también sea una característica de las tiendas pagas. Pero como mi tienda está en desarrollo, tengo que restringir el uso de una contraseña. Bien, aquí atrás, puedes ver aquí que tenemos el contenido dinámico que viene a través. Y puedes ver que aquí tenemos este diseño bastante especial. Obviamente este contenido aquí es contenido de demostración y proviene de otro producto. Así que tendríamos que entrar y cambiar todo este contenido para que sea relevante para nuestro producto. Pero si miras Rep Blow y solo lo comparamos con las páginas de Jem, puedes ver que tenemos este panel a la izquierda aquí que es más similar al editor de temas que a Jem pages Y si trato de hacer clic y arrastrar este contenido, sí funciona, pero es un poco menos clicable y arrastrable que mí me parece quizás un poco más robusto porque aquí tienes estos diferentes contenedores. Y puedes ver la estructura de la plantilla aquí mismo. Y también puedes hacer clic y arrastrar en esta sección también, tal como lo harías en el editor de temas. Si recuerdas lo que cubrimos en el video sobre la actualización anunciada a los bloques que llegan al editor de temas de Shopify, este pequeño panel aquí coincide más de cerca con lo que viene al editor de temas de Shopify Entonces es un paradigma similar, que creo que es algo bueno. Pero de nuevo, si puedes aguantar hasta que esos cambios se pongan en marcha, entonces eso agota la necesidad de algo como golpe de rep Pero una de las grandes diferencias aquí es que verás que hemos creado una página aquí. Esto no es un producto. Entonces, si le pego a Publicar sobre esto, lo que va a hacer es, bueno , antes que nada, nos va a pedir que hagamos un plan, lo cual no vamos a hacer. Pero si fuéramos a golpear Publicar en esto va a crear una página, no un producto. Si quisiéramos usar Replo para afectar la página de un producto, primero tendríamos que crear una sección Ahora no voy a empezar a pagar, qué fue, 300 dólares mensuales. $250 al mes. Sólo para este video. Y tampoco espero que lo hagas tú. Entonces lo que podría hacer es cambiarme a una de mis tiendas cliente y podemos ver cómo esto está afectando nuestra tienda de vidas. Bien, así que aquí puedes ver que tenemos algo similar completamente construido para un producto que es específico de esta tienda. Entonces, como puede ver, es solo para fines de demostración porque en realidad no está en la página de un producto. Para lo que este cliente está usando replo en este momento son las páginas de productos, creo, pero principalmente para la página de inicio. Entonces si busco. En la sección de página para la página de inicio, puede ver este icono aquí indicando que la página está establecida en la página principal. Y si hago clic en esto, pueden ver que este es un diseño de página de inicio completo que ha sido creado para este cliente. Creo que en este caso contratamos Replo ellos mismos para que construyeran este layout para nosotros. Al igual que las otras plantillas de Replo, podemos sumergirnos en cualquiera de estas secciones y editar tantas cosas diferentes Aquí hay muchas opciones diferentes, pero verás que se ve bastante diferente en términos de todos los diferentes diseños y diferentes formas de cambiar el ancho en comparación con las páginas de gemas, lo cual es un poco más pesado en el arrastrar y soltar tal vez. Pero nuevamente, cada una de estas aplicaciones hace cosas similares. Simplemente lo abordan de diferentes maneras. Para crear una página de producto o para crear algo en replo, eso afectaría a una página de producto, necesita ser creada como una sección Voy a dar click aquí para entrar en secciones. Y puedes ver aquí que tengo esta sección actualmente publicada para MCT Oil, Kickstart, Esta sección, creo que ya está publicada. Entonces, si entro en el personalizador para el tema en vivo aquí, puedes ver la página de inicio rápidamente Puedes ver aquí que no hay opciones para personalizar. Eso es sólo en Replo, porque está siendo manejado por Repl Pero si fuéramos a ir a la página del producto, no estoy seguro de en qué plantilla se está ejecutando. Solo busquemos el nombre del producto. Mct, Kickstart. Este es un mal ejemplo porque está usando páginas G em. En realidad, permítame hacer clic aquí para cambiar, y puedo seleccionar de la lista de productos. Buscar MCT, Kickstart. Ojalá haya uno que no esté asignado a las páginas de Gem. Aquí vamos. Puedes ver que actualmente tenemos algunas secciones nativas de shove Fi aquí Y si tuviera que dar click en Agregar Sección, podemos agregar una sección que fue generada por Replo En nuestro caso es, déjame buscar un MCT Kickstart Aquí vamos. Aceite Mct Kickstart Y podemos traer en esta sección. Y lo que eso nos permite hacer es que podamos ocultar estos y simplemente usar la sección como nuestra plantilla de producto. Ahora puedes ver que hemos transformado nuestra página de producto para este producto. Pero claro, estamos en la plantilla de producto predeterminada. No queremos afectar a esta plantilla en particular. Queremos crear una nueva plantilla para el producto. Y luego asignarle la sección que creamos a ese producto. Esencialmente, aunque hemos creado una sección aquí, no tiene ninguna configuración. El beneficio de tener esto como sección es sólo si quisiéramos agregar algo por debajo o por encima de ella. Porque si algo es una sección, entonces podemos apilar más secciones por encima y por debajo de ella. Entonces, por ejemplo, podría agarrar un banner de imagen aquí y ponerlo debajo de la sección que fue generada por Replo Bien, entonces volviendo a la interfaz de Replo, personalmente no entiendo el bombo detrás de esta Es un sistema similar a las páginas Em. Puedes crear secciones que como vimos en el último video con páginas de gemas, parece que puedes crear secciones en las páginas de gemas 2. Pero esas secciones no tienen configuraciones, por lo que realmente no aprovecha la funcionalidad que viene nativa con el editor de temas de Shopify Pero una de las cosas que puedo decir que me gusta de esto es este árbol como estructura aquí que tenemos a la izquierda. Y por supuesto tenemos muchos componentes preconstruidos que también podemos usar. Parece que tienen una biblioteca de plantillas bastante grande, que por supuesto es un valor agregado para muchos comerciantes. Pero muy similar a las páginas de gemas de la forma en que se conecta a tu tema, va a crear archivos. Antes de terminar este video, veamos justo dentro de nuestro código de tema. Si buscamos replo, podemos ver igual que las páginas Em, está creando muchos archivos Replo con, bueno, secuencias de identificación no aleatorias sino únicas aquí, que se ven bastante feas y desordenadas en Pero permite que Replo haga lo suyo. También creará un montón de replochunks en tu Quiero decir, mira todos estos relo, repl, replochunk. Si estás de acuerdo con ensuciar tu tema, entonces vuelve loco en estas aplicaciones. Todo es genial. Pero una vez que empiezas a mirar el código del tema, esto comienza a volverse realmente desordenado De todas formas, eso es todo por rep blow en este video en el siguiente cubrirá la app final, que es instantánea. 8. Instantáneo: Bien, en esta lección vamos a cubrir la última app nuestra lista para cubrir cuál es instantánea. Ha habido mucho bombo alrededor de esta aplicación, especialmente con el enchufe Figma y la característica única que tiene esta aplicación que creará configuraciones de sección para ti, pero veremos cómo funciona eso en solo un segundo De hecho, sigamos adelante e instalemos esta aplicación. Entonces solo se llama instantáneo. Buscamos Instant Page Builder. Creo que no se han encontrado resultados. Así que busquemos en la tienda de aplicaciones haciendo clic en este botón, Página instantánea y Constructor de secciones. Volveremos a hacer clic en Instalar. Eso nos lleva a la app instantánea, que, a diferencia de las otras apps que miramos, esta no se carga dentro de tu tienda fi shop. Como mencioné antes, todo esto es software externo sin importar qué aplicación estés usando. Y espero Fi permite que estas aplicaciones se carguen dentro de la ventana, dentro de tu tienda Fi store. Pero eso no quiere decir que sea parte de, así que simplemente se integra en el look de Schopf de Esta aplicación te dirigirá a su propio sitio web, por lo que no verás la interfaz de usuario de shove pi a la izquierda aquí Y la otra cosa que es diferente aquí es que necesitamos crear un sitio para páginas de gemas. No necesitábamos hacer nada de esto para el representante a continuación. Necesitábamos crear un proyecto al instante. Necesitamos crear un nuevo sitio. Entonces voy a llamar a esto Christopher Skillshare Store Hit Siguiente paso. Nos preguntará qué queremos vender. Nuestro producto es el más cercano al fitness. No sé si esto significa algo. Esto es probablemente solo investigación de mercado por instante. Así que voy a golpear Fitness y ahora me llevarán a la interfaz para la aplicación Instant Page Builder. Ahora una de las cosas que me gustan es este diseño limpio que nos anima a hacer ciertas cosas que creo que son buenas prácticas, como configurar activos antes de comenzar y configurar ciertos estilos de color que podamos cargar en nuestros diferentes diseños. Y aquí puedes ver que podemos crear páginas o secciones. Aquí puedes ver el panel de capas. Pero primero necesitamos crear una página o sección real para poder insertar algunas capas. Vamos a hacer clic aquí para construir desde cero aquí. Lo que hacemos es hacer clic y arrastrar desde este panel hasta nuestro lienzo aquí mismo. Entonces comencemos un diseño de dos columnas. Y luego digamos que pondremos una imagen en un lado y pondremos un encabezado en el otro lado, justo en este lado. Vamos a establecer la imagen. Voy a hacer clic en la imagen. Podemos elegir su fuente. Podemos. Vamos a subir esta imagen que en realidad viene de la tienda, esa instancia intenta recrear en uno de sus videos de Youtube Es una tienda de Beyonce llamada Sacred. Como puedes ver aquí, podemos pasar el cursor sobre ciertos elementos, hacer clic sobre ellos para revelar su configuración, y podemos ver que está respondiendo a nuestro clic Pero lo que no podemos hacer es hacer clic y arrastrar elementos sobre. Realmente no se puede ver desde su punto de vista, pero actualmente estoy arrastrando esta imagen y no pasa nada Así que aquí no hay funcionalidad de clic y arrastre. Pero similar a Replo, tenemos esta estructura tipo árbol que una vez más va a ser similar al editor de temas una vez que salga esa nueva actualización Sin embargo, una de las características interesantes es que tal vez no tenga funcionalidad de arrastrar y soltar para mover las cosas. Pero sí tiene cambio de tamaño de arrastrar y soltar, así que puedo cambiar el tamaño de esta imagen usando el editor visual, que es una característica genial Entonces como puedes ver aquí estamos en modo de construcción de páginas. Las dos opciones al instante son crear una página o una sección. Entonces, si acabo de presionar Publicar sobre esto, antes que nada, nos va a pedir que nos conectemos para empujar a Fi No sé por qué nos pide que hagamos esto cuando ya tenemos instalada la app. Pero tal vez tenga algo que ver con la aplicación que se encuentra fuera del administrador. Entonces haré clic en Conectar. Y creo que eso conectará nuestro sitio que creamos con nuestra tienda shove fi Un sitio y una tienda parecen ser dos cosas diferentes, pero podemos conectarlas juntas. Y luego ahora podemos publicar esta página en nuestro sitio shop fi. Ahora podemos dar click aquí para ver Página. A diferencia de Replo, no nos dio la opción de personalizar el título de la página y el identificador de página, pero ha creado una página en nuestra tienda fi tienda usando ese diseño Y así si vamos por aquí y bajamos a páginas, podemos ver pruebas de eso aquí mismo. Si hago clic aquí para ver la página, se puede ver que el nombre de la página es simplemente página. Y si entramos en él sitio web SEO, podemos ver el identificador aquí de la página. Y luego si miramos la plantilla, puedes ver que estamos usando páginas similares a gem, similares a replo, estamos usando una plantilla que fue generada por ellas la cual se ubicará en algún lugar de nuestro tema llamado instant seguida de una cadena única Bien, así que así de instantáneo es crear una página en nuestra tienda. Pero lo emocionante de lo instantáneo no es tanto que podamos crear páginas como acabamos de hacer, es que podemos crear secciones y luego estas secciones tendrán configuraciones integradas para que una vez que las insertemos en nuestro editor de temas, podremos editarlas usando el editor de temas. Entonces, idealmente, deberíamos poder aprovechar tanto el editor de temas como el creador de páginas instantáneas siguiendo este sistema. Así que vamos a probarlo. Vamos a crear una sección. Digamos que queremos que esta sección sea una sección de página de producto. Lo que podemos hacer es dejarme encontrar aquí lo de insertar en la página. ¿Cómo se llama? El Menú Insertar. Y voy a entrar en elementos. Podríamos hacer otro diseño de dos columnas y poner algo de texto estático, alguna imagen estática, botón, video, todas esas cosas buenas. Pero lo que podemos hacer es poner contenido dinámico desde el objeto producto. Si ponemos esto en la página de un producto o incluso si no lo colocamos en una página de producto, podemos vincular un producto y luego sacar la información dinámicamente de ese producto. Por lo que tendremos que crear un layout todavía. Así que voy a crear un diseño de dos columnas. Sólo necesito arrastrarlo al lienzo. Y en lugar de poner una imagen estática en este lado, voy a poner la imagen del producto en este lado. Y luego en lugar de tener un título aleatorio, voy a poner el título del producto por aquí. Pero me he perdido el punto, así que tengo que hacerlo. Está aquí arriba, así que sólo necesito arrastrarlo a esa fila. Entonces también agregaré, digamos el precio aquí mismo, el precio del producto y la descripción. Y agrega al botón de corte debajo de eso. Bien, ahora en la actualidad no aparece nada porque necesitamos vincularlo a un producto shopper fire. Justo aquí. Podemos seleccionar Establecer fuente. Hagamos lo mismo que llevamos haciendo todo el tiempo, que fue la colección Snowboard Oxygen. Creo que es ésta. Entonces podemos ir aquí por un título de producto, cambiar la fuente a la colección snowboard Oxygen. Y creo que se supone el resto, este add to cart está actualmente enlazando a este marcador Por lo que también queremos cambiar la fuente a recolección de oxígeno de snowboard. Bien, Y entonces podemos crear, igual que podemos con las otras aplicaciones de construcción de páginas, podríamos crear otro tipo de conjunto de columnas debajo de él y poner más contenido en. Pero por ahora, vamos solo, voy a deshacer eso. En realidad, no me deja deshacer eso. Entonces voy a tener que simplemente borrar esa fila. Eso ha funcionado? No. Solo necesitas hacer clic en eso para eliminar. Bien, creo que eso funcionó, aunque no, ahí hay otra columna. Bien. Bien, así que ahora voy a golpear Publish. Y en lugar de publicar una página, va a crear una sección que luego se va a insertar en nuestro tema. Y lo que podemos hacer en ese punto es llevar en esa sección a cualquier plantilla habitual dentro de nuestro paradigma de desarrollo de temas normales, dentro de nuestro editor de temas normal. Y entonces podemos utilizar esa sección. Y creo que esto también debería crear ajustes, modo que una vez que pongamos este diseño en nuestro editor de temas, también podremos editarlo con el editor de temas. Entonces veamos cómo funciona esto. Bien, así que voy a volver a mi editor de temas para el tema actual, Hit Personalizar para llegar allí porque creamos una sección de productos. Vamos a entrar en los productos. Podemos entrar en producto por defecto aquí. Digamos que queríamos reemplazar esta sección por mostrar la información de nuestros productos No lo voy a eliminar, sólo voy a ocultar ambas secciones para que no se muestren. Entonces en el anuncio realmente no nombramos nuestra sección correctamente, solo la llamamos S. Creo que ese es el nombre que va a venir por aquí. Pero como puedes ver, la sección que creamos instante ya está disponible para que la agreguemos en el editor de temas. Entonces voy a hacer clic en eso y sacar eso a colación. Y puedes ver ahora que tenemos nuestra información aquí, el único problema es que este es para la recolección de oxígeno de snowboard. Y como puedes ver aquí, estamos previsualizando airpods en el producto predeterminado Por lo tanto, no queremos que esto se aplique al producto Airpods y cualquier otro producto en la plantilla de producto predeterminada Pero si hago clic en esta sección, verás que va a abrir la configuración. Entonces como se prometió, Instant nos dará ajustes junto con el contenido cuando publiquemos una sección en nuestra tienda de I Store, que creo que es bastante única. No sé si alguno de los demás hace esto. A lo mejor Jem pages ahora hace esto, no estoy seguro, pero creo que aquí es de donde viene el bombo alrededor instantáneo Pero aún así, lo que no me gusta de este sistema es que hay tres lugares diferentes donde puedo poner un producto. Entonces he vinculado un producto aquí, lo vinculé dos veces otra vez. Agregar al botón de corte. El producto no ha sido vinculado, pero todo debería estar relacionado solo el producto único, ¿verdad? Entonces, dado este comportamiento inesperado, pensé que lo mejor sería preguntar al propio desarrollador de aplicaciones por qué tenemos tres campos separados. Y número dos, ¿cómo conseguimos que el producto extraiga de la plantilla del producto? En lo que respecta al segundo punto, la persona de soporte me dice que actualmente no soportan el uso de crear páginas de productos personalizadas completas, sin embargo, está llegando pronto, por lo que todas las secciones creadas van a ser utilizadas como expansiones para su página de producto actual Esencialmente, lo que creo que quiere decir aquí es que no podemos sacar el producto del producto que estamos viendo en una plantilla de producto. Pero lo que podemos hacer es crear secciones que extraigan información del producto de un producto. Especificamos, esencialmente no podemos usar enlaces dinámicos aquí. Tenemos que entrar y establecer explícitamente un producto. Pero en cuanto a los tres campos, menciona aquí que actualmente cada elemento está conectado por separado. Lo que tenemos que hacer es establecer la conexión del producto en la capa padre y luego todas las capas debajo pueden obtener datos de esa única conexión. Hacer referencia cruzada a esta información con dos T en el canal de Youtube de instancia Creo que lo que tenemos que hacer es eliminar estas secciones de productos dinámicos individuales completamente estas secciones de productos dinámicos individuales y poner algo de contenido estático. Pero luego vincula el contenedor padre a un producto de fuego comprador. Entonces parece que no vamos a poder obtener esta sección para sacar de una página de producto. Pero al menos podemos crear algún tipo de sección de productos destacados que podamos usar en otras páginas para resaltar un producto específico. Déjame volver con el editor aquí y déjame seguir adelante con esta idea. Entonces voy a eliminar todos estos elementos con producto al inicio. Todos estos elementos dinámicos del producto a los que entré antes. Así que solo voy a usar mi clave de eliminación para eliminarlos más fácilmente. Ahora solo tenemos nuestro diseño de dos columnas otra vez. Y puedes ver aquí que las filas están conectadas a Shopify Simplemente eliminemos esa conexión dinámica. Por ahora, pongamos en nuestro texto estático. Teníamos, ¿cuál era la imagen aquí? Texto aquí. A ver. Ahora necesitamos un texto de encabezado para el título del producto. Voy a quitar en realidad, ese tal vez pueda ser nuestro precio. Voy a dejar eso ahí. Me encantaría poner un botón, pero no sé si podemos sacar de la tienda, si estoy aquí. Vamos a probarlo. Ahora que tenemos todo el contenido estático, déjame subir aquí. Y en el contenedor padre, la columna, pongamos esto a un producto en particular. Deberíamos poder cambiar esto en el editor de temas más tarde con esa fuente dinámica seleccionada en el contenedor padre. Vamos a entrar en imagen, y puedes ver aquí que podemos enlazar a la fuente padre. Y luego si nos desplazamos hacia abajo, el contenido de la imagen se puede establecer de estático a dinámico. Y toma la imagen del producto que va a sacar de ese contenedor padre, de ahí viene el producto, debajo de aquí. Aquí tenemos la fuente. Y entonces podemos bajar aquí en contenido aquí, podemos hacer lo mismo, moverlo de estático a dinámico. Hay un paso más, tengo que seleccionar aquí de qué campo del objeto del producto quiero extraer. Entonces voy a sacar del título ahí. Se puede ver que tira dinámicamente. Y luego este pedacito de texto aquí, vamos a sacar bien el precio. Y luego aquí abajo, va a sacar de esa fuente. Pero no creo que podamos darle a esto una operación personalizada. Veamos las interacciones. ¿Podemos conseguir que esto agregue algo al corte? Aquí vamos. Acción añadir al corte. Bueno, aquí tenemos nuestra fuente. Vamos a probar esto. Déjame renombrarle el nombre a esto. Si me sumerjo en el texto, digamos añadir a cortar. Ahora presiona Guardar, y publiquemos esa sección, y luego obtendremos este práctico atajo para abrirlo en el editor de temas, veamos cómo esto cambia el resultado. Así que volvemos a estar dentro del editor de temas. Y vamos a ir a la plantilla del producto. Como puedes ver, tenemos el doble de información del producto, así que vamos a esconderlos. Y lo que nos queda es sólo la sección. Déjame entrar y revisar la configuración y él puede ver ahora solo tenemos un campo de producto. Entonces, si cambio esto a snowboard archivado, deberíamos obtener los datos dinámicos extraídos del snowboard archivado, lo que no parece ser el caso. Desafortunadamente, aquí tiene este campo. Pero si cambio el producto aquí, bien, ahora parece estar funcionando. Bien. Entonces eso fue un poco de un problema, supongo Bien, así que ahora podemos cambiar esto a cualquier producto que queramos. Y todos los detalles, la imagen, el título, el precio y el producto que se agrega a cortar ahora deberían estar tirando a través de cualquier producto que seleccionemos aquí. Una vez más estamos en la página para la colección snowboard hidrógeno. Entonces, vamos a intentarlo una vez más. Si podemos usar enlaces dinámicos, seleccionaré producto y veré si eso cambia cuando ahora cambiemos qué página estamos previsualizando Entonces, si uso esto para cambiar el producto que estamos previsualizando a través del producto predeterminado, cambiémoslo a oxígeno Bien, entonces la vinculación dinámica sí parece estar funcionando ahora que arreglamos ese problema con las entradas. Y se puede ver aquí antes cuando estábamos usando el enlace dinámico, estaba diciendo desde la sección actual, ahora dice desde la página actual, que es lo que queríamos hacer. Y entonces creo que hubo un poco de mala interpretación por mi parte del correo electrónico enviado antes Disculpas por eso. Pero se puede ver que la vinculación dinámica sí funciona. Así que ahora podemos crear esencialmente lo mismo que esta, una sección principal de información del producto al instante, traerla y aún tener algunas opciones de personalización en el editor de temas. Así que aquí estamos obteniendo un poco de beneficio de ambos mundos. Entonces, si presiono Guardar en esto y previsualizarlo a través de este tema, ¿verdad? Entonces esto está en la plantilla de producto predeterminada, por lo que esto debería aplicarse realmente a básicamente todos los productos. Voy a hacer clic en esto, esto abrirá el producto en el admin. No creo que haya un enlace para abrir la página del producto real, lo cual es molesto. Pero podemos volver a hacer clic en Vista previa para llegar a la página en el front-end. Como puedes ver aquí estábamos dando click para previsualizar la colección, Snowboard Oxygen, y tenemos eso. Ahora bien, si haces clic en un producto diferente, digamos algo completamente diferente, como una tarjeta regalo. Verás que se aplica la misma plantilla y que los datos dinámicos se están extendiendo. Y es de esperar que este botón Agregar al carrito funcione también. Y lo hace, identificó que el producto era tarjeta regalo y lo sacó a través. Eso es excelente. Entonces este es el beneficio de usar algo como instantáneo. Te da un poco de lo mejor de ambos mundos. Entonces, si vas a estar creando algo así como una página de producto que es altamente dinámica, te recomendaría hacer algo como esto con instantánea sobre quizás algunas de las otras opciones de las que hablamos en esta clase, así que eso es instantáneo. En el siguiente video, vamos a resumir todo nuestro aprendizaje hasta ahora y luego concluir la clase con tu proyecto de clase y los siguientes pasos 9. Resumen: Cubrió bastante repasando las diversas formas de personalizar un sitio web de Hopi Fi sin soluciones de código Recapitulemos rápidamente antes de pasar al proyecto de conclusión y clase Como viste a lo largo de esta clase, no importa con qué solución elijas ir, todas ellas pasarán por un tema Shopifi como también vimos en esta Con la excepción de crear instantáneamente una plantilla o sección en una aplicación de construcción de páginas nos obligará a continuar usando esa aplicación para hacer cambios en nuestros archivos front-end que se insertarán en nuestro tema, pero para cambiar el código, tendremos que volver a esa aplicación que los creó. En el siguiente video, voy a compartir mis recomendaciones personales. Pero para completar el resumen de este video, aquí hay algunos puntos para recordar. Número uno, el canal Shopify Online Store Sales está construido sobre un sistema de plantillas, secciones y bloques En el futuro, podrás anidar bloques dentro de bloques para crear diseños más complejos. Pero por ahora, los bloques existen en un solo nivel anidado debajo de las secciones Los constructores de páginas número dos te ayudan a crear plantillas personalizadas. Estas plantillas no se dividen en múltiples secciones temáticas y, por lo tanto, no aprovechan las características del editor de temas. Dicho esto, los constructores de páginas número tres ahora también se están moviendo hacia creación de secciones temáticas para jugar mejor con el editor de temas Pero hasta ahora todavía no he visto que ninguna de estas aplicaciones de creación de páginas genere bloques para ti. Las aplicaciones de creación de páginas número cuatro crean un lío en la base de código de tus temas, lo que puede causar problemas si quieres personalizar el código en el futuro. Y por último, el número cinco. Cada aplicación de creación de páginas también es un sistema separado, que significa que normalmente no puedes migrar una plantilla de una aplicación a otra. Por el contrario, si solo construyes con las secciones de temas nativos, puedes compartir estos archivos entre temas y migrar secciones con bastante facilidad entre temas y otras tiendas. 10. CONCLUSIÓN: Enhorabuena. Ahora has llegado al final de la clase, que si has visto todos los videos, ahora deberías tener una buena idea de las opciones para personalizar tu tienda sin código Sin embargo, como desarrollador, no puedo enfatizar cuánto aprender un poco de código puede ayudarte a evitar muchos de los problemas causados por confiar en aplicaciones externas Suficiente, eso que te recomiendo aprender al menos algún desarrollo de temas de Shopify si realmente quieres tener un control total sobre tu tienda offi store Si tienes curiosidad por ver cómo se ve eso, dirígete a mi código de canal de Youtube con Chris el freelancer, o echa un vistazo a algunas de mis clases, específicamente en Desarrollo de temas de Shopify aquí en SkillShare.com Por ahora, como esta es una clase sin código, quiero que elijas una solución de la clase, ya sea el editor de temas nativo o una aplicación de creación de páginas, y construyas dirígete a mi código de canal de Youtube con Chris el freelancer, o echa un vistazo a algunas de mis clases, específicamente en Desarrollo de temas de Shopify aquí en SkillShare.com Por ahora, como esta es una clase sin código, quiero que elijas una solución de la clase, ya sea el editor de temas nativo o una aplicación de creación de páginas, y construyas tu propia sección personalizada o plantilla. Una vez completado, agrega tu trabajo a la sección de proyectos de clase de la clase para compartirlo con los otros estudiantes o para obtener comentarios de mi parte. Si has disfrutado de esta clase, asegúrate de dejar una crítica positiva y asegúrate de revisar algunas de mis otras clases aquí en Skillshare Gracias por mirar y te veré en la siguiente.