Transcripciones
1. Introducción: Howdy, soy Kurt Elster, dueño de
agencia en Ethercycle, y realmente experto en Shopify a tiempo completo. Durante los últimos dos años, todo lo que he hecho es trabajar, comer, dormir, respirar, hablar ,
escribir y
vivir de tiempo completo trabajando en la plataforma Shopify como experto en Shopify. Probablemente seas, o eres diseñador web o desarrollador web, eres un freelancer en ese espacio digital y tal vez tengas habilidades de desarrollo front-end. HTML, CSS, tal vez JavaScript, pero no necesariamente lo necesitas. Si tienes esas dos habilidades, entonces lo único que te detiene de tener una carrera exitosa en Shopify es conocer la plataforma. Eso es lo que vamos a intentar y salir adelante con este curso. Te voy a ayudar a saltarte y llegar a esa ruta más rápida a ganancias diarias en el programa de expertos de Shopify. En el camino, te voy a pimienta con algunas mejores prácticas que he aprendido por configurar un gran almacenamiento de bien conversión que te ayudará. Una vez que tengamos eso abajo, nos vamos a sumergir en temas porque como experto en Shopify, puedes ser diseñador, desarrollador, fotógrafo, lo que sea. Pero la petición más común que tienen los dueños de las tiendas es, ¿puedo cambiar x sobre mi tema? Entonces, si pudieras aprender eso, es una gran fuente de ingresos. Entonces, ahí es donde vamos a empezar. Para ello, aprenderemos los huesos
del tema o lo que entra en un tema de Shopify, esas piezas. Entonces, como resultado, vamos a poder hacer nuestras propias modificaciones temáticas. Esa es nuestra tarea final, esa es la piedra de paso para luego diseñar y desarrollar tus propios temas.
2. Introducción al comercio electrónico: Shopify comenzó su vida como solo un carrito en línea. Rápidamente se transformó en, no sólo una plataforma completa para el comercio electrónico, esta solución de extremo a extremo, sino también en una comunidad. Tener esa comunidad teniendo ese marketing de crecimiento es lo realmente impulsó mucho el crecimiento de Shopify como una gran plataforma. Pero también es parte de una tendencia más grande. Entonces, hay un par de cosas que han impulsado el crecimiento explosivo del comercio electrónico en general. Creo que ante todo es móvil. Si miramos estadísticas para nuestras tiendas en línea, me sorprendería que aún exista alguna tienda que tenga menos de al menos el 50 por ciento de su tráfico es móvil, y sobre todo con tiendas que tienen un público más joven, es va a sesgar aún más hacia el móvil. Eso es porque tenemos estos dispositivos con nosotros todo el tiempo. Estos están siempre encendidos, siempre conectados, siempre con estos dispositivos, teléfonos, tabletas e incluso smartwatches. Si lo piensas, las últimas compras que hice fueron en mi iPhone acostado en la cama. Pero, ¿qué es lo que más hacemos con nuestros smartphones? Probablemente es chequear Facebook. Es un hábito terrible y probablemente todos lo hagamos. Cuando revisas Facebook, ahí es donde muchas marcas nos llegan. Pero una marca diciéndome que compre algo nunca
va a tener una décima parte del mismo valor que un amigo. Eso es lo maravilloso de las redes sociales. Si alguien compra un producto, le encanta, está orgulloso de ello,
y lo comparten en Facebook, tengo mucho más probabilidades de hacer clic a través un sitio web móvil y comprarlo cuando un amigo lo haga. Las redes sociales, combinadas con el móvil, se ha convertido en un increíble motor de descubrimiento de productos sociales. En Shopify, todos los temas funcionan en móvil. Todos son totalmente receptivos y también se integran increíblemente bien con Facebook, Twitter, Pinterest. Tienen estas integraciones sociales integradas en ellas. Entonces, creo que ahora más que nunca, es un momento increíblemente emocionante para involucrarse en el espacio del comercio electrónico. Tómate un momento y pregúntate: “¿Por qué estás aquí?” Se podría decir que es para aprender Shopify, para ser diseñador de Shopify. Pero creo que realmente estás aquí porque eso es un medio para un fin. Creo que estás aquí para ganar más dinero, y eso es genial. Shopify, es una gran manera de ganar un ingreso como diseñador. Hay varias maneras en que podríamos hacer eso. El primero es la forma directa muy literal, y eso es vender diseños en Shopify. Podrías dar vuelta a tu propia tienda Shopify y vender diseños de playeras. Ha habido algunas personas muy exitosas que han hecho eso. ugmonk.com, por ejemplo, es un muy buen ejemplo de eso. O podrías vender ebooks. A Book Apart es un gran ejemplo de eso. Una vez que tengas esa experiencia haciendo eso, entonces tal vez podrías pasar a vender un tema de Shopify. Si construyes un tema de Shopify, podrías hacer de manera muy realista cinco mil al mes ingresos impulsivos por esas ventas temáticas. Esos temas ventas, naturalmente, esas personas podrían llegar a ti y convertirse en clientes cuando piden modificaciones de
tema o personalizaciones o apoyo en general. El motivo por el que uno es muy lucrativo es porque también es difícil. Shopify es muy estricto con respecto a la calidad de los temas. Entonces no puedes simplemente abofetear algo juntos. Tiene que ser un tema generalmente bueno, y eso es algo bueno. Significa que va a haber menos temas ahí dentro para que compitas contra, y si tienes que elegir un tema para un cliente, un tema listo para usar, siempre puedes estar
seguro sabiendo que va a ser de gran calidad. Ahí está la tercera vía, el modelo tradicional y lo que hacemos que es sólo el trabajo del cliente. En el trabajo de los clientes, cobras lo que quieras. Construyes por hora o precio fijo, fija alcance. Pero entonces, Shopify nos da una manera de recargar ese ingreso. Si eres el que migra al cliente a Shopify y giras la tienda por
ellos, te darán una cuota de afiliado 20 por ciento de todo lo que el cliente le paga a Shopify. Entonces, lo que sea que
paguen, al final del mes obtienes una cuota de ingresos del 20 por ciento sobre eso, PayPal derecho a ti. Eso continúa para siempre. Entonces, configuras una tienda una vez, construyes una cartera de tiendas Shopify, clientes de Shopify, y muy rápidamente descubres que estás ganando cientos o incluso miles de dólares al mes de ese ingreso pasivo de Shopify además de tu cuota de ingresos. Entonces, nos ha dado todo tipo de formas para que los diseñadores elijan la cosa con la que nos sentimos cómodos y ganemos dinero haciendo lo que nos encanta, lo cual es un gran diseño. Te he dicho por qué deberías abrazar a Shopify como diseñador. Pero si eres diseñador, puedes ser escéptico de Shopify como plataforma de hosting, porque quieres más libertad. Solía preferir siempre tener mi propio servidor, un FTP, subir todos mis propios archivos, hacer lo que quiera. Entonces, necesito que sepas una cosa. No hay limitaciones en Shopify y qué podrías hacer con HTML, CSS, JavaScript. Divertido y sabio, realmente va a ser igual de flexible como si tuvieras tu propio servidor, pero sin algunos de los dolores de cabeza. Entonces, cuando te mudas a Shopify como plataforma de hosting, ya no
te preocupas por hacer girar los servidores. No tienes que configurar un servidor, preocúpate de que el servidor sea hackeado. Todas esas cosas se van. Ya no tienes que jugar ese papel de TI porque Shopify se va a encargar de ello por ti. Otra cosa que asusta a los diseñadores Shopify es que pueden tener que aprender un nuevo lenguaje de programación, o tal vez ya conoces un lenguaje de programación y no quieres aprender otro. Eso es lo genial de Shopify. Utiliza Líquido. El líquido es increíblemente fácil de usar. Es un poco menos potente que un lenguaje de programación tradicional, pero significativamente más fácil. Entonces, está escrito en lenguaje natural, es muy claro y conciso y lo mejor de todo, está realmente bien documentado. Entonces, cualquier pregunta que tengas, podrías rápidamente buscarla en google. Encontrarás documentación de Shopify en él, eso es lo que hago. Caminaremos por algunos de esos recursos. Pero si eres astuto, tal vez
te des cuenta, ¡oh no! Estoy renunciando a ese ingreso de hospedaje web. De lo que estás renunciando es al dolor de cabeza del alojamiento web y estás ganando el ingreso por acciones afiliadas. Entonces, como mencioné antes, si giramos nuestra cuenta de socio de Shopify, Shopify nos pagará 20 por ciento de participación afiliada de cualquier ingreso de los clientes que migramos a la plataforma Shopify. Eso es lo que vamos a hacer a continuación. En unos minutos, vamos a iniciar nuestra propia cuenta de socio de Shopify y te voy a guiar a través de eso. Para ello, voy a compartir mi pantalla con ustedes en el siguiente video.
3. Introducción a la cuenta de socios: Entonces, el primer paso cuando quieres
convertirte socio de Shopify: primer paso como diseñador involucrándote con Shopify, desarrollador involucrándote con Shopify. Sea lo que sea que estés haciendo, si te estás involucrando con Shopify, quieres empezar con el Programa de Socios Shopify. Google Shopify Partner Program o es shopify.com/partners, no podría ser más sencillo. Cuando te unes al programa de socios, esto no es algo verificado, solo
te inscribes, aquí no hay un proceso de calificación real. Eso vendrá más tarde si optas por hacer el Programa de Expertos. Esto es un peldaño a eso. Entonces, aquí, tenemos esto- esto es genial,
el fondo del video, ¿qué tan genial es eso? Pero aquí, tienen este titular. Ayudamos a los freelancers y agencias a crecer. Oye, somos nosotros. Entonces, estamos en el lugar correcto. Aparte de la cuota de ingresos, el acceso para poder girar las tiendas de
desarrollo fácilmente y tener todas esas cosas en un solo lugar, también te dan algunos bonitos recursos gratuitos para la comercialización. Te van a dar logotipos que puedas usar, materiales de marketing. Ahí hay un gran boletín que envían. Yo tomo material de eso todo el tiempo. A menudo, usaré eso como redes sociales FOTA, me
ahorra algo de tiempo. Aquí vive su documentación. Te darán webinars, talleres que suceden; y se han acercado, hemos organizado algunos de esos. Es divertido. Y hay un foro privado que corre Shopify, y hay algunos otros grandes extraoficiales por ahí también que descubrirás en el camino. Entonces, y luego por supuesto, llegamos a ganar ingresos mensuales continuos que es lo que queremos. Obtienes esa cuota de ingresos del 20 por ciento, lo cual es amable de cualquier cliente que traigas, solo por conseguir que la gente se inscriba. Eso es fantástico, y es para siempre. Y como comentamos antes, también
puedes vender temas, donde te darán 70 por ciento; y luego, también está la App Store. Un ingreso promedio de aplicaciones es de 2000 al mes. Y dependiendo de dónde esté tu conjunto de habilidades, si eres diseñador, probablemente
quieras apegarte a temas y si eres desarrollador, probablemente
estarás más cómodo con las apps. Es con lo que te sientes cómodo y tal vez eres un unicornio, podrías hacer ambas cosas. En esto, hay mucha gente. Es genial. Entonces, está bien. Volvamos a subir la cabeza. Aquí estamos. Simplemente haz clic en unirte ahora para unirte al programa de socios, y abrimos nuestra cuenta de socio gratuita. Muy sencillo. Tenemos el nombre de nuestra empresa. Aquí tienes tu enlace de referidos, y tu enlace de referidos es genial si solo hablas de Shopify en cualquier lugar, incluye tu enlace de referidos y si tienes suerte alguien se registra. Eso se va a agregar a tu cuenta de socio y obtendrás esa cuota de ingresos del 20 por ciento de nuevo. Podríamos expresar nuestras áreas de interés. Obtuvimos una info de inicio de sesión, información básica de contacto; y lo importante, nuestra cuenta de PayPal para que nos pudieran pagar. Estamos de acuerdo con ello, rápido conviértete en socio de Shopify. No podría ser más sencillo. Entonces, veamos una. Entonces, aquí está mi tienda o mi panel de socios de Shopify. Entonces, podemos ver- yo sí - en servicios al cliente, no
tengo aplicaciones por ahí, no
tengo ningún tema. Yo sí tengo tiendas afiliadas. Entonces, se podía ver que estoy recibiendo estos pagos regulares de cientos de dólares. Hay meses donde- y te pones por ciento como, creo que obtienes porcentajes del total de ingresos. Entonces, hay un mes donde obtendré un pago de 500 dólares. Nuestros próximos pagos, $362. Es genial, de verdad porque es pasiva. No tengo que hacer nada para conseguir este ingreso, solo aparece. Entonces, si haces clic en afiliados, podrías ver tu historial de afiliados, te
mostrará qué tiendas tienes, dónde están, qué está pasando con ellos. Es bonito, y podrías buscarlo para encontrar una tienda específica, ver en qué plan están, saber qué les pasó. Es bonito. Entonces, la importante, las tiendas de desarrollo. Entonces, las tiendas de desarrollo son las tiendas gratuitas que puedes crear para un cliente o para ti mismo para probar cosas. He encontrado que esa es la forma más fácil de tipo de clientes a bordo en Shopify. No les envío el enlace de referencia y espero que se inscriban para ello, voy un paso más allá, creo una nueva tienda de desarrollo y les digo: 'Oye, hice una cuenta gratuita para ti. Aquí tienes tu contraseña de inicio de sesión”. Y pueden cambiarlo, o los agrego como miembro del personal y luego los convierto en dueño de tienda, pero eso también lo cubriremos. Entonces por supuesto, si tienes alguna app en App Store o temas, puedes obtener acceso a las de aquí. Aquí, tenemos algunas apps privadas que estaban metiendo. Temas, podrías crear un tema, ponerlo aquí arriba. Ajustes, esto básicamente sólo lo que
configuraste en lo de tu pareja. Podrías cambiarlo aquí. Y entonces, ¿qué tenemos aquí? Recursos de los socios. Recursos de socios es agradable. Tiene documentación, tutoriales (ese centro de aprendizaje), la hoja de trampas líquida. Definitivamente, si estás haciendo alguna programación, me encanta esta cosa. Tengo esto impreso. Lo guardo en mi escritorio, muy servicial. Newsletter, y para clientes. Si estás empezando, quieres hacer algo de marketing, hay algunas cosas grandiosas, geniales aquí dentro, como el kit de entrega del comerciante. Me encanta esto. Realmente te hace parecer profesional, fantasma más allá. Se trata de un PDF, así que tenemos la guía de referencia rápida de Shopify. Es PDF. Y luego, aquí dentro, puedes seguir adelante y editarlo. Entonces, podríamos decir: “De verdad, Kurt”. Y de esa manera es personalizada, parece que es de ti, y luego tienes que pasar y poner ahí URLs ahí dentro. Está bien. Volvamos a los socios de Shopify. Entonces, una vez que creamos nuestra cuenta de socio de Shopify y hemos pasado por todos nuestros recursos
de marketing, lo primero que queremos hacer y lo que nos preocupa, para los fines del curso de Skillshare, es configurar una tienda. Crear una nueva tienda de desarrollo, trabajar con un tema, editar un tema. Entonces, te gustaría crear una tienda de desarrollo. Muy sencillo. Lo llamaremos nuestra demo de Skillshare. Se trata de una tienda en línea. También podrías hacer tienda minorista online, que así por defecto, va a tener
habilitado el sistema de punto de venta así como la tienda online o puedes hacer solo punto de venta puro. En este caso, nos vamos a apegar solo a la tienda online, pero si puedes dominar la tienda online, el complemento de punto de venta es muy sencillo, muy autoexplicativo. Entonces, agregaremos nuestra contraseña aquí, y echo de menos la tecleé, para crear tienda de desarrollo, funcionando; y boom, ya está hecho. Eso ya está girado hacia arriba, no podría ser más sencillo. Entonces, compare eso para intentar girar un entorno de producción de tienda de pruebas, entorno desarrollo, servidor de puesta en escena, ese tipo de cosas. Eso es un gran dolor. Esto es mucho más fácil. Y ahora que lo hemos hecho, vamos a nuestras tiendas de desarrollo, aquí está y hacemos clic en él. Jaja. Escriba las cosas, set recuérdeme, inicie sesión y boom. Entonces, si te pasas por eso, fueron como 90 segundos? Puedes pasar de la nada a un socio de Shopify con una tienda demo funcionando. Muy simple, o una tienda demo ya sea para ti o para un cliente. Es útil, me gusta. Entonces, y vamos a decir que no, noquee eso. Ahí vamos.
4. Guía de desarrollo: Entonces, tenemos una tienda totalmente nueva, no se ha montado nada, y va a empezar a pasearnos a través de ella. Nos está impulsando a configurar nuestros pagos, nuestra configuración de envíos, impuestos, agregar productos, personalizar la tienda, ese tipo de cosas. Pero una vez que esas cosas desaparecen, ponen mucho contenido útil aquí. Entonces, de un lado de la mirada, pudimos ver cómo está nuestra tienda, ver una actividad reciente en cuanto a qué usuario ha hecho qué, y luego, tienen algunas cosas sugeridas aquí, como contenido útil. Al igual, aquí hay algunos grandes ejemplos de correos electrónicos de carrito abandonado, o aquí hay una oportunidad de presumir de tus productos. Entonces, lo primero que queremos son órdenes. Pedidos significa que nos están pagando. Podrías crear un pedido manualmente si tomaras uno por teléfono, que es una nueva característica, es agradable. Aquí se mostrará tu primer pedido. También nos mostrará checkouts abandonados lo cual es genial. Pero echemos un vistazo a una tienda de ejemplo. Entonces, tenemos, este es un cliente mío, bandas
everest, horología everest. Entonces, aquí dentro he buscado mi nombre. Se podía ver que una vez que tuvieras todo un montón de pedidos, podrías ordenarlos por pedidos no pagados, no cumplidos, abiertos, todos. Me he buscado aquí afuera, y esta fue una orden de prueba. Hemos visto que está marcado, reembolsado, e incumplido, lo cual tiene sentido. Entonces si lo abrimos, aquí tenemos aquí y nos va a mostrar para qué es el pedido,
una visión general del cliente, mi dirección, esa es mi dirección de oficina déjame en paz. Entonces, puedes agregar una nota al cliente, si el cliente dejó una nota en la tarjeta aparecerá ahí, y luego podrías etiquetarla. Entonces, si tienes muchos pedidos y quieres formas fáciles de buscarlos, podrías etiquetarlos con cosas. El ejemplo que te di es al por mayor, eso es bastante útil para poder
diferenciar tus pedidos mayoristas de tus pedidos regulares. Volvamos a nuestra tienda de demostración. A continuación, tenemos productos, y los productos es más que productos. Tenemos que añadir nuestros productos aquí, podemos importarlos, añadirlos,
exportarlos de un vistazo si utilizas Shopify para hacer un seguimiento del inventario, que es una opción en la que entraremos, aquí, podrías ver todo tu inventario aquí. Y luego más importante, tenemos colecciones. Colecciones es lo que Shopify llama categorías, y es una de las distinciones entre Shopify y otras plataformas de comercio electrónico. Todos los demás los llaman categorías, y te permiten ponerte un poco loco en categorías de nido. Algo que sube a la gente, es en Shopify no hay categorías anidadas o colecciones. Simplemente creas colecciones y luego, hay varias formas de organizar tu navegación. Algunas personas inicialmente sienten que esto es una limitación, te
prometo que no
lo es, va a hacer para mejores historias en general, pero algo a tener en cuenta. Entonces, veamos un ejemplo en la tienda en vivo, entréguense en productos y seguro, nos muestra todos nuestros productos. Aquí no hacemos un seguimiento de inventario, pero si lo hicieras te mostraría. Tenemos tipo vendedor, mantiene las cosas muy organizadas, muy bonitas, y luego podemos exportar, importar productos, y por actualizarlos, podríamos filtrarlos. Es genial. Encabezemos a los clientes. Los clientes es genial, puedes importar a tus antiguos clientes si te mudas de otra cosa, o a medida que los clientes
compran, van a entrar aquí, o puedes agregar un cliente. Entonces, ¿qué tiene de bueno eso, es que puedes filtrar por, cuando la gente echa un vistazo les preguntará : “Oye, ¿quieres aceptar marketing de nosotros?” Te recomiendo incumplir que, “sí quieren aceptar marketing de ti”, y luego puedes exportar a todo el que acepte marketing en una hoja de cálculo. Haz lo que quieras con él, súbelo a Facebook, agrégalo a Mail Chimp usando una integración Mail Chimp, todo tipo de cosas divertidas que podrías hacer aquí. Pero estamos empezando a ver, es una solución completa y hecha. Es todo lo que necesitas para vender en línea. Entonces tenemos reportes. Los informes son una característica. No está en el plan básico, no
está en el plan más barato, sí aparece en el siguiente plan de arriba arriba, y dependiendo del cliente, podría ser útil. Si vendes un producto o no vendes mucho, quizá no necesites informes. Pero con el tiempo, a medida que la gente crece, encontramos que muchas veces quieren y necesitan esos informes. Mi reporte favorito, ventas brutas por título de producto. Puedo usarlo para ver rápidamente ¿cuál es el producto más rentable? ¿ Cuál es el producto más vendido? Entonces, eso informará a la publicidad, las ventas, ese tipo de cosas. También puedes usarlo para obtener reporte de tus impuestos sobre ventas. Si estás vendiendo en línea, bienes físicos tienes un impuesto a las ventas archivo, esto lo hace mucho más fácil. Entonces, tenemos descuentos. El motor de descuento. Si estás vendiendo por internet, en algún momento vas a terminar ofreciendo ventas. Entonces, intentemos agregar un código de descuento. Podemos inventar uno, SHOPIFYRULES, o como que me gusta esto para que se vean únicos, generen uno, y solo podrías hacer códigos de descuento aleatorios todo el día. Te permitirá limitarlos, todo tipo de configuraciones divertidas. Es bastante potente y hay más de uno, podrías hacer descuento una cantidad fija, descontar un porcentaje, ofrecer envío gratis. Y entonces también lo podemos hacer por todo, pedidos por encima de cierta cantidad. Si dices, gastas $50, obtén envío gratis, hazlo en una colección de mercancías o un producto específico, o podrías hacerlo por un cliente. Se podría decir, oye, te hemos identificado como cliente VIP, así que te estamos dando un descuento especial, o como forma de ofrecer al por mayor, es una buena manera de hacerlo. Tenemos nuestra tienda online. Tienda online es donde viven cosas específicas de tu tienda online. Esto confunde un poco a la gente, es porque hay más de un canal de ventas pasando. Yo lo tomo como un claro indicio de que puede haber nuevos canales de venta fuera en el futuro. este momento, las dos principales son Tienda Online y Punto de Venta. Ahí es donde van a vivir cosas realmente contenido específico del sitio web. Aquí, tenemos nuestra visión general. En una tienda en vivo, la visión general tendría tasa de conversión de visitantes, esos números divertidos. Pero aquí, podemos hacer a nuestras entradas de blog en vivo, podríamos hacer múltiples blogs, hablaremos de eso, páginas, y aquí es realmente donde queda claro que se trata de un sistema completo de gestión de contenidos. Podemos agregar páginas, y si lo abrimos, podemos ver a este editor wysiwyg, tenemos opciones de SEO aquí, podríamos establecer una fecha de publicación específica la cual es genial, puedes escribir una pieza de contenido ahora, tenerlo publicado en el futuro, poner las cosas en piloto automático lo cual es muy bonito. Y entonces puede que incluso tengamos diferentes plantillas de página, y vamos a sumergirnos en eso más adelante también. Navegación. Esto es genial, navegación. A la navegación en Shopify se refiere, abramos una tienda de ejemplo. Tenemos a estos tipos. Aquí está nuestra lista de enlaces principales, es ésta, y luego estos desplegable también son listas de enlaces, y luego si nos dirigimos al pie de página, esta es una lista de enlaces. Es sólo una manera realmente fácil de pensar en la navegación. Aquí, puedes editar esa lista de enlaces, aquí está nuestra lista de enlaces de pie de página, agregar otra, y mira eso. Al igual que recogimos producto de colección, lo hace muy fácil. Diremos, quiero enviarlo a mi blog, y el blog de noticias lo llamará blog, guardar. Actualizar la navegación nunca había sido tan fácil. Entonces tenemos dominios. Entonces, esta es una de las pocas limitaciones en la tienda de desarrollo. No puedes agregar un dominio a la tienda hasta que estés en un plan de pago, tienes que actualizarlo. Y eso está bien. No es una limitación terrible, realmente no detiene ningún tipo de pruebas. Pero veámoslo con bandas de everest rápidamente, cómo se vería en una tienda en vivo. Puedes comprar un nuevo dominio a través de Shopify, que lo hace extraordinariamente fácil y tiene un precio correcto, $13 al año, muy bonito, o, puedes agregar un nombre de dominio que ya posees, en cuyo caso eso es tan sencillo como, haces click, agregar un dominio existente, lo escribe aquí. Yo lo voy a hacer en una tienda en vivo. Entonces son solo dos registros que tienes que cambiar en tu DNS, uno por nombre A, uno por nombre C, no es gran cosa. Entonces podríamos elegir nuestro nombre de dominio principal si queremos hacer redireccionamientos, que todo vaya ahí, podemos activarlo o apagarlo, y luego también comprueba a este pequeño tipo de estado. Dice: “Oye, ¿configuraste DNS bien?” y eso es bonito y conveniente, se pone eso aquí. ¿Qué más tenemos? Entonces, dije que hacen canal de ventas múltiples, y seguro, mira esto, tenemos a Pinterest, Facebook aquí,
aquí también es donde aparecería nuestro punto de venta. Simplemente lo descompone. Es conveniente y agradable. Sección App. Boom, nos muestra todas las aplicaciones instaladas. Podríamos ver que esta tienda en particular tiene varias aplicaciones instaladas. Muy común que las tiendas hagan apps, y pueden ser cosas sencillas. Klaviyo, todo esto hace es mover a los clientes que aceptan marketing a una lista de email en Klaviyo. Es genial, es simple, ahorra un montón de tiempo, o algo es elegante,
Shipwire, que hace cumplimiento de pedidos, gestión de
pedidos para ellos. Entonces, claro, hay chico malo, Settings. Hay toneladas de configuraciones diferentes que podrías jugar con él, configura la tienda como quieras. No voy a correr a través de todos ellos. Llegaremos a ellos más tarde. Pero están dispuestas de una manera sencilla. Tienen sentido, y aquí tenemos todos tus datos de contacto. Vamos a sumergirnos en este tipo. Sí, cerremos tu demo. Boom. Pagos, donde elegimos nuestras opciones de pago, nuestros ajustes de check out los cuales son geniales, tal vez quieras ofrecer cuentas en tu tienda, tal vez no lo hagas. Podrías elegir lo estricto que eres cuando la gente está revisando. El plan actualizado incluso ha abandonado correos electrónicos de notificación de
pago incorporados, lo cual es muy agradable. Aquí, podríamos elegir si la gente está de acuerdo con el email marketing. Me gusta configurarlo por defecto, pero la opción no malvada es configurarlo para que no esté de acuerdo por defecto. Si estás haciendo seguimiento de tasa de conversiones en la página de agradecimiento, este pequeño fragmento nos da un lugar para dejarlo caer eso. Es genial. Entonces aquí para nuestra página de pago, tenemos unos términos de privacidad de reembolso de las políticas de servicio, y si no quieres pensar bastante en ellas, mira eso, generan muestras. No obstante, no soy abogado y estos no son asesoría legal, y al usarlos aceptas un descargo de responsabilidad de Shopify. Pero son un gran comienzo. Definitivamente léalos a través, reescribirlos, considera tenerlos revisados. Pero ayuda mucho tener esos ahí. Envío. Podríamos elegir nuestra configuración de envío aquí lo cual es fenomenal, e incluso hacer el envío de transportistas en tiempo real. A mí me encanta. Entonces vamos a sumergirnos a la Tienda Online. Tienda en línea, acabamos de dejar caer nuestro Google Analytics aquí. Ya que tenemos una tienda demo, podríamos protegerla con contraseña; título de la página de
inicio, meta descripción de la página de inicio, todo tipo de cosas geniales aquí. Está bien. Esa es una buena demo de nuestro back-end, de nuestra tienda de administración, de las diferentes cosas que hay ahí. Corrí a través de él un poco rápido porque vamos a sumergirnos
más en él en sesiones posteriores, pero ahora mismo, el primer paso de nuestra tienda siempre debe ser, elegir un tema. Tenemos nuestra tienda online, temas. Por defecto, instalaron una app llamada Launchpad-Star. Es gratis, está perfectamente bien, sin embargo, hay un 100 más temas gratuitos y premium si visitamos la tienda temática, y uno de ellos podría ser tuyo. Podrías construir temas personalizados, podrías escoger uno de estos temas y modificarlo. Podrías usar un tema gratuito, tema premium, lo que quieras hacer, tienes muchas opciones. Y realmente no hay mala elección aquí para los temas. Todos son bastante buenos sólo desplazándose por esto. Se podía ver que se ven muy bien, y aquí es donde los clientes necesitan tu ayuda. Se pueden abrumar, no
saben qué es un buen tema, qué escojo, qué se ajusta a mi marca, y luego ¿cómo lo configuro? Hay muchas opciones. El tema de configuración se puede poner muy juguetón. Eso es importante escoger. Un tema popular muy común, es el paralaje, así que busquemos eso. Aquí están los resultados para el paralaje, y todo viene con, esto confunde a la gente, viene con múltiples estilos. Parallax viene en cuatro estilos. No es obvio a primera vista, si compras uno de los estilos, en realidad
obtienes los cuatro, así que tienes alguna variedad ahí dentro. Los temas son muy flexibles en cuanto a colores, fuentes, maquetación, contenido. No van a parecer cortador de galletas. Como experto en Shopify, puedo ver y reconocer temas con bastante frecuencia, pero en su mayor parte, cuando le pones tu propia marca, no
van a parecer idénticos así. Siguiente paso que va a ser, para escoger un tema.
5. Productos y variantes: Está bien. Empecemos tanto agregando un producto aprendiendo un par de cosas técnicas que nos ayudarán a entender Shopify. Entonces, vamos a añadir un producto. Estoy en mi demo admin dashboard productos, agregar un producto y nos da este increíble editor WYSIWYG. Entonces solo voy a escribir camiseta de manga corta y mi descripción es, es super suave. En este momento no voy a subir una imagen solo para salvarnos alguna molestia. Vamos a establecer un precio sobre el,19.90. Se trata de un producto físico por lo que le cobraremos impuestos. Digamos que imprimimos estos bajo demanda para que no vamos a rastrear el inventario. Pero si quisiéramos, podríamos y podríamos decir que tenemos 10 e incluso elegir si queremos que la gente pueda volver a pedirlos o no. Pero por ahora diremos que no rastrearemos el inventario. Si lo deseas puedes agregar peso, si quieres hacer envíos basados en peso. Es un producto físico por lo que sí requiere envío y podríamos hacer camisas tipo. Esto nos ayudará a ordenarlo más tarde y nuestro vendedor va a ser Nike. Qué suerte tenemos de tener Nike. Aquí abajo tenemos etiquetas. Las etiquetas se pueden mostrar al cliente pero en su mayor parte las
usas para ordenar colecciones y hablaremos de eso un poco. Entonces, diremos verano de algodón vintage. Ahí vamos. Guardar producto. Podríamos agregar otro producto o verlo en nuestra tienda online. Vamos a verlo en nuestra tienda en línea y si nos desplazamos hacia abajo, tenemos nuestro tema predeterminado, y seguro lo suficientemente camiseta de manga corta, 20 dólares, agregar al carrito. Es súper suave. Entonces como magia, esta cosa que entré en el CMS como producto ha aparecido aquí. La mayoría de la gente va a estar contenta con eso. Pero echemos un vistazo rápido a cómo sucedió esa magia. Por lo que vamos a sumergirnos en el tema y vamos a buscar- vamos directo técnico. En nuestra página de temas, tenemos dos opciones, personalizarla, previsualizarla o editar HTML/CSS. Eso es lo que estamos haciendo. Nos vamos a grande enseguida. Vamos a bajar ento- así que una nota rápida sobre temas. tema.Líquido. Este es tu archivo maestro piense estos como en lugar de hacer- si has usado incluye con PHP, en lugar de hacer como un encabezado pie de página include, haces todo en teme.liquid y luego dejas caer tu contenido en él. Veamos si pudiéramos encontrar realmente dónde sucede eso. Aquí mismo. Comienza el contenido, y ahí está nuestro contenido de comando líquido para el diseño. Hablemos de lo que está pasando aquí. Cuando Shopify renderiza esta página, la página de SkillShareRemo o esta camiseta de ShirtSleeve, lo que hace primero se corre por teme.liquid el cual contiene nuestro encabezado y pie de página. Y luego basado en el tipo de página, va a caer en contenido para el diseño. En este caso, aquí ahora podríamos ver plantillas, bajar a producto.líquido. ¡ Boom! Aquí, es muy sencillo. Es solo incluir producto. Entonces, ¿qué significa eso? Incluye nuestros fragmentos. Si estás familiarizado con PHP o realmente con algún lenguaje de programación, has visto incluye. Entonces, abramos nuestra carpeta de fragmentos,
bajemos y hay product.liquid. Los fragmentos anidados pueden llegar a ser confusos pero la ventaja es que estás usando una metodología seca, ser
seco no te repitas. Entonces, si hay algo que hay que usar más de una vez en lugar de tenerlo por todo el lugar. Simplemente ponlo en un fragmento o úsalo y luego de esa forma
solo tienes un lugar donde tienes que mantenerlo y actualizarlo. Hace la vida fácil. Entonces, aquí tenemos, este es el HTML que se deja caer en nuestra página de producto y te lo dije antes, no
hay limitaciones en HTML/CSS podrías hacer lo que quieras. Pero descubramos qué tan dinámicamente está sucediendo esto. Sabemos que está uniendo estos fragmentos. Vamos a que sea un ejemplo. Tenemos una camiseta de manga corta. Bueno, ¿cómo llegó eso ahí? Tenemos que encontrar algo bastante sencillo: producto. y lo que puedes ver aquí es que podrías usar TextMe y GitHub y configurar flujos de trabajo de lujo. Pero en realidad el estándar, el editor de texto que está incluido en Shopify es bastante fantástico. Seguro, mira eso, fuerte y audaz product.title. Entonces, ¿qué nota de esto? Tenemos estas llaves a ambos lados que nos dicen que esto es líquido,
que esta es una sección de lenguaje programático que Shopify necesita ejecutar en el lado del servidor antes de que se lo ponga al cliente, al navegador web. Entonces, lo que está pasando aquí es que estos se llaman objetos canónicos. Producto es un objeto canónico en Shopify. Se refiere a la página en la que estamos y luego se agrega título de punto. Título de punto es una variable ahí. Una forma divertida de pensar en objetos canónicos u objetos en líquido, en Shopify, son como súper variables. Estas cosas son variables en esteroides, y tiene sentido. Tiene lenguaje natural para ello, producto. Sabemos lo que es eso, título de punto. Si no te lo hubiera explicado,
podrías haber adivinado exactamente qué hace esto y solo escupe nuestro título de producto, camiseta de manga
corta. Suficiente simple. Para demostrarlo como una demo digamos que vamos a añadir lenguaje aquí, título: guardar. Está bien, y vamos a revertir esto. Esta es una buena manera de probarlo. Mira, esto en realidad está en la miga de pan, es lo que estaba mirando. Título camiseta manga camisa. En realidad esa es una forma bastante rápida que solía probar cosas. Basta con escribir algo de lenguaje ahí dentro y buscar dónde cambia. ¿ Sabes qué? Debí haberlo averiguado porque mira esto. Fueron útiles lo comentaron, comienzan miga de pan y miga de pan. Guardemos eso y asegurémonos de que haga algún cambio allí. Refresca y aquí lo deja caer. Entonces eso es otra cosa bonita. Si estás editando en vivo así y tus cambios suceden muy rápidamente. ¿ Qué pasa si arruino ese cambio? Echa un vistazo a esto. Versiones antiguas, actuales, hoy. Mira eso. De lo que están haciendo, en realidad
hay versionado incorporado justo aquí. Te dije que esto es amigable con el diseñador. Tenemos un editor de texto en línea con versionado incorporado en él. Eso es fantástico. Mira eso. Solo hay grandes referencias variables líquidas. Entonces, estoy seguro, como pudo haber sospechado, hay más opciones en los productos que lo que te
he mostrado y para realmente conseguir un buen ejemplo de esos, llegamos a tener un par de fotos lo cual es fácil. Podemos arrastrarlos y soltarlos y sacarlos de URL o los vamos a agregar de la manera antigua. En mis descargas, tengo dos imágenes que he sacado de una camiseta negra y una camiseta. ¡ Vamos a subir esos y boom! Aquí aparecen. Podemos editarlos, agregarle todo el texto. Genial para los amigos SEL y cambia el orden y lo que sea la primera imagen se convierte en tu imagen predeterminada. En cuanto al cambio de tamaño, cualquier tema configurado correctamente va a cambiar el tamaño de esas imágenes sobre la marcha para ti. Entonces veamos qué tenemos aquí. Aquí abajo hay variantes. Las variantes son como opciones de producto. En el caso de una camiseta, me gustaría escoger talla y color. Entonces, intentemos agregar variantes. El primero tenemos tamaño, por defecto lo, genial y tenemos que sumar nuestras opciones. Voy a decir pequeño. Están separados por coma. Tan pronto como tu coma simplemente lo agrega medio, coma L para grande, coma. Tenemos pequeño, mediano, grande. Entonces otra opción, el color. En nuestro caso tenemos negro y rojo, y ahí tenemos nuestras opciones. Podría cambiar el precio por opción. Asegúrate de tener diferentes SKU o códigos de barras si tienes algún tipo de sistema de inventario configurado pero esos son campos obligatorios. En nuestro caso, van a ser el mismo precio y el mismo todo el camino. Entonces vamos a guardar eso y a ver qué pasa. Crea mesa realmente bonita para nosotros y lo que me gusta de, hace que sea fácil de actualizar. Entonces, digamos que quería cambiar los precios en solo las playeras pequeñas tal vez cuenten más hacer. Entonces, seleccionamos S y miramos eso. Muestra camisetas pequeñas e incluso tienen acciones a granel. Enfriar. Podría cambiar precios para que haga esos 18 pavos. Cuestan más hacer. Ahora los 21 pavos. ¡ Boom! Mira eso. Pero hay algunas precauciones con variantes. Aquí tenemos pequeñas, medianas, grandes, negras y rojas lo que ha dado como resultado 1, 2, 3, 4, 5, 6 opciones. No puedes tener más de 100 opciones. Cien es la gorra y luego barba. Te detendrá. Ya no te dejará crear. Combinaciones totales de cosas puede tener más de 100. Entonces, esa es una limitación. Ahora hay apps y diversas travesuras de programación que puedes hacer para evitarlo pero
por encima de la caja, esa es la limitación. Entonces una cosa a tener en cuenta. Además de eso, también
estamos limitados a cuatro opciones. Entonces si quiero agregar otra opción, podría hacer material, quiero decir algodón guardar y editar opciones. Eso es todo. Perdón, dije que eran cuatro. Se trata de tres opciones. Sólo se podía hacer con tres opciones. Eso está bien. Entonces tenemos nuestro material aquí dentro. Echemos un vistazo a eso como lo ves en la tienda online. Ver, se descompone en diferentes cajas de gota y no todos los temas hacen esto. Podrías mostrarlos de diferentes maneras, decirles lo que sea. Pero cuando cambiamos el negro a rojo, cambiamos el tamaño o los cambios de precio. Enfriar. Cuando cambiamos el negro a rojo, aquí no cambia. Hay una manera de hacerlo. Se llama imágenes variantes. Entonces, vamos a seleccionar, nuestro negro es el predeterminado aquí, vamos a seleccionar rojo, Acción
a granel, Actualizar imagen, haga clic a este chico, guardar. Ahora mira lo que pasa aquí. Vamos a refrescar nuestra página. Tenemos buen color negro, rojo. Ah, bien. Eso es fantástico. Se cambia y luego por supuesto nos gustaría hacerlo para el negro también. Tan mismo trato. Haga clic allí, seleccione negro, actualice imágenes. ¡ Boom! Entonces pudimos ver esas son imágenes muy nuevas y vamos a probar. Negro, rojo, negro. Es genial. La ventaja aquí es que el cliente sabe exactamente, les confirma que están comprando lo correcto. Especialmente si hacemos cosas de lujo, la imagen o el producto puede estar incluido en el correo electrónico, puede ser incluido en la página del carrito y esto sólo les va a tranquilizar que sí, estoy consiguiendo el producto correcto. Seleccioné negro, me estoy sacando una camisa negra. Es una bonita adición para incluir ahí dentro.
6. Colecciones: Entonces, una vez que hemos agregado productos a nuestra tienda necesitamos una forma de clasificar esos productos. Aquí está Dodocase. Dodocase tiene toneladas de productos. Si vemos todos sus productos a la vez obtenemos esta interminable cosa inútil, 88 páginas de productos. Entonces, tenemos que ponerlos en algo. Probablemente estés pensando bien, podríamos ponerlos en categorías o la versión de categorías de Shopify es más inteligente. Se llaman colecciones y hay un punto clave. Si has utilizado otras plataformas de comercio electrónico cuando
piensas en colecciones crees que puedes anidarlas para organizarlas. Shopify ha reinventado eso y les llaman colecciones. Y no anidan colecciones, es solo una agrupación lógica de productos. Entonces, es un poco diferente y se oye que tienen - en el manual de Shopify, hablamos de colecciones. Te dan un par de ejemplos de cómo podrías hacerlo pero un par de notas. Una colección se puede ordenar manualmente donde solo pones productos en ella que es como esperarías categorías similares a la forma en que funcionan las categorías y otras cosas, pueden ser inteligentes. Entonces hay todo tipo de formas de arreglarlo, lo cual es divertido y nos meteremos en eso. Los productos pueden aparecer en diferentes colecciones, funciona bien. Entonces, echemos un vistazo a Dodocase y veamos cómo lo hicieron. Aquí, Dodocase vende estuches para iPhones y iPads y los agrupan por el dispositivo que es inteligente. Pero entonces si bajamos al pie de página podemos ver que también los han agrupado, aquí lo tenemos repetido de nuevo. Si vamos por ahí los han agrupado por materiales. Entonces aquí te dejamos cuero, lona de cera, una guía de regalos, una guía de regreso a la escuela. Esas son probablemente las páginas de aterrizaje o los esfuerzos de SEO. Pero todas las formas inteligentes de agrupar lógicamente estos productos dependiendo de cómo compre la gente. Entonces, echemos un vistazo a dónde viven esos en nuestro admin. Si nos dirigimos a nuestro administrador de Shopify y bajamos a productos. Y aquí he importado 10 productos de muestra si quieres usar estos en las pruebas puedes agarrar el CSV de la madera GitHub. Entonces, rápidamente
buscaremos eso para que sepas de lo que estamos hablando y puedas seguir adelante. La madera es un marco, es un tema de demostración que lo usarías si estuvieras construyendo temas personalizados. Es muy bonito. Y si nos dirigimos hacia abajo, tienen productos de demostración aquí. Entonces, tiendas de demostración para un conjunto de productos de demostración para usar durante el desarrollo, descargue el archivo CSV e imórtelo. Y eso es lo que he hecho aquí. Entonces si quieres seguir y hacer lo mismo, descarga ese archivo click importar aquí y puedes agregar el archivo y aparecerá un minuto más tarde. Pero está bien. Una vez que estemos en productos, dirígete a las colecciones y luego aquí es donde viven las colecciones. Entonces, ahora que hemos visto y explicado qué hacen las colecciones y para qué sirven, intentemos hacer algunos ejemplos prácticos de ello. Aquí lo podías ver mi inventario He añadido algunos productos de ejemplo para que tengamos cosas que ordenar. Tenemos una colección de zapatos, tienen diferentes títulos y luego bajo tipo, todos los
hemos etiquetado “Kicks” vamos a llamar a nuestros zapatos “Kicks” y luego de esa manera si empezamos a vender calcetines, los llamaríamos calcetines tipo o camisas tipo camisas. Y luego bajo vendedor, todos
son Shopify excepto que el primero es tetes. Ahora encabezémonos debajo de dos colecciones. Entonces, aquí tenemos front page front page es una colección por defecto. Se utiliza para que puedas agregar productos destacados a la portada de tu tienda y si hacemos click en
ella, debería ser una colección manual. Está bien, entonces, solo tiene que saber manual es muy tradicional muy típico. Se pueden agregar productos de forma manual. Los únicos productos que aparecen en él son los que han sido seleccionados manualmente ya que están destacados. Y luego podrías elegir cómo se ordenan. Entonces, lo más vendido es muy cool porque se auto optimiza para que como un producto se vende mejor
se mueve a la parte superior de la lista y seguirá vendiendo bien. Alfabéticamente ascendente descendente por precio del curso y fecha todo ascendente descendente o manualmente. Cuando seleccionamos manualmente, obtenemos este bonito pequeño mango y luego podríamos elegirlo así, que lo hace fácil y luego también podemos agregar ya sabes que tenemos nuestro título y nuestra descripción y nuestra imagen. Entonces, vamos a guardar eso y vamos a añadir nuestra propia colección. Añadamos colección de menús. El mismo trato diremos los zapatos favoritos de Kurt. Está bien. Podría hacer manualmente seleccionar productos y además no dirá nada hasta que guarde. Ahora puedo agregar mis productos. Por lo que tan pronto como lo haces, obtienes este bonito consejo
de herramienta te muestra tus productos o puedes filtrar. Si sólo quiero ver los zapatos etiquetados cool popps ahí adentro. Entonces vamos a sumar esos zapatos y otros dos, ahí vamos. Entonces, se podría ver que es Ajax, es dinámico, es rápido, es muy fácil súper fácil para los clientes de usar súper fácil para que usted use. Descripción, esto hace que sea muy fácil hacer páginas de aterrizaje. Puedes añadir tu título, añadir tu descripción. que pudieras decir, “Oye, guía de regalos para zapatos de hombre guía de regalos para 2015”, agrega tu título, tu descripción, una bonita imagen si el tema lo soporta. Pon tus productos ahí dentro y tienes una página de aterrizaje. Entonces vuelve a ponerlo en bestseller y tenemos una página de aterrizaje autooptimizadora. Entonces sabes que eso es muy tradicional, muy típico cómo esperarías que las colecciones funcionen aquí. Pero hay una mejor manera más inteligente de hacerlo. Entonces, vamos a añadir otra colección. Para esto diremos, “Zapatos menores de 200 dólares”. Entonces aquí diremos nuestras zapatillas favoritas por debajo de 200 dólares. Está bien. En realidad, diremos nuestras patadas favoritas por debajo de los 200 dólares. Condiciones automáticamente como el valor predeterminado. Entonces tenemos productos deben coincidir con todas las condiciones, cualquier condición. Ya que hemos dicho que es para zapatos menores de 200. Tenemos un par de variables diferentes que podríamos escoger aquí. Título, tipo, proveedor, precio, etiqueta, etiquetas son una buena manera realmente de poder ordenar productos en colecciones o para que los clientes vean si lo exhibes en la colección. Pero en su mayor parte los uso solo para conseguir una clasificación más fácil de fantasía. Nos sumergimos en otro uso para etiquetas con filtrado precio comparado, comparar precio es MSRP,
peso, stock de inventario, título de varianza. Entonces, hagámoslo en este caso, dijimos que es por debajo de 200 dólares, así que diremos que el precio es menor que- tenemos a todos estos grandes operadores de lingotes menores de 200. Si hacemos clic en guardar colección ahí vamos, todos nuestros zapatos los que están por debajo de los $200. Entonces podemos ver que funciona si quieres probarlo digamos es mayor a 200 guardar aha! Entonces, todos desaparecen. Entonces, volvamos a es menor que y vamos a averiguar la diferencia entre todas o cualquier condición. Entonces vamos a añadir tenemos título del producto. Cambiaremos a contiene y diremos impresionante, Guardar. Entonces, lo que está pasando aquí es que sólo va a mostrar los zapatos que se titulan impresionantes y son menos de $200 frente a si lo cambiamos a cualquier condición y golpeamos save. Se va a enumerar todos nuestros zapatos porque todos son menores de 200 y uno dice impresionante. Entonces, es la diferencia ahí. Puedes hacer estos- te puedes enloquecer. Pero puedes hacerlos bastante complicados y granulares. Pero la ventaja aquí otra vez es que es automático. Entonces, no tienes que estar agregando productos manualmente a cada colección. Eso es útil a medida que te metes en ordenar las cosas de diferentes maneras dependiendo de cómo compre la gente. Entonces, podrías hacer si estuvieras vendiendo camisas, quizá
quieras agruparla por género hombres versus mujeres. Pero entonces también hazlo por colecciones. Se podría decir el tipo de camisa, manga
corta versus manga larga. El mismo producto aparecería en múltiples categorías y no quieres tener que ser- cada vez que actualices el inventario, tratando de recordar agregar esto a múltiples colecciones y colecciones, las colecciones
automáticas hacen todo eso posible. Entonces por supuesto podríamos ordenar aquí pero echar un vistazo a cómo se ve eso en
nuestro sitio en vivo muestra ahí está el título de la colección, la descripción de las colecciones, aparecen los productos y luego este tema es agradable. Admite mostrar los filtros de clasificación no todos hacen eso pero por defecto es el que hemos mostrado aquí. De acuerdo, entonces, aquí estamos de vuelta en nuestros zapatos menos de $200 de colección y si eres astuto tal vez hayas notado esta nueva barra lateral aquí esta tienda por. Entonces, estoy dentro de una colección y podría elegir comprar por color o material. Entonces, aquí escogeré negro y sigo en mi colección, pero solo está mostrando zapatos negros. Esto es fantástico. Es una gran manera de poder ordenar a través de los productos, hacer la vida fácil. Pero sabes una de las cosas que mencioné antes que a veces molesta a la gente es las colecciones no son como categorías específicamente que no se pueden anidar colecciones, lo que inicialmente crea problemas para la gente porque están acostumbrados a estas colecciones anidadas. Pero tenemos una opción mucho mejor y eso es filtrar por etiqueta. Y aquí he cambiado al tema de suministro, es un tema gratuito en la tienda temática y hablaremos de eso más adelante también. Pero tiene esto tiene una característica incorporada en ella. Este filtro por etiqueta cosa. Entonces, veamos cómo configuramos eso. Tengo mis productos aquí y tienes que llegar
a una taxonomía consistente que vas a usar y no puedes simplemente agregar aleatoriamente etiquetas a las cosas porque este tema es automático. Escupirá todas las etiquetas de un producto. Entonces, necesitas ser consistente. Entonces, vamos a escoger nuestro este par de zapatos patadas frescas y aquí está el zapato. Una taxonomía bastante típica que me gusta usar es el material de color cuando estás tratando con ropa que es muy fácil. Estos zapatos son negros. Entonces, ya los he etiquetado negros y también tienen tal vez tengan gris en ellos. Podrías hacer múltiples etiquetas para que pudiéramos decir gris y una de las cosas que ayuda con mantener esa taxonomía consistente es que Shopify auto te sugiera cosas que ya has usado. Entonces, aquí puedo ver los zapatos son de cuero. Voy a empezar a escribir mi material. Mira, el cuero aparece como una sugerencia. Haz click y ahora te puedo si selecciono filtro por cuero, va a aparecer. Entonces, vamos a ahorrar y yo regrese vamos a refrescar esta página y vamos a recoger zapatos de cuero aha! Hay como patadas frescas cuero negro y rojo lo cual es realmente bonito. Es muy servicial. En cualquier momento podemos hacer que sea más fácil para los clientes perforar hacia abajo para encontrar lo que quieren hacer que sea más fácil en el dueño de la tienda
poder tener estos productos ordenados y aparecer como geniales. También hay otra cosa que podemos hacer con las etiquetas. Veamos colecciones. Entonces, digamos que quería hacer una colección llamada zapatos de cuero zapatos de cuero lo llamaremos zapatos de
cuero y diremos zapatillas hechas con cuero genuino. Ahora vamos a decir automáticamente seleccionar productos en función de las condiciones porque es una colección inteligente. Los productos deben coincidir haremos todas las condiciones aunque ya que solo estamos eligiendo una, no importa en este momento. Y siempre podemos revisar eso más adelante. Etiqueta de producto es igual a cuero, incluso auto lo completa para mí. Entonces, hacemos click guardar y ahora sin mucho esfuerzo de mi parte, debería tener una colección de zapatos de cuero que se actualice automáticamente con todos mis zapatos de cuero. Entonces, echemos un vistazo. Ahí vamos. Tres zapatos, todos con cuero, funciona. Muy cool y también puedes ordenar en navegación de esa manera en búsquedas y colecciones. E incluso para- no necesariamente tiene que ser para el cliente. Si filtro productos en mi propia tienda, podría hacerlo etiquetando con. Entonces, podría usar alguna taxonomía interna para eso. Hace la vida fácil. Pero nuevamente la clave aquí es solo para ser consistente, llegar a un sistema que usarás para tus productos. Eso va a cambiar dependiendo de la tienda.
7. Páginas y blogs: Está bien. Entonces, algo común que cada sitio web necesita son páginas, eso se basa internet, páginas. Había mencionado que Shopify es, derecho propio, un sistema de gestión de contenidos, pero no sólo
para productos, también para contenidos, contenidos. Entonces aquí, tenemos una página Acerca de Nosotros. Toda tienda tiene, podría llevar a la página Acerca de Nosotros, FAQ, políticas de envío, políticas de devolución, una página de contacto. Esas son páginas de contenido. Entonces, si nos dirigimos a nuestro administrador, y hacemos clic en tienda online, páginas, aquí están. Entonces, ya hemos editado nuestra página Acerca de Nosotros, y mira eso, título Acerca de Nosotros. Nuestra gran página Acerca de Nosotros nos ayuda a construir confianza, de hecho lo hace. Entonces, lo actualizaremos, llamémoslo About Us Demo, y luego vamos a agregar o reemplazar esta línea, y diremos llámanos con cualquiera, si puedo deletrear, llámanos con cualquier pregunta, guarde. Es fácil, quiero decir, editarlo, es muy sencillo. Podemos ver que es el mismo editor WYSIWYG. Podemos agregarle imágenes, insertar imágenes. Agarrará imágenes de producto o puede subir otras nuevas, como imagen de producto. También cambia el tamaño de las imágenes sobre la marcha, lo cual es muy conveniente. Entonces, quiero agregar una imagen media,
insertarla, y luego qué es genial también, si hago doble clic en ella, tengo mucho un editor de CMS y WYSIWIG adecuado. Podemos agregar nuestro texto alt para SEO. Vamos a poner nuestro contenido a su alrededor. Mira eso, flota a la izquierda. Es muy bonito, así que guárdalo. Echemos un vistazo a lo que pasa ahí. Exactamente lo que esperarías, cómo esperarías que funcionara. Entonces, tenemos la descripción de nuestro motor de búsqueda. Todas nuestras páginas aquí, hagámoslo. Podríamos seleccionar, productos hacer esto, publicación de blog hacer esto, y tenemos, podrías elegir un título de página separado para SEO o meta descripción. De lo contrario, solo va a llenar eso automáticamente forma dinámica
en función de tu contenido. Entonces, incluso puedes configurar el manejador de URL. Hablaremos de manejo de URL más adelante, cuando hablemos de algunos elementos de tematización. Entonces, también podemos establecer, esto es muy cool, visible versus oculto. Entonces, podría ponerlo a oculto, digamos que esto era una venta y podría decir fecha de publicación específica, y podría elegir una fecha y hora en el futuro, y luego en ese momento, se publicará automáticamente, lo cual es muy bonito. No algo que uses terriblemente a menudo, pero cuando lo haces, es agradable tener. Entonces, vamos a asegurarnos de que siga ahí, muy bien. Echemos un vistazo a la adición de una página. Si hago clic en Agregar página en la pantalla de páginas, igual que crees que funcionaría, FAQ. Vamos a poner algunos en algún contenido de muestra. ¿ Aceptas devoluciones? No, yo no. También puedes, si te sientes rana, puedes hacer HTML directo ahí dentro. puede ver que hace justo limpio bonito HTML semántico. Es muy bueno, hasta donde van los editores de WYSIWYG. Entonces, vamos a guardar esa página y verla. Suficientemente, como la magia, aparece. Es muy bonito, muy fácil, increíblemente fácil, y rápido de hacerlo. Ahora, la única salvedad con páginas, y esto es menor, es las páginas y los blogs son diferentes. Esto a veces puede confundir a la gente. Entonces, una página es
realmente cualquier pieza de contenido estático que no es un producto y no una colección. Un blog es diferente. Entonces, tenemos, de nuevo, funciona exactamente como piensas. Es sólo nuestros posts con fechas. En realidad, la diferencia fundamental aquí es sólo que nos da esta página de índice, donde crea estos fragmentos de publicaciones. Porque una vez que ves una publicación completa, es muy similar a una página estándar. Una cosa genial aquí, lo editas en publicaciones de blog, y es exactamente lo mismo. Agrega una entrada de blog, la diferencia aquí, podríamos especificar nuestro extracto. Entonces, esta parte de aquí es el extracto. Si no lo haces, en realidad simplemente lo truncará por ti, hazlo automáticamente, igual que pensarías que una plataforma de blogs adecuada debería funcionar. Entonces, también podrías elegir al autor y esas son personas que son otros usuarios en la tienda, otros miembros del personal. Entonces, también podemos usar páginas en línea, podemos agregar etiquetas, y luego eso se puede usar para filtrar rápidamente a través de ella o en muchos temas, se mostrará en la barra lateral, lo que aparecería por los artículos recientes en este tema. En realidad puedes crear múltiples tipos de blogs. Entonces, aquí, tenemos noticias. Podría crear otro llamado ventas, para que así pudiéramos separar un blog, que uno es anuncios de producto y el otro solo podría ser ventas. Entonces, elige esto, podríamos hacer que los comentarios estén desactivados, los comentarios están permitidos, la moderación
pendiente, y los comentarios están permitidos, y se publican automáticamente si realmente quieres vivir peligrosamente. Entonces, diremos que se permiten comentarios, pendientes de moderación. Decir publicación de blog. Entonces, ahora, tenemos gestionar blogs, tenemos noticias y ventas. Entonces aquí, tenemos dos blogs diferentes que podemos ejecutar en la tienda. Probablemente muy pocas tiendas van a usar múltiples blogs, pero es bueno saber que esa opción está ahí. Entonces, tenemos páginas. Entonces, aquí es donde va a vivir nuestro contenido estático, donde la mayor parte de nuestro contenido y cuando creamos inicialmente la tienda,
y luego se actualiza con el tiempo sobre nuevos productos, anuncios, esas cosas, probablemente seguiremos viviendo en blogs. Está bien. Hablemos de dos partes simples,
fáciles pero increíblemente importantes de nuestra tienda de Ecommerce y ese es el carrito y la caja. Entonces, aquí estamos viendo una maravillosa tienda llamada Tattly que vende tatuajes temporales de diseñador de lujo. Algunos de estos negocios que encuentro en Shopify son fenomenalmente cool y este es uno de ellos. Entonces, aquí tenemos nuestra página de productos, yo agrego al carrito, ahora, vamos a ver qué pasa. Nosotros Añadir al carrito y nos lleva directamente al carrito, que es un buen comportamiento por defecto en muchos temas. Por lo que puedo decir, sí mejora el checkout. Entonces, funciona exactamente como esperarías que lo hiciera. Su muy convencional, y eso es bueno, convención en comercio electrónico es buena. Entonces, tenemos algunas cosas aquí dentro. Tenemos un listado de nuestros artículos. Entonces aquí, tenemos el uno y tenemos un pequeño adelanto, el tema variante por defecto, nuestro precio, nuestra cantidad, podemos quitarlo y nuestro total. Aquí, han hecho una personalización, han agregado esa nota. Hacemos todo lo posible para procesarlo, solo muy agradable. Entonces, también tienen envoltorio para regalo, que es una modificación y la opción de confeti,
así que agreguemos, haga clic en envoltorio para regalo y veamos cómo funciona eso. Entonces, hay una modificación común que hicieron aquí. Agregaron, sólo le agrega otro producto. Lo apagaremos. Ah, mira eso, funciona muy bien. Entonces, entonces, aparte de eso, este es un checkout de carrito estándar. Tenemos nuestro carrito aquí arriba, muestra nuestra cantidad,
nuestros botones de chequeo de actualización, total, y el campo de notas, cualquier solicitud especial para su pedido. Si alguien llena
eso, aparecerá como una nota en la orden, y todos los temas tienen esto ahí dentro por defecto. Entonces, está bien. Veamos qué pasa cuando hacemos clic en checkout. Nos lleva a esta página. Aquí hay una nota importante. Si notas lo que pasó, el nombre de dominio ha cambiado, ahora
estamos en Shopify, checkout.shopify.com. Genera una URL única y eso es agradable. El URL único guarda la caja de la persona como una sesión. Es seguro, es SSL y por eso realmente hace esto, qué cambias el nombre de dominio. Si lo deseas, puedes usar una tienda Shopify Plus y Shopify Plus usará un nombre de dominio regular. Pero para todo lo demás, para la mayoría de las tiendas, va a ir a checkout.shopify.com. Una de las cosas bonitas de Shopify es que el proceso de checkout se basa en datos, estudios, y un gran diseño de todas estas diferentes tiendas. Para que sepas que se convierte bien y es proceso de checkout muy sencillo. Entonces, solo lo modificas, para que el branding coincida con tu tienda. Puedes agregar, han agregado una imagen de banner, el logotipo, y luego podrías establecer los colores y las fuentes. Entonces así lo sabes mata esa disonancia cognitiva, cuando terminamos en checkout.shopify.com. Aunque se cambie el nombre de dominio, todavía
sé que esta es muy claramente la misma marca, la misma tienda. Tenemos tarjetas de regalo o códigos de descuento aquí, lo cual es bonito, funciona perfectamente. Entonces, tecleemos algo de información y veamos qué pasa. Pondremos un par de cosas aquí, Kurt Elster, dirección. Si quieres enviar un correo electrónico, esta es mi dirección de trabajo real. Si quieres enviarme un regalo por correo, siéntete libre. Entonces, este es el paso uno del carro. Continuar al método de envío y aquí está el paso dos del carrito. Entonces, tenemos nuestros métodos de envío aquí y esto es inteligente. Recomiendo que la gente haga esto como una mejor práctica. Han puesto ahí el tiempo estimado de barco. Es algo común. Todo el mundo quiere saber qué tan rápido voy a conseguir mis cosas, estoy emocionado. Es así como la gente hace el juicio si deben actualizarse. Si de verdad no puedo esperar de tres a seis días para hacerme mis tatuajes temporales, voy a pagar los 7.50 extra y voy con prioridad USPS. Entonces, hago clic en continuar al método de pago. Entonces, aquí, podría poner la información de mi tarjeta de crédito. Existen varios procesos de pago que puedes usar o pagos de
Shopify procesarán tarjetas de crédito por ti, y luego también tienen PayPal integrado aquí. Por supuesto, igual que el envío, igual que la facturación, suscríbete a nuestro boletín de noticias. Entonces, si lleno esto y hago clic en orden completo, me llevaría a una página de confirmación y eso sería todo, pero es un checkout unificado estándar que crea convención,
tradición, y en última instancia impulsa las conversiones, pero funciona muy bien, me gustó mucho. Ahora bien, esta página, realmente tienes muy poco control sobre, a menos que, por supuesto, estés en el plan Shopify Plus. Puedes elegir si querías modificar, para editar esta página. Realmente no puedes hacerlo más allá de los colores, las fuentes, ese tipo de cosas versus el carrito. Esto es parte del tema, realmente
puedes, si quisieras, podrías modificar esta de cualquier manera que vieras caber, HTML o CSS soportando. Pero en cuanto haces clic en checkout, y terminas en esta página, checkout.shopify.com, no
tienes, de nuevo a menos que estés en lo de Shopify Plus, no
tienes acceso a la plantilla líquida para esto. Está bien. Entonces, donde tomé orden para ellos, obtendrían notificaciones, y luego aparecerá en órdenes aquí. Entonces, así funciona la compra de cosas y la solución SSL alojada que están usando.
8. Explicación de temas y Liquid: Está bien. Vamos a hablar de lo que puede ser probablemente la parte más importante de la tienda para diseñadores, para el cliente, para todos, los Temas. Y Shopify está creado para nosotros, este tipo Timber. Y Timber, digamos que se lo puede pensar como bootstrap de Twitter para Shopify. Se trata de un marco, un recurso de buenas prácticas a utilizar al desarrollar un tema para trabajar con él. Puedes conseguirlo, es gratis de Shopify.Github.IO/madera que está en GitHub, por lo que lo están actualizando regularmente es un recurso útil. Entonces, ya me adelanté y lo instalé en nuestra tienda
Theme, y hay dos formas de agregar temas a una Theme Store. Podrías visitar Theme Store, la tienda oficial de temas, elegir un tema aquí y hacer clic en Instalar tema, y Shopify lo hará por ti automáticamente, o si tienes un archivo zip, solo
podrías comprimir tu tema arriba, tema de subida
rápida y subirlo. Esto es bueno si tienes un tema personalizado, estás modificando un tema, o exportaste el tema como una copia de seguridad y lo estás reimportando. Hay varias razones por las que subirías el tema directamente a tu tienda. Entonces aquí, tengo a Timber y quería guiarte a través de lo que hay en un Theme. Entonces, desde el usuario final, la perspectiva del cliente, es como va a hacer que se vea la tienda. Entonces, pudimos ver que aquí está la vista previa, aquí el frente en vivo y renderizar esta cosa, y el panel de ajustes del tema. Panel de configuración del tema son opciones, son cómo alguien puede elegir fácilmente su logotipo, en el encabezado por ejemplo, e incluso editar los colores y cosas que aparecen en el proceso de pago. Eso es lo que entra en el tema, si eres el usuario final. Como desarrollador diseñador, si hacemos clic en este chico, este botón de puntos suspensivos y
elegimos Editar HTML/CS, vamos a ver el interior del tema. Y lo descompone en estas carpetas, y no tenemos control sobre las carpetas, y eso está bien, porque significa cada tema cuando entras a una tienda, va a ser lo mismo. Vamos a ir de arriba hacia abajo con él. El primero es Layout, hay tema.líquido. Y theme.liquid es nuestro punto de partida, todos nuestros otros archivos se van a renderizar dentro de este archivo, este a menudo será nuestro pie de página de encabezado y luego la plantilla o contenido se renderiza dentro de él. Y nunca he visto un tema que tenga más de un layout aquí, siempre
es solo tema.liquid.. Iiquid es nuestra extensión, lo que significa que estos son archivos que se van a ejecutar del lado del servidor antes de que
se pasen al usuario final. Entonces, .liquid es equivalente to.php. Y luego tenemos plantillas. Las plantillas se refieren al contenido, la página que se va a renderizar dentro nuestro archivo teme.liquid dependiendo de lo que sea. Y vamos a desplazarnos hacia abajo en tema.liquid si pudiéramos encontrarlo, buscar contenido línea 296, contenido para maquetación. Entonces, cuando se renderiza, se solicita
una página a Shopify, agarra theme.liquid y luego inserta la plantilla apropiada en este espacio contenido para el diseño. Tenemos diferentes plantillas dependiendo de lo que estemos haciendo. Y son bastante claros, bastante obvio lo que son, como 404 obviamente, es para archivo no encontrado, artículo para artículos, foro para blog, lista de colección de
carros, vamos a ver, podrías ver todo para mostrar colecciones/todas. Entonces si has permitido la creación de cuentas, tienes cuenta de clientes, creando sus direcciones de cuenta, clientes registrando pedidos etc., página de tarjeta de
regalo y tenemos index.liquid, esa es nuestra página de inicio, lista colecciones la cual es una lista de colecciones, y aquí tenemos colecciones y productos, esta es opcional. No necesariamente se requiere cada plantilla que está aquí. Página y página.contact, nos meteremos en lo que es, product.liquid, por supuesto nuestra página de producto,
y la página de búsqueda o búsqueda. Aquí descremas y ves tenemos page.liquid que es una pagina, y la página.contact. De lo que es, es una plantilla alterna, tienen páginas o página estándar. Y luego si nos fijamos en page.contact, es una página requerida por Shopify para tener una página de contacto. Pero esto es sólo una variación en una página con un formulario de contacto atascado en ella. Y para blog, para página de artículo de blog, producto, colección, puedes tener múltiples plantillas para esas páginas, por lo que, no
estás limitado a una sola cosa, y eliges eso en la página en particular o, podrías establecer qué plantilla que utiliza manualmente. Entonces, bajamos a Simppets. Los fragmentos son geniales, son incluye. Si tienes la pieza de lógica,
pieza de contenido, HTML lo que sea, pondrías eso dentro de un Slippet, y entonces puedes llamar a eso repetidamente en las páginas. mostrar un grupo de productos, puede hacerlo en productos de funciones en la página de inicio, definitivamente en una página de colección, posiblemente en un carrito vacío o página 404. Te gustaría poner la lógica para eso en un Slippet aquí dentro, y luego podrías simplemente llamar a eso como incluirlo repetidamente. Y entonces de esa manera, si tienes que actualizarlo, lugar de actualizarlo en cinco lugares diferentes, lo
actualizas una vez y luego se actualiza en todas partes. Muy conveniente. Y eso es parte de usar un método seco, ser
seco, no te repitas. Después pasamos a Activos. Activos es muy sencillo, son las imágenes, JavaScript, archivos individuales CSS que el tema va a usar. Si tienes lógica ahí dentro que necesita renderizarse, estos pueden ser archivos líquidos pero no tienen que serlo. Aquí, sólo tenemos modernizr, sólo
tenemos un minuto de fibra al modernizr aquí dentro, y esto sólo se servirá como está intacto. Pero entonces, nuestros archivos de activos regulares, tenemos algunos gráficos vectoriales aquí, incluso en un archivo HTML, y parece que estamos usando una fuente de icono. Muy cool. Aquí tenemos un timber.scss,
entonces, Shopify compilará, renderizará con Sass, cual es conveniente así, puedes usar eso. Sass está compilado en el servidor Shopify, no
necesitas meterte con él y hace algunas cosas bonitas. Si quieres hacer tu vida más fácil, quieres usar variables ayudantes, puedes usar esa configuración de tema, es conveniente. Muy bien, vamos a cerrar esa carpeta de activos. Haciendo más simple aquí config, configuración de datos, luego estableciendo esquema. Entonces, si miramos a este tipo, esta es esa página personalizada que te mostré, aquí personalizar tema. Esto es lo que se va a renderizar aquí para que el usuario final lo use, y también es donde vamos a almacenar esas cosas. Ahora aquí hay un preset atascado aquí. Por lo que tenemos un preset llamado default, y se almacena ahí dentro. Entonces por último tenemos locales, locales es como manejas la internacionalización. Entonces, como adivinaron, este tema viene en alemán, inglés, francés, y creo portugués, pero definitivamente es esto de aquí, mirarlo es su propio entorno, que hace la vida fácil. Podrías construir trabajo sobre el tema del usuario enteramente aquí. De acuerdo, hasta ahora, las cosas han sido todas divertidas y juegos, dando
clic y fácil de usar interfaz. El sencillo sistema CMS, un buen editor WYSIWYG en la selección de temas. Hablamos un poco de lo que hay en un tema, y ahora es momento de ensuciarse con Liquid. Liquid es un lenguaje, basado en Rubí, que escribió Shopify,
está ahí fuera está en otras cosas ahora, y en realidad no da miedo en lo más mínimo. Entonces veamos, aquí tenemos nuestra página de productos de nuestro tema aquí. Se renderiza, pero ¿cómo sucedió? Entonces, si miramos en nuestro tema, tenemos product.liquid, eso no es complicado y sabemos product.liquid es nuestro archivo de producto. Siempre que llamamos página de producto, Shopify busca productos.líquido. Dentro de ese archivo, si nos desplazamos y lo miramos, es solo HTML, no hay nada loco que no hayamos visto antes, solo HTML. Pero entonces, nos preguntamos
: “Oye, ¿llegó la descripción aquí?” Entonces aquí mira, línea 116, tenemos a este tipo, product.description, y estoy seguro que puedes adivinar qué hace eso. Es la variable que pone en producto, pero para diablos,
vamos a comentarlo, guardar, y refrescar la página del producto. Y bastante seguro, y es así de genial. Este es sólo el editor de texto regular construido dentro de Shopify, funciona muy bien. Funciona de inmediato, es genial y luego si descomentamos producto.descripción y lo guardamos, vuelve
nuestra descripción. Entonces aquí, puedes ver que
tenemos producto.descripción y está envuelto en estos dos tirantes rizados. Eso nos dice, “Oye, esa es una variable Liquid”, y generalmente cualquier cosa que esté con las llaves dobles significa que es una pieza de contenido. Se va a dar salida al título, descripción, precio, ese tipo de cosas, mientras que esto, si estás observando con cuidado, también
tenemos a estos tipos, donde es corsé rizado 100 por ciento. Esos generalmente significan que es lógica o es algo que tiene que estar cerca de como un comentario, pero si entonces las declaraciones usarán esto, bucles usarán esto. Pero te ayuda algo así de un vistazo a ver lo que está haciendo y es agradable. Incluso aquí en esto, la lógica si entonces, es muy simple. Si la recolección y luego terminar si, es exactamente lo que esperarías de esto, no
hay nada loco aquí. Sabes que no hay sintaxis extraña, es fácil de usar. Aquí tenemos ya sabes product.liquid, pero es solo esta plantilla. lo mencionamos antes, lo que pasa es que cada vez que se carga una página, Shopify corre por tema.líquido, así que vamos a ir por ahí, y de nuevo sólo cabeza regular. Ya hemos visto esto antes, sabemos HTML, no es duro. Pero cuando nos desplazamos hacia abajo, a través del archivo, a través de nuestro archivo tema.liquid, encontramos a este tipo ,
contenido
para layout, y contenido para layout va a ser lo que sea esta plantilla correcta,
se va a dejar caer en aquí. Entonces cuando cargamos nuestra página de producto, agarra tema.liquid y corre a través de ella, y cuando llega al contenido para el layout, inserta product.liquid ahí dentro, y continúa en su camino por el resto de este archivo, lo cual es conveniente. Es genial. Entonces eso es todo. Quiero decir que realmente no hay nada, hay nada particularmente más difícil de lograr eso. Entonces no hay razón para tener miedo de Liquid, y vamos a meternos en nuestros filtros y cuáles son estas otras opciones. Entonces si buscamos aquí arriba, como sabes aquí título de página, eso es solo contenido, cae en versus, tenemos una declaración if lo deja caer ahí dentro. Si nos desplazamos hacia abajo, y tenemos todo tipo de cosas buenas aquí. Déjame encontrar un buen ejemplo de un If, así que aquí vamos. Si sabes que el cliente quiere decir que esto es, el cliente ha sido habilitado aquí, mostrarán cliente conectado y Si, es genial. Muy sencillo. Otra cosa a saber de Liquid es que no hay URLs, así que aquí se podía ver tenemos modernizer.min.js, etiqueta de script, asset_url. No tenemos que preocuparnos por los archivos perdidos 404s, los deja caer, e incluso lo hace con el HTML correcto, así que es una etiqueta de script versus aquí arriba en nuestro CSS, stylesheet_tag, asset_url, timber.CSS, y por supuesto lo se refiere a asset_url o se refiere a un activo. Desplazamos hacia abajo hasta nuestra carpeta de activos. Ahí está madera.scss.líquido, y luego lo dejaré caer ahí dentro. Funciona, no más 404s, no más te preocupes por esas cosas cuando las URL cambian, Shopify se encarga de ello por nosotros a través de Liquid, que una vez que tienes esa sintaxis abajo, hace la vida muy fácil. Aquí te dejamos un buen ejemplo, súper fácil de entender, nuestro favicon. Entonces si settings.favicon_enable, por lo que se refiere a nuestro archivo de configuración del tema, y eso es todo. Si está encendida, entonces se va a ejecutar. Simplemente va a mostrar esta pieza de HTML intacta, pero luego para nuestro, href ahí dentro, nos referimos a favicon.png y asset_url. Eso es todo, súper simple, súper fácil. No lo es, es todo lo que has visto antes. Es muy fácil de intuir, pero al mismo tiempo, también
me mantendría a mano y lo hago con la documentación Liquid y la hoja de trucos Shopify Liquid. Aquí tenemos, aquí arriba te muestra, referencia variable líquida. Entonces abriremos a ese tipo, y aquí sólo de un vistazo, podrías buscar a través de él, encontrar tus cosas. Es muy fácil. Está bien, esa es nuestra intro, me voy a mudar, me voy a complicar un poco más en la siguiente.
9. Diseños, plantillas: Está bien. Hablemos de Layout. Ya hemos visto en nuestro tema, es solo usar HTML regular, nada de locos en ello. Pero, el diseño puede no ser a lo que estamos acostumbrados. Tenemos esta estructura de archivos bastante diferente donde ni siquiera estamos usando URLs. Lo que pasa es que usamos esta carpeta Layout, y en eso, tenemos theme.liquid. Noventa y nueve por ciento del tiempo, sólo
vas a tener el único archivo de diseño, theme.liquid. Cada página se renderiza usando theme.liquid, y es esto, es lo que esperarías ver. Se abre con nuestro archivo HTML, doctype. Tiene cabeza, y si nos desplazamos todo el camino hasta el fondo, lo suficientemente
seguro se cierra. Tiene pie de página. Entonces, esto se convierte en nuestra página universal, nuestro formato universal. Eso nos ahorra mucho trabajo de tener que usar encabezado pie de página incluye, aunque podrías si quisieras. Nos ahorra tener que escribir estas cosas en cada página, es conveniente. Son fáciles de usar. Entonces, tenemos tema.líquido aquí, y tiene todo aquí, todas nuestras necesidades básicas de página. Se ve muy familiar, pero hay un par de cosas que tiene que tener. Aparte como, esta es tu única página maestra o diseño maestro, y todo se renderiza en esto, y luego basado en lo que estamos renderizado, basado en la URL realmente. Inserta una de estas plantillas en el contenido para archivo de página o contenido para variable de página. Ahí está, contenido para maquetación, 296. Se cae esa cosa ahí dentro. El contenido de la página va dentro de este archivo Layout. Esa es nuestra cosa número uno que tenemos que tener ahí dentro. Hay otro menor, pero algo importante que tenemos que tener aquí, vamos a encontrarlo. Ahí está. Se llama contenido para cabecera ahí arriba el 34. El contenido para encabezado es para que Shopify pueda insertar elementos ahí. Entonces, podría ser predominantemente plugins. Si instalas apps, y la app tiene que agregar JavaScript al sitio, lo va a hacer por ahí. Hace la vida fácil. Si estás quitando la app, no
te quedan esas cosas ahí dentro. Si tienes la app, no tienes que meterte con HTML necesariamente siempre y cuando pueda caer ahí, lo cual es conveniente. Muy bonito. Otra cosa que notaremos, no lo tenemos en este archivo pero son una especie de fragmentos de inclusión. Entonces, aquí tenemos algunos fragmentos. Si quisiéramos, podríamos hacerlo incluyendo tema.líquido y a veces lo hago solo para limpiarlo para que no se vea tan desordenado. Aquí, encontremos un buen ejemplo. Tenemos start mobile-nav y si nos desplazamos hacia abajo, ahí vamos. Ahí está el fin del mobile-nav. Entonces, vamos a cortarlo. Tenemos a ese tipo. Entonces solo dejaré eso ahí para que recordemos adónde va, y agreguemos un fragmento. Crearemos un nuevo Spppet llamado mobilenav. Aparece, y peguemos nuestro contenido ahí dentro. Entonces aquí está el contenido mobile-nav de esa página. Se llama mobile-nav.liquid. Guárdalo. Vuelve a tema.líquido y vamos a escribir esto ahí dentro. Incluye mobilenav y vamos a cerrar ese corsé rizado. Guardar. Vamos a refrescarlo. Su página debería verse bien, pero encontremos mobile-nav aquí, y ahí mismo. Boom. Comienza mobile-nav. Ahí está, y ahí están todas nuestras cosas de mobile-nav, todavía ahí encerrado. Pero, ¿qué pasa si matamos esta línea? Entonces, bueno, aquí, sólo lo borraremos por completo. Salva a este tipo, y refresquemos nuestra fuente. Ahora todas esas líneas se han ido. Entonces, ya que este archivo de plantilla, por lo que es casi siempre solo tendrías el solo archivo.liquid de tema, y aparece en cada página. Realmente no hay una gran razón para usar includes inside theme.liquid aparte de tal vez lo limpia, o tienes la intención de usar múltiples archivos de diseño. Pero, incluye tiene sentido dentro de las plantillas. Por lo general, la forma en que lo hago, lo
harías es tema.líquido. Entonces tu archivo de diseño primero, luego tu archivo de plantilla, por ejemplo product.liquid y luego dentro de eso, harías tu inclusión. Entonces, en product.liquid, podrían
ser botones de compartir social y tienes un include para eso. Eso tendría sentido. Eso cubre nuestros archivos de diseño, nuestras plantillas, y nuestros fragmentos. Ahora, vamos a hablar una parte específica del líquido que tienes que usar a lo largo de tu cosa, pero una muy fácil de usar, y eso son variables. Variables líquidas, también en la documentación de Shopify, referidas como objetos líquidos. Entonces, los objetos son variables. Las variables se han arraigado en mí. Entonces, eso es probablemente lo que voy a seguir llamándolo pero son intercambiables. Entonces, ellos son estos tipos, las cosas de doble rizado nos dicen que eso es un poco de contenido, un poco de información. Es una variable, y sale. Da salida a nuestra información como vimos en demostración anterior como product.description. Dentro de los objetos, hay dos tipos. Hay objetos globales que se pueden utilizar en todo el sitio en cualquier lugar. Si nos dirigimos a la documentación de Shopify, eso va a ser cosas como el carrito. El carrito tiene que aparecer en todas partes. O página actual, devuelve el número del buscapersonas en. Bueno, si estás en contenido paginado, entonces en realidad eso no funciona en todas partes necesariamente. Si la persona está ingresada como cliente, para que puedas hacer lógica como login, logout. Entonces, si te desplazas por esta documentación líquida, tenemos nuestros diferentes objetos para global, como los títulos de página son un buen ejemplo que aparece en todas partes, y tenemos título de página. Entonces, solo hagamos una demostración rápida. Aquí, voy a copiar título de página, y luego volvamos a nuestro producto.líquido. Entonces, aquí tenemos la descripción del producto y debajo de eso, vamos a añadir una nueva pieza de info. Voy a escribir una etiqueta de párrafo, y decir: “Esta es la página de título de la página”. Pongámoslo. Guárdalo. Ahora, cargemos nuestro producto. Ahí va, está bien. Mucho producto, desplácese hacia abajo, y mire eso. Entonces, tenemos nuestra descripción como la esperábamos, y luego justo debajo de ella, esta es la página de Hip Shoes. Entonces, se acaba de cargar el título de la página. Ahora, eso es un global. Objeto global, variable global que va a funcionar en cada página. Pero, ¿qué pasa con las cosas que son específicas de una página? Entonces en este caso, un gran ejemplo es ese producto.descripción. La descripción de un producto sólo puede aparecer en esa página
en particular en referencia a ese producto específico o al precio. Pero te vuelves loco si estás tratando de averiguar qué es cada uno. Entonces, ahí es donde la hoja de tramposos de Shopify es muy útil. Es de Mark Duncan Lee quien es diseñador en Shopify, y tiene todo estallado así, lo cual es genial. Entonces, aquí si vamos bajo variables de plantilla, y sí, las llama variables no objetos. Entonces, aquí tenemos líquido blogueado. Aquí, tiene un listado de cada una de las cosas específicas que podemos usar en una página de blog. Nuevamente, no es como de un vistazo, es muy obvio lo que son, bloguea ese título, es el título del blog. Pero cuando estás tratando de pensar en lo que es, es más difícil. Entonces, es muy agradable tener esta hoja de tramposos frente a ti. Si haces clic en él, te da toda la descripción, y también enlazará directamente a la documentación, lo cual es muy bonito. Entonces, estamos en nuestra página de productos, y aquí, tenemos todas estas cosas para nuestro producto, que es genial. Sí, y tenemos, vamos a ver plantillas, producto de líquido, así que vamos a sacar de nuevo a este tipo. No queremos eso. Entonces, este era subtítulo de página. Esto aparecerá en cada página. Entonces, en lugar de hacer eso, encontremos algo específico a un producto que podamos producir. Pasemos por productos que líquidos y encontremos uno, uno que correcto. Por lo que aquí, nuestro producto no muestra su tipo. Entonces, tenemos product.type. Entonces, hagamos un mejor ejemplo. Digamos que aquí podemos agregar eso. Entonces, voy a escribir, lo pondré en negrita. Escribiré tipo, y luego vamos a cambiar esto a product.type y ver qué pasa. Product.Type, save, regresa allá, y están ahí, refresca. Mira eso, tipo, patadas página, ahí vamos. ¿ Dónde había mi página y yo hemos estado ahí dentro. Ahorra, está bien vamos a revertir eso. Tipo patadas, y eso se debe a que el tipo de este producto al menos se ha ajustado a patadas. Esa es una modificación común. Quizás quieras decirle a la gente:
“Oye, ¿de qué tipo es éste? ' Así lo harías tú. Hablemos de plantillas, derecha Entonces, tenemos dentro o tema, tenemos este concepto de micro plantillas. No son una página completa. Ellos son solo el contenido de esa página, y eso es lo que va en la carpeta de plantillas. Además, recorremos primero cómo se eligen esos, porque cuando me metí por primera vez en Shopify, esto inicialmente me confunde también. Se hace en base a la URL. Entonces, echémosles un vistazo. Vamos a agarrar, vamos a nuestra tienda, y vamos a cargar a este tipo. Está bien, ahí está restaurado. Tan bien, éste es fácil. Corre la página de inicio, así que slash, que cargaría nuestro index.liquid, y nos dirigiremos hacia abajo. Ahí está Index ese líquido, y aquí así cargando esto primero en allá. Vemos cada dos sections.front page title. Vamos a tener sentido. Bastante, bastante sencillo. Ahí vamos. Ahí está nuestra colección de homepage, y solo para demostrarlo, solo para demostrarlo,
eso es lo que es, vamos a agregar. Vamos a añadir algo de texto aquí. ¿ Cómo se ahorra? Actualicemos esta página, y miremos eso, aparece. Entonces, eso es bonito. Ese es fácil, eso es sencillo en cuanto a cómo está funcionando este contenido. Pero de nuevo, qué colección escoges se basa en la URL. Entonces, vamos a dar click Sobre Nosotros, y Sobre Nosotros vive en una página. Sabemos esto, si nos fijamos en la URL, /páginas. Entonces, entonces si nos
adentramos, esperaríamos que para cargar página.líquido. Aquí, tenemos título de página H1. Mismo trato, vamos a añadir la página de texto allí,
guardar, refrescar Acerca de Nosotros Demo Page. Así es como lo está haciendo. Echemos un vistazo a todas las plantillas que están aquí. No son terriblemente muchos, y discutiremos rápidamente lo que hace cada uno. Cuatrocientos cuatro, que es File Not Found page article. Este es el contenido de un blog. Entonces, artículo de blog que no debe confundirse con page.liquid. Blog, ese es el índice de artículos en un blog. Carrito, es tu página de carrito, no la página del carrito de compra. Colección, el insider, solo estándar una página de colección de categoría. Colección.Lista, este es un poco diferente. Déjame mostrarte esa. Eso es un listado de colecciones. Entonces, si vas a /collections, se carga este listado de todas las colecciones, que en realidad es diferente a colección/todo, que es un listado de todos los productos de una tienda. Entonces, entonces si bajamos, así que esas son las colecciones siempre colecciones.list, y entonces tenemos todas estas páginas de clientes. Entonces, hay bastantes aquí, estos solo se usan si tienes cuentas de cliente habilitadas en la tienda, y en su mayor parte, cuando el cliente está conectado. Activar cuenta es verificar la verificación de correo electrónico. Direcciones es donde administran sus direcciones guardadas. Página de inicio de sesión, el inicio de sesión por supuesto. Orden, pueden ver sus pedidos pasados, la página de registro, restablecimiento de contraseña. Bonito, los nombres son sencillos. A ver lo que conseguimos aquí. Tarjeta de regalo, ésta es todo diferente. Cuando alguien compra una tarjeta de regalo, se le envía por correo electrónico un enlace para la tarjeta de regalo. Esto es lo que se renderiza cuando hacen clic en ese enlace. Entonces, si compro la tarjeta regalo, esa es la página que muestra. Puedes hacer tarjetas de regalo de lujo o agregar instrucciones, ese tipo de cosas. Index.líquido que aprendimos es la página de inicio, lista-colecciones. Entonces, esto es /colecciones y /productos. Es opcional. Ya ven, algunos de estos opcionales solo se refiere a la hora de enviar un tema a la Tienda Theme. Lo que se requiere y lo que no. Tenemos página aquí mismo, esto es sólo una página como aprendimos. Página.contact, esta una plantilla alterna, y no voy a hablar de eso bastante todavía. Pero vamos a meternos en ello. Producto.Líquido, hemos jugado mucho con este tipo. Entonces, la página del producto y la búsqueda son los resultados de búsqueda. Entonces, aquí arriba tenemos colección.list. Se trata de una plantilla alterna. Sí, coleccion/ ¿todo? vista-lista. Entonces otra vez, éste no es requerido. Pero es útil tener aquí dentro. Esa es parte de la razón por la que me gusta empezar. Si estuviera haciendo un tema personalizado, es agradable comenzar con este trabajo de marco de madera. Vamos a sumergirnos en más cosas líquidas a continuación.
10. Filtros y bucles: Quiero sumergirme en y hablar de una de mis características favoritas de la Syntax Liquid y eso son los filtros. Leeremos la definición de Shopify al respecto. Los filtros son métodos simples que modifican la salida de números, cadenas y variables, y objetos. Se colocan dentro de una etiqueta de salida y se separan con un carácter de tubería. Entonces, como recordamos antes, una etiqueta de salida, ese es un objeto, objeto Liquid o
variable Liquid y está indicado por esas llaves dobles. Eso es típicamente para cosas como título, descripción ,
precio, esas cosas que son solo variables dinámicas que quieres escupir. Entonces, nos dan un ejemplo como upcase como pipa. Entonces, entrémonos en nuestro buen viejo amigo, la plantilla de producto. Got Product.líquido aquí y aquí mira h1; product.title. Añadamos un filtro. Se indica un filtro por pipa, lo que pipa siendo un personaje no como una referencia de Mario, y luego vamos a sumar mayúsculas por ahí. Entonces, ahí vamos, tenemos “product.title | upcase”. Entonces, probablemente podríamos adivinar qué va a hacer esto. Guárdalo y ahora, vamos a refrescar esta página. Mira eso, ha cambiado esto a zapatos Gnarly, inspeccionar elemento. Entonces, si lo miramos, tenemos “itemprop igual nombre zapatos gnarly”. Ha alterado la salida para nosotros y eso es útil. Podrías hacerlo por hacer cosas globalmente, por cambiar configuraciones temáticas como en tu navegación. A lo mejor tu navegación quieres que siempre sea
mayúscula, minúscula, podrías hacer eso aquí. Entonces, saquemos eso, pero hay todo tipo de filtros que hacen muchas cosas diferentes, y uno de los mejores recursos para encontrar eso es la hoja de trampas de Shopify de nuevo de Mark Dunkley. Si buscaré aquí arriba, tiene filtros Liquid, ese material de salida, así que esto es genial. Aquí hay una tira HTML. Entonces, esto es agradable como digamos, quieres agregar tu descripción incrustada a un documento. Entonces, aquí está su ejemplo. Lo que han hecho es agarrar el contenido del artículo y luego despojar HTML, saca el HTML de él porque obviamente HTML en tu descripción incrustada lo rompería, y luego aquí han agregado otra tubería, truncate:20. Entonces, me pregunto qué hace truncado. Vayamos aquí abajo. Usando palabras truncadas, podemos reducirlo a x palabras o truncar caracteres. Enfriar, así que vamos a desplazarnos hacia abajo. Tenemos aquí otros filtros. ¿ Tenemos alguna? Entonces, aquí se capitaliza. Capitalizado es agradable, podríamos usar eso para desinfectar nuestro contenido. En el caso de, digamos alguien que es perezoso y todos sus demás títulos de producto eran minúsculas. Podría usar eso para que se vean bonitas, para asegurarse de que siempre se vean geniales lo cual es conveniente. Pero como puedes ver aquí, es por algo más que solo alterar esas salidas. Hay un montón de diferentes manejables. Entonces aquí, tenemos dinero con moneda, dinero sin moneda, y dinero. Vas a ver mucho estos porque
quieres poder internacionalizar tus temas. Entonces, tal vez alguien vende en múltiples monedas o están en diferentes países. Entonces, puedes mostrar hey, dinero con moneda en lugar de solo mostrar el signo del dólar como lo hacemos ahora. Aquí, es agregar dinero canadiense sin moneda. Es sólo el precio sin el signo del dólar, y el dinero tiene un precio con el símbolo de la moneda. Pero es útil para cosas más que eso. Tenemos precio, eso fue algo genial. Metir con los precios es conveniente, ser capaz de alterar la salida de texto en minúsculas a mayúsculas. Pero qué pasa con la taquigrafía, haciendo nuestras vidas más fáciles. Entonces, bajemos a un tipo al que miramos antes y ese es este enlace CSS. Entonces, CSS, tenemos referencias el archivo. Entonces aquí, este tipo de simple cotización se refiere a nuestro activo. Ahí está madera, y si volvemos aquí arriba, entonces tenemos dos tubos, así que tenemos dos filtros aquí. El primero es asset_url. Entonces, asset_url,
probablemente podríamos adivinar que va a tirar de la URL en esto y luego etiqueta de hoja de estilo. Entonces, echemos un vistazo a la fuente. Vamos a ver la fuente de nuestro archivo y encontrar el enlace CSS, ahí está, CSS link href, bla, blah, cool. Entonces, tenemos todo esto pasando de aquí. Pero, ¿qué pasa si matamos a stylesheet_tag? Saquamos una de esas pipas, guardamos y la refrescamos. Mira eso. Entonces, aquí, como sí esperamos está produciendo sólo la URL. Hay situaciones en las que se quiere hacer eso. Si quisieras poder agregar atributos adicionales a un enlace, querrías poder hacerlo. Entonces, es muy conveniente. Entonces, estaremos usando más filtros y algunas otras cosas pero definitivamente solo agarrándolo. Esta es una referencia usando la hoja de cheat Mark Dunkley, muy conveniente para tus filtros pero te permite hacer todo tipo de cosas programáticas
divertidas que los diseñadores no podían usar, bueno no necesariamente lo pudo, pero los diseñadores tenían miedo de usar o difíciles de usar antes con JavaScript, PHP, ese tipo de cosas. Aquí, se hace increíblemente fácil. Solo tienes que saber cuál estás buscando y para eso es la hoja de trucos. Ahora, vamos a hablar de un tema, va a poner un poco de miedo. No quiero asustarte. Vamos a discutir for-loops. Entonces, si estás familiarizado con navegar tu CSS HTML, no
es mucha lógica de programación ahí. Entonces, algo así como un for-loop puede parecer intimidante. Jeffrey les llama etiquetas de iteración, for-loop es una especie de etiqueta de iteración. Todo lo que haces es repetir un bloque de código. Entonces, echemos un vistazo a un par de ejemplos donde podríamos querer usar for-loops, y luego, veremos cómo funcionan, y que no dan miedo en absoluto. Entonces, aquí tenemos en nuestra colección, en nuestro tema. De lo que no sabemos cuando cargamos una colección, tenemos una plantilla de colección que pone dinámicamente los productos ahí dentro. No sabemos cuántos productos van a haber ahí en cada tema, en cada colección diferente. Entonces, tenemos que tener una manera de hacerlo programáticamente y fácilmente, sin repetir todo este código. Aquí, esta nube de etiquetas a la izquierda, esa barra lateral, eso es un bucle e incluso algo tan simple como o navegación en la parte superior. No sabemos cuántos artículos van a haber ahí dentro. Eso es sólo una lista repetida una y otra vez. Nuevamente, es solo un for-loop, y luego, otro común por supuesto, las miniaturas de productos, los productos podrían tener diferentes números de miniaturas. Entonces, tenemos que usar for-loops y los usamos un poco justo a lo largo de un tema. Entonces, veamos cómo funciona eso. Entonces aquí, he cargado colección.Líquido y en colección.Líquido y he simplificado esto un poco, pero si llegamos aquí abajo, vemos la línea 53. Consiguió a este tipo, y dice, para producto en colección.productos incluyen producto grid item y endfor. Entonces, en cuanto veamos el porciento de corsé rizado, sabemos que esto es una pieza de lógica y tenemos que cerrarla. Entonces, llegamos por y terminamos. Muy sencillo. Ahora bien, si miramos el lenguaje, también es sencillo. Entonces, para producto en colección.productos. Usando ese gran líquido.sintaxis, podríamos decir que sólo es decir, por cada producto de una colección, sin embargo, muchos productos están en su, bucle a través e incluyen este fragmento. De acuerdo, y echemos un vistazo a ese fragmento. Tenemos artículo de rejilla de producto y aquí vamos, este fragmento se utiliza para exhibir cada producto durante el bucle, para productos en colección.productos y colección.líquido. Muy bien. Entonces, todo este código aquí, normalmente, si quisiéramos hacer esto sin el bucle, tendríamos que hacerlo estáticamente y simplemente seguir repitiendo esto una y otra vez, no funcionaría. El bucle lo hace mucho más fácil. Entonces, volvamos a ese bucle. Muy bien, así que tenemos para producto en colección.los productos incluyen artículo de cuadrícula de producto. Está bien. Tan solo para demostrarlo, mataremos ese fragmento y luego dejaremos refrescar y ver qué pasa. Todos nuestros productos desaparecen. Entonces, sabemos que está funcionando. Entonces, vuelve a ponerlo, guárdelo, refrescarlo y nuestros productos regresan. Ahora, con un bucle, su mayor parte es fácil como esto justo, “para lo que sea en endfor”. Pero los bucles son más poderosos que eso. En realidad podemos incluir otros bits de lógica ahí dentro. Entonces, podríamos hacer otra cosa. Vamos a intentarlo de lo contrario. De lo contrario es un poco de lógica. Entonces, diremos otra cosa y luego, pegaré esto aquí. Ya lo tenía escrito pero sólo es etiquetas de párrafo dice: “Oops, la colección está vacía”. Entonces, vamos a guardarlo. Entonces, ahora, tenemos un poco de lógica aquí dentro, y lo que esto está diciendo para producto. Entonces, si hay productos en colección, en la colección, vamos a ejecutar este fragmento pero si está vacío, vamos a mostrar un mensaje diferente. Entonces, vamos a crear para revisar nuestras colecciones. ¿ Qué tenemos? Productos, colecciones. Ya he creado una colección vacía y vamos a verla. Mira eso. Entonces, dice, “Oops, la colección está vacía”. Es usar esa lógica más que ponemos ahí. Sólo para demostrar que eso es lo que está haciendo, volvamos atrás y editemos de nuevo nuestro tema. Colección.Líquido. Cuando
saquemos lo más, veamos qué pasa, si no incluimos ese poquito de lógica ahí dentro. Entonces, corre por el bucle pero hay cero producto y no pasa nada. Simplemente se detiene y se inicia. Entonces, bastante más simple de lo que pensarías, probablemente más simple que otro lenguaje de programación si te has metido con ellos pero aún hay más que podrías hacer con él que eso. Entonces, si volvemos a la hoja de tramposos de Mark Dunkley, tenemos aquí para encontrar el for-loop pero hay más que podrías hacer con él. Entonces, si bajas a, ¿dónde está? Ahí vamos, Loop Helpers. Entonces, Loop Helpers, ahora, podemos definir las cosas. Entonces, ¿queremos correr por toda la longitud del bucle? ¿ Queremos saber dónde estamos en el bucle? Índice de la iteración actual, ¿qué más tenemos? Ah, estos dos son buenos, primero y último. Entonces, si dirías, si esto es sería como para la paginación, si esto es lo último en el bucle, podemos agregarle una flecha o si es lo primero, le
agregaremos la otra flecha. Aquí hay mucha flexibilidad con bucles pero en su mayor parte, no
es particularmente complicado. Yo estoy aquí en este ejemplo, sólo escupe productos. Entonces, para producto en colección de productos, título de productos. Hagamos eso como nuestra última demostración rápida de cómo funciona el loop. Aquí vamos, así que vamos a cambiar nuestro fragmento por solo título de producto, que podamos verlo correr. Ahí está, refresca, sí, y aquí es sólo que es cada uno de los títulos de producto escupen. Entonces, sí, for-loops no complicado, no da miedo en Liquid. Si conoces el lenguaje básico de programación, si entonces lo demás, puedes averiguarlo. No es duro pero es parte integral de una pelea de pala.
11. Producto: Entonces, para recapitular, hemos hecho en su mayoría mucho aprendizaje. Aprendimos sobre la plataforma, hemos aprendido sintaxis Liquid, qué podemos hacer con el Liquid, qué fácil es, la estructura de un tema o interfaz de Shopify. Hemos aprendido mucho. Ahora quiero empezar a caminar, y juntar esas cosas. Lo vamos a hacer simplemente caminando y tratando de hablar a través cómo se presentan las plantillas en nuestro tema de marco de madera, y nos va a dar una buena comprensión. Vamos a empezar con la plantilla de producto. Plantilla de producto es probablemente la plantilla más complicada en cualquier tema, con la excepción de quizás algunas páginas de inicio de temas. Pero en su mayor parte, la plantilla de producto es una locura a medida que se pone. Entonces, si podemos dominarlo, si podemos entender esto, entonces sabemos que debemos ser buenos en todo lo demás. Mientras estemos viendo esa plantilla de producto, vamos a querer tener dos referencias abiertas. En primer lugar, vamos a agarrar la Documentación Líquida para Objetos, específica de una página de producto. Si recuerdas tenemos algunas variables que podemos generar globalmente, que funcionan en todas partes, y entonces tenemos lotes que
podemos producir solo específicos de un producto. Aquí, tenemos esos atributos de producto frente a nosotros. Si queremos también podríamos mantener frente a nosotros la hoja de tramposos Shopify del señor Dunklee. Justo aquí a la derecha, tenemos variables de plantilla con product.liquid. Este es bueno para una referencia muy rápida. Podemos verlos todos de un vistazo, y si lo abres como oh qué es product.title do, devuelve el título del producto. Cualquiera con quien estés cómodo. Yo muchas veces, tendremos ambos o simplemente Google, a ver qué sale. Aquí tenemos una página de producto. Simplemente complicado como se va a poner. Queremos empezar a mirar nuestra plantilla. Está bien. Ya conoces HTML regular, abrimos nuestra clase div, y de inmediato tenemos etiqueta h1. Aquí te dejamos nuestro primer producto variable Shopify. Naturalmente sabemos que este tipo se está refiriendo a Awesome Sneakers product.title. No voy a demostrar esa, sólo
voy a seguir moviéndome. Muy bien, aquí pudimos ver que estamos haciendo algunas cosas con el marcado de esquema, es para incluir datos de fragmentos ricos. Creo que la mayoría o todos los temas lo hacen ahora. No necesariamente tienes que hacerlo por ti mismo, pero es algo bonito tener, si eres un gran creyente en la web semántica como yo. Pero también nos da acceso a algunas cosas buenas de un vistazo como moneda de precio de artículo, contenido es igual a shop.currency. No estamos seguros exactamente cuál es esa salida, pero sí sabemos que es en referencia a la tienda, es una variable global, y es moneda. Entonces, veamos si no podemos buscar eso. Suficiente, tienda.currency está aquí. Devuelve una cadena con el nombre de la moneda por lo general representación de tres letras por ejemplo USD. Nuestra tienda debe estar configurada dólares estadounidenses. Entonces, esto generará USD, pero veamos en el código, veamos qué hace. Entonces, si tengo razón, y si busco control encuentra USD. Seguro, ahí está. En realidad está realmente dentro si miras, ahí está. contenido de la divisa del precio es igual a USD, Zapatillas Awesome. Nos va bien hasta ahora, no
nos hemos vuelto nada demasiado locos. Vamos a usar otro - disponibilidad. Realmente esto es para Google. Google va a querer saber estas cosas. Es bueno para un SEO. Entonces, aquí tenemos, esta es una cuerda inteligente que alguien ha escrito aquí. Entonces, nos referimos a schema.org. Ahora tenemos nuestro primer ejemplo de lógica. Podemos abrirnos camino a través de esto. Podemos intuir. Si producto.disponible, entonces, si el producto está disponible, ese es un operador booleano sí, no. Si el producto está disponible, cierto, se va a escribir con las palabras 'en stock, 'de lo contrario. Entonces, sabemos si no está disponible, está agotado. 'Else' fuera de stock. endif. Ya tenemos alguna lógica inteligente aquí para que estos ricos datos de fragmentos estén funcionando. Aquí tenemos un comentario aquí vienen en código. Entonces, es agradable hacer comentarios como este, envolver tus comentarios en etiquetas Liquid, ya que solo estarán disponibles en el editor de temas. No se van a renderizar con él. Esto nunca aparecerá en el front-end al usuario final. Entonces, si miramos podemos ver que aquí no hay ningún comentario, lo cual es bonito. Simplemente hace que la página sea un poco más pequeña, un poco más limpia, y entonces no tienes que preocuparte si tienes comentario sensible ahí dentro, que lo harías pero no tienes que preocuparte de que esa cosa esté expuesta. Entonces, tenemos nuestra acción de formulario solo publicas en el carrito. Es muy sencillo, Método, Post. Entonces, estamos publicando a carrita/ad id AddToCutForm. Entonces, hay un selector para un enchufe de carro Ajax. Eso probablemente está un poco más allá de nosotros ahora mismo. No nos vamos a preocupar por eso. Desplazándose hacia abajo, ver qué más tenemos aquí, para variante en productos. Esto se pone interesante. Tenemos variantes. Echa un vistazo. Entonces, talla, aquí sólo tenemos dos, pero estas son sus variantes, sus opciones de producto. Eso es a lo que eso se refiere. Aquí está haciendo referencia a la opción selection.js, algunas cosas locas de javascript. No quiero que te preocupes aún por ello. Pero aún podríamos averiguar qué está pasando. Entonces opción. Entonces es un campo de formulario, si la variante es igual al producto seleccionado o primera variante disponible. Entonces, lo que significa la elección por defecto, la primera que está ahí arriba o lo que el usuario ha seleccionado, y luego muestra seleccionado igual. Es una opción, entonces endif. Aquí lo tenemos quiere escribir en el sesgo para el producto, así podemos escribir sesgos únicos, variant.sesgo, obviamente podríamos decir conseguir la doble llave rizada, y se va a escupir sesgo, y sólo se mantiene yendo, variante ID, título, precio etcétera. Es así como estamos mostrando las opciones para ese producto. Opción desactivada. Aquí puedes ver variante título-products.product.agotado. Esta es interesante. Si ves a este tipo, el T. Esto es para la internacionalización, para la traducción. Si lo deseabas, el usuario final puede editar el idioma, y luego en cualquier lugar que aparezca esa palabra 'agotado '. Ese es el defecto. Se va a reescribir eso para ellos. Sigamos adelante. Aquí vamos. Aquí tienes una buena. Variante actual.precio, dinero de pipa. Sabemos que precio obviamente se refiere al precio del producto, current_variant. Van a ser cuatro, porque tenemos otra
vez, tal vez esto viene en diferentes tamaños o vino en diferentes colores, y eso cambiaría el precio. ¿ Cómo sabemos qué hacer ahí? ¿ Cómo sabemos a cuál nos referimos? Bueno, eso es lo que va a cuidar aquí. Current_variant.price, se va a mostrar el precio de la variante actual. Entonces, muy rápidamente se obtiene la idea aquí de que sólo podríamos intuir,
porque es lenguaje natural, podríamos averiguar de qué está hablando esta cosa con bastante facilidad. Ni siquiera hemos necesitado revisar la hoja de tramposos todavía. Después hemos vuelto, nuestros viejos amigos, el filtro. En cuanto vemos una pipa, sabemos que es un filtro que se está aplicando a esto, y que dice 'dinero'. Hay un par de formas diferentes en las que podemos producir precios. Entonces, vamos a revisar. Veamos si podemos encontrar lo que hace el filtro de dinero. Aquí está, filtra dinero. Agrega el símbolo de moneda. Entonces, la bonita de aquí, podríamos si supiéramos que siempre era una tienda de Estados Unidos, podrías agregar el símbolo de moneda ahí dentro. Pero si estamos haciendo un tema para el público en general, no
sabemos qué moneda están usando. La ventaja de hacer eso, Shopify smart cuando el shopper escoge su moneda, va a agregar automáticamente el símbolo correcto. Hace que nuestra vida sea muy fácil. Después moviéndonos, bajamos a los productos, product.compare_at. Entonces, aquí está el precio de comparación. Nuevamente, compare al precio consulte generalmente es MSRP, lo que
significa si está a la venta, y entonces aquí vemos, hay alguna lógica aquí, si y si. Entonces, aquí han hecho algo lindo. Si producto.comparar al precio máximo es mayor que el precio del producto, entonces muestra la sección. Entonces, qué está pasando aquí. Es si esto es lógico incluido para averiguar si el producto está a la venta o no. Entonces, si mi producto solo tiene un precio, y no compara a precio, sabemos que no está a la venta. Si tiene un comparador a precio, y eso es mayor que nuestro precio actual, entonces vamos a mostrar esta información para mostrar que el producto está a la venta. Pasando aquí otra vez. Aquí tenemos el filtro de nuevo por dinero, así que sabemos que incluye ese signo de dólar para nosotros. Etiqueta para cantidad, producto.producto.cantidad. Nuevamente, esto es solo que sabes por diferente lenguaje. Podríamos escribir cantidad ahí dentro, pero es más fácil, y sobre todo si vamos a vender tema o tener un tema en una tienda temática. Tenemos que tener esto aquí para la internacionalización, que podamos hacer diferentes idiomas. Nuevamente, el texto add_to_cart también cae debajo de eso, y aquí volvemos a nuestro viejo amigo, desde el inicio de nuestro curso, product.description. Tenemos a este tipo. No es sólo una línea, no
está envuelta en html. No hay filtros en esto, porque su descripción se escribe en eso, editor WYSIWYG. Sea lo que sea que haya ahí, sólo va a caer exactamente lo que hay en ese editor de WYSIWYG aquí. Pero si quisiéramos, hay filtros donde podríamos despojar esas cosas. Aquí tenemos más lógica. Si colección, y endif. Me pregunto qué está pasando aquí. Entonces, Shopify tiene para pan rallado, para hacer pan rallado se basan en URL. Entonces, si iba a un producto directamente desde una búsqueda de Google, esta sección desaparecería. Pero si estuviera navegando por la tienda, y pasara de colección en producto, que es como lo haría la mayoría de la gente. Esta lógica va a patear, y que va a sumar. Entonces, si la colección, y entonces tenemos otro conjunto de lógica es, si la colección, podemos anidar si las declaraciones. Si colección.producto anterior o colección siguiente producto, entonces puedes mostrar a estos chicos. ¿ Qué está pasando aquí? Tenemos enlaces anteriores,
siguientes que funcionan en el tema. Ni siquiera los vi aquí dentro. Hay ajuste de tema que están activados, y sin embargo todavía. Espera, veamos si tengo razón. Sí, parece que es un ajuste de tema, pero no está aquí. Pero aún sin haberlo visto, aún
sé qué va a hacer porque la lógica es muy clara. Es muy fácil de seguir. Entonces, no estamos aquí, tenemos esta cosa de javascript poniéndose un poco más aterradora. Probablemente no necesitemos preocuparnos por esto, a menos que estemos entrando en la personalización avanzada del tema. No dejaría que esto te asustara. Pero todavía hay un par de cosas que podemos ver. De nuevo, aquí tenemos, así que digamos que tenemos un javascript que todos cargamos aquí. Lo estamos llamando, opción selection.js, y luego le estamos agregando dos filtros,
que debemos recordar de antes, Shopify asset url, y script tag. Sólo mirándolo, sabemos lo que va a hacer. Podemos trabajar al revés. Se va a escribir una etiqueta de script, eso es en realidad cuando tienes múltiples filtros, léalos al revés. Tenemos una etiqueta de script aquí, y luego vamos a mostrar una URL al activo para la opción selection.js. Sólo tienes que seguir adelante y encontrar eso aquí. Desplácese hasta el fondo, sabemos que está ahí abajo. Sí, ahí está, selección de opciones. Este es nuestro chico 44, y como pensamos, etiqueta de script, URL y URL a la opción selection.js. Pero aquí dentro podemos ver o tenemos reventando dinero aquí probablemente para algún tipo de, lo llaman, acción CDN. Tienes que asegurarte de que estamos cargando probablemente la versión actual. Pero normalmente esas cosas de las que tendríamos que preocuparnos, esa es la ventaja aquí es que podemos simplemente caer en etiqueta de script y URL de activos de Shopify. Se ha cuidado de nosotros. No necesitamos preocuparnos por ello. El siguiente, vamos a hacer lo mismo, y se va a hacer más fácil. Podríamos descifrar a este tipo, producto Liquid, [inaudible] este es el más complicado. Esta es incluso mi primera vez corriendo por ese producto Timber, pero aún así pude intuir para
averiguar qué está pasando ahí por el lenguaje natural. No hace daño que pongan comentarios aquí. Te recomendaría dejarte algunos comentarios si te pierdes en estos temas.
12. Colección: Vamos a ver la plantilla de colección. Igual que el producto, sólo vamos a caminar por él y tratar de descifrar lo que está pasando aquí, aplicar lo que aprendimos y va a ser más fácil. La colección es más simple que el producto y luego la plantilla que vamos a ver después de esto son aún más fáciles. Entonces, sólo vamos más fácil a medida que vamos. Si el producto era un poco confuso para ti, no te
preocupes las colecciones deberían ser más fáciles. Si las colecciones son confusas cuando miramos a la siguiente, eso debe quedar claro como día. Aquí tenemos colección.líquido. Es nuestro fichero de plantilla el que hace referencia a una colección de productos similares a una categoría y si nos adentramos en documentación
líquida queremos tener
a nuestra disposición para referencia al mirar estas cosas. Nuestros objetos o variables líquidas para recolección. De nuevo, esa es una sintaxis de puntos. Entonces, sabemos que va a ser punto de colección lo que sea. Y entonces también tenemos la hoja de tramposos Shopify de Mark Dunklee. Gracias Mark Dunklee. En este punto todos deberíamos enviarle una nota de agradecimiento. Pero busquemos colección. Ahí está, colección.líquido y ya podemos decir esto es más fácil que producto. Tenemos muchas menos colecciones aquí y algunas de ellas son obvias como título de colección, devuelve el título de la colección o descripción, o términos la descripción de esta colección, cosas simples. Pero como qué colección Id, gira el Id de esta colección. De acuerdo, y entonces tenemos mango. Devuelve el manejador de colecciones que es por defecto minúscula. Está bien. Hablaremos de mangos. Todavía no hemos discutido mangos ni una vez. Carguemos nuestra colección. Oops, déjame decir eso primero. Entonces, productos, colecciones. Contamos con zapatos de piel. Vamos a hacer clic a este tipo. Habíamos hecho esto antes. Se trata de una colección automática. Entonces aquí tenemos, así que si miramos URL son colecciones/cuero-zapatos. Entonces, empecemos por eso. URL y manejar. Un mango es parte de la URL. En este caso son colecciones/cuero-zapatos. Si estuviéramos hablando de un mango de producto, sería /producto/el nombre del mango, como zapatos de cadera. Podríamos ver en un mango que lo hace amigable. Hace una minúscula. Sustituye los espacios por guiones. Se deshace de cualquier personaje especial que no pudiéramos usar. Es muy conveniente porque aparte de ser nuestra URL, el final de esa URL, un mango también es cómo, en líquido, nos referimos a diversas colecciones y objetos programáticamente por lo que tendremos eso en mente y lo encontraremos. Entonces, me digrego. Volvamos a nuestro tema. Editar HTML. De nuevo, estamos trabajando en el tema de la madera, el marco Shopify similar al Twitter Bootstrap. Carguemos colección.líquido y aquí está este tipo. Aquí te dejamos nuestra colección de ejemplo, zapatos favoritos de
Kurt y pasando por aquí. Empecemos igual que antes. Entonces lo primero que encontramos es algo que no hemos encontrado antes, paginate. A pesar de que no lo hemos encontrado, probablemente podríamos averiguar qué significa esto. Paginar colección.productos por 12 lo que significa que vamos a agregar, vamos a mostrar. Digamos que teníamos 48 productos ahí dentro, no
queremos mostrar todos los 48 productos a la vez a pesar de que pudiéramos. Queremos desglosarlo por 12. Si tuviéramos esos muchos podría demostrarlo. Por ahora no lo vamos a hacer. Volveremos atrás y lo miraremos. En el siguiente paso aquí tenemos la miga de pan. Fragmentados. En primer lugar, tenemos una inclusión. Un include es exactamente lo que suena. Incluye un fragmento. Un fragmento es donde en cualquier momento queremos incluir un fragmento de código que no queremos reescribir. No queremos repetirnos. Queremos tomar un enfoque seco a esto. No te repitas. Entonces, vamos a bajar los fragmentos pan rallado.líquido y qué va a hacer como comentábamos antes, cuando renderiza esta página va a agarrar pan rallado.líquido, este fragmento. El motivo por el que estamos haciendo eso es que esto aparece a través de múltiples páginas. Va a aparecer en la colección. Va a aparecer en la página del producto. Entonces, sólo queremos un lugar para cambiar esto. De nuevo, podemos ver que hace eso. Si la plantilla contiene producto o si la plantilla contiene colección. Es sencillo. Mira eso, si plantilla contiene colección y mango de colección. Entonces hay esa referencia a manejar que vimos de nuevo e incluso podemos mirar aquí abajo. Mira eso, captura url/colecciones y hay colecciones.handle. Entonces es exactamente como lo que vimos antes. Volvamos a la colección.líquido. Nos desviamos un poco pero aquí vamos otra vez. Tenemos un buen comentario, diferente marcado si existe una descripción de colección. De acuerdo, estamos cambiando cómo se presenta
nuestro HTML dependiendo de si tenemos una descripción de colección. En este caso, en este tema, no
agregamos una descripción, solo tenemos nuestro título y luego tenemos... así que aquí vamos. Si la colección.descripción no está en blanco, por lo que ese tipo, ese punto de aislamiento no es igual a, está en blanco. Entonces tenemos, teníamos un encabezado, mostramos el título de la colección como vimos, y luego mostramos nuestra descripción de colección. Nuevamente este tipo, descripción de colección se hace en un editor WYSIWYG agrega su propio HTML así que no necesitábamos preocuparnos por envolver eso o meternos con esto aquí. Si quisiéramos, podríamos agregar un filtro a un HTML distribuido pero no vamos a hacer eso. Entonces tenemos justo aquí incluir clasificación de colecciones. Porque hemos utilizado estas bonitas clases, podemos ver que a la derecha está nuestra clasificación de colecciones. Entonces echemos un vistazo, y seguro aquí tenemos este módulo, ordenar por y este tipo y somos lo suficientemente inteligentes como para meternos en ese fragmento e incluir. Entonces es cómo de abajo. Mira eso. Clasificación de cobranza. Abre a este tipo. Aquí tenemos esta lógica aquí para hacer nuestra clasificación de colecciones. Se deja caer automáticamente. Entonces si quisiéramos, en algunas tiendas esta es una modificación de tema común. Ya he llegado, donde alguien dice bien quiero que la gente sea capaz de ordenar por mejor venta y alfabéticamente y precio, pero no quiero que se ordenen por fecha. No quiero que la gente se preocupe de que algunas cosas estén viejas o desactualizadas. Entonces si quisiéramos mientras estemos aquí, solo adelante y podríamos simplemente matar eso y vamos a ver qué pasa. Entonces, entonces ahora, ya no está aquí. Enfriar. Entonces, me estoy moviendo justo, tenemos este comentario. ¡ Whoops! Sigo en la clasificación de coleccionismo. Volvamos a la colección.líquido. Ahí vamos. Otra cosa, el editor de Shopify que está integrado justo en el tema, tan genial. De nuevo, puedes usar textmate si quieres,
usar el tuyo propio y sincronizarlo. Pero, no, vamos a dejar eso para desarrolladores más avanzados como Gavin Ballard, quien va a hablar de ello en un curso diferente de Skillshare. Está bien. ¿ Qué tenemos? ¿Dónde estaba yo? Entonces, hemos cubierto esta lógica si hay una descripción versus no una descripción. Estamos haciendo una inclusión para la clasificación de colecciones. Y aquí vemos por qué no incluimos. Porque tenemos que repetirlo debido a esa lógica. No quiero tener ese código ahí dos veces, sobre todo cuando le estoy haciendo cambios como vimos. Entonces, por eso hacemos el fragmento y lo ponemos ahí dos veces. Y muchas veces, los fragmentos son agradables justo cuando estás trabajando mucho en un tema. Mantiene el código más limpio. Es más fácil de ver. Más fácil de leer de un vistazo. Está bien. Y luego terminamos nuestro endif. Entonces, aquí tenemos un comentario. Utilice el uniforme de cuadrícula de clase para que las columnas de tamaño
uniforme se borren correctamente entre sí en cada punto de ruptura. Entonces, sabemos que hemos agregado algo aquí para nuestros puntos de ruptura responsivos. Entonces, tenemos un uniforme de rejilla. No sé necesariamente que esto necesitara un comentario. Supongo que no todo el mundo es super end responsive. Está bien. Tenemos un comentario. Y de nuevo, la razón por la que estos comentarios no solo se envuelven en etiquetas de comentarios HTML, están envueltos en etiquetas líquidas es porque éstas no se renderizarán, y no llegarán al usuario final. Entonces, no los verán si se sienten snoopy. Para que puedas poner ahí lo que quieras. También va a hacer que el tamaño de página sea un poco más pequeño. Entonces, hablamos de bucles antes. Aprendimos no tener miedo de los bucles. Y aquí tenemos un bucle. Entonces, para producto y recolección de productos- por lo que cada producto que está en esta colección de productos, incluiremos producto grid item. Este es un lugar perfecto para poner un fragmento por supuesto. rejilla del producto se refiere a un producto. Esta unidad única. Tienen una bonita convención de nomenclatura aquí, razón por la
que quieres darle a tus fragmentos nombres
lindos que sabes lo que son de un vistazo. Imagina si todos estos fragmentos solo fueran etiquetados como A1, A2 y widget. No va a ser útil. Por lo que definitivamente apegarse a una buena convención de nomenclatura que describa lo que está pasando. Y al mismo tiempo, el usuario final no va a ver eso si están husmeando a través de tu código. Por lo tanto, siéntase libre de usar nombres largos, expresivos, descriptivos. Entonces, bien para incluir producto y luego tenemos otra. Entonces, podríamos decir aquí es para producto en colección.productos. contrario, es decir, si no hay nada ahí más se va a agarrar- así que, si collection.handle es igual a todos, y las etiquetas actuales no son ninguna, agrega productos predeterminados para ayudar con la incorporación para colección/solo todo. Está bien, muy inteligente. Incluso hace algo loco. Carga diferentes CSS. Mira esa etiqueta de hoja de estilo URL de activo global. Probablemente no tendría esto en tu propio tema en un tema estándar. Pero esto es inteligente. Incluir onboarding colección vacía. Está bien. Entonces, sabemos que lo hemos hecho. Sólo sucede en/todo. Sólo sucede si está vacío. Entonces, vamos a cumplir con el primer requisito. Entonces, es una colección maneja. Tenemos... vamos a darle el mango a todos. Entonces es lo que hace, todo es una colección por defecto que existe en Shopify que muestra todos tus productos a la vez así. Y si estuviera vacía- entonces, sólo
hemos cumplido con la mitad de la lógica porque lo hicimos si y las etiquetas actuales equivalen a que haría otra cosa. Y luego si existe la colección pero está vacía, muestra el mensaje. Tenemos colección de párrafo general no coincidencias. Esto lo vimos antes cuando hicimos la demo for-loop. Podríamos tener una colección que no tiene nada en ella. Entonces, ponemos esta lógica más y cae en este tipo. Nuevamente, esto es de la traducción al idioma. Pero podrías reescribir esto si quisieras. No podías hacer esto en un tema que presentas a la tienda temática. Pero en tu propio lo podrías hacer. Entonces, solo diremos: “Vaya, nada ahí, jefe, endif, endfor”. Entonces, esto concluye nuestra lógica y concluye nuestro bucle. Ahora, bajamos a este tipo interesante. Tenemos paginación. Entonces, si hay múltiples páginas, si paginate.page es mayor que una, así que si tenemos más de una página, eso va a desprender esta lógica, que es nuestra paginación. Entonces, hacemos una regla horizontal para que pudiéramos verlo, paginación de clase div. Aquí está nuestro paginate. Mira todos estos filtros. Esta cosa es fabulosa con filtros. Está bien. Paginar, paginación por defecto como asa. Interesante. Me pregunto si podríamos encontrar eso en la hoja de trucos. Ahí está, paginación por defecto como filtro, utilizado en conjunto con la etiqueta de líquido paginate. Bueno, eso no es particularmente útil. A ver. Muy bien, vamos a encontrarlo. Entonces, aquí hay un tema ahora. Hay un límite de 50 productos cuando haces paginación. Generalmente, entonces, se dividen uniformemente hago 48. Bueno, sigamos adelante y encontremos nuestro paginate. Ahí está, paginate objeto paginate default. Entonces, aquí vamos. También puedes usar- etiqueta paginates, se construye usando atributos del objeto paginate. O bien, puede utilizar la paginación predeterminada como alternativa rápida. Entonces, esto es muy inteligente. Puedes escribir tu propia paginación si quieres hacerte fantasía, o porque tenemos nuestras diferentes opciones aquí, podemos hacer la paginación que queramos, o podemos cargar la paginación predeterminada. Entonces en cualquier lugar que queramos usar la paginación, así podremos entrar ahí. Podemos pensar en esto como si fuera propio fragmento ineditable. Entonces, escribimos entrada paginate salida de paginación predeterminada, y ahí va. Eso es un ejemplo. Entonces, probémoslo. Podemos forzar a esta cosa a correr. Subamos y vamos a bajar nuestra colección para paginar por tres. Entonces carguemos. Está bien. Entonces, aquí deberíamos tener suficiente. Deberá paginar para nosotros. Mira eso. Sí lo hace. Entonces, ahí está tu paginación predeterminada, uno, dos, tres. Echemos un vistazo al medio. Tenemos estas flechas izquierdas derechas. Porque pudimos ver que eso pasaba aquí. Reemplazar cita izquierda anterior por una flecha izquierda. Entonces, tenemos nuestras entidades HTML. Echemos un vistazo a esto. Vamos a sacarlo y te mostraré lo que está haciendo ahí. Porque este es un gran ejemplo de un filtro. Los filtros pueden usar eso. Es decir, en muchos sentidos, eso es similar a una expresión regular. Vigila esto. Entonces, ahí. Entonces, esos eran los comportamientos por defecto que anterior- pudimos usar filtros para editar el fragmento predeterminado aunque de otra manera no tendríamos acceso a él, lo cual es inteligente. En realidad prefiero eso. Creo que ese es un mejor ejemplo de paginación. Pero al revés es muy limpio, muy limpio. Y sobre este tipo, yo sí... podemos separarlo. Me gustan esas flechas, pero no me gusta deshacerme de la palabra siguiente. Entonces, vamos a tratar- hagamos esto. Si dejamos la palabra siguiente pero reemplazamos eso. Guardar. Boom. Mira eso. Muy cool. Entonces, busquemos arriba- solo agarra la información de ese filtro. Entonces, aquí tienes reemplazar y reemplazar. También puedes hacer reemplazar primero, lo cual es genial. Entonces, sólo va a hacer el primero que sea útil para bucles como una colección. Esa es la descripción que tenemos aquí. Entonces simplemente regular replace, reemplaza todas las ocurrencias de una cadena por otra. Normalmente, hacer cosas así en otros idiomas, PHP, lo que sea, implicaría expresiones regulares, sería muy loco. Aquí, es muy sencillo. Simplemente escribes. No es diferente a encontrar-reemplazar en una aplicación de texto. Reemplaza lo que quieres reemplazar por lo que lo estás reemplazando. Está bien. Entonces, ahí, así funciona la colección. Estamos aplicando esa lógica otra vez. Entonces también aprendimos un poco- aprendimos mangos, paginación, y ese filtro limpio-reemplazar. Entonces, solo advierte ahí, ten en cuenta que cuando estés haciendo- en una colección donde estás exhibiendo productos, hay un máximo de 50 que puedes ejecutar. Por lo general, se quiere dividir por algo bonito. Entonces, solemos hacer un máximo de 48. Está bien. A continuación, vamos a mirar- no tienes que preocuparte si esta fue complicada. Vamos a ver page.liquid, que es la más simple de todas nuestras plantillas.
13. Página: Está bien. Hemos cubierto y aplicado lo que aprendimos a productos, colecciones y luego uno se volvió un poco loco con la paginación. Pero te prometo que estamos en la más fácil de todas, páginas. Entonces, tenemos, aquí está sobre nosotros página y afortunadamente, no está pasando mucho aquí. Entonces, al igual que antes, mucha de nuestra referencia, nuestros objetos para página y son tan pocos. Qué bueno de ellos, todos estos de un vistazo puedes averiguar lo que hacen. Autor de la página, contenido, eso es como descripción del producto. Es solo el contenido de la página. El mango del que hablamos, ese es este tipo de aquí arriba. El sobre nosotros, y conocemos la URL. También es cómo podemos referirlo a través de la tienda. ID, concepto similar a manejar. Páginas publicadas en, es solo nuestro filtro de fecha o nuestra marca de tiempo y luego podemos usar el filtro de fecha para formatear eso de una manera específica. Entonces, entonces por supuesto también tenemos nuestra hoja de tramposos. Nuestro maravillosamente marcado en hoja de tramposos limpia. Entonces, el mismo trato simplemente nos da acceso rápido al mismo. Pero las páginas no son tan complicadas. Entonces, aquí tenemos nuestro sobre nosotros y en este punto, probablemente
podrías escribir éste tú mismo,
pero no obstante echemos un vistazo a las plantillas. Vamos a sumergirnos en temas, editar HTML. HTML, ¿cómo se pronuncia HTML? Entonces, en mi cabeza realmente digo HITIMAL pero eso no puede estar bien, o ¿qué tal el metal caliente? No lo sé. De acuerdo, me digrego, plantillas, página.líquido. Se puede notar a este tipo, página.contact.líquido, vamos a hablar de lo que está pasando ahí. Pero sólo veamos página.líquido. Bendícenos, esta cosa son 17 líneas. Este es el más fácil, más simple que hemos mirado y te garantizo en este punto que deberías poder echarle un vistazo y saber qué está pasando. No es duro. Tenemos justo nuestro diseño estándar, nuestras cosas HTML aquí. Entonces, páginas título envuelto en etiquetas de encabezamiento, ¡maravilloso! Comentario, el contenido regular de la página va aquí. Bueno, claro. Entonces, el contenido de la página eso es todo. No, hay sobre nosotros página. Eso es todo lo que hay a ello. Pero mientras tengamos esto abierto, aquí intentemos meternos con algunas otras cosas. Entonces, tenemos, mira que tenemos página publicada en y el filtro de fecha y tenemos autor. De acuerdo entonces, vamos a meternos con los dos. Muy bien entonces, tenemos a este tipo, justo aquí abajo. Voy a seguir adelante poner un párrafo ahí dentro con mi página autor, página.author. Está bien. Pongámoslo ahí, publicado por page.author y luego hay un libro mayor en él. Voy a ser un chico malo. Vamos a envolver esto en algunas etiquetas enfatizan, guardar, refrescar. Mira eso, publicado por Shopify. Porque este es solo un tema predeterminado que está aquí que se agregó en la tienda, por
lo que acaba de publicar Shopify. De lo contrario, se señalaría el nombre del funcionario que lo hizo. Entonces, mientras estemos en ello y nos estamos metiendo con ello, vamos a meternos con este tipo, página.publicado en. Entonces, podríamos decir a y vamos envolver un líquido, guardar, refrescar. Está bien. Entonces, sí se muestra exactamente cuando se publicó en pero no es de una manera útil,
útil a menos que realmente te interesen los terminales Unix. Entonces, tenemos que usar el filtro de fecha es lo que sugieren. Entonces, vamos a hacer clic en ese enlace. Aquí, podemos formatear la marca de tiempo en otro formato de fecha, en cómo queremos hacerlo, tu preferencia quizá la preferencia del país pero nos dan este ejemplo, podríamos decir martes 22 de abril 14. Está bien. No me gusta ese T-U-E, es uno abreviado. Quiero el nombre completo del día de la semana. Entonces, es sensible a mayúsculas y minúsculas. Deberíamos hacer una A capitalmente, lo siento. Copiemos su ejemplo y volvamos aquí. Está bien. Entonces, es un filtro por lo que agregamos una tubería y luego pegamos en nuestra fecha de filtros y luego estos son los atributos del filtro. Vamos a guardarlo. Mira eso, ya mucho mejor. Pero no me gustan todas estas abreviaturas. Entonces, sigamos adelante y cambiemos. Si cambiamos la minúscula a que es fecha abreviada para mayúscula
A, debería darnos el día completo. Ahí vamos, posteado el lunes. Veamos qué otros tenemos aquí. Entonces, aquí tenemos el sábado, martes, enero. Yo quiero el día del mes cero acolchado. Eso es lo que me gusta. Entonces, aquí sólo lo haremos más limpio. Día del mes. ¿ Eso es correcto? Lo siento, día del mes, me refería a fecha de mes. Día del mes, formemos la fecha. Voy a ver esto aquí. Este filtro incluso simplificará bastante todo el asunto. Entonces, podemos hacerlo de esa manera o qué si solo hacemos esto. ¡ Uy! Basta con dejar esto, guardar, recargar. Ahí vamos. Esa es una forma súper limpia de hacerlo, se ve bien y tenemos nuestra primera cita por ahí, así que funciona. Las páginas son muy sencillas. Aquí abajo tenemos page.contact y tenemos dos páginas diferentes. Voy a parar aquí y en eso nos vamos a sumergir a continuación. Vamos a averiguar qué está pasando aquí
14. Plantillas alternativas e fragmentos: SkillShareRemo, tenemos una tienda arriba, tenemos nuestra Demo de Acerca de Nosotros en esta página, tu plantilla de página regular, y de eso hemos estado hablando. Hemos estado caminando a través de nuestras plantillas. Aquí tenemos, podríamos ver aquí dentro hay página.líquido y página.contact.líquido. Yo quería hablar de lo que está pasando ahí, de qué es ese trato. Entonces, tenemos esto. Echemos un vistazo a nuestra página de contacto. Entonces tenemos esta página, es Contáctenos, Habla con Kurt. Si buscamos aquí en nuestra URL, vemos que va a cortar páginas. De acuerdo, entonces sabemos que es una página, pero tiene esta forma de fantasía, diferente a ésta, que también sabemos que es una página. Entonces, ¿cómo hacen eso? Si miramos aquí tenemos, page.líquido, página.contact.líquido. En Shopify, no estás limitado a solo estas plantillas, puedes agregar, podemos hacer múltiples versiones de plantillas. No sé cuál es el límite, pero ciertamente nunca lo he golpeado. Entonces, tenemos page.líquido y luego hay página.contact.líquido. Entonces, cuando lo has nombrado así,
esto se convierte en página es solo la plantilla predeterminada, y luego ahora existe una plantilla de página alterna llamada Contacto. Entonces justo lo mismo que antes, aquí
hay html y puedes agregar lo que quieras. En este ejemplo, se requiere que cada tema tenga una plantilla de página Contáctanos con este formulario aquí. Incluso la forma es parte de Shopify, es parte de líquido. Entonces, no tienes que preocuparte por meterte con formularios y tiene anti-spam en él, muy bonito. Entonces, vamos a echar un vistazo, ¿cómo aplicamos eso? ¿Cómo funciona eso? Si abrimos nuestras páginas y nos dirigimos hacia abajo a Contáctanos, desplázate hacia abajo, plantilla de página y página.contact. Entonces, si mi archivo tiene múltiples plantillas, este tipo viene aquí con page.contact y page, cool. Puedes hacerlo por como por casi todo, lo haces por productos, lo
podrías hacer por colecciones, es extremadamente útil. Por ejemplo, lo hicimos, digamos que tienes un cliente o quieres iniciar un producto y ponerlo en Kickstarter y lo tienes en la tienda Shopify. Pero no puedes vender tus productos mientras el Kickstarter está funcionando, por lo que los productos Kickstarter, puedes hacer una plantilla alterna llamada product.kickstarter.liquid y luego simplemente cambiar tu botón Añadir al carrito por un botón que dice Back us on Kickstarter and Goes to Kickstarter, ese sería un ejemplo perfecto de dónde usar una plantilla de producto diferente. Entonces, tomemos un, hemos establecido page.contact y podrías ver si cambié a página y golpeé Guardar y refrescar, mira eso, Contáctanos, Habla con Kurt. Aquí, es esa otra plantilla de página que hicimos completa con autor y fecha. Pondremos a ese tipo de nuevo a page.contact y golpearemos Guardar, refrescar, ahora vuelve a esto. Entonces, vamos a ver la página.contact.líquido. Entonces, si bajamos, veamos formulario contacto, es así de sencillo agregar un formulario, cosas
muy, muy simples y endform. Eso es todo, y este tipo es nuestra forma. Las formas son muy simples en Shopify pero eso es lo propio por separado que hablaremos. En realidad, no creo que lleguemos a ello en este, en este. De acuerdo, así que hagámoslo, hablé de producto.líquido, así que probemos eso. Veamos cómo hacemos una, ¿
cómo hacemos una de estas plantillas alternas? Entonces, tengo product.liquid aquí, haz clic en Agregar una Nueva Plantilla y crea una nueva plantilla para y diremos producto llamado Alternate. Usaremos ese ejemplo, llamémoslo Kickstarter. Boom, ahora tengo product.kickstarter.liquid aquí, y no quiero meterme demasiado con él. Pero, cambiemos algo al respecto. Encontremos algo que cambiar. Veamos descripción. Entonces, aquí abajo digamos, solo agrega próximamente a Kickstarter,
ahorra, y vamos a sumergirnos en los productos. Productos, tenemos nuestras patadas geniales, y mira lo que ha aparecido aquí. Ahora, tenemos plantilla de producto y product.kickstarter, guardar, verlo, y ahora, hay una línea que agregamos, Próximamente a Kickstarter versus si voy, volvamos a, mira a cualquier otro, sí no tener esa línea. Entonces es, se vuelve muy fácil agregar estas plantillas, eso tardó unos segundos, y es útil para los clientes que dicen: “Bueno, quiero que algunos productos se vean como este layout y otros productos para tener este layout, y yo quieren poder elegir manualmente”. De acuerdo, así que solo haces una plantilla alterna para ellos y luego es tan fácil como recogerla aquí. Entonces, es muy agradable, muy fácil para todos los involucrados. A mí me gusta mucho. Es una gran característica. Lo usamos a menudo. Yo quiero hablar de fragmentos. Hemos visto fragmentos. Nos metimos un poco con ellos pero no hemos hecho uno nosotros mismos. Realmente no hemos cavado en ello. Entonces, tenemos nuestra carpeta de fragmentos y en ella están exactamente esos fragmentos de código. Hay dos razones por las que querrías usar un fragmento. El primero es, para que pudiéramos tomar un enfoque seco. Ser seco no te repitas. No lo hacemos, si aparece un trozo de código varias veces, podríamos ponerlo en un fragmento, incluirlo en cualquier lugar que lo necesitemos, en múltiples plantillas, y entonces solo podemos, si tenemos que actualizarlo, podemos actualizarlo en el fragmento y se actualiza en todas partes del sitio automáticamente, que lo hace muy conveniente. Otra cosa para la que podríamos querer usarlo es sólo para mantener limpio el código, y eso es realmente para nosotros, como humanos, tratando de ordenarlo y ver cosas de un vistazo. Entonces, ahora mismo eso es lo que quiero hacer como ejemplo. Entonces, muchas veces, digamos que un cliente tiene o tienes un tema más antiguo y por cualquier razón que quieras mantenerlo, quieres actualizarte a un nuevo tema, pero quieres agregar una nueva característica como etiquetas gráficas abiertas. Las etiquetas gráficas abiertas son describir cosas, describir el contenido de una página a los motores de búsqueda, a las redes sociales, y luego se obtiene ese fragmento agradable, rico. Perdón, bueno, sí, fragmento rico pero datos ricos cuando la gente lo comparte. Entonces, aquí tengo de Shopify, de Github, tengo todo este código, y lo voy a copiar y todo ese código nos permite crear, maneja lógicamente nuestras etiquetas gráficas abiertas. Entonces, si vuelvo a mi página principal, debajo de ayudantes lo voy a pegar ahí dentro. Mira eso, es enorme. Ocupa una tonelada de espacio, no se ve bien, una
especie de dolor si tengo que trabajar en el tema si estoy trabajando en él. No se ve limpio como lo hacía antes, así que en lugar de hacer eso, vamos a crear un fragmento y a poner a ese tipo, nos pide crear un nuevo fragmento. Entonces, veamos cómo lo había llamado Shopify, etiquetas de meta dash
social. Entonces, queremos asegurarnos de que estamos usando un nombre descriptivo para que pudiéramos ver de un vistazo, y si alguien más tiene que trabajar en este tema, podrían verlo de un vistazo lo que estamos haciendo. Entonces, haremos etiquetas de meta dash social. No le agregamos ese líquido,
porque cuando creamos fragmento, Shopify lo hace por nosotros. Está bien, ahora lo tengo pero solo tengo un archivo vacío, así que voy a pegar mi gran bloque de código desordenado ahí y guardar. De acuerdo, entonces tengo este código, ahora
puedo hacer referencia a esto en cualquier plantilla usando el comando Incluir. Entonces, volvamos a tema.liquid y en esta sección de ayudantes, lo
vamos a agregar. Entonces, digamos, es muy fácil, hacemos corsé rizado, por ciento incluye el comando tiene sentido, y cotización simple,
metaetiquetas sociales y luego lo cerramos, fácil, ahorramos. Entonces, aquí refrescamos nuestra página y para nosotros no cambia nada, así que tenemos que mirar la fuente. Desplázate hacia abajo hasta donde conseguimos, ayudantes y luego aquí está, tenemos uno, dos, tres, y aquí es donde empieza. Desafortunadamente, agregó un comentario ahí dentro para que podamos verlo de un vistazo. Pero ahí, es inteligente, elige si entonces se crea nuestras etiquetas gráficas abiertas para nosotros. Entonces, volvamos atrás, y todo es con esta sola línea, el sencillo incluye y si volvemos a nuestras metaetiquetas sociales, pudimos ver esta primera línea aquí, es esta línea de aquí, así que la mantiene limpia, lo ha hecho fácil pero probemos otra cosa. Entonces, tengo tema.líquido, tengo mi inclusión, ¿qué pasa si lo deletreo mal? Entonces o por error le sumé líquido. De acuerdo, lo salvaremos y veamos qué pasa. Obtenemos un bonito código de error, es legible por humanos así que de esa manera podríamos depurar esta fácilmente, bonita característica en Shopify. Nos están cuidando. Entonces, tenemos error de líquido, no
pudimos encontrar activo, y es porque nos agrega líquido de punto. Entonces, eso es bastante fácil de arreglar. Hace la vida sencilla.
15. Comprobación: Caminemos por nuestra página del carrito de compras. Es una página importante y es chocantemente sencillo trabajar con. En realidad, la forma en que Shopify lo configuró para nosotros, es muy sencillo. Entonces vamos a averiguar lo fácil que es eso. Para ello, vamos a mirar nuestra
plantilla cart.liquid y al igual que con caminar por otras plantillas, vamos a aplicar lo aprendido aquí y pasar por el carrito. Entonces si vamos a hacer eso, deberíamos tener nuestra referencia abierta, objetos de carro. En realidad hay muy pocos objetos que el carrito utiliza aquí, y luego mientras estemos en ello, también
podemos mirar la
plantilla cart.liquid que nos da algunas referencias a cómo se supone que funcionan las cosas. Entonces en cart.líquido, primero, tenemos esta lógica si porque ¿y si no hay nada en el carrito? Una gran modificación al tema puede ser hacer- así que aquí, tenemos si cart.item count es mayor que cero, si hay artículos en el carrito pero si no lo hubiera, podríamos modificarlo para decir: “Aquí hay algunos artículos destacados. Lo cual podría ser una forma inteligente de alterarlo. Entonces aquí, sí tenemos un artículo en el carrito y lo esperaríamos. Esperamos que la gente nos esté comprando. Típicamente, en la mayoría de los temas, sólo va a ser una mesa. Esa es la forma en que lo abordan. Tenemos nuestro rumbo, solo carrito título general,
este tipo, esto acaba de estar aquí de nuevo para la internacionalización. El carrito es sólo una forma. Es una forma y publica y eso es todo, pero eso te hace la vida realmente simple con el uso de esto, sobre todo si solo tienes habilidades HTML/CSS, no
tienes que preocuparte por meterte con Javascript para que este formulario funcione. Entonces aquí, pudimos ver, ya abrimos nuestra mesa. Es una forma muy común de hacerlo. Las etiquetas para el carrito, de nuevo, tenemos estas etiquetas de internacionalización, y nos dirigimos hacia abajo, y lo primero que encontramos es nuestro buen viejo amigo, el for- loop. artículos del carrito no son referidos, son productos, no se
les conoce como productos, se les llama artículos. Entonces para artículo en cart.items, se va a recorrer. Por lo que cada artículo en el carrito, en este caso, es una fila en esa tabla a medida que lo recorremos. Aquí, hemos hecho algo lindo. Tenemos la imagen aquí dentro. Poner la imagen en el carrito es grandes conversiones de impulso porque ayuda a la persona a entender, “Sí, este es el artículo que estoy comprando, voy a conseguir lo que se imagina”. Entonces aquí, le agregamos la URL, para
que puedan hacer clic atrás lo cual no es mala idea, si alguien quiere revisar algo. Y tú estás aquí, después agarramos la fuente de la imagen e incluso tiramos la vieja etiqueta ahí, con el título. Entonces si pasamos por encima de él, ¿debería mostrar la etiqueta ol'? Inspeccionemos el elemento. Ahí está, alt buenos zapatos ol', por lo que sí reportar el título del producto ahí dentro. Oye, retrocedamos, sigamos mirando a través de esto. Entonces, mismo trato para el- queremos mostrar el título del producto. Entonces es item.product.title y aquí arriba, hacemos las URL, volvemos a enlazar a ella a menos que sea una variante. Entonces si es una variante, ¿qué estamos haciendo aquí? A menos que el título contenga default y entonces tenemos, ah, así que tenemos una pequeña etiqueta con el título de la variante, muy inteligente. Entonces si el zapato viniera en múltiples opciones o así digamos, diferentes tallas y yo escojo la talla, aparecería aquí. Muy inteligente. Entonces de esa manera la gente sabe : “Estoy consiguiendo lo correcto”. Si acabo de ver el zapato sin la talla ni el color, eso podría confundirme, preocuparme, matar conversiones. Ah aquí, tenemos un ajuste temático. Entonces si en mi configuración, he habilitado carros o vendedores. Se va a mostrar quién es el fabricante, artículo. proveedor. Entonces nos desplazamos hacia abajo por aquí. De acuerdo, entonces aquí, está hablando de propiedades del elemento. Propiedades del artículo es una modificación de tema interesante y es posible que quieras tener, digamos, vendes camisas monogramadas. Ya sabes que eso está apagado como la personalización de la personalización en el producto. Puede utilizar las propiedades de línea de pedido para almacenar variables
individuales piezas de información sobre el producto. Quiero decir de nuevo, esta es una modificación temática. No es estándar, dependiendo de la tienda, es posible que lo necesite o no. La mayoría no lo hará pero definitivamente hay aquellos por ahí que lo hacen y luego se puede escribir en múltiples líneas de ítems. Por lo que aquí, podemos ver p. para, p en propiedades del elemento. P.Primero, se asoció la comprobación y el archivo subido. Por lo que incluso subiría archivos con él. Entonces digamos, estaban imprimiendo algo. Aquí, podríamos hacer eso. Entonces vamos a seguir adelante, y aquí, podríamos ver que han añadido el comentario. Es opcional y tienen el enlace a la documentación sobre cómo hacerlo, cómo recolecto información adicional. Esto es en este caso, lo
estamos haciendo en el carrito y luego publicaremos un e-mail o una confirmación, el correo electrónico del pedido y hay que modificar eso también para que funcione. De acuerdo, en adelante tenemos a este tipo, carro cambio de línea forloop.index. Podríamos pensar que este botón quitar es algo complicado pero si lo miramos, realmente no lo es. Es que solo usan, ya sabes, solo
estamos publicando en un formulario. Tenemos un enlace aquí, así que cambio de carrito, tenemos esta línea de cadena de cuarto y forloop.index. Entonces si recuerdas de nuestra aventura anterior con bucles, forloop.index solo genera qué iteración en el bucle somos. Entonces aquí tenemos, esta es la línea uno. Entonces forloop.index solo genera uno y si agrego dos elementos, se convertiría en dos, y luego usando esa cadena de consulta, luego establece la cantidad en cero lo que funcionalmente la elimina. Entonces, cuando eliminas un artículo, solo estableces cantidad igual a cero como fuerza del núcleo. De acuerdo, entonces volvemos a mostrar precio usando filtros. Queremos que Shopify nos rinda la moneda. Entonces usamos el filtro de dinero que lo formatea muy bien y le agrega la moneda. bajar, quizá queramos cambiar la cantidad. Entonces aquí, muy simple, es una entrada, y entonces tenemos justo aquí. Así que actualiza item.id. item.id es un número único en lugar del mango para que el producto
lo identifique y luego el valor se convierte en justo lo que sea esa cantidad de artículo. Etiqueta de carrito total, mismo trato. Entonces se va a agarrar, tenemos item.line_price, y luego de nuevo, un filtro para configurarlo como para formarlo como moneda. Ahora, la razón por la que tenemos... en vez de, tenemos precio aquí arriba y precio de línea aquí abajo. Este es el precio de veces cantidad, por lo que el precio de línea es precio veces cantidad para ese artículo, y de nuevo, no tienes que hacer nada, Shopify está calculando esto por ti. Bajemos la cabeza, así que tenemos si. Aquí hay otro ajuste de tema del que aún no hemos hablado pero lo haremos. Tenemos un ajuste de tema para notas de carrito habilitado. Si las notas del carrito están activadas, entonces crea un campo de formulario para agregar una nota, y una nota sobre notas, solo
puedes tener una en tu carrito. No se puede hacer múltiple pero luego hay trabajo alrededor, hay otras formas de escribir información adicional. Pero por solo una nota de carro regular, estas instrucciones especiales, podrías ponerla ahí, y eso es probablemente, cada tema apoya esto. Entonces esto es a menudo lo que la gente usa como un trabajo alrededor en lugar de tener que meterse con como alinear propiedades. Se podría decir, está bien, hacer una nota para lo que sea que sea lo que necesitan. Es la salida fácil. Está bien y luego, cosas regulares. Una vez que estamos de vuelta, aquí arriba, hemos terminado el bucle. Una vez que estamos fuera del circuito, las cosas se vuelven aún más simples. De verdad, solo queríamos mostrar el subtotal y nuestro botón de checkout pero ¿cómo funciona ese botón de checkout? De acuerdo, ¿qué tenemos? Check out de entrada, cart.generalcheckout. Para que pudiéramos ver que es increíblemente simple. Es solo una entrada y vamos a ver la documentación de esta cosa. Consideraciones de plantilla, procediendo a la caja. Todo lo que está haciendo, porque el carro es un formulario, es solo publicar el formulario a Shopify y solo necesitas la entrada, eso es todo. Es decir, realmente es tan simple como parece. Es todo lo que hay a ello. Entonces está bien, tenemos que comprobar qué tipo de modificaciones podríamos hacer esto? Podemos hacer propiedades de línea de ítem las cuales hay guías de documentación disponibles para ello. También podemos hacer un par de cosas más. Tenemos nuestro subtotal, 110 dólares. Digamos, ofrecemos envío gratis. Podríamos agregar lógica aquí que muestra, podríamos usar si entonces lo demás. Por lo que podríamos decir, el subtotal es de más de 100 dólares, muestra un mensaje de envío gratis. Entonces intentemos eso. Aquí vamos. Veamos encontrar mi precio. Entonces tenemos cart.totalprice. Copiemos a ese tipo. Vamos a incluirlo, sólo lo
pondremos bien en esta etiqueta de párrafo. Entonces, veamos. ciento, si cart.precio total es mayor a 100, eso es todo, calificas, diré, más envío gratis. Está bien. Cerremos nuestra declaración. ciento. Endif. Enfriar. Está bien. Guárdalo. Veamos qué pasa. Aún así, nos dieron eso, además de envío gratis. Está bien. Ahora, hice esta cosa graciosa aquí donde tengo este número. ¿ Por qué lo hice de esa manera? Está bien. Entonces, vamos a derribarlo a 100 y ver qué pasa. En realidad, aquí. Lo haremos al revés, igual a 100. Guardar. Todavía funciona. Está bien. Pero nuestro precio es de 110. Entonces, agrega ceros dobles ahí, guarda, actualiza, sigue mostrando. Añadamos otro ahí. Ahora no aparece. Entonces, ¿qué está pasando aquí? ¿ Por qué nos está haciendo eso? El motivo es, el precio, si no se le aplica ese filtro, Shopify lo expresa como en centavos, en centavos. Entonces, tienes que multiplicarte, si estás haciendo matemáticas así, tienes que multiplicarte por 100. Eso es todo lo que hay, lo que está pasando ahí. Pero esa es una modificación de tarifa muy agradable, muy buena simple que cualquiera puede hacer. Eso también impulsa la tasa de conversión. A menudo hacemos eso para los clientes, si ofrecen envío gratis. Está bien. Entonces eso nos va a llevar a “Checkout”. Entonces, cuando estoy en el carrito y hago clic en “Checkout”, sabemos que publica un formulario, url. Shopify se encarga de eso por nosotros, y nos manda a aquí. Aquí, tenemos, esta es la versión más reciente del checkout de Shopify. Es hermoso, es receptivo, pero si no lo configuras, es muy sencillo. Puede que no coincida necesariamente con su tienda. Si tenemos, tenemos este botón de “continuar el método de envío”. Aquí arriba no tenemos logo. Si volvemos, tengo estas grandes y bonitas fuentes Helvetica y todo está en grises. A lo mejor no para la conversión, pero sin duda es bonita. Entonces, ¿cómo hacemos eso? ¿ Qué podemos hacer con este check out? Si nos dirigimos a personalizar tema, los ajustes del tema regular, Shopify agrega automáticamente este panel, este panel de “Checkout”. Si hacemos clic en ese tipo, tenemos un par de opciones aquí. Entonces, el primero es fondo personalizado. Entonces, no tenemos antecedentes aquí arriba. Entonces, veamos la tienda demo, una tienda real, Tattly, muy exitosa tienda Shopify, vende tatuajes temporales. Si hago clic en check out, bueno, mira eso. Ahí está nuestra pancarta. Incluso tienen sus fósforos de logo. Bueno, aquí, tu imagen de logo, e incluso si ya has subido una imagen a tu tienda, solo
tienes que seleccionar “Storefront” y listo. Se agrega tu imagen. Es así de sencillo. Entonces, dependiendo de tu tienda, si tu logo está a la izquierda, al centro o a la derecha, puedes hacer ese partido. Entonces, se traslada. Entonces, tu cabecera, que es lo que la gente ve primero lee suficiente patrón, verán primero y sabrán que este es el sitio correcto. Esto se ve igual, esto se siente bien para mí. Podemos volvernos más locos, obtenemos el “Área de contenido principal”, podríamos establecer un fondo personalizado. En realidad nunca lo he hecho. Yo quiero mantenerlo limpio, con buen aspecto. El “Resumen de pedidos”, podríamos fijarlo. Entonces, aquí, volvamos. El lado izquierdo es ese área de contenido principal, lado
derecho es ese área de resumen de contenido. A eso se refieren cuando hablan de esos antecedentes. También puedes establecer el color de fondo. Entonces, color de fondo, aquí vamos. Hagámoslo un poco rosa, dale todo matiz ahí, guardemos cambios y veamos qué hace eso. Entonces, realmente hemos hecho que eso destaque. A lo mejor te das cuenta de algo genial que pasa aquí. No estoy seguro de cómo hacen esta magia, pero la fuente, el color para esto parece que se establece automáticamente para nosotros dependiendo del color de fondo que elijamos. Podemos ver, si hubiéramos escogido un logotipo, habría estallado ahí. Entonces, volvamos atrás. Deshaznos de ese tipo, nuestro logo. Volveremos a ponerlo a ninguna, y tenemos un par de opciones más aquí. Entonces, “Tipografía”, no podemos escoger ninguna fuente de cualquier manera, pero sí tenemos acceso a algunas fuentes del sistema que podríamos escoger. También tenemos una buena selección, una selección bastante amplia de Fuentes de Google que se cargan. Muchos temas usan Google Fonts. Entonces, estas son opciones muy comunes. También podemos escoger temas que encajen con nuestros, aunque no sea exactamente, puedes conseguir uno que esté cerca. La mayoría de la gente no son diseñadores, no van a atraparlo. Entonces, veamos. Para “encabezamientos”, me gusta “Oswald”. Dale una bonita etiqueta, y luego para nuestro “cuerpo”, vamos a hacer, ¿qué es un buen partido para eso? En realidad, ¿sabes qué? Aquí, es uno de mis favoritos. Está bien. Tenemos “Acentos”, “Botones” y “Flechas”. Definitivamente quiero, mi botón “Añadir al carrito” es para la conversión de cualquier manera. Quiero que mi botón “Añadir al carrito”,
mi botón “Checkout” y mi botón “Continuar a la compra”, mi botón “Comprar” sean de ese mismo color. En nuestro tema, ya los tenemos grises. Entonces, sigamos adelante y pongamos eso, pongamos esos acentos en gris, pongamos mi botón en gris, y flechas, dejaremos rojo. El rojo parece un buen color para las flechas. De acuerdo, vamos a refrescar a este tipo. Mira eso. Ya, a pesar de que no tenemos el control total de esto, acceso
total sobre esta plantilla, a menos que estés usando Shopify plus, podemos modificarlo lo suficiente donde claramente, esta caja luce diferente y de marca a esta otra caja Shopify. Se ve diferente a eso. Aquí, estamos en un paso posterior en el proceso. Entonces, aquí, puedes ver esto luce diferente a este tipo, que definitivamente luce diferente al original, la plantilla predeterminada. Entonces, solo asegúrate de estar siempre, ya sea que sean tus clientes de tienda, siempre configurando esos ajustes de tema para que coincida con la marca de tu tienda Shopify lo más cerca posible. Eso va a reducir la disonancia cognitiva y ayudará a la gente a comprar.
16. Ajustes de tema: Ahora que hemos aprendido todas estas habilidades de Shopify y sabemos Líquido y estructura de temas en nuestra interfaz, quiero aplicarlo todo de una manera que nos dé algo útil, algo de lo que muchas tiendas pueden beneficiarse. Entonces, una modificación muy común que hacemos es el infobar. Entonces, si miramos a Tattly, tienen esta noticia en la parte superior, inscríbase a un boletín semanal Tattly Tuesday. Si nos fijamos en everestbands.com, tienen barcos en todo el mundo, envío
gratis. Eso es muy común. Es un gran lugar para declarar el envío gratis, para anunciar ventas o cosas oportunas. Aquí, tenemos Tienda de Golf Bandon Dunes, también
están ofreciendo envío gratis. Pero queremos hacerlo para que el cliente pueda editarlo. Entonces, lo que queremos es un ajuste de tema en un tema donde el cliente pueda actualizar fácilmente el texto en esta infobar. Está bien. Bueno, vamos a aprender a hacer eso. Entonces, aquí está nuestra cosa de Skillshare y nosotros, muy deprimente, no tenemos una barra de información. Entonces, vamos a aprender a agregar uno. Si nos dirigimos a nuestro tema.líquido, queremos colocar eso justo arriba en el cuerpo. Podríamos simplemente pegar esto aquí, pero somos más inteligentes que eso. Entonces, vamos a hacer una inclusión. Entonces, primero vamos a crear un fragmento y vamos a crear un fragmento llamado barra de información. ¿ Tiene sentido? De nuevo, queremos nombres descriptivos. Hemos creado nuestro infobar.líquido. Ahora, voy a ser un chico malo. Ya sé, no debería hacer estilos en línea, pero para que pudiéramos ver todo y como estamos usando un fragmento, lo vamos a hacer. Ya he escrito mis estilos CSS aquí, lo
vamos a llamar promo banner. Me gustaría ese estilo Tattly, quiero el texto blanco sobre negro. Punta rápida aquí, nunca utilices todo el camino negro o todo el blanco. Si hacemos off black, off white, no hay diferencia destacable, pero el anti-aliasing OSS funcionará mejor. Está bien. Tenemos que poner en nuestro HTML, nuestro contenido. Entonces, aquí y lo formatearemos muy bien. En primer lugar, vamos a verlo con el envío gratis, y vamos a guardar nuestro infobar, y volveremos a teme.liquid. Pongámoslo ahí dentro. Incluye 'infobar' y lo cerraremos. Entonces ahora, ese contenido que escribimos en nuestro fragmento, se va a caer justo ahí dentro y veamos dónde termina. Ahí vamos, guapa. Tenemos una barra de envío gratis, muy bonita. Pero si sabemos que el contenido nunca va a cambiar, podríamos parar ahora. Pero queremos que el cliente pueda editar fácilmente y no deberíamos esperar que se estén ejecutando a través de plantillas temáticas editando HTML. Algunas personas lo hacen, algunas no pueden hacer eso. Pero aunque lo estés haciendo por ti mismo, haz tu vida fácil, hazlo un escenario temático y eso es lo que aprendemos ahora mismo. Entonces, aquí, déjame agarrar ajustes. Entonces, ajustes, puedes hacer tus propias variables aquí, las tuyas. Entonces, la configuración es un objeto y luego el punto lo que sea. En este caso, .promo text. Puedes nombrar esto como quieras por tu cuenta. Pero otra vez, hazlo algo descriptivo. Entonces, aquí, pasando con este tema, lo
vamos a llamar texto promocional. Por primera vez, vamos a descubrir en el archivo de configuración en Ajustes. Entonces, abrimos Personalizar tema. Entonces, están estos tipos, estos ajustes. Eso es parte del tema, tú controlas eso. Al editar el tema, puedes editar lo que quieras ahí. Ahora, veamos cómo funciona eso. Bajamos a Config, esa es esta carpeta Config. Entonces, dentro de la carpeta Config, los datos de
configuración son los ajustes actuales y el esquema de configuración define cómo funcionan esos. Una palabra de precaución aquí, y puedo o no estropearme esto yo mismo, es valores separados por comas son muy importantes. Si pierdes una coma, esta cosa se romperá. Entonces, si te metes con esto, deja de funcionar bien. Lo primero que hay que buscar son las comas perturbadas. Se podía ver la forma en que trabajan. Entonces, tenemos soporte abierto, cabecera de nombre. Personaliza tema, cabecera y luego, ya sabes qué esperar. El primero va a ser logo aquí. Miremos hacia abajo. Encabezado de tipo, logotipo de
contenido. Mira eso. Entonces, queremos sumar las nuestras propias aquí, ¿de acuerdo? Ya lo he escrito, vamos a agarrarlo. Aquí, tenemos, ahí estamos. Entonces, primero, queremos poder establecer nuestro texto. Entonces vamos a agarrar a ese tipo, péguelo aquí. Está bien. Haremos que sea lo primero, así que es fácil para nosotros encontrarlo. Cavar a través de los archivos de configuraciones es un dolor. Entonces, asegúrate de ordenar las cosas lógicamente y etiquetarlas bien. Pero de nuevo, así que vamos a decir, ajustes, tipo es texto, ID es texto promocional. Entonces, este es el tipo de campo que es, ID es la variable, muy simple, y etiqueta es texto de banner promocional. Esto es increíblemente fácil. Con tres líneas, acabamos de agregar un ajuste de tema, eso es genial. Entonces, aquí, lo refrescaremos. Este tipo aún trabaja. Entonces, actualicemos nuestra configuración temática, veamos qué tenemos pasando aquí. Encabezado, texto de banner promocional. Está bien. Entonces, diremos, para que pudiéramos ver una diferencia, envío
gratis más de $100, guardar nuestros cambios, y volvamos a infobar. Entonces, tenemos settings.promotext. Salvemos a ese tipo. Es refrescante. Mira eso, envío
gratis más de $100. Bueno, probémoslo aquí. Entonces, digamos que lo cambian. Se convierte en más de 120. Guárdalo. Refrescar. Mira eso. Entonces, se actualiza. Nos tomó unos minutos poder agregar este ajuste de tema realmente fácil de usar que cualquiera puede usar para actualizar su tema. Pero digamos, puede que no siempre quieras ese infobar. Entonces, tenemos una solución para eso también. Está bien. Tenemos que añadir un nuevo ajuste de tema y eso se va a llamar casilla de verificación. Entonces, vamos a entrar en esquema de configuración. Por encima de nuestro texto promocional, quiero agregar uno nuevo, agreguemos a este tipo. Entonces, tenemos casilla de verificación tipo, nos
dice que la entrada, es el tipo de entrada, eso va a ser, como adivinaste la casilla de verificación, en lugar de texto. Nuestro ID es banner promocional, así que ese es nuestro nombre de variable en el que vamos a almacenar esto, y nuestra etiqueta es enable promo banner y eso es lo que dice en la configuración del tema. Entonces, guardar. Si actualizamos esto. Entonces aquí tenemos nuestra configuración de banners promocionales, pero aún no hace nada. Tenemos que sumar un poco de lógica aquí. Entonces, déjame seguir adelante y copiarlo, hacer mi vida fácil, y hablaremos de ello. Muy bien, infobar.líquido. Entonces, tenemos a este tipo aquí, nuestro fragmento, y vamos a añadir una declaración If. Si settings.promobanner. Entonces, es más inteligente saber que esta es una condición booleana. Entonces, si la casilla de verificación no está marcada, esto no aparecería. Entonces tenemos que cerrarlo, endif. Fácil. Guardar. Entonces, ahora lo tenemos comprobado aquí. Entonces si nos refrescamos, aún debería estar aquí, y lo es. Ahora, digamos que no estamos ofreciendo envío gratis de repente, vamos a desmarcarlo,
guardar, refrescar y se ha ido. Perfecto y maravilloso. Es muy fácil agregar ajustes de tema, que o bien puedas modificar tema rápidamente, puedes tener un miembro del personal, podrías hacer esto por un cliente. Es fenomenalmente fácil, me gusta. Desplázate rápidamente por aquí, puedes adjuntar archivos en tu configuración de tema para diferentes cosas. Entonces, así es como cambiamos el logotipo de la tienda, por
supuesto, iconos favoritos. También podemos usar estas mismas variables y estos ajustes de tema. También podemos usar los que están dentro de nuestro archivo CSS. Nuestro archivo CSS también es un archivo.liquid. Entonces, esto se vuelve muy útil, no solo para el trabajo del cliente, sino también para modificar rápidamente tu propia tienda.
17. Cómo ganar dinero con Shopify: Entonces, si eres como yo, quieres ganar dinero y no hay nada malo en eso y puedes usar las habilidades que hemos aprendido aquí para hacer eso. Esto es sólo un paso en el camino para hacer eso. Nuestro paso uno fue dar vuelta a ese programa de socios de Shopify y conseguir la puerta de los socios de Shopify. Bueno, una vez que hayas probado la experiencia de Shopify, cinco tiendas en esa cuenta de socio, puedes postularte al programa del experto de Shopify, y quiero mostrarte eso. Entonces aquí está el listado de mi experto en Shopify. Ya sabes que te hacen un veterinario para probar, una vez que tienes cinco tiendas, prueba que conoces a Shopify. Ya sabes lo que estás haciendo. Te puede meter en el programa de expertos que es realmente una herramienta fenomenal de generación de plomo. Para que puedas poner en tu pericia. Hay diferentes categorías: diseño, desarrollo, marketing, fotografía, set up. Ponga en una descripción, enlaces a su sitio web, y luego podrá tener a sus clientes contentos agregarle testimonios. Entonces, alguien está buscando ayuda, podrían elegir una categoría, haga clic en contacto experto. Abre este formulario y de inmediato, recibes un correo electrónico al respecto. Entonces, una vez que pasas de socio de Shopify a experto, ahora
eres parte no solo de una plataforma útil y de una comunidad útil, sino que tienes esta increíble herramienta de negocio para generar leads. Pero hay otras cosas que puedes hacer también, claro. Se puede hacer un tema, un tema personalizado enviado a la tienda y esos lo hacen muy bien. Shopify maneja toda la entrega por ti y solo te consigues el dinero PayPaled, lo cual es genial o si sientes que tus habilidades de código están a la altura del tabaco, podrías enviar apps y la gente necesita y usa apps todo el tiempo. El beneficio ahí de hacer apps es que son ingresos recurrentes. La mayoría de las aplicaciones son suscripciones. Pagas una cuota mensual y luego obtienes ese ingreso pasivo que ingresos recurrentes lo cual es genial. A ver. Echemos un vistazo a un par de estas cosas. Tenemos Expertos en Configuración. Expertos en configuración es muy sencillo. Todo lo que tienes que hacer es ayudar a la gente a montar su tienda. Esta es probablemente la barrera más baja para entrada y es agradable porque con un experto en configuración, menudo
vas a estar girando nuevas tiendas y luego obtienes una participación del 20 por ciento de ingresos a través del programa de partners de lo que sea que ese cliente le pague a Shopify. Entonces te dan 20 por ciento PayPaled a ti, lo cual es muy bonito. Al mismo tiempo, probablemente también querrías postularte como diseñador. Diseñadores, la gente que buscarías para ajustar una plantilla como lo hicimos con la barra de información la cual era muy conveniente y luego conseguir un poco dura más allá de lo que discutimos sería el desarrollo, donde puedes agregar características y aplicaciones privadas a las tiendas. Por supuesto, hay espacio para comercializadores e incluso fotógrafos lo cual es genial. Entonces, no tienes que escoger uno. Se puede aplicar a múltiplo. Entonces, una vez que te metas en ese ecosistema, sigue creciendo, sigue adelante. Es sólo una comunidad fenomenal. Como una historia de éxito, hacemos un tiempo completo viviendo cómodamente y con muy poco estrés desde Shopify porque nos brindan mucho apoyo, muchos recursos,
incluso creando esta serie de videos. Ellos reconocieron y se acercaron a mí y platicamos y lo arreglamos y son muy útiles. Son realmente personas útiles en general y estoy muy agradecido por ellos. Entonces, considéralo.
Kurt Elster, Senior Ecommerce Consultant
