Personalización de temas de Shopify: crea un escaparate de Shopify sin programar

1. INTRODUCCIÓN: Si buscas construir un sitio web de Shopify sin contratar a un equipo de diseñadores y desarrolladores, esta clase es para ti Si no has visto mi cara antes, mi nombre es Christopher Dodd Soy un maestro top aquí en skillshare.com y experto en desarrollo Shopify Trabajando con la plataforma Shopify desde 2019. En esta clase, te llevaré a través del proceso de transformar tu marca de eCommerce en una hermosa tienda Shopify con capacidad de respuesta móvil sin tener que aprender herramientas avanzadas de diseño web como Figma o tocar el código interno de tu tema Shopify En cambio, en lo que nos centraremos es en el enfoque nativo de Shopify para ningún diseño de tienda de código El Editor de Tienda Online. Dentro de esta clase, tomaremos los componentes centrales de una marca de comercio electrónico y diseñaremos un comprador por tienda desde cero utilizando las secciones existentes dentro de nuestro tema. Al final de la clase, tendrás un escaparate funcional que podrás usar para lanzar tu propia marca. Empecemos. 2. Prefacio: Entonces como mencioné en la intro en esta clase, te voy a llevar a través del proceso de transformar tu marca de eCommerce en una hermosa y sensible tienda Shopify móvil usando el Editor de la tienda online, y voy a hacer esto usando esta falsa marca Macha como ejemplo Como pueden ver aquí, ya tengo todos mis bienes listos para funcionar. Si quieres seguir junto con exactamente los mismos activos, te dejo un enlace aquí en esta clase para que descargues exactamente los mismos archivos. Sin embargo, si quieres seguir junto con tu propia marca, te animo a que organices tus activos de marca e imágenes del sitio web en una ubicación a la que puedas acceder fácilmente, como he hecho con esta carpeta para mi marca falsa Sans Aún no has llegado a esa etapa del desarrollo de tu marca, puedes usar una herramienta como ov At, que es una herramienta de IA que puede ayudarte a desarrollar una marca desde cero. Como puedes ver aquí, todos los activos en mi carpeta aquí se han generado desde dentro de la app Lovart Y si quieres saber exactamente cómo hice esto, puedes ver mi video gratis en mi canal de YouTube. Pero independientemente de si usa mis activos de marca o los suyos propios, por favor asegúrese de preparar esta carpeta con anticipación, ya que esto es lo que vamos a usar como base para nuestro diseño de escaparate en Shopper FI Lo segundo que quiero mencionar aquí es que obviamente hay diferentes recursos dentro la propia plataforma Shopify que se utilizan para ayudar a crear el escaparate Aparte de la propia personalización del tema de Shopify, deberás agregar algunos productos a tu tienda y organizarlos en colecciones, si corresponde Tocaremos algunos de los otros recursos en Shopify en esta clase Pero si eres completamente nuevo en Shopify, primero vas a querer familiarizarte con la plataforma Si aún no lo has hecho, te recomiendo que tomes mi clase de configuración de la tienda Shopify aquí en Skillshare antes de tomar esta, ya que te dará una descripción general de cómo funciona la plataforma antes de sumergirnos específicamente en la personalización del tema Ally, como también mencioné en la introducción, vamos a construir un escaparate en Shopify en esta clase sin ningún tipo Para evitar el código por completo, vamos a seleccionar un tema de Shopify preconstruido de Shopify Theme Store Estos temas se pueden considerar como colecciones de módulos preconstruidos que podemos usar como bloques de construcción dentro de la tienda en línea Editor Es importante señalar aquí que estos bloques de construcción dependen del tema que elegimos para comenzar, y estos temas vienen en una variedad de rangos de precios. Si bien hay un montón de temas gratuitos que podemos usar, vamos a tener más opciones de calidad dentro la tienda en línea Editor usando lo que se llama un tema premium. En otras palabras, un tema que tenemos que pagar. Dicho esto, los principios que imparto en esta clase son universalmente aplicables a todos los temas Y como veremos en esta clase, hecho podemos empezar a jugar con las secciones y construir nuestro escaparate en modo trial, lo que nos permite probar tantos diseños como queramos antes de lanzarnos a la obra con ese tema Entonces, para resumir antes de que empecemos , querrás uno, preparar tu carpeta de activos de marca y dos, familiarizarte con la plataforma Shopify Si aún no lo has hecho, adelante y hazlo, y te veré en el siguiente video. 3. Elaboración de un panel de inspiración: En este video, vamos a discutir el moodboarding, que como dice aquí, es el proceso de crear una colección visual para definir la dirección, estética o tono emocional de un proyecto creativo Básicamente, lo que estamos tratando de lograr en este paso, que podemos hacer un poco más tarde si quieres retrasarlo y realmente quieres empezar a poner tus productos en tu tienda ahora, esto es algo que podemos hacer a lo largo nuestro recorrido como marca en Shopify es constantemente podemos inspirarnos otros sitios web y aprender lo que están haciendo, lo que podría ser efectivo, lo que podría funcionar para nuestra marca e incorporarlo a nuestro propio sitio web. Entonces, inspirarnos en otros sitios web no es algo que hagamos una vez, y está todo hecho. Vamos a necesitar constantemente mirar a nuestros competidores y ver qué están haciendo. De hecho, también podemos inspirarnos en sitios web dentro de diferentes nichos, pero definitivamente de tiendas que venden un producto similar a nosotros, definitivamente queremos ver qué están haciendo y posiblemente usar en nuestra propia marca Así podemos encontrar otras marcas en nuestro nicho. Idealmente, sabrías quiénes son tus competidores en tu nicho. Pero si necesitas ayuda con esto, puedes usar Google o un LLM como Gemini para preguntarte cuáles son tus mejores competidores o cuáles son las mejores o más populares marcas en tu espacio Entonces la marca de ejemplo para esta clase Skillshare es una marca mata, así que voy a buscar polvo de matcha en línea Y ahora podemos ver un montón de sitios web optimizados para motores de búsqueda que surgen. Es posible que queramos reducir esto a nuestro mercado en particular. Entonces, como australiana, tal vez quiera poner a Australia aquí. O si eres estadounidense, reemplaza eso por USA. Puedes acotar esto tanto como quieras. Voy a usar Google Gemini, así que voy a decir por aquí, quiénes son las mejores marcas de matcha que venden en línea predominantemente a través de una tienda en línea Me está dando una de estas opciones A elección Bs. Sí, tiene un montón de nombres en el otro lado de aquí. Entonces muchos de estos son muy japoneses, pero si nos fijamos en la marca O, está un poco más dirigida a los occidentales Entonces echemos un vistazo aquí a Jade Leaf Macho. Este es uno de los mayores vendedores en línea en Estados Unidos. Así que tomemos eso y echemos un vistazo a su sitio web. Entonces es un producto similar a lo que vendemos con el polvo macho en sí y el kit para prepararlo. Conociendo poco pop aquí arriba, voy a cerrar eso abajo. Entonces podemos echar un vistazo al sitio web y lo que nos gusta de él, lo que no nos gusta de él, y lo que es importante, qué podemos aplicar a nuestra marca. Entonces, por ejemplo, si tiene una amplia gama de productos y no tenemos una amplia gama de productos, entonces no necesariamente podemos aplicarlo a nuestra marca. Si tienen 1,300 reseñas en un solo producto, no necesariamente podemos hacer 1,300 Pero si tienen, digamos, por ejemplo, testimonios aquí que están destacando particularmente o recetas aquí, podríamos crear nuestras propias recetas sobre cómo usar el polvo. Definitivamente podemos inspirarnos en este sitio web, ¿ de acuerdo? También, venderlo por suscripción y cómo se presenta la suscripción Bridget. A lo mejor nos gusta eso. Entonces lo que voy a hacer es que voy a hacerlo también me gustan los íconos aquí, y algunos como USP aquí Bien, entonces vamos a encontrar algunos otros ejemplos. Encontremos a Macha llena Bien. Nuevamente, este es un proceso bastante subjetivo. Quiero que mires lo que te gusta de este sitio web. Si me gusta este encabezado, solo puedo hacer una captura de pantalla de ese encabezado. Tengo mi set de captura de pantalla así que va a ir directo a una carpeta que he configurado para la inspiración del sitio web de la marca para que puedas ver Así que podría simplemente ponerlo todo en una carpeta si quisiera, y luego solo mirar esa carpeta o puedo arreglarla en algún tipo de lienzo. Tengo a Figma por aquí, así que podría hacer un montón de digamos, encabezados ¿verdad Necesito hacer esto grande, ¿verdad? Así podría poner aquí todos mis encabezados que me gusten. Entonces digamos, por ejemplo, también me gusta este encabezado. Obviamente, son completamente diferentes, pero digamos que me gustaron ambos. Entonces podría simplemente alinear todos mis encabezados que aquí me gusten. Nuevamente, puedes usar cualquier herramienta que prefieras con esto. Solo soy un usuario de Figma, así que tiene sentido para mí usar Figma, pero puedes armar esto ¿Algún software que prefieras? Y como no vamos a ser personalizados codificando el sitio web en esta clase de Skillshare, quiero que te concentres más en la lista de secciones que en los requisitos de diseño exactos Porque a menos que escojamos un tema que ya tenga este diseño de encabezado ya dentro de él, este es un diseño bastante personalizado. Así que la mayoría de los temas no nos van a dar la funcionalidad de tener un encabezado que se vea exactamente así. En cambio, en lo que quiero que te concentres es ¿cuál es la sección por encima del pliegue en la página de inicio? Es bastante estándar en eCommerce. Esto es lo que se llama una sección de héroes. Y si miramos alguno de estos sitios web, si vuelvo aquí, echemos un vistazo a la vida pico. Todos ellos van a tener algún tipo de sección de héroes en la parte superior aquí. Entonces obviamente vamos a querer una sección de héroes. Aquí no vamos a reinventar la rueda, pero tal vez queremos ver qué tipo de secciones de héroes nos gustan Todos son bastante similares aquí, pero este está bastante limpio. Así que solo voy a hacer una captura de pantalla de eso. Y luego lo mismo por aquí. Voy a hacer héroe Digamos secciones de la página principal, ¿verdad? Para que podamos mostrar héroe aquí. A lo mejor nos gusta mirar eso. Como se mencionó, lo más probable es que tengamos una sección de héroes en nuestra página de inicio. Eso es bastante estándar. Y entonces podemos mirar cosas como, Bien, ¿cuáles son los beneficios para la salud? Eso podría ser algo que queremos destacar en nuestro sitio web, así que también podemos ponerlo en nuestro mood board. Y esto nos ayudará a determinar qué poner realmente en nuestro sitio web, qué secciones buscar realmente para que podamos traerlas. Y tal vez queramos agruparlos. Digamos, definitivamente queremos destacar los beneficios, ¿verdad? Y estoy seguro que las otras marcas aquí probablemente tengan algo similar. Entonces aquí vamos, beneficios para la salud de nuestros botánicos Entonces déjame copiar y pegar eso. En realidad, voy a copiar y pegar desde todo el ancho. Así podemos apilar diferentes secciones que logren el mismo resultado de diferentes sitios web de destacar los beneficios. Entonces, ¿este tiene beneficios? Esta en realidad no lo que sí tiene es esta bonita sección de recetas pequeñas. Así que déjame ver si puedo encajar todo eso en un marco de sitio web aquí al alejar el zoom. Parece que no puedo ir. Así que voy a agarrar todo eso. Y digamos por aquí, vamos a tener recetas de escaparate o recetas de mach, trae en esa sección Y como pueden ver, estoy rompiendo esto sección por sección. Un sitio web es esencialmente una lista de secciones. Para que podamos desglosar esto en esta barra de anuncios, este encabezado, esta sección de héroes, esta sección de beneficios, esta sección de colección destacada. Básicamente, podemos desglosar cualquier sitio web de comercio electrónico estándar en secciones, y así es como funciona en Shopify Entonces, cuando comencemos a construir nuestra tienda un poco más tarde, verás repasando la lista de secciones disponibles en el tema, y luego solo las estaremos trayendo a nuestras plantillas, ¿de acuerdo? Entonces tal vez llamo a este héroe, y puedo poner un marco alrededor de todo esto para las secciones que tal vez quiera poner en la página de inicio. Bien, así puedo agrupar todos estos secciones de la página principal. Ahora, obviamente, mi texto es del color equivocado, así que solo lo arreglaré. ¿Correcto? Entonces, obviamente, puedo usar estos pedacitos de inspiración en diferentes plantillas en mi sitio web de Shopify, pero solo te doy algunas ideas aquí Así que voy a crear otro marco aquí para la página del producto. Entonces, en Shopify, es una plantilla de producto que vamos a usar para todos los productos a menos que usemos plantillas alternativas, pero la mayoría de las veces solo usamos una sola plantilla Para nuestros productos. Y así vamos a la página principal del producto. Estas son las dos páginas principales cualquier sitio web de eCommerce Shopify Todavía estoy alejada aquí, así que déjame acercarme de nuevo Depende de lo mucho que quiera una captura de pantalla. Pero aquí podemos echar un vistazo a la plantilla principal de producto de estas otras marcas. Entonces déjame aquí, voy a alejarme. Y puedes ver que este no se acerca tan bien, pero puedes ver aquí que muchos de ellos se ofrecen por suscripción. Déjame ir a dónde está la página del producto aquí. Bien. Diosa del Sol Macha Bien, sí, este también está en suscripción. Así podemos echar un vistazo a cómo se configuran las galerías, si nos gustan las miniaturas de la izquierda O nos gustan en la parte inferior. Nuevamente, vamos a estar limitados por nuestro tema. No podremos personalizar necesariamente exactamente como lo queremos sin codificación personalizada, pero podemos acercarlo bastante al tema. Y puedes ver aquí tenemos algunas pequeñas insignias aquí. A ver si eso está por aquí, no. Creo que vi algunas insignias aquí, no. Entonces eso es algo único que Sun Goddess está haciendo es poner algunas insignias sobre las imágenes del producto, y por aquí. Veamos también cómo podemos expandir estas imágenes. Puedes hacer esto por el tiempo o lo poco que quieras. Cuanta más investigación hagas, más aprenderás lo que otros sitios web están haciendo y podrías obtener algunas buenas ideas. Pero obviamente, como mencioné antes, tiene que coincidir con lo que eres capaz de lograr con tu marca. Entonces, si no tienes lo que era este tenía 1,300 reseñas, si aún no tienes un montón de reseñas, entonces, no necesariamente puedes mostrar un montón de reseñas, obviamente Pero podemos hacer algunos testimonios. Si solo tenemos un pequeño número de reseñas, podemos destacar cada reseña individual como el uso de iconos aquí. Esto no es necesariamente una sección, sino solo alguna inspiración de diseño para decir solo puedo decir, me gustan estos íconos. De nuevo, este es tu pequeño álbum de recortes, tu pequeño lienzo para poner toda tu inspiración de diseño en una sola página No hay un proceso establecido para esto. Este es un proceso flexible para obtener inspiración de diseño, ¿de acuerdo? Por lo que te recomiendo definitivamente mirar a tus competidores o tiendas venden productos similares a ti. Obtenga algo de inspiración para ellos. Los mejores elementos que te gustan ponen en tu mood board, y para que cuando lleguemos a construir nuestro escaparate dentro de la tienda online Editor, ya tengas una idea de lo que quieres poner en la tienda Y como recordatorio, puedes hacerlo en cualquier etapa del proceso. No tienes que hacer tu moodboarding ahora, terminarlo y luego pasar al siguiente Esto puede ser algo y debería ser algo que hagas a lo largo de la vida de tu marca, siempre mirando diferentes inspiraciones, y siempre puedes actualizar tu sitio web a medida que obtienes nueva inspiración de otros sitios web o simplemente ideas que te salen de la cabeza Pero este es definitivamente un proceso de pensamiento que vas a querer tener antes de sumergirte directamente en el editor de la tienda en línea, que es lo que haremos más adelante en la clase. 4. Entrada de productos: Bien, así que ahora hemos llegado a una tienda Bresh Shopify. Esta es la tienda que he creado para Sans marcher. Y si vamos al canal de ventas de la tienda online, verás que es solo el tema predeterminado al momento de grabar Horizon que está en nuestra biblioteca de temas. Y si vamos a nuestros productos, verás que nuestra lista de productos está completamente vacía. En este video, va a ser bastante corto porque solo vamos a agregar productos a nuestra tienda. Obviamente, para tu marca, dependiendo de cuántos productos tengas, este podría ser un proceso largo. Si quieres seguir junto con la misma lista de productos que mi marca de ejemplo CNS, entonces todo lo que necesitas hacer aquí es hacer clic en Importar y podemos agregar en un archivo CSV con formato Shopify Así que voy a ir a mi carpeta de identidad de marca aquí mismo, que tiene todos mis activos de marca. Y puedes ver aquí hay uno llamado productlst dot csv Así que simplemente puedes hacer clic y arrastrarlo aquí. Voy a publicar todos los productos nuevos todos los canales de venta. Nuestro sitio web aún no está en vivo, así que esto realmente no importa. Va a hacer clic en Subir y previsualizar. Entonces solo va a revisar el mapeo aquí, el título, y la descripción y están en el lugar correcto. Te puedo asegurar que esto fue exportado desde Shopify, así que deberíamos estar bien para solo importar, y esto llevará un poco de tiempo Pero después de un tiempo, dirá productos importados. Verás algunas imágenes que están apareciendo aquí, lo cual es bueno. Pero si vamos aquí a nuestro polvo de matcha, sí, también tenemos las imágenes Entonces dentro de ese archivo CSV, debería tener un enlace a la imagen. Y si agregamos algunos productos con imágenes a nuestra tienda, si pasamos al contenido y vamos a archivos, deberíamos ver que esos ya se han subido a nuestra sección de archivos también. Importante tener en cuenta aquí, recientemente tuve un cliente que acaba de pasar por eliminar algunos archivos porque su tienda se estaba llenando. Cualquier cosa que vincule a estos archivos en nuestra lista de productos o en nuestro tema terminará con contenido vacío si eliminamos nuestros archivos. Entonces sí. Asegúrese al eliminar archivos, igual que una nota al margen de que no elimina los archivos que están actualmente en uso. Como puedes ver aquí, referencias, se utiliza en un solo producto. Entonces, si tuviéramos que eliminar eso, entonces perderíamos esa imagen de las imágenes de nuestros productos por aquí. Ahora, por supuesto, si estás usando tu propia marca, no solo vas a importar mi lista de productos y usarla. Entonces, obviamente, vas a necesitar pasar por el proceso de agregar tus propios productos, ya sea a través de un proceso automatizado, a través de una importación como acabo de hacer o manualmente haciendo clic en Agregar producto por aquí. Cuando estás agregando tus productos, principal en lo que debes enfocarte es obviamente el título así que voy a decir producto solo como ejemplo aquí, título del producto, esto va a determinar aquí abajo tu listado de motores de búsqueda. Entonces puedes ver aquí que tomó el título del producto, y lo puso como título del tablero del producto, pero también puedes editar esto aquí mismo. En Shopify, el mango no es solo una cosa de SEO, sino que también es la forma en que apuntamos productos en nuestra programación Por lo que es importante conseguir esto justo antes de tiempo. Entonces, cuando estás configurando tus productos, quieres asegurarte de que el producto maneje esta última parte de la URL aquí, es como pretendes que sea, ¿de acuerdo? Pero aparte del título y una imagen y un precio y obviamente agregar algo de inventario aquí para que se pueda comprar, eso es todo lo que realmente requieres, y todo lo demás es extra por encima de eso. Obviamente, si tu producto viene en diferentes opciones, necesitas agregarlos aquí, y eso creará diferentes variantes. Pero no vamos a entrar en la diferencia entre productos y variantes en esta clase. Ya lo cubrimos en la configuración de Shopify Store, así que no profundizaré en cómo funciona realmente la plataforma Shopify fuera del editor de la tienda en línea Si quieres conocer más sobre eso, puedes ir a la clase anterior de Skillshare Pero independientemente del método que usaste para conseguir algunos productos en tu tienda, vas a necesitar algunos productos, así que te animo a que lo hagas ahora mismo. Y otra cosa que voy a hacer es organizar estos en una colección. Y como tenemos una gama de productos tan pequeña, solo voy a crear una colección muy básica en lugar de homepage, que es la predeterminada, voy a eliminar esa. También podría editarlo a mi gusto, pero sólo voy a borrar eso y empezar de nuevo. Y sólo voy a llamar a esto la colección Shop All. Muchas tiendas hacen esto, y puedo hacerlo inteligente aquí o manual porque tengo una gama de productos tan pequeña, no va a importar mucho de ninguna manera. Así que voy a agregar en los cuatro productos de mi gama de productos aquí, y eso va a agregarlo a esta tienda Toda la colección. Entonces al final de este video, deberías tener tus productos importados o al menos algunos de ellos, y al menos una colección construida con algunos de esos productos dentro de ella. Bien. Ahora en el siguiente video, vamos a pasar a la configuración de marca de nuestra tienda Shopify, y vamos a poner logotipo de nuestra marca y algunos colores también Entonces te voy a ver en el siguiente video. 5. Ajustes de marca: Así que en el último video, rápidamente agregamos en nuestra lista de productos usando una importación y los organizamos en una sola colección. Vamos a hacer un video más rápido sobre cómo configurar algunas cosas dentro de nuestra tienda antes de pasar a seleccionar nuestro tema y configurar nuestra tienda con el editor de la tienda en línea, y eso es para entrar en la configuración de nuestra marca Esto, creo que es una característica bastante nueva en Shopify, pero ahora podemos agregar cosas como nuestro logotipo y los colores de nuestra marca a una sección de marca de nuestra configuración dentro de nuestra tienda Shopify Anteriormente se hacía dentro la tienda online Editor al configurar tu tema, y aún así se hace de esa manera. Pero la idea de la configuración de la marca es que no estamos copiando y pegando configuraciones en múltiples temas, que podrían ser hasta 20 temas diferentes en tu biblioteca de temas Tenemos un lugar centralizado para poner cosas que realmente no cambian como los colores de nuestra marca y el logotipo de nuestra marca. Así que vamos a usarlo ahora, y luego obviamente vincularemos esto a nuestro tema un poco más tarde. Y si nos desplazamos hacia abajo, puedes ver que no se trata solo de logotipos y colores. También podemos agregar imagen de portada, eslogan, breve descripción y algunos enlaces sociales aquí. Por lo que los animo a que llene esto lo más posible. En este video, sólo voy a añadir en el logo. Entonces como puedes ver aquí, aquí tenemos nuestras imágenes de producto, pero aún no tenemos nuestro logo, así que voy a abrir mi carpeta de identidad de marca, y puedes ver que tenemos el logo, así que solo voy a arrastrar solo un recordatorio de que este logo, si le echamos un vistazo está muy bien recortado y tiene un fondo transparente Cuando estés preparando tu logo, te recomiendo que hagas lo mismo. Y si te interesa cómo lo hice, básicamente solo usé preview, que es la app estándar en MAC para simplemente recortar una imagen así, y luego puedes usar una herramienta como remove dot Bg para eliminar el fondo de una imagen si no tienes una app como Photoshop, ¿bien? Pero, sí, quieres agregar en tu logo, como tal sin toneladas de espacio alrededor del contenido real del logo y un fondo transparente. Entonces voy a agregar eso en. Y algo genial de los ajustes de esta marca, como puedes ver, se agrega a esta pequeña maqueta en la parte superior de aquí también. También podemos agregar en un logotipo cuadrado. No estoy seguro si tengo la versión cuadrada aquí mismo. No creo que sí, pero esa también es una opción ahí mismo. Y luego ahora voy a agregar en mis colores de marca. Entonces echemos un vistazo a que podemos mirar la lista aquí escrita en edición de texto. O podemos ver nuestra guía de identidad de marca aquí mismo. Entonces voy a mirar mi guía de identidad de marca en su lugar. Entonces voy a abrir eso con vista previa. Y como pueden ver, tengo dos colores primarios y tres secundarios, que creo que concuerda perfectamente por aquí. Entonces agreguemos mi primer color primario, que va a ser ojalá pueda copiar y pegar. Sí, puedo, aquí mismo. No le gusta el hash, así que nos vamos a asegurar de conseguir el hash. Entonces, si hago algo así, simplemente echa de menos el último personaje de tres Bien, ahí vamos. Y entonces el color contrastante es este de aquí. Así que ojalá pudiera seleccionar en realidad, tal vez voy al documento aquí podría ser más fácil de copiar y pegar. A pesar de que estos están organizados un poco mal aquí, así que déjame echar un vistazo por aquí. Así que queremos mover el color crema a secundario. Bien, ahora podemos usar esta lista. Entonces si vuelvo aquí por el color contrastante, era beige suave. Entonces voy a copiar eso sin el hash, y luego voy a entrar en colores secundarios aquí mismo, poner en el verde salvia. El siguiente, obviamente, debería ir sin decir que vas a poner aquí los colores de tu propia marca. Estás haciendo esto con tu propia marca. Pero si solo estás siguiendo junto con mi marca de ejemplo, estarás siguiendo el proceso de la misma manera que yo lo estoy haciendo. Y ahora podemos hacer clic en Guardar para guardar esos colores. Y si nos desplazamos hacia arriba, podemos ver cómo esos colores interactúan en una pequeña maqueta aquí arriba A pesar de que no es una maqueta de sitio web real, se ve bastante bien la combinación de esos colores Bien, así que eso es todo para configurar los ajustes de la marca. Obviamente vamos a vincular este logotipo y estos colores a nuestro tema a través del editor de la tienda en línea, pero va a depender de qué tema vamos a usar. La buena noticia con la configuración de la marca aquí es que es consistente en todas las tiendas Shopify, mientras que la parte a la que vamos a llegar a continuación con la elección de tu tema y luego poner esta información dentro tu tema varía de tema a tema Entonces, sin fervor, ahora que ya tenemos nuestra configuración de marca establecida, y nuestros productos importados, pasemos ahora al canal de ventas de tiendas en línea y comencemos a trabajar en nuestro tema 6. Elegir un tema: Bien, así que ahora hemos llegado a la parte de la clase donde es el momento de decidir sobre nuestro tema Shopify Y hay una serie de factores que entran en esta decisión. El primer factor, diría yo es el precio. Entonces, si tienes presupuesto cero, entonces obviamente vas a tener que elegir un tema gratuito, o vas a tener que usar esta función, ¿dónde está aquí abajo donde puedes escribir con Shopify magic, un prompt, y generar un tema basado en tu prompt No necesariamente recomendaría esto. Puedes probar esto y ver si produce un buen resultado, pero he encontrado que los resultados de esto no son asombrosos. Y es mejor usar un tema que en realidad fue creado por desarrolladores reales y no por IA, al menos al momento de grabar. Y así tus opciones, obviamente, ya tienes una instalada en tu Shopify Store Entonces, si hago clic en Editar tema aquí, me va a llevar al Editor de Tienda Online para el Tema Horizon. Entonces este tema Horizon ha estado fuera desde hace uno o dos años como el tema predeterminado en las tiendas Shopify Y como pueden ver, no tenemos que pagar por esto. Este es un tema gratuito. Al evaluar temas, quiero que te muevas por diferentes plantillas y mires por la lista de secciones. Así que una pequeña cartilla sobre Editor de tienda en línea. Lo cubrimos un poco en mi clase anterior de Skillshare en la configuración de Shopify Store Pero esencialmente, tu tienda Shopify es solo un montón de plantillas, y podemos acceder a estas diferentes plantillas aquí arriba en el centro superior Entonces como pueden ver, aquí la plantilla actual en la que estoy es homepage. Pero si hago clic en esto, puedo elegir otras plantillas para mirar. Entonces las páginas principales que vamos a ver es la página principal y la página del producto. Y como pueden ver, aquí hay un submenú porque puedo crear plantillas alternativas para la plantilla del producto, o simplemente puedo usar la plantilla de producto predeterminada. Solo vamos a usar la plantilla de producto por defecto, así que voy a hacer clic en eso y puedes ver que me cambia a una vista previa de esa plantilla. Y luego también depende qué producto estemos pasando por esa plantilla. Entonces lo que puedo hacer es cambiar el producto que estoy viendo a través de esta plantilla. A, digamos, nuestro producto principal, que es el polvo de marcher premium, y podemos ver cómo interactúa nuestra plantilla con un producto de entrada diferente ¿Bien? Volvamos a la página principal. Y dentro de esta área de plantilla, puedes ver que hay un botón para agregar sección. Y entonces lo que vas a querer hacer es mirar las diferentes opciones cuando estés evaluando un tema aquí en la lista de secciones. Con Horizon, en realidad, hay una lista bastante grande. De nuevo, si no tienes presupuesto y solo quieres un tema gratis, entonces Horizon está bastante bien. Pero echemos un vistazo a algunas de las otras opciones en la tienda de temas de Shopify Si voy aquí a temas gratuitos populares, puedes ver que hay algunos otros temas gratuitos aquí. Pero vamos a visitar toda la tienda de temas. Todo bien. Ahora, como puedes ver aquí, algunos de los que llegan a la cima, los más populares sí vienen con una etiqueta de precio de 300 a 400 dólares Impulso. Este de aquí mismo es uno de los más populares. Lo he usado en varios proyectos, pero va a llegar a un precio premium. Dicho esto, si tuvieras que personalizar tu propio tema, lo más probable es que sea más de 400 USD. Entonces creo que obtienes buena explosión para Buck con temas premium, y recomiendo comprar un tema premium a cualquiera que esté en ese rango de presupuesto donde no puedan pagar un sitio web de 5,000 a 10,000 dólares, puedes obtener una tonelada de trabajo de desarrollo dentro de un tema muy modular con el que puedes trabajar editor de la tienda en línea aquí en Shopify Para que puedas echar un vistazo a la tienda de demostración en cualquiera de estos temas de Shopify, y puedes jugar con él Está dentro de este pequeño contenedor aquí, pero puedo expandirme y puedes ver aquí, hay mucho más en el camino de la animación, y es simplemente muy crujiente y premium. Hay un montón de secciones y un mega menú muy agradable, también. Así que algunos de mis clientes han usado este tema premium antes. Pero obviamente, hay en la tienda de temas Shopify. Volvemos a navegar por todos los temas, hay más de 1,000 de ellos. Así que bastante difícil de mirar y evaluar a todos ellos. Es casi imposible. Así que querrás usar algunos de estos filtros por aquí. No creo que puedas filtrar por precio. Sólo puede ser gratis o de pago. Entonces digamos que tu presupuesto es cero, vas a estar viendo estos 24 temas diferentes. Obviamente puedes agarrar un tema desde fuera de la tienda de temas Shopify, pero simplemente no lo recomendaría Todos estos temas dentro de la tienda de temas pasan por una estricta lista de verificación con el fin de ser aprobados para existir en esta tienda de temas. Entonces definitivamente te recomiendo que pases por la Tienda de temas Shopify También puede filtrar vía industria. Entonces, ¿cuál sería el nuestro? Supongo que sería comida y bebida, aquí mismo. Así podrás filtrar por diferentes industrias, pequeños tamaños de catálogo y diferentes características. Pero también puedes usar IA para ayudarte. Así que volviendo a nuestro amigo Google Gemini, voy a decir, ayúdame a elegir un tema Shopify para mi sesión premium de la marca MacHaPowder Obviamente, reemplace esto con su propia marca si lo está haciendo en su propia marca. Bien, así que aquí puedes ver te recomienda algunos temas aquí. El prestigio es bueno que ya he escuchado antes. Echemos un vistazo al prestigio. Nuevamente, como muchas cosas en esta clase, este es un proceso un poco subjetivo, y va a depender mucho tu propia marca y de tus propias preferencias, pero aquí podemos ver la demo de prestigio. Es un poco más de moda. No sé si esto necesariamente tiene sentido para nuestra marca Macha, pero lo que podemos hacer es en cualquiera de estos temas, podemos hacer clic en Tri Theme Y lo que Tri Theme nos permite hacer es comenzar a construir nuestro escaparate con este tema sin tener que pagar por ello Ahora, claro, sin pagar por ello, no vamos a conseguir muchas características, por ejemplo, en realidad no podemos publicarlo en nuestra tienda. Entonces como puedes ver aquí, se va a instalar en mi biblioteca de temas a prueba. Entonces eso acaba de hacerse ahora. Y generalmente hay un botón aquí para publicar, así puedo mover este tema en nuestra biblioteca de temas, que actualmente es un tema de vista previa al tema principal, y por lo tanto publicarlo en el sitio web. No podemos hacer eso con un tema de prueba. Solo podemos hacer click aquí para comprar. Y si queremos editar el código, realidad no podemos editar el código Eva. Parece que podemos previsualizar el tema. Eso es lindo. Bien. Y puedes ver que ya está cargado en nuestro logo ahí. Simplemente no podemos publicarlo o editar el código. Esas son las dos principales limitaciones aquí. Pero en realidad podemos pasar por el resto de la clase construyendo nuestro escaparate sobre un tema como este sin tener que necesariamente comprarlo a menos que estemos listos para entrar en vivo con este escaparate, Entonces aquí puedes ver, ya está precargado mi logo. Entonces, si entro en mi encabezado aquí, la imagen está tirando a través del logotipo predeterminado desde la configuración de nuestra marca. Pero digamos, por ejemplo, no configuramos ese logotipo en nuestra configuración de marca, siempre podemos simplemente vincularlo directamente aquí en la tienda online Editor. Eso no es problema. , voy a hacer clic para conectar una fuente dinámica Sin embargo, voy a hacer clic para conectar una fuente dinámica y conectar nuestro logotipo de marca solo para estar más limpio aquí. Bien. También está jalando a través de algunas navegaciones. Trabajaremos en las navegaciones un poco más tarde en la clase Pero si vamos a nuestra configuración general del tema por aquí, podemos comenzar a cargar algunos de nuestros colores de marca y tipografía Voy a empezar primero con la tipografía. Y para el texto del cuerpo, las fuentes de nuestra marca son, como dice aquí, Inter y tenor Sands. Entonces nuestra fuente corporal va a ser Inter. Así que voy a marcar eso en seguida. Entonces voy a subir hasta aquí a nuestra fuente de rumbo. Y según nuestro documento de marca, va a ser tenis Sands, ¿verdad? Así que pon eso ahí. Y puedes ver que no se ve muy diferente, pero espero que estés de acuerdo en que las fuentes vayan bastante bien juntas. Bien, así que ahora pondremos en nuestro color Los temas modernos de Shopify ahora tienen esquemas de color Entonces seleccionas un esquema, y luego trae a través de todas las variables de color dentro de ese esquema. Y lo que esto te permite hacer es en lugar de establecer colores individuales en cada sección, puedes traer a través de un esquema, y puedes intercambiar ese esquema en una sección determinada. Entonces simplemente reduce las opciones para que en lugar de agregar un montón variables de color en cada sección, solo seleccionas un esquema, y luego configuras las variables de color en uno de estos esquemas Entonces voy a agregar un nuevo esquema, y pueden ver aquí, tenemos una, dos, tres, cuatro, cinco, seis, siete variables de color diferentes para agregar. Entonces aquí podemos poner los colores de nuestra marca. Aquí hay cierta habilidad para determinar qué va a dónde. Para nuestros colores de fondo, obviamente queremos algo que sea un poco blanquecino, y para nuestros colores de texto, queremos algo que sea un poco más oscuro. ¿Bien? Entonces, si miro el gráfico real de los colores de nuestra marca aquí mismo, ya lo tengo abierto, puedes ver aquí que ya tenemos un cierto blanquecino cargado aquí. En cambio, podemos cambiar eso y podemos agregar en un color específico o podemos agregar un valor dinámico y traer, digamos, por ejemplo, nuestro color de contraste secundario, para que vinculen digamos, por ejemplo, nuestro color de contraste secundario, para la variable real a nuestro color de fondo general. Y luego en términos de texto corporal, podemos traer en nuestro color primario uno. Estas secciones en realidad no se han cambiado para usar nuestro nuevo esquema de color, así que tendremos que hacerlo un poco más tarde. Vamos a poner estos ahora, vamos a entrar en nuestro fondo de botón, que suele ser el inverso de lo que hemos configurado aquí. Entonces lo configuraré para que sea básicamente lo inverso. Entonces voy a configurar el fondo para que sea la marca verde brillante, y luego configuraré el texto para que sea el color primario contrastante. Y luego aquí abajo, podría usar el color secundario dos, y contrastarlo con el color secundario de contraste. Bien, podríamos necesitar editar esto y ajustar esto a medida que comenzamos a construir nuestras secciones Pero vamos a esta sección de presentación de diapositivas, por ejemplo, y ¿tiene una opción para la combinación de colores? No parece tener eso. Pero vamos a entrar, digamos, por ejemplo, colección destacada aquí mismo, y luego podemos cambiar esto a nuestro nuevo esquema de color cinco. Y como pueden ver, se ve bien, pero tenemos un pequeño problema con el botón. Déjame volver a aquí, pasemos al texto de nuestro botón aquí mismo. Y no necesariamente tenemos que usar estos colores exactos, así que solo puedo quitar eso, dejarlo como blanco. Sabes, a lo mejor quiero usar el otro color secundario de contraste. Bien, déjame guardar eso. Y creo que el texto aquí usando el color primario uno, no hay suficiente contraste ahí, así que solo voy a salir de esa selección, y voy a hacer que el verde sea un poco más oscuro. Ya sabes, este es un sistema flexible. No necesitamos respetar completamente el código de color exacto. Podemos hacer que ese color sea un poco más oscuro, y creo que ese esquema de color funciona mejor Bien. Bien, entonces ahora con nuestro tema decidido, pasemos al siguiente paso, que es agregar en nuestras secciones. Y si esto no funciona para este tema en particular, siempre podemos cambiar de tema. Pero ahora usando prestigio, empecemos a configurar nuestro escaparate usando las secciones disponibles en nuestro tema elegido 7. Página de inicio: Bien, así que aquí estamos dentro del editor de la tienda online, personalizando el tema de prestigio Como se mencionó en el último video, las opciones para la personalización del tema dependen mucho del tema real que elija. Este editor de tienda en línea va a ser el mismo sin importar qué tema uses, pero las opciones en términos de qué secciones puedes agregar y las opciones dentro de esas secciones van a estar limitadas o habilitadas por el tema. ¿Bien? Entonces vamos a seguir adelante con el tema del prestigio aquí, pero puedes seguir en principio con cualquier tema. Las secciones y los ajustes sólo van a ser diferentes. Una cosa que puedes notar aquí es que estoy en un tamaño de pantalla tan ajustado aquí que este ícono de hamburguesa está mostrando para el menú móvil Si me explico a pantalla completa, puedes ver que eso se expande en elementos del menú. No quiero que se muestre así cuando estoy personalizando la página de inicio, así que solo voy a alejar, y eso debería traernos nuestros elementos del menú aquí. Bien. Ahora con este tema en particular, podemos ver diferentes grupos de secciones a la izquierda aquí. Así que tenemos nuestro grupo de encabezado, nuestro grupo de superposición y nuestro grupo de pie de página además del grupo que va debajo de la plantilla. Solo para explicar esto un poco antes de ir a mirar las secciones en la propia plantilla. En Shopify, podemos crear nuestros propios grupos de secciones que se aplican a cada plantilla, y estas van fuera de este grupo normal de plantillas aquí En el pasado, era solo una sección de encabezado y una sección de pie de página. Pero para que estas áreas sean un poco más personalizables y permitan agregar secciones adicionales a estas áreas, Shopify creó algo llamado grupos de secciones hace unos años, y ahora un grupo de pie de página y un grupo de encabezado que va a ser bastante consistente en todos los temas Pero este grupo de superposición es algo que es bastante único para el prestigio. Todo lo que necesitas saber aquí es que estos grupos van a aparecer sin importar qué plantilla estés viendo, pero las secciones debajo de este encabezado de plantilla se aplican solo a la plantilla que estamos viendo. Entonces estamos viendo la página de inicio ahora mismo como podemos ver aquí arriba. Entonces estas secciones se están ejecutando en nuestra página de inicio. Como puedes ver, aquí hay un montón de secciones. Lo que sucede cuando instalas un tema de la tienda de temas en modo de prueba, como tal es que vas a obtener un montón de secciones de demostración agregadas a la página de inicio, lo cual es un poco molesto. Al menos muestra todas las características del tema o al menos un montón de características, pero no queremos eso Queremos construir realmente nuestro escaparate desde cero. Y aún podemos seleccionarlos agregando una sección a través de este menú. Entonces voy a eliminar tantos de estos como pueda me va a permitir eliminarlos todos, excepto uno porque necesitamos al menos una sección en nuestra plantilla en todo momento. Entonces puedes ver aquí ahora que si me desplazo hacia abajo, no tenemos más de esas secciones, y para esta sección particular de presentación de diapositivas, no podemos eliminarla porque actualmente esta es la única sección de nuestra plantilla Ahora, como se mencionó en la lección de moodboarding, prácticamente todos los sitios web de comercio electrónico van a tener una sección de héroes en su página Entonces esta es una decisión de diseño bastante fácil de tomar. Queremos encontrar una sección que sea una sección de héroe que podamos agregar a la parte superior de nuestra plantilla. Lo que vamos a hacer es dentro este grupo de plantillas aquí mismo, haga clic en Agregar sección. Y ahora podemos ver un montón de secciones en diferentes grupos como este. Podemos ampliar y contratar estos grupos dentro específicamente del tema del prestigio. Entonces esta selección de diferentes secciones, esto va a depender qué tema esté personalizando. Entonces, en el tema del prestigio, tenemos todas estas opciones diferentes. Y a medida que pasamos el cursor sobre las diferentes secciones, obviamente podemos leer el nombre Pero luego a la derecha, si se ha establecido un preset, podemos ver una vista previa visual de cómo podría verse esa sección. Entonces, a medida que desplazamos nuestro cursor sobre estas diferentes secciones, puedes ver cómo podrían verse potencialmente en tu tienda con contenido de marcador ¿Bien? Ahora bien, esta presentación de diapositivas es algo que podemos usar como nuestro héroe, pero voy a elegir de esta lista de otros banners aquí Echemos un vistazo a esta imagen con bloque de texto. Y lo que voy a hacer es que voy a agregar en la imagen que preparé antes, nuestra sección de héroe de estilo de vida Así que voy a hacer clic y arrastrar eso a mis archivos aquí y luego golpear hecho. Y entonces obviamente voy a querer cambiar el texto aquí, pero permítanme verificar que realmente pueda mover esta casilla porque no la quiero aquí en el centro. Entonces, en realidad, quiero deshacerme de este efecto paralex. Bien, eso es mejor. Pero puedes ver aquí que esta caja está algo oscureciendo el contenido Entonces, a menos que haya una opción para que lo movamos a la izquierda o a la derecha, no creo que esta sea la sección ideal para nuestra sección de héroes. Entonces lo que voy a hacer es que voy a mirar esta otra imagen de aquí con superposición de texto. En realidad no tenemos una vista previa de eso, pero podemos verlo aquí ahora como lo traemos con los datos preestablecidos. Y puedes ver aquí esto en realidad podría funcionar un poco mejor. Entonces voy a configurar mi esquema de color aquí arriba al esquema de color para nuestra marca, y luego voy a hacer clic en Seleccionar aquí en el campo de imagen para traer esa imagen que hicimos en la anterior. Bien. Creo que esto va a quedar más bonito, aunque el texto no es del color correcto en términos de contraste Entonces, lo que podemos hacer, en realidad, hay una configuración de superposición por aquí. Entonces, como pueden ver, se está poniendo una superposición oscura. Lo que podríamos hacer es poner una superposición más brillante como esta y luego tal vez aumentar la opacidad de superposición para crear más contraste con el texto aquí Voy a dejarlo en negro, y voy a cambiar el esquema de color para que sea blanco. De hecho creo que se ve un poco mejor. Pero cada uno lo suyo lo que mejor te parezca, obviamente puedes hacer. Y luego voy a marcar mi opacidad a un nivel que creo que no oscurece demasiado la imagen mientras que al mismo tiempo da cierto contraste con el texto Y en términos de personalizar los elementos reales dentro de esta sección, puedo mirar a los bloques dentro de la sección Permítanme simplemente borrar estas otras secciones ahora que me he decidido por esto como mi héroe. Entonces como puedes ver aquí, esto va a quedar bien como héroe. Puedo personalizar algunas otras cosas como el látigo de contenido y la posición del contenido, así puedo ponerlo en la parte superior izquierda si quisiera Puedo ponerlo en la parte inferior derecha si quisiera. Eso se ve un poco bonito, siempre y cuando esté por encima del pliegue, pero definitivamente quiero que el texto esté por encima del pliegue. Entonces lo voy a dejar en el centro medio. Entonces lo que voy a querer hacer es personalizar ese texto. Entonces como pueden ver aquí, hay dos bloques dentro de esta sección, y puedo dar click aquí para agregar más bloques. Por lo que esta sección permite un subtítulo. Líquido solo significa código personalizado, por lo que podemos agregar algún código personalizado. Podemos agregar en un botón. Podría querer agregar un botón aquí y luego obviamente reordenar esto, así que está en la parte inferior Entonces voy a querer cambiar la copia. Entonces tengo mi documento de copia de sitio web por aquí. Déjame abrirla. Y luego en la parte superior aquí, puedo ver un poco de titular, así que voy a copiar eso, poner eso aquí. Y luego para el párrafo, voy a tomar este párrafo bajo el rubro y ponerlo aquí, ¿verdad? Y luego para el texto del botón, también necesitamos vincular este botón a alguna parte, obviamente. Tal vez solo digo descubre la diferencia de sesión o lo que quieras aquí, y luego solo puedo vincularme a nuestra tienda o colección, o podría vincularme directamente a nuestro producto principal El polvo de marcha premium, lo que quiera aquí. Y también puedo personalizar el color del botón. Puedo cambiarlo a un esquema. Voy a hacerlo sólido o mantenerlo sólido. Y luego el color de fondo, a lo mejor uso mi color primario de marca. Va a ir directo a los objetos Meta aquí, pero puedo hacer clic en este Chevron aquí para volver a nuestra marca, y luego probemos primero el color primario Creo que es un color demasiado atrevido. Entonces déjame reemplazar eso por el color secundario uno. Y entonces, claro, quiero que el texto sea de otro color blanco para el contraste. Bien. Entonces me gusta la mirada a eso. Si queremos verlo en diferentes tamaños de pantalla, podemos repasar a estos iconos aquí mismo. Entonces si hago clic en pantalla completa, eso va a ocultar la barra lateral, y luego la vemos en una pantalla un poco más ancha. Y luego si hago clic en móvil, podemos ver cómo se ve en el móvil, que es bastante ajustado. Por lo tanto, es posible que queramos actualizar un poco nuestra configuración aquí. Entonces lo que podría hacer es en el tamaño de la imagen, podría cambiar eso de proporción original a grande. Ajustar pantalla. Así que eso se ve mucho mejor en el móvil, y entonces eso no se ve tan mal en el escritorio Eva. Entonces eso nos está dando lo mejor de ambos mundos, creo, en términos de usar la misma imagen de héroe para escritorio y móvil. Obtenemos un buen resultado haciendo eso. Bien, entonces esa es nuestra primera sección. De hecho, podemos cambiar el nombre de esto si queremos ser héroe, solo para que eso sea un poco más claro. Y con nuestra sección de héroes agregada, agreguemos algunas secciones más. Ahora, voy a moverme un poco más rápido a través de esto ahora que entendemos cómo al menos configurar una sección, y ahora solo es cuestión de decidir a qué otras secciones ir en nuestra página de inicio y configurarlas. Entonces vamos a golpear Guardar en esto y vamos a trabajar en las siguientes secciones. Entonces, para la primera sección de la página de inicio, normalmente siempre va a ser una sección de héroes. Así que eso es una obviedad bastante grande. Pero ahora tenemos que decidir qué más queremos en nuestra página de inicio. Y para inspirar esta decisión, podemos mirar a nuestro mood board. Y ver qué están haciendo otros sitios web que nos gustan. Pero también tenemos que hacer coincidir esto con las secciones disponibles en nuestro tema elegido. Así que estamos un poco limitados a las secciones disponibles dentro de nuestro tema aquí, que en este caso es prestigio. Ahora, por supuesto, si eres una codificación personalizada de tu sitio web, puedes hacer que se vea como quieras y construir en las secciones que quieras. Y voy a llegar a algunas de las opciones al final de esta clase sobre cómo se hace eso. Pero por ahora, sin usar IA o código, solo usando la forma estándar en Shopify, necesitamos mirar qué secciones están disponibles dentro de lo real Pero pareciendo, realmente no tengo un mood board, y ya tengo una idea en mi cabeza de lo que quiero construir Sólo voy a repasar esta lista de bloques y ver qué tiene sentido agregar. Un formulario de contacto en la página de inicio, no particularmente típico para una marca de esta naturaleza. Si tengo un boletín, puedo capturar las inscripciones al boletín si tengo algún tipo de imán de plomo para reunir de la gente. Pero creo que algo que es bastante común es exhibir algunos productos en nuestra página de inicio. Y podemos hacerlo usando lo que se llama una colección destacada en Shopify o en este caso, una sección de colecciones destacadas Entonces voy a hacer click en esto Y lo que me permite hacer es traer una determinada colección o conjunto de colecciones. Entonces en el caso de esta, podemos agregar en múltiples colecciones diferentes. Por defecto, es solo una, pero para esta sección en particular, podemos agregar en múltiples colecciones. Y entonces lo que voy a hacer es que voy a dar click en este bloque para su colección, y como pueden ver aquí, podemos vincular una colección de nuestra tienda, ya que solo tenemos una porque tenemos una pequeña gama de productos, solo voy a Link Shop A. Este es el límite de productos para mostrar, pero pareciendo que solo tenemos cuatro en nuestra tienda Sólo vamos a mostrar cuatro. Entonces este es el máximo que mostrará esta sección. Y luego podemos poner en una rúbrica para esta colección, recordando que aquí podemos poner múltiples colecciones, así podría poner en un encabezado opcional aquí de Tienda A. Como pueden ver, debajo de aquí, si se mira de cerca, esto por defecto es el título de la colección Entonces si dejo eso en blanco, el título de la sección es Shop All de todos modos, así que eso en realidad no va a cambiar el texto. Permítanme cambiar esto a la gama de productos Al, ¿verdad? Y entonces eso va a cambiar el texto aquí. Y entonces no quiero un botón ver todos porque eso es literalmente todos los productos que tenemos en nuestra tienda. Y luego si subo a la configuración de la sección, aquí está este otro pedacito de texto, el subtítulo, y solo voy a eliminar eso por completo Normalmente con las secciones de Shopify, si eliminas el texto completamente en el campo, entonces eliminará ese espacio donde iba ese texto si el tema está construido correctamente, es decir Y al igual que la última vez, queremos ver nuestras diferentes opciones de personalización aquí para encontrar oportunidades para que esto se vea aún mejor. Obviamente, queremos que use nuestro propio esquema de color, así que voy a poner eso en el esquema cinco, y eso se ve bastante bien, en realidad. Si tienes alguna de esas marcas premium donde no muestras el precio o el título de puedes encenderla. No voy a hacer eso en esta instancia. Podemos apilar los productos. Entonces creo que esto está relacionado con el móvil, así que voy a cambiar a la vista móvil aquí mismo. Si apago esto, entonces es una especie de contenedor de desplazamiento de desbordamiento Pero si cambio esto para apilar productos, entonces se puede ver que aquí puedo tener una cuadrícula de dos columnas o una simple cuadrícula de un producto por fila. Entonces depende de tu preferencia personal. mí me gusta este, así que voy a dejarlo así. Y entonces esto va a ser relevante aquí porque sólo tenemos cuatro productos. Entonces, a menos que cambiemos esto a, digamos, por ejemplo, dos en escritorio, que creo que es demasiado grande, entonces no vamos a tener que irrumpir en múltiples líneas con una gama de productos de solo cuatro productos. Bien. Entonces esas son nuestras opciones dentro de la propia sección, pero dentro de la configuración del bloque, también podemos vincular el botón que acabamos de quitar aquí a algo. Obviamente, si tenemos una vista o un botón, por defecto es la URL de la colección, pero en realidad podemos hacer que se vincule a otro lugar Sólo voy a quitar el botón por completo. No creo que tenga sentido, y eso es todo para nuestra sección de colección destacada. Incluso podría cambiarle el nombre a colección destacada, ¿de acuerdo? O podría llamarlo nuestra gama de productos. Bien. Esto no lo cambia en los nombres de las secciones aquí mismo, solo la instancia de nuestra sección que se trae a la plantilla aquí. Bien, entonces voy a darle a Guardar en eso. Esa es nuestra segunda sección de página de inicio construida. Bien, quitemos la barra lateral y veamos qué tenemos hasta ahora. Esto me está gustando. Llegaremos al encabezado un poco más tarde, pero en términos de las secciones específicas de la página de inicio, todo se ve bien hasta ahora. Voy a agregar dos más y luego terminaremos y miraremos la siguiente plantilla. Entonces, una de las cosas si recuerdas de la lección de mood board es que parecía que todas las otras marcas de matcher destacaban los beneficios de su matcher Y otra cosa que me gustó fueron estos íconos de aquí. Entonces lo que he hecho es que he generado mis propios íconos que puedes encontrar en la carpeta de iconos, y cada uno de estos iconos representa un beneficio diferente. Tan antioxidante, si solo reduzco el tamaño de eso, salud cerebral, energía calmada y desintoxicación En realidad, tengo uno más aquí, pero probablemente no lo voy a usar. Creo que cuatro probablemente sea suficiente. Tener algo que sea como una lista de puntos, puedes usar algo como iconos para hacer esa lista un poco más rica, ¿de acuerdo? Entonces, si volvemos a nuestra plantilla por aquí, busquemos una sección que podamos usar para resaltar estos beneficios. Entonces voy a hacer clic en la sección Agregar debajo de nuestra gama de productos, y echemos un vistazo a los diferentes grupos de secciones. Utilizando los títulos de estos diferentes grupos para informarme. No estamos buscando una pancarta. Buscando llamadas a la acción, tal vez buscando algo contenido. Así que no vamos a traer algunas entradas de blog al menos en esta etapa, no algún contenido con fichas, no una imagen de antes y después, pero podemos encontrar algo como esta sección de múltiples columnas aquí siempre y cuando podamos agregar una imagen Entonces voy a traer eso aquí. Y echemos un vistazo a los ajustes dentro de cada bloque. Sí, podemos agregar en una imagen. Así que posiblemente podríamos usar esta sección de múltiples columnas. Permítanme darle otra mirada a qué otras secciones podríamos tener disponibles para nosotros. Y abajo en el grupo Confianza y prueba social, tenemos esta sección llamada Texto con iconos. Esto es exactamente lo que estoy buscando. Así que voy a traer eso aquí mismo. En realidad, podemos ver que lo estamos usando aquí abajo con los iconos incorporados en el tema. Este tema obviamente viene con algunos iconos, como puedes ver aquí. Podemos agregar en nuestros propios iconos personalizados. Entonces lo que voy a hacer es que voy a agregar todos estos iconos a este cargador de imágenes de aquí mismo Y lo que esto va a hacer es subirlos todos a la vez. Pero una vez que estén subidos, obviamente, voy a seleccionarlos uno a la vez para destacar cada uno de estos beneficios. ¿Bien? Entonces obviamente voy a necesitar emparejar esto con alguna copia del sitio web. Así que volvamos a mi página web copiar documento aquí mismo. Y aquí tenemos algunos puntos aquí que queremos sobre en nuestra página web defensa radical, ritual sostenido, chispa metabólica y vívida desintoxicación Podemos hacer coincidir nuestros íconos con estos beneficios. Entonces la primera defensa radical, voy a mirar por aquí. Este icono de aquí parece ser el partido adecuado. Entonces voy a agregar eso aquí, cambiar esto a defensa radical, y luego tomar el subtítulo de nuestro sitio web copiar documento ahí mismo El látigo de iconos para nuestros íconos más detallados es obviamente demasiado pequeño aquí, así que voy a sacar esto bastante a colación De hecho, creo que quiero llevarlo todo el camino hasta el valor máximo de 64. Y entonces tenemos aquí esta opción para el ícono móvil WIP, también Definitivamente queremos que eso sea más grande en el móvil, también. Así que lo pondré todo el camino hasta 64 también. Y como puedes ver aquí en el móvil, vamos a tener que irrumpir en este tipo de slider con animaciones entre las diapositivas. Bien. Entonces, el beneficio de usar un tema fuera de la estantería y no codificación personalizada es que no tenemos que preocuparnos por codificarlo para múltiples tamaños de pantalla. Este tema debería funcionar automáticamente en el móvil sin que tengamos que mirarlo, pero también debería haber opciones disponibles para nosotros dentro del tema para personalizar esas opciones Como pueden ver aquí, estoy incumpliendo el esquema uno. Entonces voy a querer cambiar esto a nuestra combinación de colores. Si quieres evitar este paso por completo cambiando el esquema de color de cada sección recién creada, entonces podríamos haber configurado nuestros colores por aquí. En el esquema uno. En realidad, aquí hay una opción para tener el esquema de color predeterminado. Entonces pongamos eso a cinco, y eso nos permitirá con cada nueva sección que construyamos, usará el esquema de color cinco por defecto, que es nuestro propio esquema de color. ¿Bien? Qué otras opciones tenemos en la configuración de la sección aquí antes de pasar a personalizar los bloques Sección separada con borde. Por lo que es difícil verlo con estas líneas azules en estos momentos. Pero hay una frontera a ambos lados. Creo que eso se ve bien por ahora, así que voy a dejar eso Y luego esta otra opción para stack on mobile, cierto, pero no es apilar tan bonito. Voy a darle la vuelta a eso. Y si, creo que eso es todo para la configuración de la sección en general. Por ahora, sólo voy a marcar el resto de mis íconos. Así que voy a ir aquí y cuál fue el siguiente ritual sostenido, ¿de acuerdo? Entonces, esta se trata de una energía enfocada en calma que dura 4 horas. De hecho, podría arrugar un poco este zoom para ustedes Parece que no puedo acercarme, así que solo voy a hacer esto más grande en términos de tamaño de fuente. Bien, ritual tan sostenido, una energía calmada y enfocada que dura horas. Entonces, ¿qué sería eso? Energía tranquila, probablemente. Bien, déjeme meter esa. Nuevamente, quiero marcar los látigos de iconos, reemplazar el contenido aquí. ¿Y qué fue? ¿Ritual sostenido? Sólo voy a escribir eso en mí mismo. Bien, genial. Y luego el tercero aquí mismo, ¿qué tenemos chispa metabólica? Así que un impulso natural a base de plantas a tu metabolismo. Entonces potenciando el metabolismo. Creo que tengo uno aquí para el metabolismo. Pongamos esa. De nuevo, hazlos mucho más grandes, reemplaza el contenido, chispa metabólica y luego uno más puedo agregar aquí para una desintoxicación vívida, rica en clorofila cultivada en sombra para ayudar a tu cuerpo a filtrar y limpiar de forma natural. ¿Bien? Entonces eso es algo que habla de limpiar y desintoxicar Entonces creo que este es el ícono adecuado para eso. Nuevamente, poniendo los tamaños del icono, reemplazando ese encabezado, y reemplazando ese texto aquí mismo. Bien. Así que vamos a echarle un vistazo rápido en pantalla completa, y luego en el móvil, se ve bastante bien, pero le falta un encabezado. Así que déjame volver a la configuración de mi sección aquí mismo. Y desafortunadamente, no hay opción de rumbo dentro de esta sección en particular, lo cual creo que es un poco extraño, pero así es. Podemos traer eso en una sección diferente. Así que voy a dar clic en Agregar sección aquí. Y en muchos temas modernos de Shopify, debería haber una sección que se acaba de llamar Texto enriquecido, que es una sección flexible donde podemos traer diferentes piezas de texto usando bloques Entonces como podemos ver en el ejemplo, tenemos subtítulo, encabezado y párrafo Voy a eliminar subtítulo y párrafo. Voy a poner este texto de arriba con íconos, y solo lo voy a usar solo para su encabezamiento. Entonces a pesar de que es una sección nueva, todavía está usando el esquema antiguo, supongo, porque aún no he pulsado Guardar. Entonces hagamos que este esquema sea cinco, y esto es un poco demasiado grande. Entonces veamos si podemos arreglarlo. Voy a quitar esta sección con borde, pero luego vamos a ver, eliminar espaciado vertical. Bien, ahí vamos. Entonces cualquier configuración que podamos personalizar aquí, el estilo del encabezado, el texto del encabezado. Y para el rubro aquí, tenemos en nuestra página web copy y seance marcha. Bien. Entonces esto es más beneficios del matcha en general, pero atándolo a nuestra marca de seance marcher, podemos poner eso aquí Y ahora vamos a echarle un vistazo. Bien, entonces nuestra sección de aquí abajo todavía tiene esa frontera, lo que realmente no tiene sentido con el título aquí. Así que voy a quitar sección separada con borde, y eso conseguirá que esa sección de encabezado se fusione un poco mejor con nuestra sección de iconos. Bien. Bien, entonces técnicamente dos nuevas secciones aquí Voy a darle a Guardar en eso, y hagamos una última sección. Como dije, esta es una marca nueva, así que no tenemos un montón de reseñas. Así que voy a hacer un trato mayor con las críticas que realmente tenemos, y voy a traer testimonios en su lugar. Entonces creo que en realidad hay una sección de testimonios dentro del prestigio, si voy hasta la confianza y la prueba social. Y así solo puedo hacer clic en testimonios aquí. A veces encuentras que hay una sección dentro tu tema que coincide exactamente con lo que estás tratando de lograr. Y ese es el mejor de los casos, pero a veces hay que tomar las secciones existentes y trabajar con ellas para crear algo en particular. Entonces no estoy seguro de por qué, pero aquí usa un esquema de color diferente. Vamos a configurarlo a nuestro esquema de color del esquema cinco. Y para el encabezado de sección, sólo voy a poner aquí de nuestros clientes. Obviamente, el resto del contenido aquí es opcional, así que simplemente dejaré eso en blanco. Y entonces podemos entrar aquí a estos diferentes testimonios. Como puedes ver, aquí tenemos contenido de marcador de posición, comparte lo que dicen tus clientes sobre tus productos, servicio al cliente o tarifa de envío Entonces, vamos a eliminar estos. Vuelve a nuestra lista de testimonios aquí. Voy a agarrar este de Sara. Y luego en el campo del autor, puedo poner a Sara. Y en realidad tenemos imágenes de todos estos autores testimoniales. Entonces voy a ir por aquí. Y al igual que hice para los íconos, los voy a subir todos a la vez, y luego los voy a seleccionar selectivamente ya que los traemos a diferentes campos. Entonces dentro de mi carpeta de clientes aquí, tengo tres clientes que están proporcionando los testimonios. Y creo que Sarah M era la chica rubia aquí. Para que podamos traer una foto de ella. Y esto se ve un poco raro en esta etapa, pero las imágenes son en realidad navegación. Entonces, si voy hasta aquí y agreguemos a la siguiente chica, no estoy segura de cuál es cuál, pero realmente no importa. Traemos un nuevo testimonio, volvemos a su testimonio Ella puede ser Maya, agarrarla, poner su testimonio aquí, tomar su nombre, ponerlo en el nombre de la oferta Y puedes ver aquí este tipo de actos como navegación para los diferentes testimonios, ¿bien? Déjame ir aquí, seleccionar la última imagen. Esta chica puede ser Ava, poner su nombre ahí abajo, poner su cita aquí mismo en el contenido, y Wala, tenemos nuestra sección de testimonios ¿Bien? Entonces, si voy a pantalla completa, podemos ver cómo se ve esto en una pantalla un poco más ancha. Y si bajamos al móvil, podemos ver que obtenemos este deslizador de navegación con los puntos. Entonces las navegaciones un poco diferentes aquí. Y nuevamente, echemos un vistazo a cualquier otra cosa que podamos hacer para que esto sea un poco más agradable Aquí hay algo llamado factor de tamaño de fuente, por lo que en realidad podemos reducir el tamaño de fuente. Podría reducirlo un poco porque no quieres reducirlo demasiado en el móvil, sobre todo si tus espectadores si son de la variedad más antigua, van a tener problemas para posiblemente leerlo. La única otra opción aquí que no hemos tocado es el ancho de la imagen. Entonces tal vez jugamos con eso para ver. Sí, creo que podemos hacerlo un poco más grande. Entonces hagamos eso 160 en vez de 140. Por cada bloque testimonial. Accidentalmente hice clic entre bloques, lo que creó un nuevo bloque, así que solo eliminé ese Y voy a darle a Guardar en eso. Y echemos un vistazo a nuestra página de inicio completa. Obviamente, podría ir por FEVA. Podría agregar más secciones de página de inicio. Pero para este video en particular dentro de la clase Skillshare, lo voy a dejar en estas cuatro secciones o técnicamente cinco secciones si incluyes el encabezado como una sección separada Aquí puedes ver, tenemos nuestra sección de héroes. Esto nos lleva a la colección o a un producto específico. Muestra nuestra gama de productos con los diferentes nombres y precios Por qué seance Macha, los beneficios de nuestro producto y algunos testimonios aquí mismo. Si te estás preguntando de dónde viene esta sección de texto Con iconos, en realidad viene del grupo de pies. Entonces, si quieres quitar eso o simplemente ocultarlo, puedes hacerlo así. Podría simplemente ocultarlo por ahora porque sí, no sabemos si podemos ofrecer esos beneficios. Y entonces igualmente, en la parte superior aquí en la cabecera, tal vez no estemos contando atrás para una súper venta. Así que vamos en realidad solo en realidad, no estamos contando atrás para una súper venta, así que solo voy a quitar eso. Pero es una opción. Si tienes una venta en el futuro, puedes agregar este temporizador de cuenta regresiva o barra de anuncios al jefe de grupo específicamente dentro del prestigio, bien. Pero por ahora, sólo voy a quitarlos, y esta es nuestra página de inicio actual. Como puedes ver, con algunas animaciones de imágenes de desplazamiento agradables. Y entonces si miramos en el móvil, se ve bastante bien, también. ¿Bien? Entonces, en términos de importancia de página, probablemente haya dos páginas que son las más importantes, la página principal y la página del producto. Entonces en el siguiente video, vamos a llegar a la página del producto siguiente. 8. Página de productos: En el último video, personalizamos la página principal de nuestra Shopify Store, pero ahora vamos a pasar a probablemente la página más importante para optimizar en nuestra tienda Shopify, y esa es nuestra Si voy al selector de plantillas aquí arriba y selecciono productos, abre un nuevo menú, y me da todas las opciones para las diferentes plantillas de productos. ¿Bien? Entonces, a diferencia de la página principal, solo hay una. Por lo que esta plantilla se aplica a una sola página. Si vemos este Chevron a la derecha aquí, indica que cualquiera de estas plantillas podría aplicarse a múltiples recursos, ya sea un producto o una colección o una entrada de blog, etcétera, etcétera Las páginas para cada uno de estos diferentes recursos van a ser bastante similares. Normalmente van a pasar por la misma plantilla. Y por eso tenemos aquí este Chevron, dándonos la posibilidad no solo una plantilla de producto que se aplique a todos los productos, sino la capacidad de asignar diferentes productos a diferentes plantillas Entonces, como puedes ver aquí, este es el valor predeterminado dentro específicamente del tema del prestigio. Esto podría ser diferente en tu tema, pero definitivamente vamos a tener una plantilla de producto predeterminada, y luego vamos a tener plantillas alternativas aquí. Entonces, como puedes ver aquí, hay una plantilla alternativa integrada en el tema de prestigio llamada preorder debajo de los nombres de las plantillas, puedes ver a cuántos productos está asignada cada plantilla Así que aquí puedes ver que la plantilla de prepedido no está actualmente asignada a ningún producto. Por lo tanto, si tuviéramos que personalizar esto, no va a tener ningún impacto en nuestro escaparate a menos que tuviéramos que asignar un determinado producto a esta plantilla Y solo para estar completo aquí, solo voy a ir a la tienda Admin aquí y solo mostrarte eso. Creo que habríamos cubierto esto en el video en la configuración de la tienda. Pero solo para que quede claro, para que un producto en particular use una plantilla diferente, voy aquí abajo a Plantilla de tema, y cambio eso de producto predeterminado a otra plantilla de producto. Esta selección sólo proviene del tema publicado actualmente. Entonces, si miramos nuestros temas publicados actualmente, puedes ver que nuestro tema actualmente publicado es Horizon. Entonces esto es un poco matiz dentro de Shopify que puede ser un poco molesto Tendríamos que crear las mismas plantillas alternativas en el tema actualmente publicado en el caso de que el tema en el que estamos trabajando no sea ya el tema publicado. Entonces si quisiera hacer esto, podría decir alternativa, darle el mismo nombre que la plantilla alternativa que he creado en el Prestige Theme. Eso lo va a crear en el tema actualmente publicado, y luego para terminar esta ligera demostración tangente, ahora debería poder seleccionar alternativa como la plantilla a la que pasará este producto ¿Bien? Pero en este ejemplo, no vamos a tener plantillas de productos alternativas. Sólo vamos a tener la única plantilla. Entonces no creo que haya una opción para eliminar aquí. Puedo entrar en el código y borrar, pero no tenemos acceso a código, y esta es una clase sin código. Así que solo vamos a volver al producto predeterminado aquí, y luego voy a abrir esta barra lateral aquí. Así que los mismos principios que antes, pero ahora tenemos una nueva opción en la parte superior aquí, y es que podemos cambiar qué producto estamos viendo. Así podremos ver la vista previa de esta plantilla pasando por diferentes productos en nuestra tienda. Entonces lo que voy a hacer es que voy a establecer esto producto central, nuestro producto principal que tiene múltiples imágenes de producto y es nuestro producto estrella, ¿de acuerdo? Y entonces lo que voy a hacer es que voy a personalizar esta plantilla basada en este producto. ¿Bien? Para que veas que se ve bastante bien fuera de la puerta. El vendedor no queremos aquí, así que si hago clic en la sección de aquí mismo, puedes ver que cada uno de estos diferentes aspectos de aquí son diferentes bloques que van a la sección principal del producto, que es esta cosa de aquí mismo. Voy a quitar vendedor. También puedo reorganizar estos, así podría poner el precio por encima del título si quisiera, realmente no tiene sentido, pero podría hacerlo, también Y entonces lo que puedo hacer es quitar algunos de ellos, agregar otros nuevos y reorganizarlos. Entonces echemos un vistazo a todos los bloques disponibles dentro de este tema en particular. Como puedes ver aquí, puedo agregar elementos extra a nuestra sección principal de productos. Justo aquí, ¿de acuerdo? Además, debajo de la sección principal del producto, como puedes ver aquí, se llama página del producto, pero en otros temas, podría llamarse sección principal del producto. Normalmente me refiero a él a través diferentes temas como la sección principal del producto. Es la sección principal que va a determinar la página de tu producto. Pero luego debajo de él, podemos agregar en otras secciones. Para que veas que tenemos esta sección de productos relacionados. Y solo para ser claros, esto se llena en base a una API que es establecida por Shopify Entonces, si no estás consiguiendo que esto aparezca, necesitas dar más clic en tu tienda para que el algoritmo de Shopify averiguara qué está relacionado en función de los datos reales del usuario, que en tu caso eres tú mismo Entonces solo para que conozcas esta sección de productos relacionados, como dice aquí, las recomendaciones dinámicas cambian y mejoran con el tiempo. Puedes crear recomendaciones manuales de productos si quieres usar la aplicación de búsqueda y descubrimiento de Shopify, pero de forma predeterminada, Shopify determinará cuáles son los productos relacionados en función de cómo interactúan los usuarios con tu Bien. He hablado mucho y solo hecho un cambio hasta el momento en nuestra página de productos. Vamos a saltar a los cambios en nuestra página de productos ahora mismo. Como siempre, vamos a estar limitados por las opciones disponibles dentro del tema. Así que déjame ver nuestro objeto de página de producto. Y número uno, voy a cambiar el esquema a nuestro esquema de color particular, así que eso está en la marca. Y lo que puedo hacer aquí es reducir el ancho de los detalles reales a la derecha para darle más espacio a las imágenes si quiero. O podría hacer lo contrario. Puedo hacerlo más grande, dando menos espacio a las imágenes. Así que marca esto en tus preferencias personales. Creo que el 33% probablemente fue un buen número ahí, recordando que la web es relativa. Entonces, si hago mi pantalla más grande, va a hacer que ambas columnas sean más grandes, pero manteniendo esa proporción de 33%. ¿Bien? Mirando a través de las otras opciones aquí, puedo elegir un diseño diferente para las imágenes del producto. Entonces como puedes ver aquí, recuerda cuando miramos en la lección de moodboarding sobre si las miniaturas estaban a la izquierda o en la parte inferior, si preferimos que esté en la parte inferior, en realidad podemos personalizar esto a través de nuestro tema aquí mismo, dentro del tema dentro del De hecho me gusta más a la izquierda, así que voy a hacer eso. Y entonces podemos disminuir la brecha si quisiéramos, específicamente en escritorio entre estas imágenes. No parece estar haciendo mucho. A lo mejor mi ancho de pantalla no es lo suficientemente grande. Pero sí, aquí se aplican los mismos principios. Necesitamos trabajar dentro de las opciones que están disponibles dentro de nuestro tema a menos que, por supuesto, lo codifiquemos a medida, que una vez más, llegaremos al final de la clase. ¿Bien? Entonces tengo mi título, tengo mi precio. Plazos de pago. Entonces, si hemos configurado nuestra tienda para apoyar las cuotas de Shop Pay, como puedes verlo escrito aquí, entonces eso mostrará algo Pero digamos, por ejemplo, no teníamos eso como opción, vamos a querer eliminar eso aunque esté vacío. Un separador es solo esta línea de aquí. Estamos poniendo en la descripción del producto. Podemos colapsar eso en una sección plegable ahí mismo No pienses que necesariamente tiene sentido. Y luego tenemos el selector de variantes. Entonces, si el producto estaba disponible en diferentes opciones, aquí es donde traeríamos en la interfaz de usuario para elegir entre las diferentes opciones. Selector de cantidad esta cosa aquí mismo que le permite agregar al carrito en una cantidad mayor que solo una. Tienes estos botones de compra para agregar el producto al carrito o simplemente ir directamente a la caja con ese producto. Y luego los productos complementarios, que de nuevo, es similar a los productos relacionados se van a basar en el algoritmo. Y ante esta situación, actualmente no está mostrando nada. Entonces voy a quitar eso, también. Voy a darle a Guardar en eso. Y lo que voy a hacer a continuación es que no voy a hacer un cambio demasiado grande aquí. Solo voy a agregar algunas secciones de acordeón debajo aquí para agregar algunos detalles adicionales sobre el producto Y para hacer eso, voy a usar metafields. Pero si no estás familiarizado con los metafields, primero lo voy a hacer sin metafelds, poder mostrarte la diferencia, y luego verás por qué se necesitan metafields primero lo voy a hacer sin metafelds, para poder mostrarte la diferencia, y luego verás por qué se necesitan metafields en esta instancia. Entonces lo que voy a hacer es que voy a bajar aquí y voy a agregar en una sección de acordeón, que en este tema y muchos otros temas solo se llama texto plegable Se puede ver dentro de estas opciones. En realidad, mi tema parece estar atascado en la carga, así que solo voy a refrescarlo ahora mismo. Debería haber guardado mis cambios anteriores. Sí. Bien. Así que volviendo a los bloques dentro de la sección de la página del producto aquí, voy a agregar en un nuevo bloque llamado texto plegable Para nuestro acordeón. Y como puedes ver, se muestra debajo de la galería de productos en la actualidad. Eso es porque esta casilla de verificación está marcada aquí. Vamos a desmarcar eso para que aparezca por aquí. Y es bastante sencillo. Todo lo que es es título y luego contenido para cuando lo abras, ¿de acuerdo? También puedes poner aquí algún código líquido personalizado, que es el lenguaje de programación esencialmente de los temas de Shopify, que no entraremos en esta clase en particular Y también puedes, si el contenido es particularmente avanzado, esencialmente más avanzado de lo que podrías poner dentro de este campo de texto enriquecido. También puedes traer el contenido de una página en tu Shopify Store, ¿de acuerdo? Entonces lo que voy a hacer aquí es que voy a ir a mi documento de copia web por aquí. Y para el producto de polvo matcher premium, tenemos algunos detalles Tenemos algunos ingredientes, y luego tenemos algunas instrucciones sobre cómo usar. Entonces lo que voy a hacer es que voy a agarrar estos puntos puntitos, y luego voy a poner estos aquí. Y entonces lo que voy a hacer es que voy a llamar a estos detalles, ¿de acuerdo? Y entonces voy a crear dos más de estos. Voy a agregar uno para los ingredientes, texto plegable aquí mismo De nuevo, no quiero que se muestre debajo de la galería. Quiero que se presente por aquí. Este va a ser ingredientes, y luego voy a copiar a través los ingredientes de aquí, ¿verdad? Y luego uno más para cómo usarlo. Entonces voy a ir por aquí, texto plegable, quitar eso de debajo de la galería, ponerlo de nuevo por aquí El siguiente fue cómo usarlo. Entonces voy a copiar ese contenido, pegarlo aquí mismo. ¿Bien? Entonces ahora lo que podemos ver si solo escondo la barra lateral, puedes ver que hemos agregado algunos detalles a nuestra página de producto aquí mismo, lo cual es realmente agradable, excepto por un problema, ¿de acuerdo? Si vamos a otro, permítame simplemente guardar esto para que no pierda ese progreso. Y luego voy y cambio el producto de entrada a otra cosa en nuestra tienda. Entonces digamos este cuenco de cerámica. Puedes ver aquí que todavía tengo esos mismos acordeones porque están usando la Como puedes ver aquí, realmente no tiene sentido estar hablando del polvo macho con los ingredientes y cómo usarlo en el producto de tazón de cerámica, ¿de acuerdo? Entonces este es el caso de uso perfecto para metafeld. metacampos son campos adicionales que podemos agregar a ciertos recursos como productos, y luego podemos extraer esos valores dinámicos. Entonces como tenemos aquí con el título, no estamos estableciendo el título real en la tienda online Editor. Eso es simplemente sacar del producto en sí. De igual manera, el precio y la varianza, ¿no? Está sacando del producto real en sí, no de la plantilla. ¿Bien? Entonces para poder hacer esto voy a necesitar volver a mi tienda, así que voy a tener que dejar el editor de la tienda online. Y luego desde cualquier lugar de nuestra tienda, aquí está este botón de configuración. Voy a hacer click en eso, y luego voy a bajar aquí a los campos Meta y a los Meta Objetos. Bien. Ahora bien, de nuevo, metafeld puede sonar como algo complicado, pero básicamente es solo un campo adicional que puedes agregar a cualquiera de estos recursos, Así podemos agregar al objeto variante, el objeto de colección, pedidos de clientes. Hay muchas opciones, pero la más común probablemente va a ser los productos. Entonces vamos aquí para agregar algunos campos nuevos a nuestros productos, y luego podemos hacer clic en Agregar definición aquí. Entonces lo que voy a hacer es que voy a decir detalles. ¿Correcto? Y para el tipo, solo queremos que coincida con el tipo del campo en el editor de tienda en línea. Este de aquí mismo, puedo identificarlo fácilmente, pero no estoy seguro si dice exactamente que es un campo de texto enriquecido, pero esto es lo que se llama un campo pero esto es lo que se llama de texto enriquecido porque a diferencia de esto, que es solo un campo de texto básico que solo nos permite poner en texto, campo de texto enriquecido nos permite poner viñetas, listas numeradas, enlaces, negrita y cursiva ciertos puntos e incluso poner en encabezamientos. Así que el texto enriquecido es el tipo que vamos a buscar aquí. Entonces voy a escribir texto enriquecido para filtrar hasta eso. También podemos usar metapiles para poner en una lista de valores, así podría cambiar esto a lista de valores en lugar de solo un Pero en este caso, solo necesitamos el único valor. Y luego puedo agregar en una descripción aquí si creo que los administradores van a necesitar ayuda para identificar qué es esto Entonces podría decir detalles que se muestran en la página del producto, por ejemplo. Creo que es bastante autoexplicativo. Podríamos usar estos detalles en el producto en cualquier lugar dentro de nuestra tienda. Podría ir a más lugares que solo la página del producto. Entonces voy a golpear Guardar en eso, y voy a hacer exactamente mismo para dos definiciones más. Entonces voy a ir por aquí. Se puede ver que ya tenemos los detalles definidos ahí. El siguiente fueron ingredientes, y luego una vez más, lo mismo, texto rico. Y entonces exactamente lo mismo otra vez porque podría simplemente arreglar estos en el orden correcto. Cómo usar, ve aquí, Texto enriquecido una vez más, y luego presiona Guardar. Bien, así que sólo voy a mover eso aquí abajo para que estén en el mismo orden en que aparecen. Y con estas definiciones establecidas, ahora todo lo que tenemos que hacer es agregar datos a estos campos personalizados sobre el producto al que pertenece. Entonces voy a salir de aquí, y luego voy a ir al producto estrella, el producto donde estos detalles ingredientes y cómo usar realmente se aplican, y luego voy a desplazarme hacia abajo hasta el fondo para encontrar mis metafelds Así que aquí puedes ver los detalles de los ingredientes y cómo usarlos. Vamos a establecer esto a nivel de producto ahora en lugar de en el editor de tienda en línea, que como mencioné antes, va a aplicar a todos los productos que utilicen esa plantilla. ¿Bien? Así que de nuevo, puedo copiarlo desde el Editor de Tienda Online, puedo copiarlo desde aquí. Yo sólo voy a copiarlo de aquí, entrar en detalles, copiar eso, entrar en ingredientes, copiar eso, y luego entrar en cómo usar y copiar eso. Bien. Voy a darle a Guardar en eso. Y sólo para que quede más claro, si voy a ir a otro producto dentro de nuestra tienda, el cuenco de cerámica, por ejemplo, verás que si voy a bajar a metafields de producto, esos valores no están establecidos para todos los Solo se establecen a nivel de producto individual, ¿de acuerdo? Así es como podemos asignar información a un producto, pero no al otro en Shopify Ahora que ese metafeld ha sido vinculado, podemos usar algo llamado enlace dinámico para poblar este contenido del campo de detalles con el valor del metcampo con el valor del Entonces voy a tomar todos estos puntos aquí, eliminarlos, y luego voy a hacer clic en este botón aquí para conectar una fuente dinámica. Entonces voy a hacer click en esto y luego vamos a no estar seguros de por qué está mostrando opciones para hacer referencia a sí misma. Solo necesitamos presionar este Chevron para volver atrás y queremos acceder al objeto producto, y luego puedes ver aquí que podríamos sacar otros aspectos que ya existen del objeto producto aquí, como el título o vendedor o los que ya creamos Entonces voy a agregar en mis datos aquí, ¿no? Aún no está apareciendo, pero voy a golpear Save, y entonces ojalá eso me aparezca. En realidad, me acabo de dar cuenta de que todavía estamos en el producto cerámico. Entonces eso es exactamente lo que esperamos que suceda si los detalles están en blanco, entonces simplemente no muestra el acordeón en absoluto, ¿de acuerdo? Entonces si hago otro de estos, si voy a ingredientes y me deshago de estos ingredientes, conecto a fuente dinámica, agrego ingredientes del metafeld, verás que desaparece de la página del producto para este producto en verás que desaparece particular Pero si repaso y cambio el producto que estoy viendo aquel en el que se han establecido los valores de metafeld, puedes ver los detalles y los ingredientes están llegando a Voy a hacer esa última, cómo usar. Voy a eliminar el contenido de nivel de plantilla y traer una fuente dinámica que está tirando del producto real en sí hasta cómo usar el metcampo aquí mismo . Golpea guardar en eso. Y ahora en lugar de lo que teníamos antes, que teníamos estos aplicando a todos los productos, sólo va a aplicarse a este producto en particular. Y entonces como vimos un pequeño adelanto de antes, si voy al producto cuenco cerámico, verás que esos, a pesar de que los bloques están aquí en Editor de Tienda Online, porque este valor está en blanco, simplemente no los va a mostrar. Entonces va a mostrar el valor según el metaf pero si está vacío, simplemente no va a mostrar nada, que es exactamente como debería funcionar Bien, así que para terminar esta página del producto antes de pasar a las otras páginas, podría agregar un poco más a esta plantilla de producto. Podría querer traer un recordatorio de por qué comprarían a sans los beneficios de nuestro producto. Entonces, en lugar de recrearlo, lo que puedo hacer es poder ir a casa a la plantilla donde ya existe esa sección Y puedo copiarlo. Para que pueda ir hasta aquí. Obviamente, hay a través de dos secciones diferentes, pero esta va a ser más fácil replicar que esta Y lo que puedo hacer aquí es que puedo hacer clic aquí para copiar o bien clic aquí para copiar o puedo hacer clic derecho sobre él por aquí y puedo dar clic en Copiar. Entonces puedo ir a mi plantilla de producto aquí mismo, y luego puedo hacer clic derecho aquí y luego hacer clic en Pegar en el medio. Bien. Ahí vas. Entonces se está trayendo a través la sección con todos los ajustes que teníamos anteriormente. Y luego solo necesito agregar otra vez en esa sección de texto enriquecido. Yo sólo buscaré texto enriquecido aquí arriba. Se va a agregar algún contenido extra por defecto, pero solo lo necesito para el encabezado. Entonces voy a entrar aquí y decir, ¿por qué la sesión de sesiones? Y luego quiero establecer eso a la combinación de colores correcta, eliminar esto por separado con borde, y luego también la sección de productos relacionados que acabo de notar no es el esquema de color correcto, así que solo voy a establecer eso a nuestro esquema de color. Ahora mismo. También podemos cambiar esto a un esquema de color ligeramente diferente, también, si quisiéramos invertir los colores, quizás. Pero ahora tenemos esa sección duplicada en nuestra plantilla de producto. Y si ahora echamos un vistazo a nuestra plantilla de producto, voy a ver el producto principal. Así que voy a ir aquí a nuestro producto estrella, el polvo Macha premium, y echemos un vistazo a nuestra página de productos ahora mismo Obviamente, hay mucho más que podríamos hacer en la página del producto si tienes gente usando el producto. Obviamente, cuanta más prueba social y demostración del producto que puedas poner en esta página, mejor. Por lo que podría agregar más secciones debajo de la sección principal del producto. Pero en este video, hemos cubierto algunas de las opciones dentro del tema de prestigio y, lo que es más importante, hemos hablado de metafelds que podemos incorporar a través enlaces dinámicos en el editor de la tienda en línea para que podamos establecer datos a nivel de producto, como tal y tener esa extracción A nuestra plantilla en las áreas correctas usando la tienda en línea dither Bien, entonces con la página del producto y la página principal fuera del camino, pasemos a algunas otras páginas en el siguiente video y terminemos este sitio web construido. 9. Otras páginas: Bien. Entonces, en este punto, hemos configurado las dos páginas más importantes en nuestro sitio web de Shopify, la página principal y la página del producto Sigamos bajando por la lista y optimizando el resto de páginas. Entonces, si voy a mi selector de plantillas aquí arriba, empezamos en la página principal. Personalizamos la plantilla del producto. Echemos un vistazo ahora a la plantilla de colección, y aquí solo tenemos una, la plantilla de colección predeterminada. Bien. Así que las páginas de colección no van a ser de súper importancia para nosotros como tienda con una gama de productos de solo cuatro productos, pero hay algunas optimizaciones que podemos hacer aquí Como podemos ver dentro de nuestro grupo de plantillas aquí, tenemos dos secciones, el banner de colección y la página de colección. Obviamente, el contraste aquí no es ideal. Vamos a establecer ambos de estos a nuestro esquema de color. Eso ya es mucho mejor. Entonces vamos a establecer esto en nuestro esquema de color cinco, que es nuestro esquema de color personalizado que está en la marca. Y creo que podemos hacer que esto se vea un poco más agradable agregando una imagen de fondo Entonces voy a hacer eso ahora. Voy a entrar en mi carpeta de imágenes aquí mismo y recorrer, creo que esta de aquí mismo podría ser una buena imagen de fondo. Así que voy a traer esa en, golpe hecho en eso. Y ahora necesitamos hacer algunos cambios más. Eso lo hizo muy grande. Creo que ese es el tamaño de la imagen se ha ajustado a la relación de imagen original. De hecho quiero que sea bastante apretado. Entonces eso es tan pequeño como va, al parecer, X pequeño. Y entonces en realidad no quiero ese texto verde oscuro. Así que voy a volver a cambiarlo al esquema cuatro, y eso se ve mucho mejor, ¿de acuerdo? Así que también podemos quitar aquí la configuración de rumbo transparente, y podríamos mostrar u ocultar aquí las migas de pan. No sé si tiene sentido tener home shop, shop A, pero si tienes muchas colecciones, tal vez quieras mantener ahí ese elemento breadcrumbs Y si hay una descripción de colección, se mostrará. Podría simplemente quitar eso por si hay haciendo este efecto parallex No estoy seguro si vibra con ese efecto parallex. Eso depende de ti si dejas eso adentro o no. Nuevamente, todo depende de tu tema. La opacidad, a lo mejor marco un poco más para aumentar ese contraste El texto está un poco por encima la etiqueta de la imagen, lo cual no es lo ideal. Probablemente queramos usar una imagen de fondo ligeramente diferente donde el texto no se superponga sobre el texto, pero lo dejaré ahí por ahora Y mirando por aquí, veamos cuáles son las opciones para nuestra sección principal de la página de colección. Tenemos nuestros productos MAX por página de 48, pero solo tenemos cuatro productos. No creas que necesitamos filtrar por disponibilidad y precio, así que solo voy a quitar los filtros por completo. Y entonces no sé si necesitamos tener este selector de grilla. Creo que este es el selector de tamaño de cuadrícula. Así que sólo voy a quitar eso. Y eso simplifica mucho más nuestro diseño. Creo que eso tiene más sentido cuando estamos tratando con una gama de productos tan pequeña compre los cuatro productos aquí mismo. Y nos vamos por ahí. No estoy seguro de si también podemos deshacernos de sort by, pero normalmente las páginas de colección tendrán sort by en la esquina. Apaga eso. Y también puedo apagar la cantidad de productos, también, ¿verdad? Para que sean solo esos cuatro productos. Voy a dejar el recuento de resultados del producto aquí. Y dale a ahorrar en eso. Estoy bastante contento con eso. Por supuesto, vas a querer personalizarlo según tus preferencias dentro las opciones disponibles del tema que estás usando si no estás usando prestigio. Y ahora que eso está hecho, pasemos a la siguiente plantilla de la lista. Este es uno que no es súper común. No suelo trabajar en la página de lista de colecciones. Es solo una plantilla que enumera todas las colecciones de tu tienda. Y como puedes ver aquí, solo tienes una colección, así que esto es bastante redundante. Siguiente, tarjeta regalo. Esto solo es relevante si ofrecemos tarjetas regalo. El siguiente es el carrito. Nuevamente, esto no es súper relevante si estamos usando la tarjeta deslizable moderna. Entonces si voy a un producto, ojalá, pueda hacer esto dentro de la tienda online Editor. Si no, probablemente pueda hacer clic aquí para obtener una vista previa. Y luego podemos obtener una vista previa de trabajo de nuestro sitio hasta el momento. Entonces, si tuviera que ir por aquí y hacer clic en Agregar al carrito, verá que aparece en nuestra pequeña tarjeta lateral por aquí en lugar de llevarnos a la página del carrito. Entonces, por defecto, todos los sitios de Shopify van a tener esa página de carrito Pero si estás usando algún tema moderno, va a ser más probable que tenga este carrito interactivo deslizable. Por lo que personalizar esa plantilla en particular, si vamos a ella no es de mucha importancia Alguien literalmente tendría que navegar a su sitio web slash CART para acceder a esto si está usando el cajón de tarjetas ¿Bien? Aquí, puede hacer clic en el personalizador de Cuentas de Pedido Eso te lleva a un personalizador completamente diferente. Esto es solo un enlace a una sección completamente diferente de tu tienda Shopify. Entonces no voy a cubrir eso. Eso es fuera de la tienda online Editor técnicamente. Después llegamos a páginas, blogs, publicaciones de blog. ¿Bien? Entonces, obviamente, los blogs y las publicaciones de blog solo van a ser relevantes si estás ejecutando un blog en tu tienda de comercio electrónico Esto es como una característica lateral de Shopify. Shopify es una plataforma de comercio electrónico, por lo que brinda todas las funciones para vender un producto No se conoce como una plataforma de blogs como Wordpress quizás, pero sí tienes la opción de agregar en diferentes blogs Es un poco confuso, pero puedes pensar cada blog como una categoría diferente en tu blog en tu sitio web. Entonces podrías tener, por ejemplo, un blog de recetas y un blog para artículos de revistas o lo que sea. ¿Verdad? Así que en realidad no vamos a cubrir eso en esta clase porque nuestra tienda no va a ser un blog, también. Pero si querías personalizar esas plantillas, es un principio similar a la plantilla de productos. Tienes tu lista de plantillas alternativas aquí o plantilla predeterminada, y va a depender de qué publiques esa plantilla, y cada una de las publicaciones de blog va a pasar por esa plantilla de blogpost Cada uno de los blogs va a pasar por esa plantilla de blog predeterminada. Bien. El que realmente quiero centrarme para el resto de este video son las páginas. Entonces, si hacemos clic aquí para ver las páginas, puedes ver que tenemos página predeterminada, página contacto, que está asignada a una página, FAQ y listas de colecciones. Estos son por defecto en prestigio. No va a ser lo mismo necesariamente en tu tema, pero casi todos los temas de Shopify probablemente saldrán de la caja con una plantilla de página obviamente predeterminada y una plantilla de página de contacto Bien, entonces, cómo funcionan las páginas en Shopify específicamente este recurso de página Si voy a la página predeterminada aquí, pueden ver que nos va a mostrar la plantilla de página aplicada a esta página en particular, pero al igual que cuando estábamos personalizando la plantilla del producto, personalizando la plantilla del producto, podemos hacer clic aquí para cambiarla y podemos ir a otra página dentro de nuestra tienda Al igual que los productos, eso está en una sección diferente de nuestra tienda. Entonces si vuelvo a nuestra tienda aquí, estoy en la sección de productos actualmente. Pero si voy al canal de ventas de Tienda Online aquí mismo, y luego hago clic en Páginas, puedes ver estas son las dos páginas que tenemos en nuestra tienda. Básicamente la página de política de privacidad y la página de contacto. Si hacemos clic en la página de Política de privacidad aquí mismo, puede ver que se ejecuta a través de la plantilla de página predeterminada. Pero si hacemos clic aquí, hay otra plantilla de página llamada Contacto. Bien, entonces por aquí, si vamos a realmente solo para volver a las opciones de privacidad, el contenido de esa página viene a través de esta sección de contenido aquí. Pero si dejamos esto, simplemente haré clic aquí para descartar mis cambios De todos modos no hice ningún cambio. Y si vamos por aquí a contactar, verás que esto está vacío, pero está usando una plantilla diferente. Entonces el contenido de esta página en particular viene a través de lo que establecemos aquí en la plantilla alternativa. Entonces, si voy a contactar, aquí mismo, verás en lugar de la sección de página estándar, que se ha ocultado aquí, estamos usando este formulario de contacto. Y esto nos permite crear páginas con cualquier contenido personalizado que queramos, ¿de acuerdo? Obviamente, en la página de contacto, tiene sentido traer esta sección de formulario de contacto, que ya está en. Si tenemos otras páginas que queremos traer a nuestra Shopper fi Store que no se ajustan a ninguna de las otras categorías aquí mismo, aquí es donde lo hacemos. Y para rematar este video, en realidad voy a configurar uno contigo ahora mismo. Entonces lo primero que voy a querer hacer, en realidad, podemos comenzar en la tienda online Editor y configurarlo aquí y luego asignarlo a una página o podemos crear una página y crear una plantilla que asigne esa página de inmediato Voy a crear la página primero y vincularlos juntos. Entonces voy a subir aquí, dar clic en Agregar página, y voy a crear una página Acerca de nosotros para esta marca Shopper Pi. Y en vez de sobre nosotros, que es un poco seco, voy a decir O historia. Bien. Voy a golpear Guardar en eso, hacer que sea visible. Nuevamente, realmente no importa si lo hacemos visible u oculto porque nuestro sitio no está en vivo todavía. Y lo que voy a hacer es que voy a cambiar esto a una nueva plantilla que vamos a configurar en nuestro editor de tienda online. Así que voy a ir aquí a nuestro selector de plantillas, subir a Páginas, crear plantilla, y voy a llamar a esto Eva Acerca de Nosotros o Nuestra Historia. Voy a hacer clic en Crear plantilla en eso. Y como puedes ver, porque aún no está asignada a ninguna página en particular, solo va a elegir la primera página en nuestra Shopify Store Pero como se puede ver, aquí arriba, dice, asignado a cero páginas. Entonces arreglemos eso. Vamos por aquí, y creo que tendré que refrescarme después de agregar la plantilla. Y luego voy a dar click por aquí. Nuevamente, tenemos ese mismo problema donde no me deja seleccionar eso a menos que sea una plantilla en el tema en vivo. Entonces voy a tener que duplicar el mismo proceso sobre el tema que está en el tema en vivo. Entonces voy a ir por aquí, hacer exactamente el mismo proceso, pero sobre el tema actualmente publicado, que es Horizon. Y ese es el pequeño hack que me permitirá seleccionarlo aquí mismo, como pueden ver, Nuestra historia. Bien, así que voy a presionar Guardar en eso, y luego voy a refrescarme por aquí en mi tienda online Editor Ahora puedes ver Nuestra historia está asignada a una página, pero seguimos viendo página de política de privacidad alimentada a través de esa plantilla. Entonces vamos a cambiar esto a Nuestra historia. Y ahora con una plantilla creada y asignada a una página específica en el back end de nuestra Shopify Store, ya podemos personalizar esta página Y para poder acceder a esta página, podemos ver la URL aquí mismo, ¿de acuerdo? Repasemos ahora y elaboremos una página que te lleve a través de la historia de cómo se inició la sesión En primer lugar, voy a ocultar la sección de página predeterminada, y luego voy a tomar la historia, que he escrito en el documento web copy aquí y averiguar la mejor manera de que podamos mostrar esta información con las secciones disponibles dentro del tema, ¿de acuerdo? Entonces tenemos nuestra historia. Es una línea de tiempo. Así que tenemos diferentes años aquí con diferentes títulos para cada etapa del viaje. Y luego un párrafo describiendo la historia en cada etapa. ¿Bien? Entonces déjame ver las secciones disponibles dentro de mi tema. Y obviamente hay una gama de formas diferentes en las que podríamos presentar esta información. Podríamos convertirlo en una presentación de diapositivas. Podríamos colocar imágenes en capas con bloques de texto aquí. Pero creo que aquí hay una sección real con el nombre de línea de tiempo bajo el título de narración de historias. Entonces, como pueden ver aquí, aquí hay una llamada línea de tiempo. Entonces con un nombre como Timeline, podrías pensar que esta es una sección apropiada para usar en nuestra historia aquí mismo. Entonces, antes que nada, puedo cambiar el esquema de color de la sección para que coincida con nuestra marca, y luego está este esquema de color interno, también. Así que podríamos querer establecer un esquema de color inverso, también. A lo mejor usamos Oh, definitivamente no quiero usar que uno pueda hacer algo como esto. Permítanme repasar por las diferentes opciones aquí. Tal vez en nuestra combinación de colores uno, en nuestra configuración de tema, solo editamos el fondo para estar un poco más en la marca. Entonces, ¿y si usamos ese color, y luego cambiamos el color del texto a nuestro color secundario de contraste? ¿Eso se ve bien? Bien, eso podría verse bien. Eso es como invertir los colores en el otro esquema de color Digamos, por ejemplo, con eso vamos a ir. Entonces lo que podemos hacer es entrar y configurar un ítem para cada uno de estos años. Para que pueda traer la imagen que acompaña a esa parte de la historia. Voy a traer estos por encima de todos de una vez. Entonces, como puedes ver, aquí hay una carpeta en nuestra carpeta de identidad de marca aquí llamada historia de marca que cubre cada etapa del viaje. Entonces, en vez de subirlos uno por uno, solo voy a tirarlos todos a este cargador de archivos aquí mismo para que suban todos a la vez, y eso nos permitirá seleccionarlos más rápido en cada etapa Y luego voy a seleccionar el primero, inicio del viaje de la marca, que fue el año, si volvemos a nuestro ejemplar por aquí, 2020. Podría poner eso como la etiqueta de navegación o en realidad, voy a usar esto como la etiqueta de navegación, ¿verdad? Subtítulo 2020, encabezado va a ser el mismo, y entonces puedo poner en la historia aquí en el contenido, ¿verdad Y luego pasar al siguiente punto, hacer lo mismo, poner en la siguiente imagen para la siguiente parte de la historia. La etiqueta de navegación fue el descubrimiento. Voy a usar eso como el rumbo dentro de la cuadra también. 2021 para el subtítulo, y luego personalizaré el tercer bloque aquí Pondré en la historia de la marca la imagen de la tercera parte, copiaré la fuente de la etiqueta de navegación y el encabezado, reemplazaré el subtítulo con 2022 Y luego pon aquí el contenido. Y entonces, obviamente, lo haríamos por las otras dos o tres partes de la historia. Echemos un vistazo a eso justo antes de pasar por la molestia de agregar todos esos otros artículos. Y podemos ver aquí si vamos a pantalla completa, va a aparecer así, derecho, que es bonito y compacto, tiene algunas animaciones bonitas. Y creo que esto funcionaría bien en una página con otro contenido, pero esta es nuestra página de historia. Entonces creo que tiene sentido tener una sección separada para cada parte del viaje. Entonces, nuevamente, esto es preferencia personal. Creo que va a ser más agradable tener una página más larga con todo el contenido en una sola vista Entonces, en lugar de eliminar esa sección en particular, solo voy a esconder eso, y busquemos una sección que podamos apilar para crear nuestra historia. Entonces volviendo a la narración, bien, no me gustan mucho las otras opciones dentro de la categoría de narración de historias Déjame subir la lista. Imagen con texto. Bien, creo que este podría ser apropiado. Entonces voy a cambiar el esquema de color al esquema cinco, nuestro esquema predeterminado para nuestra marca. Después voy a seleccionar la primera de nuestras imágenes de historia de marca. Entonces voy a hacer click fuera de eso y mirar los bloques para actualizar el encabezado. Entonces el subtítulo, creo que fue 2020, ¿verdad? El fundador es el nombre de esta parte de la historia, ¿verdad? En realidad, ¿ qué dice aquí estilo? A lo mejor lo hacemos un poco más pequeño. Así que H dos estilo. Y luego entramos en el párrafo y traemos aquí mismo este texto. ¿Bien? Eso me gusta. Y luego podemos agregar otra de esas imágenes con secciones de texto. Cambiar el esquema a cinco. Quizá quiera cambiar la posición de la imagen a la derecha. Entonces se alternan. Vamos a agregar en nuestra imagen para la segunda parte de la historia. Entonces entra en nuestros bloques, subtítulo 2021, creo que fue el año siguiente Es el descubrimiento. Entonces copiemos las otras partes que necesitamos. Entonces en párrafo, va a ser este contenido. Y entonces el rumbo es el descubrimiento. G para asegurarse de que estos todos estos H dos en lugar de H unos. Creo que es solo el estilo. No es usar el H uno real, lo que sería malo para el SEO. Entonces creo que en realidad, prefiero que sea más grande, así que solo voy a hacer estos estilos todos los H unos o H uno. ¿Bien? Déjame guardar y echar un vistazo a eso antes de ir más lejos. Olvidé poner una sección en la parte superior para nuestra historia, así que voy a hacer eso primero. Voy a subir aquí. Y como lo hicimos antes con agregar un encabezado en cualquier punto de nuestra plantilla, solo pondré en cambiar el esquema de colores a cinco, una sección de texto enriquecido eliminando el párrafo y subtítulo predeterminados y solo pondré nuestra historia en la parte superior aquí Bien. Ahora, volvamos a echar un vistazo. Entonces tenemos nuestra historia, el fundador, el descubrimiento. Esto me gusta, así que voy a seguir yendo con estas secciones y terminar de construir la página. Obviamente, va a ser el mismo proceso una y otra vez. Así que voy a pasar por esto un poco más rápido. Así que sólo voy a configurar estos y entonces ¿cuántas partes más de la historia tenemos? Tenemos uno, dos, tres, cuatro. Bien, entonces solo voy a configurar esto como lo quiera con el esquema correcto, y solo voy a duplicar esto tres veces más solo para ahorrar tiempo. ¿Bien? Entonces ahora tenemos uno, dos, tres, cuatro, y luego solo necesito alternar la posición de la imagen. Entonces voy a poner posición de imagen a la derecha sobre esa y luego ir dos hacia arriba, poner posición de imagen a la derecha en esa, también. Y entonces solo es cuestión de rellenar el contenido de cada uno de estos. Entonces voy a agregar en la tercera parte de la historia de la marca. De nuevo, vuelve a entrar aquí, pon en el año, que probablemente sea la fuente, solo haz uno más en tiempo real con ustedes, y luego solo avanzaré rápidamente por el resto. Bien, así son todas las secciones de una página. Voy a pegarle a ahorrar en eso. Vamos a verlo en pantalla completa. Ya podemos ver toda la historia de la marca. Podemos conocer a la fundadora, el viaje que la llevó a descubrir el matcha en la fuente, llevándolo a su vida diaria, luego en una misión de crear una marca que transmitiera esta experiencia a otras mujeres como ella Y entonces hoy, se ha convertido en el ir al matcha para la moderna mujer Wellness Nuevamente, todas estas imágenes y copia del sitio web fueron creadas dentro del arte del amor. No hay Emma. Esta es una historia ficticia, pero idealmente tendrías una historia de marca de la vida real que podrías poner en tu página de nuestra historia Y obviamente, si puedes obtener imágenes que sean tan de calidad como esta o incluso generarlas con nano Banana o amar el arte a ti mismo por las piezas faltantes donde en realidad no tienes fotografía real, puedes usar eso para las imágenes de tu sitio web también Y con esta página Acerca de nosotros, nuestra página de producto, nuestra página de inicio, nuestra página de colección, todo creado. Lo último que vamos a querer hacer es actualizar la navegación de nuestro sitio, porque como puedes ver por aquí, acabamos de recibir la navegación por defecto de inicio, catálogo y contacto. Probablemente vamos a querer cambiar eso. Entonces eso es lo que cubriremos en el siguiente video, y eso esencialmente debería terminar nuestro escaparate 10. Navegación: Bien, entonces este video probablemente va a ser rápido Solo tenemos que hablar de las navegaciones y de cómo se vinculan a nuestro tema A la hora de construir un escaparate en Shopify, hay ciertas cosas que viven dentro del tema y que viven fuera del Y en el caso de las navegaciones, suelen vivir fuera del tema y son traídos usando el Editor de la tienda en línea, similar a lo que vimos con productos y metafelds ¿Bien? Entonces solía estar bajo Tienda Online, pero ahora podemos pasar al contenido. Después en Contenido, podemos encontrar menús, y aquí tenemos nuestro menú principal. Entonces, si te estás preguntando de dónde vinieron esos artículos antes de casa, catálogo y contacto, aquí están aquí dentro de nuestro menú principal, o en el back end, estas se llaman listas de enlaces. Entonces, debido a que este menú ya está enlazando a nuestro tema, podemos simplemente personalizar esto como queramos, y se va a aplicar directamente a nuestro tema. Entonces porque no tenemos un catálogo grande, voy a eliminar esto o al menos editarlo y cambiar este artículo de enlace para comprar. Y en lugar de enlazar a todos los productos, solo voy a vincularlo a nuestro producto estrella, el marchante premium Powder Pero obviamente hay alguna estrategia que entra en tu navegación. Va a depender de tu marca y dónde quieras dirigir a tus clientes. Entonces en mi caso, quiero dirigirlos al producto principal que estoy tratando de vender aquí. Y en lugar de contactar, quiero tener también un enlace a esa página Acerca de nosotros que creé, nuestra historia de marca que actualmente no forma parte de ninguna otra navegación. Entonces definitivamente los usuarios van a necesitar una ruta para llegar a esta página en particular. Así que voy a poner eso aquí también. Entonces voy a pegarle a Guardar. Y como dije, porque esta navegación está vinculada al tema, si entro en mi tema ahora, debería ver que mis elementos de menú se han actualizado. Veamos cómo esa lista de enlaces o ese menú está enlazando a nuestro tema. Si hacemos clic en la sección de encabezado, puedes ver aquí que tenemos todas estas diferentes opciones, y luego tenemos una opción para menú. Aquí es donde elegimos de las listas de enlaces en el admin, así puedo dar click aquí para reemplazar, y esto me dará la opción de vincular otras navegaciones desde nuestra sección de menú de nuestra tienda Puedes ver aquí que esto está claramente vinculado a nuestra lista de enlaces del menú principal. Y es por eso que cuando editamos nuestra lista de enlaces del menú principal, está arrastrando nuestros cambios directamente en nuestro tema. ¿Bien? Si miramos las otras listas de enlaces que están vinculadas a nuestro tema, si bajamos por aquí, deberíamos tener algunas en nuestro Pie de Página. Como puedes ver, nuestra configuración general de la sección de pie de página no los tiene, pero nuestro Pie de página está compuesto por diferentes bloques. Entonces como puedes ver aquí, esto es jalar de algo llamado menú de pie de página. Entonces, si voy y solo lo abro en una nueva pestaña para que pueda cambiar más fácilmente entre ellos, y vuelvo a nuestra sección de menús por aquí, puedes ver el menú Pie de página. Búsqueda y sus opciones de privacidad. Puedes ver aquí que tenemos búsqueda, y faltan tus opciones de privacidad. A lo mejor esa página se ha configurado como oculta, pero podemos, por supuesto, entrar aquí y editarlas también. Entonces, en lugar de buscar, que realmente no tiene sentido en nuestra tienda, voy a eliminar la búsqueda, y voy a agregar en nuestra gama para llevarlos a la página de colección de Shop All. Esto lo vincularemos en nuestra navegación, pero solo en el pie de página. Entonces pondré otro enlace a Nuestra historia. Para que podamos ir, Ups, no productos, sino páginas, nuestra historia Pondré eso por encima de las opciones de privacidad. Y por último, podemos traer de vuelta en esa página de contacto que sacamos de la navegación del menú principal. Así que pon esto aquí por encima de las opciones de privacidad, pulsa guardar en eso. Y entonces deberíamos empezar a ver todos esos cambios reflejados aquí en nuestro editor de tienda en línea o en nuestro tema. Entonces si hago clic por aquí. Sigue mostrando la información antigua. Déjame cambiar esto rápidamente y luego volver a cambiarlo. Esto es un poco de un bicho. Ahí vamos. Pie un menú, y luego podemos dar click aquí para mostrar título o no mostrar título. Si hacemos clic en Mostrar título, va a tirar directamente del título del menú por defecto, pero luego podemos decir aquí, menú o lo que queramos para personalizar ese título ahí mismo. Entonces, cuando se trata de inklist, hay dos partes. Ahí está la lista de enlaces que realmente configuramos aquí en esta sección de menús de nuestra tienda Shopify, y luego está la vinculación de ese menú en nuestro tema Entonces, para mostrarte cómo crearíamos un nuevo menú y lo vincularíamos a nuestro tema, tal vez tengamos una segunda columna de enlaces de menú aquí. Entonces voy a agregar uno aquí. Y por defecto, solo enlaza a enlaces de pie de página, lo que nos va a dar un duplicado. Pero digamos, por ejemplo, en cambio, creamos un nuevo menú, y decimos segundo menú de pie de página, y luego podemos agregar cosas aleatorias aquí. Entonces, en realidad, digamos nuestros productos, y entonces tal vez cada uno de estos pueda ser solo un enlace a cada uno de nuestros productos porque solo hay cuatro de ellos. Entonces vamos a hacer, lo siento, set completo de marcha. ¿Cuál es el siguiente? Elegante batidor Macha Bien, si configuramos primero el enlace, entonces va a rellenar automáticamente la etiqueta Eso es práctico. Tazón de marcher premium y el polvo de marcha en sí. A lo mejor ponemos eso en la parte superior. Golpea guardar en eso. Y ahora que hemos creado esa lista de tinta, ahora podemos vincularla aquí dentro de nuestro tema Así que podemos hacer clic aquí en la configuración del bloque para reemplazar eso con nuestros productos, y luego puedes ver que se trae a través, ¿de acuerdo? Entonces así es como se suelen hacer las navegaciones en los sitios de Shopify configuramos aquí en la parte posterior de nuestro sitio web de Shopify, y luego los traemos a nuestro escaparate a través de estos si navego hasta él, estos campos de lista de enlaces Y así podemos intercambiar el menú completamente con otra lista de enlaces o si solo queremos cambiar un ítem en la lista de Enlaces, entraríamos, por supuesto, aquí y podemos actualizar los diferentes ítems aquí. Y esto también permite anidar, también. Así podemos crear menús anidados aquí hasta tres capas de profundidad Bien, así que cierra eso. Eso básicamente lo cubre, chicos. Voy a quitar la lista de productos aquí. Eso no fue más que una demostración. Y este es esencialmente nuestro escaparate que hemos creado Para tu proyecto de clase, te voy a pedir más tarde en la clase que muestres lo que has construido con el resto de la clase. Pero este es el ejemplo que te he llevado a través en esta clase en particular. Y en el último video antes de la conclusión, voy a hablar sobre ¿cuáles son sus opciones ahora para una personalización avanzada? Como mencioné a lo largo de la clase, íbamos a hacer esta compilación de una manera sin código. Entonces no hay código, ni IA, solo usando el editor de la tienda en línea con un tema premium o gratuito. Pero digamos, por ejemplo, hay una característica que realmente quieres traer a tu escaparate donde una sección no existe dentro de tu tema actual ¿Cuáles son tus opciones entonces? Eso es lo vamos a cubrir en el siguiente video. 11. Opciones de personalización avanzada: Bien, entonces, ahora hemos construido el escaparate para nuestra tienda Shopify, usando el Editor de la tienda en línea Y como he mencionado a lo largo de esta clase, estamos limitados por las secciones y las opciones dentro de las secciones disponibles en nuestro tema de elección, que en este caso, es prestigio. Pero si quieres salir de esa limitación, mencioné antes que cubriría eso al final de la clase, y ahora es el momento de hacerlo. Y las dos opciones de las que voy a hablar usando lo que se llama Shopify magic y sidekick para ayudarte a realizar ediciones Y entonces la segunda opción es contratar a un desarrollador real. Así que mencioné antes, cuando estamos usando un tema de prueba, en realidad no podemos editar el código, y también estamos limitados en términos de características de IA también. Si hago clic para agregar una sección aquí, generalmente, hay un botón aquí para generar una sección con IA. Entonces lo que voy a tener que hacer es salir de prestigio por ahora porque está en juicio y mostrarte esto en un tema que no está en juicio. Entonces voy a demostrar esto en Horizon, así que voy a ir aquí a Editar una de las cosas a tener en cuenta y algo de lo que hablo en mi canal de YouTube es que todas estas secciones tienen código en el back-end. Entonces, si hago clic derecho aquí, realmente puedo hacer clic para Editar código. Puedo hacer esto desde cualquier lugar dentro de la tienda online Editor, ya sea desde la vista previa visual o por aquí en la barra lateral. Puedo poner mi cursor sobre la sección. Derecha, haz clic en Editar código. Traeré a colación este editor de código para mí aquí, y aquí está todo el código. Y puedes ver aquí todos los archivos de código en diferentes carpetas. No voy a adentrarme en el código y cómo funciona en esta clase de Skillshare De hecho, tengo tres clases diferentes de Skillshare hablando de desarrollo de temas de Shopify, desarrollo, codificación de significado , entro en muchos detalles en esas clases sobre cómo personalizar tu tema mediante el uso de codificación personalizada Pero desde que hice esas clases, ha habido nuevas características que han salido en Shopify para generar secciones y bloques con IA Entonces, si hago clic aquí para agregar una sección, verás aparecer un botón que no vimos en el tema de prestigio porque estábamos en modo trial, y ese es este botón de aquí para generar. Entonces como puedes ver aquí en la sección de vista previa, está promocionando que si tienes una idea puedes darle vida. Entonces solo estás limitado por lo que puedes describir aquí en este cuadro para agregar en tu prompt. Entonces esto es algo con lo que jugar. No va a ser necesariamente perfecto, pero podemos darle una grieta ahora mismo. Entonces, una de las secciones que he construido antes de usar esta herramienta de generación de bloqueo en Shuba fi es crearme una sección de ancho completo que muestre dos imágenes, cada imagen ocupando exactamente la mitad del ancho de la sección, ¿de pegaré a Enviar en eso y luego dejaremos que Shopify Magic o compinche hagan lo suyo Como puedes ver, está creando algún código para nosotros en el back-end, pero podremos previsualizar esto junto con configuración de la sección y todo cuando termine de procesarlo. Y como puedes ver aquí, se genera una vista previa de nuestro bloque. Técnicamente, es una cuadra. Ojalá, si hago clic fuera de aquí, aún así podré hacerlo. Técnicamente, crea un bloque, pero si solo pones un bloque en una sección vacía, esencialmente estás obteniendo una sección. Entonces, si vuelvo aquí, quiero asegurarme que estoy probando esto primero antes de presionar Guardar, porque si presiono Guardar, eso se bloquea en esta sección, y no puedo dar instrucciones de seguimiento. Solo para señalar aquí, chicos, que esta es una característica bastante nueva y probablemente evolucionará. Entonces, si estás viendo esto en el futuro, esto podría ser más avanzado o la interfaz de usuario podría ser diferente. Solo quería poner eso ahí fuera que esto probablemente va a cambiar mucho en el futuro. Al momento de grabar, así es como funciona. Entonces como pueden ver, me está dando dos ranuras para poner en imágenes. Así que pongamos solo voy a poner fotos de estas chicas. Realmente no importa. Estamos demostrando aquí, ¿verdad? Y luego veamos las opciones que nos da para que podamos hacer que la altura de la imagen sea más alta, ¿de acuerdo? Y la brecha entre imágenes, no quería ningún hueco, pero en realidad puedo agregar eso en si quisiera y luego agregar en un radio de borde. Y luego también puedo controlar el posicionamiento en el móvil, así puedo hacerlo para que esté lado en el móvil si quiero o apilado. Y estos son solo escenarios que asumió que queremos. Entonces es solo adivinar aquí pero quería un completo con sección Yo quería algo que recorriera todo el ancho. Entonces déjame ver si puedo conseguir que lo haga con instrucciones de seguimiento. Diré, Bien. Pero, ¿puedes hacerlo realmente de ancho completo? No quiero el acolchado habitual a la izquierda y a la derecha. Y luego solo para ser súper específicos, el borde izquierdo de la imagen izquierda debe estar al ras contra la izquierda de la página y viceversa a la derecha. Todo bien. Pulsa Enter en eso, y veamos si realmente puede entender mis cambios y hacerlo correctamente para el ancho. Bien, entonces parece que entendió correctamente. Lo malo de proporcionar instrucciones de seguimiento a esta herramienta de IA es que borrará todos los ajustes anteriores. Entonces, dependiendo de lo compleja que sea la sección, esto puede ser bastante molesto. Entonces permítanme agregar de nuevo estas imágenes. Bien. Y esto es esencialmente lo que buscaba. Entonces sí, ha hecho un buen trabajo para una sección sencilla como esta. Y así puedes usar las funciones de IA dentro de Shubafi para crear el aspecto que buscas Voy a ponerlo al lado del otro en el móvil. Y entonces tal vez queríamos poner algo de texto encima de la imagen a cada lado. Hacer que se pueda vincular, podríamos proporcionar esas instrucciones aquí también Pero es importante tener en cuenta que si haces clic en Guardar aquí, estás bloqueando en esta sección. Entonces, si presiono Guardar, me va a impedir crear nuevas indicaciones de seguimiento, pero puedo entrar y editar el código si entiendo cómo editar el código Entonces no puedo repmpt, pero puedo entrar y editar el código como Pero nuevamente, el problema con esto es que obviamente necesitas entender el código para poder trabajar con esto. Entonces, una vez más, si quieres aprender a codificar, eso es lo último en términos de personalización de temas. Y aquí hay clases en Skillshare que he creado Puedes tomar si quieres entender la codificación real de los temas de Shaba fi Pero en esta clase, nos enfocamos específicamente en construir un escaparate sin ningún tipo de codificación personalizada Ahora, solo para terminar con las cosas de IA, si vamos por aquí, debería haber un pequeño botón aquí. Esto es bastante nuevo en el último año a la hora de grabar. Puedo entrar aquí y puedo pedir cambios. Esto que he encontrado no funciona tan bien como solo generarlo aquí porque supongo que es una característica más nueva, pero quiero decir, predigo que solo va a mejorar ya que todas estas herramientas de IA son. Agrega un botón sobre cada imagen que pueda enlazar en algún otro lugar de mi tienda. Pulsa Enter en eso. Entonces, como dije antes, no puedes hacer indicaciones de seguimiento por aquí, pero una vez que generas una sección de IA, donde sea que sea generada por IA o no, puedes usar este pequeño editor de temas de patada lateral Y veamos por aquí. Te ayudaré a agregar un botón en el que se puede hacer clic sobre las imágenes de esta sección Déjame ajustar el tema para agregar botones. Bien. ¿Lo ha hecho si vamos por aquí? Sí. Bien, entonces es una especie de botones añadidos a la izquierda y a la derecha. Entonces sí, como mencioné, he descubierto que obtengo resultados mucho mejores si estoy generando la sección desde cero con IA usando el campo prompt de aquí. Así que definitivamente recomiendo tener una buena idea antes de presionar Guardar porque, sí, tus únicas opciones en este punto, son personalizar código o usar esta característica de patada lateral para pedir cambios. Bien. Entonces, para terminar esto, ¿y si las secciones disponibles en tu tema y la IA no ayudan a obtener el resultado exacto que deseas y quieres un nivel extra de personalización? Bueno, como se mencionó, el nivel más alto de personalización que puedes tener con los temas es editar el código. Como vimos antes, si entramos en hacer clic en Editar código en cualquier bloque, la totalidad del tema, incluyendo la configuración de la sección. Entonces si me desplazo aquí, puedes ver en el esquema aquí, esto es todo código JSON. Pero solo para demostrar que incluso los ajustes dentro del tema están todos escritos en código. Entonces tienes acceso a todo, digamos, back-end de tu tema Shopify, incluidas las opciones disponibles en el personalizador de temas Y esto es exactamente lo que hago como desarrollador de Shopify. Ayudo a los comerciantes en Shopify a realizar personalizaciones más avanzadas su tienda usando el poder del código porque muchos vendedores quieren personalizar sus tiendas fuera de las opciones disponibles sin código Entonces ahí es donde entro como desarrollador. Te dejo aquí mi página web para que la revises si te interesa, es Christopher dodd.com Puedes ver las marcas con las que he trabajado aquí y algunos testimonios de clientes anteriores, pero el principio es que si quieres una personalización avanzada, vas a querer aprender a codificar o contratar a un desarrollador. Entonces, ya sea yo o alguien más que puedas encontrar, esa va a ser tu mejor opción para la personalización completa de tu escaparate Y solo para terminar esta lección aquí, si eres un comerciante de Shopify que quiere aprender más sobre personalizaciones avanzadas y cómo funciona la tecnología en la plataforma Shopify, también tengo un canal de YouTube que puedes encontrar en youtube.com slash Y en este canal, puedes conocer más sobre qué es lo que hago y temas similares a lo que cubrimos en este video. Tengo dos videos aquí que se superponen bastante bien con el contenido de esta clase en cuanto a cómo usar el editor de la tienda en línea y cómo usar patada lateral y magia. Pero también tengo un montón de otros videos sobre diferentes aspectos tecnológicos de tu tienda Shopify de alguien que lleva más de seis años trabajando en la plataforma Bien, así que si eso está fuera del camino, lleguemos a la conclusión de la clase Skillshare, y también te hablaré sobre tu proyecto de clase en el siguiente video 12. Conclusión y proyecto de clase: Entonces esto concluye esta clase sobre Shopify Personalización del tema Para tu proyecto de clase, te animo a que construyas tu propio escaparate en Shopify, utilizando el método que se muestra a lo largo de esta clase. Si tienes una tienda real, por supuesto, usarías tu propia tienda para esto. Pero si estás tomando esta clase solo para practicar, puedes crear lo que se llama una tienda de desarrollo de forma gratuita. Puedes hacerlo registrándote para una cuenta de socio gratuita y crearla a través del panel de desarrollo. Luego, con la configuración de tu tienda Shopify, elige un tema de la Tienda de temas de Shopify y usa el Editor de la tienda en línea para personalizar el tema Has completado tu escaparate, compártelo con la clase en la sección de proyectos de clase de la manera que te sientas más cómodo, ya sea a través de capturas de pantalla o a través de un enlace directo a la Si disfrutas de esta clase, asegúrate de dejar una reseña positiva y asegúrate de revisar algunas de mis otras clases aquí en skillshare.com, donde me sumerjo en el desarrollo web, Shopify, y Gracias como siempre por mirar, y los atraparé en la siguiente.