Crea tu sitio y tienda: guía para principiantes de Shopify y diseño de sitios web

1. Trailer de la clase: ¡construye tu sitio web!: Hola y bienvenidos. En esta clase, voy a mostrar cómo puedes construir tus propios sitios web hermosos sin ningún conocimiento de codificación. Si has estado queriendo hacer tu propio sitio para ti o para tu pequeña empresa, pero has estado un poco intimidado por el proceso, o simplemente no estás seguro de dónde empezar, entonces estás en el lugar correcto. Me emociona mostrarte lo accesible que es hacerlo tú mismo. Mi nombre es Mimo y soy ilustrador y creador, dueño de un pequeño negocio. A través de mi estudio, Mimochai, creo libros ilustrados y vendo mis productos de ilustración presencial y en línea. También tengo mi propio sitio de portafolio donde comparto parte de mi trabajo de cliente freelance y recursos útiles. Construí ambos de estos sitios yo mismo y en realidad simplemente disfruto haciendo sitios web. Pensé que sería útil mostrarle a los demás cómo pueden hacerlo también. Empecé en la preparatoria codificando mis propios sitios web de HTML súper básicos para mí y mis amigos. Mucho más tarde fui editora líder de proyectos en Drill Design Agency enfocándose en branding y sitios web. Ahora construyo y mantengo mis propios sitios usando Shopify y Adobe portfolio. Las cosas han recorrido un largo camino desde mis días HTML. Ahora puedes construir estos hermosos sitios web que funcionan completamente con solo usar plantillas sin conocimiento de codificación. Esta clase está diseñada para creadores y dueños de pequeñas empresas, pero creo que cualquier persona que quiera hacer sus propios sitios web se beneficiará de ello. Para el final de esta clase, espero que tengas una idea clara de cómo ir a planear tu sitio web y construirlo tú mismo. Entonces, empecemos. 2. Lo que aprenderemos: Me alegra tanto que decidieras unirte a esta clase. Quiero señalar rápidamente que para aquellos de ustedes que lo necesitan, siempre pueden activar los subtitulados haciendo clic en el botón de la parte inferior de este video. ¿ Qué vamos a aprender? Te voy a estar mostrando mi proceso completo de construir un sitio web de principio a fin. Vamos a repasar el backend de Shopify, te mostraré cómo pasar por las plantillas para escoger la mejor para tus necesidades y aprenderemos a planear, diseñar, y construir nuestro sitio web para aprovechar las limitaciones y fortalezas de usar plantillas. Entonces este es mi sitio mimochai, y solo quiero darte una vista previa rápida para mostrarte lo que es posible usando una plantilla de Shopify. Tengo una tienda de comercio electrónico, tengo una galería, tengo un blog y hay una página Acerca de Nosotros y Formularios de Contacto y Boletines, básicamente todo lo que necesitas para iniciar tu propia página web. Voy a estar enfocándome en Shopify porque esa es la plataforma que uso. Creo que es genial para las tiendas de comercio electrónico. Encuentro que es muy potente y un buen equilibrio entre diseño y funcionalidad. Por otro lado, si no estás vendiendo ningún producto o servicio, en realidad creo que esto probablemente sea exagerado. También voy a añadir una clase yendo por encima de mi sitio de portafolio personal, que es donde guardo el trabajo de mi cliente y mis entradas personales de blog y recursos que comparto con personas que están en un viaje similar a yo. Yo uso cartera de Adobe para eso, que es un servicio gratuito que viene con cualquier suscripción a Creative Cloud. Por lo que también quiero ser muy claro en lo que no es esta clase. Esta no va a ser tu típica clase de desarrollo de diseño de construcción de sitios web en el sentido de que no me estoy metiendo en ninguna codificación aquí. No voy a adentrarme realmente en los principios de UX y UI porque mucho de eso en realidad ya está considerado en estas plantillas. En cambio, esta clase está realmente destinada a personas que no están tratando de construir sitios web a tiempo completo pero quieren crear un sitio web agradable para su pequeña empresa, para su práctica freelance, o tal vez para un proyecto en el que están trabajando. Podrían ser conocedores de computadoras, pero están un poco inseguros de cómo navegar por el back-end de una plataforma o cómo funcionan exactamente las plantillas, o de usar módulos a tu favor. Por lo que esta clase se va a crear para eso. Creo que los sitios que estas plantillas pueden construir son más que suficientes para pequeñas empresas y creativos freelance. En realidad, muchas de las marcas con las que te podría encantar ir de compras también están alojadas en Shopify. Será injusto comparar estos sitios para decir que galardonados sitios súper personalizados porque esos sitios pueden costar hasta siete cifras para construir y se construyen usando desarrolladores profesionales y como mínimo, estos desarrolladores suelen costar 5-6 cifras. Por otro lado, sé que muchas pequeñas empresas y creativos freelance no tienen necesariamente el presupuesto para hacer eso, pero sí tienen las capacidades para hacerlo ellos mismos. Por lo que quiero mostrarte justo lo empoderante que es saber construir tu propio sitio web y gestionarlo tú mismo. Otra ventaja de eso es que a veces cuando trabajas con un desarrollador para desarrollar tu sitio web, podrían construirlo de una manera que no es súper fácil para ti seguir adelante y mantenerlo y gestionarlo tú mismo por el camino así tendrás que seguir pagándoles para hacer incluso cambios básicos en el mantenimiento. Por otro lado, si aprendes a hacerlo tú mismo y entiendes cómo funciona en el back-end podrás entrar y seguir [inaudible] y cambiar las cosas tú mismo. Si alguna vez te pones demasiado ocupado, siempre puedes enseñarle a alguien más cómo hacerlo por ti. Algo sobre saber cómo funciona y sentir que siempre puedes entrar ahí y arreglarlo tú mismo si necesitas, es muy empoderador. Entonces ahora que sabemos lo que vamos a estar aprendiendo de esta clase, reunamos en la siguiente lección donde repasaré nuestro proyecto de clase. Te veré ahí. 3. Tu proyecto de clase: Espero que al final de esta clase, te vayas con el plan de vista claro de cómo construir tu sitio web y no tengas más miedo ni incertidumbre de cómo hacerlo tú mismo. El encargo oficial de clase es crear un plan para tu sitio web, que es un documento sencillo que repasará tus metas, el propósito de tu sitio web, tu público objetivo, y un esquema de sitio que repase el contenido de lo que tienes en su marco de sitio web. Esto se puede hacer en lápiz y papel o en una computadora, depende de ti. Te mostraré lo que usé, que es solo un Google Doc básico, y lo compartiré con la clase para que puedas usarlo como plantilla de inicio si quieres. Entonces si estás listo, puedes seguir adelante y construir tu sitio web, y espero que lo compartas con la clase, lo cual sería increíble. Pero por favor no sientas que esa es la expectativa para completar este curso porque todos realmente trabajan a un ritmo diferente. Antes de empezar, sí quiero notar rápidamente que Shopify sí cuesta dinero después de que termine su prueba gratuita. Sus planes mensuales comienzan en 29 dólares mensuales, que es el que uso. Te recomendaría comenzar tu prueba gratuita cuando estés realmente listo para empezar a construir. Para el ejemplo de clase, voy a estar usando una plantilla de Shopify gratuita para que todos puedan seguir junto con ella, y te proporcionaré un conjunto de fotos de stock que puedes usar como activos de marcador de posición para jugar. Entonces te mostraré el back end de mi propio sitio web, que utiliza una plantilla de pago, y repasaré las diferencias para que puedas tomar una decisión por ti mismo sobre si eso vale la pena o no. Lo último es que recomendaría ver los de esta clase todo el camino para que puedas conseguir un laico de la tierra y luego puedas volver atrás y verlo de nuevo más despacio, idealmente con la plantilla de tu elección abierta lado a lado para que puedas seguir conmigo y aprender más fácilmente. Realmente espero que compartas tu plan de sitio con nosotros en las cosas del proyecto de clase. Creo que va a ser una gran manera de obtener motivación y retroalimentación de los demás, y espero que te inspire a construir realmente tu visión. Me emociona sumergirme en las clases reales. Nos reunamos en la siguiente clase donde nos familiarizaremos con Shopify. 4. Descripción general de Shopify: Echemos un vistazo a Shopify. Te voy a dar una visión general de alto nivel del diseño y te mostraré cómo encontrar tu camino. Eres bienvenido también sólo a echar un vistazo a su página de inicio para ver las diferentes características que consideran destacados. Para empezar, vas a querer iniciar una prueba gratuita. No vas a necesitar poner ninguna información de pago ni escoger uno de los niveles de precios. Tan solo para darte un adelanto, hay tres planes diferentes de Shopify, y va de básico en 29 dólares mensuales a regular para avanzar en 299 al mes. Simplemente uso el plan básico de Shopify y está perfectamente bien para mis necesidades. Yo diría que las principales diferencias son considerar cuántas cuentas de personal necesitas a cuántos inicios de sesión necesitarás dar a personas que te ayuden a administrar el sitio, qué tan profesionales y terminan tus reportes necesitan ser. Algunas preocupaciones de envío diferentes que podrías tener y algo que podría no ser súper obvio es qué volumen de pedidos tienes. Si estás esperando pedidos de muy alto volumen, y para generar muchos ingresos, podría tener sentido que comiences en el plan regular de Shopify porque las tasas de procesamiento de pagos con tarjeta de crédito son un poco más bajas por lo que en realidad podrías hacer esa diferencia. Creo que para la mayoría de las personas que toman esta clase, solo puedes comenzar con el plan básico y actualizar a medida que crezcas. Una vez que inicies tu prueba gratuita e ingresas tu información, deberías conseguir un panel a tu página de inicio que debería verse así, bastante sencillo, pero echemos un vistazo a tu alrededor. A la izquierda están todas las diferentes pestañas de navegación que puedes ver y yo diría que está dividida en pestañas operativas aquí arriba, y tus canales de ventas aquí abajo. En Inicio, verás un panel que cambiará a medida que tu sitio web crezca, por lo que cuando inicie sesión, veo una visión general de datos como los visitantes mi sitio que ven ventas y diferentes consejos que Shopify da diferentes perfiles. Para mí me dicen cosas como, este cliente ha comprado mucho aquí o las personas que miran este producto tienden a mirar este producto, tal vez quieras empaquetarlos. Pero por ahora ya que somos nuevos, te dará consejos y orientación sobre cómo empezar a vender en línea. Puedes agregar un producto, puedes personalizar tu tema, puedes conectarte a tu dominio personalizado, y nos meteremos en todo esto en un rato. En cambio, sigamos pasando a las diferentes pestañas. Aquí está la página de pedidos, medida que tu pedido empieza a entrar, aquí es donde vivirá toda la información, por lo que podrás ver dónde están tus clientes, cuánto están ordenando y poder ordenarlos y también salir notas entre sí. Digamos que hay alguien ayudándote con el cumplimiento, es agradable porque en realidad puedes dejar notas a esa persona y te pueden responder también. También hay una característica en la que si alguien ha agregado algo a su carrito pero nunca ha hecho un check-out, podrás ver eso aquí. Seguro que la mayoría de ustedes probablemente han recibido correos electrónicos de caja abandonados de tiendas que frecuentan, y esto es lo mismo. Básicamente, puedes decidir si quieres enviarlos o no. A veces no es que alguien acaba de cambiar de opinión, podría ser que se confundieron con el proceso de pago o simplemente se distrajeron, por lo que no hace daño enviarles solo un email de seguimiento para asegurarse de que que todo estaba bien. En Productos, aquí es donde vas a agregar todos tus diferentes productos, y para poder importar una hoja de cálculo, digamos que tienes todos tus productos o estás viviendo en otro lugar, sitios de Hudson Etsy, o puedes agregarlos uno por uno. El motivo por el que todos viven aquí, es que más adelante verás que hay diferentes canales de venta y todos se conectan de nuevo al mismo producto fundamental, y así realmente hace que sea más eficiente hacer un seguimiento de la diferentes productos que tienes. En traslados, aquí es donde las personas que podrían poner su inventario en diferentes lugares, así que dicen que tienen algunos en su oficina y algunos en un almacén, podrán rastrear con precisión diferentes transferencias que podrían necesitar tener. Un inventario es más la hoja de cálculo general de lo que hay en stock, por lo que puedes ver cuántas te quedan de las cosas. Se puede ver lo que está fuera de stock e incluso se puede indicar lo que entra. Diga, usted ha ordenado una reposición de algo que va a estar aquí en 30 días. Podrás hacer un seguimiento de eso en una sección entrante separada de lo que hay actualmente en tienda. Colecciones es donde podrás agrupar diferentes productos. Cosas como diferentes categorías, tal vez quieras tener como tops, braguitas, chaquetas, y accesorios o quizás quieras tener diferentes ventas. Entonces 30 por ciento de descuento, 50 por ciento de descuento y cosas como vacaciones, colecciones de temporada y cosas así. Podrás crear aquí una colección y decidir si quieres que sea algo que se junte automáticamente como por tipo de producto o por etiqueta, o algo a lo que quieras agregar manualmente. Por último, las tarjetas de regalo son algo que Shopify en realidad agregó recientemente como un servicio gratuito a todos los planes, así que eso es realmente genial porque no solo la gente puede comprar una tarjeta de regalo cuando no están seguros de qué obtener su destinatario de regalo. Pero mi podría ser alguien que quiera apoyarte, pero realmente no sabe lo que quieren conseguir de inmediato. Bajo Clientes, aquí es donde van a entrar todos los datos de sus clientes. A medida que entren los pedidos, podrás ver la información de los clientes como dónde compran, cuántas veces te piden, y podrás empezar a ver tendencias. También es un buen lugar para agregar información de tu cliente que podrías haber recopilado de otro lugar, como tal vez información que estás recopilando en un mercado que estás vendiendo en o en tu tienda. El análisis es básicamente pasos para tus sitios, por lo que podrás ver cosas como tus ventas, tus sesiones de tienda, con qué frecuencia regresan tus clientes, con qué frecuencia esos clientes están convirtiendo, y si esto te es abrumador o nunca has tratado con estadísticas antes, no te preocupes, ya que tus pedidos y visitantes empiezan a entrar, va a ser bastante autoexplicativo y creo que mayoría de la gente realmente disfruta viendo sus estadísticas. Los informes son básicamente los informes que Shopify ayuda a generar para tu sitio en base a los datos que recopilan, y así podrás ver cosas como ventas y adquisiciones, tus márgenes de beneficio, clientes y su comportamiento y tu finanzas y por supuesto, medida que actualices tu plan aunque los informes se ponen cada vez más en profundidad. Para mí, me parece que los informes de planes básicos están bien. Live View es un lugar donde puedes ver dónde están tus visitantes. Por lo que no comparte información de datos privados, pero puedes ver en este momento dónde se encuentran, y así que realmente no lo uso muy a menudo pero puedo ver para algunas tiendas que mi invitado ciertos tráficos de pico de diferentes ubicaciones en diferentes tiempos y podrían ayudarlos a tomar algunas decisiones importantes para su sitio web. A continuación, bajo Marketing, este es un lugar al que no vengo a visitar muy a menudo porque realmente no compro anuncios de Facebook ni anuncios de Google y cosas así. Pero para aquellos de ustedes que lo necesiten, podrán manejar todo eso desde aquí si lo desean. Otra gran cosa es que pronto llegará el correo electrónico de Shopify, por lo que hasta ahora, mayoría de la gente ha tenido que usar aplicaciones de terceros, la más popular es conocida como Mailchimp. Yo uso uno llamado Omnisend, mucha gente usa uno llamado Klaviyo, y entonces eso siempre fue algo que tenías que hacer por separado fuera de Shopify. Es simplemente genial que lo estén integrando con su servicio y va a ser gratis hasta octubre de 2020 para todos los planes y después de eso, hay algún costo pero en realidad es menor a lo que pago con apps de terceros. Entonces eso es realmente genial. Campañas es donde podrás ver reportes lo bien que están funcionando las campañas de marketing que sí configuras, y la automatización es donde puedes configurar algún marketing automático para hacer crecer tu negocio.La única que uso es que banda y chequear los correos electrónicos que mencioné antes. Pero algunas personas sí se meten bastante en esto y esta no es una clase a la que nos metamos en el marketing. Pero es bueno saber que está ahí. A continuación hay descuentos, y así por supuesto puedes crear códigos de descuento para tus sitios como un 20 por ciento de descuento en tu pedido u obtener envío gratis, así que manejarás todo eso aquí y podrás ver. Basta con hacer un seguimiento de cuáles han caducado y cuáles siguen pendientes, y en realidad puedes hacerlos bastante aduaneros. Hay una opción para decidir si hacer código de descuento o un descuento automático, y cuando entras ahí, verás que hay diferentes tipos. Es como un porcentaje, una cantidad fija, envío gratis, compra una chamarra consigue una camiseta tipo de cosa gratis, y puedes hacer todo tipo de limitaciones o insumos específicos para que realmente crees descuento bastante acostumbrado código que es agradable. Por último, tienes tu pestaña Apps, y si entras en la tienda Shopify App es básicamente todo este otro mercado. Shopify tiene algunos de sus propios originales, así que eso son cosas como imprimir facturas, crear descargas digitales a las que la gente pueda acceder. Pero también hay muchas apps de terceros y lo hacen de todo, desde administrar SEO, hasta configurar un programa de recompensas de lealtad, hasta manejar anuncios de compras y se pone bastante al día con lo que está pasando. Ahora mismo estoy filmando esto en medio de la cuarentena del coronavirus, y hay una app que te está ayudando a configurar ninguna entrega de contactos. Aquí hay un montón de cosas realmente útiles y algunas son gratis, muchas de ellas se pagan pero ya dije, para empezar, no te abrumes ni te cortes demasiado aquí, porque es fácil dejarte tentado a voltearlas todas en y luego se pone abrumador y desordenado. En cambio, simplemente comenzaría a construir tu sitio web y luego buscaría lo que realmente necesitas para activar por aquí. Esas son las pestañas operativas superiores. Echemos un vistazo rápido al canal de ventas, por lo que la tienda online va a estar donde vamos a pasar la mayor parte de nuestro tiempo en esta clase, y también puedes agregar otros canales de venta como un punto de venta, Facebook, Instagram. No vamos a entrar en eso aquí, pero es bastante sencillo, solo está conectándose a tus cuentas existentes. En el canal de ventas, aquí es donde vas a encontrar todo lo que tiene que ver con tu sitio. Tus publicaciones de blog, tus páginas, tus navegaciones, dominios, y nos meteremos en eso en un rato. Pero quiero mostrarles la sección de temas muy rápido. Aquí es donde vamos a estar haciendo la mayor parte de nuestro trabajo. Escogerás tu tema aquí. Puedes navegar por temas y luego los personalizarás aquí también. Aquí arriba deberías ver esta caja amarilla que dice que tu tienda online está protegida por contraseña. Eso significa que ahora mismo si alguien más que tú va a visitar tu sitio web, no van a ver tu trabajo en curso borrador de página web. Verán una bonita página que solo dice que próximamente y anima a gente a inscribirse en tu newsletter para que puedas hacerles saber cuando se lance. Debajo de las publicaciones de blog, aquí es donde configurarás tus blogs si quieres, así que no hay, por supuesto, obligatorio configurarlo. Pero es agradable mantenerlo, incorporarlo en su sitio para propósitos SEO, lo que solo significa que las personas que están buscando contenido es mejor si van a sus propios blogs de sitios para que ojalá vayan a su sitio web también. Las páginas son todo lo que es aparte de su página principal que vive en su sitio web. Por lo que configurarás tu página sobre nosotros aquí, cualquier FAQ que tal vez quieras tener, una política de privacidad, y te lo mostraré en una lección posterior. La navegación es bastante autoexplicativa, pero te mostraré cómo configurar eso para tu sitio. Dominios es básicamente lo que estaba en tu página de inicio cuando iniciaste sesión por primera vez. Cuando empecé, configuré mi propio dominio en un servicio de dominio separado llamado hover. Pero ahora puedes simplemente configurarlo directamente a través de Shopify, que es agradable para que puedas comprar un dominio, comprobar si está en vivo, así que llamé a este shopmimochai como mi página de prueba y veamos si está disponible, y lo es, así que puedo comprarlo directamente y el precio es competitivo a lo que quieras de un sitio de terceros, así que bien podrías comprarlo a través de Shopify si eso es más fácil para ti, y puedes configurar eso ahí arriba. Por último, bajo Preferencias, aquí es donde puedes configurar cosas como cómo quieres que tu tienda online aparezca en la búsqueda. El título, la meta-descripción, y también cosas como la imagen que sacará tu compartir social. Diga, su amigo comparte su sitio web con su cuenta de Facebook. Normalmente rastrearán tu sitio web y sacarán una imagen para compartirla como vista previa, puedes dictar qué son esas imágenes que suele ser más seguro que dependiendo de lo que vayan a decidir mostrar, y también puedes ingresar tu Google Código de analítica y tu píxel de Facebook aquí. Si no sabes cuáles son esas cosas, solo puedes hacer click en este enlace justo al lado de ellas para aprender cómo configurarlas. No voy a entrar demasiado en lo profundo aquí, pero básicamente está disponible ahí para ti si lo necesitas. Por último, esta sección de protección con contraseña es donde podrás desactivar tu página de contraseñas una vez que elijas un plan y además personalizas tu contraseña para las personas a las que quieras mostrarle el sitio web. Entonces aquí abajo en ajustes, encontrarás todos tus ajustes típicos que podrías esperar. Tu dirección, tus ubicaciones, diferentes planes y permisos que deseas dar a los miembros del personal o personas que te ayudan, tu facturación, habilitar tarjetas de regalo, y checar diferentes opciones de envío. No necesitamos sumergirnos ahora mismo pero al final de esta clase, cuando por fin empecemos a ver nuestro sitio web listo para su lanzamiento, te mostraré las cosas que creo que son más importantes para volver a comprobar para asegurarnos de que estén todas en su lugar. Si todo esto parece abrumador, no te preocupes. En primer lugar, siempre puedes subir aquí a la barra de búsqueda, buscar lo que sea sobre lo que estés teniendo preguntas. Pongo en el envío para que te muestren dónde puedes cambiar la configuración de envíos, y también hay recursos en su centro de ayuda. Al hacer clic en tu nombre, podrás ver tu cuenta y editarla, y podrás ir al Centro de Ayuda de Shopify, ver los foros de la comunidad y contratar a un experto de Shopify para que te ayude si necesitas, y también aprender atajos de teclado. Si haces clic en eso, verás todos los diferentes atajos que puedes hacer con tu teclado. También a medida que avanzamos en esta clase, te voy a estar mostrando a qué tienden a ir con más frecuencia y a cuál de estas pestañas realmente no vas a ir muy a menudo. No te preocupes por clavar todo esto por delante, es sólo bueno conseguir un laico de la tierra y entender lo que está pasando. Ahora que hemos hecho eso, veámonos en la siguiente lección donde empezaremos a escoger nuestras plantillas. Te veré ahí. 5. Configuración de Shopify: elegir un tema: Empecemos a configurar nuestro sitio. Te recomiendo ver esta clase y la siguiente juntos porque creo que van de la mano. Es importante ver qué plantillas están disponibles para que puedas empezar a planear tus sitios. Pero necesitarás saber qué quieres en tu sitio para decidir qué plantilla es la mejor para ti. No quieres ir a planear algo que eventualmente no puedes construir. Lo que creo que es mejor es echar un vistazo a los temas que puedes usar y luego ir a planear tu sitio, y luego volver a solidificar tu selección para asegurarte de que encaja dentro de lo que necesitas hacer. Echemos un vistazo a los temas que están disponibles. Si no estás todo listo, vas a querer navegar de nuevo a la sección de tiendas en línea bajo temas. Esto es lo que debes ver, Debut es el que viene automáticamente con tu plan. Pero hay tantos más que puedes echar un vistazo. Puedes explorar temas gratis aquí abajo y estos son todos los que Shopify ofrece de forma gratuita y en general todos se ven geniales. Para mí personalmente, termino usando una plantilla de pago porque si bien todos son buenos para empezar, última instancia siempre encontré que cada uno tenía una limitación para la que necesitaba usar una plantilla de pago, pero entraré en que más tarde. Por ahora, recomiendo entrar a la Tienda Temática porque todas las gratuitas también están ahí junto a las pagadas y podrás acceder a más información sobre las gratuitas aquí. Cuando entres en la Tienda Theme, esto es lo que verás, y podrás ver lo que está destacado, puedes ver qué es tendencia. Se puede ver lo que recomiendan y también te permiten navegar por industria o lo que estás tratando de mostrar o incluso descriptivo o así realmente tienes grandes imágenes hermosas. Es posible que quieras echar un vistazo a estas cosas. Echa un vistazo a tu alrededor. Al hacer clic en podrás ver los diferentes estilos que se incluyen con cada uno. Este estilo sólo significa que es un preajuste que puedes elegir uno que te guste tan idealmente, no tienes que cambiar demasiado si no estás familiarizado con los colores y las fuentes y gráficamente diseñado demasiado, pero siempre puedes editar mucho este material en el back-end también. Se puede ver la demo. Estas son páginas de demostración que los desarrolladores han creado. No son sitios web reales, pero usan productos reales y fotografía real para mostrarte lo que es posible con sus plantillas, y creo que son realmente geniales para ver lo que podrás construir tú mismo. Al principio, muchos de estos sitios podrían verse muy parecidos a ti, pero a medida que te sumerges más profundo, verás que cada uno tiene diferentes fortalezas y debilidades y querrás igualar los streams obviamente, del tema que seleccionas con lo que realmente necesitas para el propósito de tu sitio web. Otra gran cosa es que en la parte inferior, todas muestran tiendas reales que están usando tu plantilla considerada. De verdad creo que es genial mirar estas tiendas reales y ver lo que otras personas han hecho. Ya verás que incluso con el mismo tema la gente ha hecho cosas realmente diferentes y se puede ver lo que han ha hecho cosas realmente diferentes y se puede ver decidido usar y no usar y yo solo creo que es una inspiración realmente útil. general, la lógica general de las plantillas es muy similar así que aunque elijas una plantilla diferente a la que termino usando, podrás seguirla y descifrarla también. Eché un vistazo a todos ellos, los que estaban disponibles y decidí que me gustaba este llamado Narrativa más. Hay algunas razones, me gusta mucho la foto de ancho completo en la parte superior. Cuando entré a ver la demo, me gustó mucho la capacidad de contar historias que tenía. Tengo un inventario bastante pequeño y estoy más enfocado en la ilustración así que realmente me gusta cómo ya está presentado. Es lo más cercano a lo que tenía en mente. Tiene algunas características geniales como este selector de variación aquí. Puedo seguir adelante y agregar tema pinchando arriba aquí. Por los temas gratuitos que en realidad puedes agregar tantos como quieras. Si lo deseas, puedes agregarlas todas para que las puedas realizar un seguimiento y luego eliminar las que no quieras más adelante. Una vez que lo agregues aquí, aparecerá en tu biblioteca temática. Ahora echemos un vistazo a cómo funcionan estos temas. Bajo acciones, podrás renombrarlo, duplicarlo, descargar el archivo temático y editar el código y los idiomas. A lo cual no nos meteremos demasiado aquí, pero te mostraré lo que necesitas saber para empezar. Entonces este es el que es tema vivo, actual, obviamente. Yo sólo voy a mover este. Esto sólo significa que lo moverá a mi tema actual porque quiero trabajar en ese. Al hacer clic en Personalizar, aquí es donde vas a entrar al constructor de tu sitio web. De nuevo, es como un mundo dentro del mundo. Pienso en esto como un espacio de trabajo del sitio web dentro del panel de Shopify. También tiene un panel izquierdo y un panel derecho, pero funciona un poco diferente. En el panel izquierdo aquí, piensa en todos estos como bloques de construcción, módulos que conforman tu sitio web. En el lado derecho, es tu panel de vista previa de cómo se ve tu sitio web. Te habrías imaginado si nunca habías usado una estructura como esta antes que podrías entrar aquí y dar click sobre ella y empezar a editarla. Pero en realidad uno entra en estos módulos para editar todos los textos y la copia. Otra cosa es cuando haces clic en el panel de vista previa y en realidad es algo que funciona completamente por lo que no es solo un gráfico. Es útil porque entonces digamos, tienes un producto que has configurado y haces clic en Ver, en realidad irás a ese producto y podrás editarlo una vez que esté todo configurado. Estos son todos tus módulos y también puedes agregar secciones. Al hacer clic en el botón Agregar sección, podrás ver todas las diferentes opciones que están disponibles para tu tema y en realidad hay diferentes para cada tema. Hay algunos comunes que siempre están ahí, pero algunos temas tienen más que otros, o tienen otros diferentes. Para este tienes post de blog y al hacer clic en él, podrás ver una vista previa de cómo se va a ver eso para tu sitio web, y eso es realmente genial porque quizá no siempre sea obvio a partir de la descripción. Podrás pasar y ver lo que te gusta, y si alguno de ellos te está hablando, siempre puedes hacer clic en Agregar y se agregará a tus módulos. Digamos que eres como, oh, quiero mostrar un mapa de nuestra tienda es y quiero añadir eso. Eso es realmente genial también, es eso así que ahora está en vivo en mi panel de vista previa. Pero digamos, yo cambio de opinión, no es gran cosa solo entras y luego te quitas la sección. Ahora vuelve a cómo era por defecto. Yo diría que es muy tentador agregar tantos módulos como sea posible y nos meteremos más en eso en la sección de planeación. Pero mantenerlo muy enfocado a tu propósito y lo que quieres que haga la gente va a ser importante. Mantenerse organizado y mantenerse diligente con su plan va a ser muy útil en cómo construir esto hacia fuera. Dentro de cada uno de estos módulos, puedes hacer click en y podrás editarlo. Aquí en la sección testimonial podrás cambiar el texto y sucede muy rápido como decir que quieres agregar esto. Se puede ver que eso surgió enseguida. Pero por ahora lo principal que quiero saber es que una vez este pequeño seis puntos de aquí es donde puedes arrastrar y soltar. Digamos que tenemos un producto aquí abajo y solo quiero mover eso hasta arriba. Eso sucede de forma automática, y es muy fácil e intuitivo una vez que lo coges, y es realmente genial. Realmente no se pueden cambiar cosas como, qué tan alto es este botón en esta sección o cómo todo esto se presenta. Pero podrás tomar los bloques ellos mismos y reorganizarlos todo lo que quieras. Es como un Legos, realmente no se puede cambiar la forma de los bloques que te dan, pero puedes convertirlo en lo que quieras. Echa un vistazo a tu alrededor para ver con qué puedes construir y con qué módulos podrás trabajar. Entonces veámonos en la siguiente lección. Empezaremos a bucear en planear el contenido de nuestro sitio. Te veré ahí. 6. Planificación de Shopify: hacer un plan de sitio: Empecemos a hablar de nuestro plan de sitio web. Creo que es fácil emocionarse empezar a enchufar tus fotos y tu contenido, y eres bienvenido a hacerlo. Pero luego tómate un descanso y realmente empieza a trazar tu plan para tu sitio web. Te ayudará a mantenerte concentrado y hay muchos activos que vas a necesitar crear y te ayudará a evitar trabajos innecesarios. Para nuestros propósitos, quiero mantener el sitio web delineando muy informal y simple. Tengo aquí una plantilla que te puedo mostrar y compartir contigo para que puedas usarla como quieras. Pero va a ser una documentación muy sencilla. Podrías ir por todo un agujero de conejo y tomar un curso de 10 semanas todo sobre UX y UI, principios y encuadre de cables. Pero ya que esta clase está destinada a ser para personas que no necesariamente tienen tiempo para hacer eso. Ya estamos usando una plantilla que está diseñada por profesionales que toman en cuenta una gran cantidad de estas mejores prácticas plan de lisis alrededor de la plantilla. Pensemos en qué contenido queremos tener en el sitio. Parte de la razón por la que me gusta trabajar con sitios web es porque me gusta sintetizar información en contornos y luego tomar esa información y mostrarla de una manera visualmente atractiva, que es básicamente lo que es construir un sitio web. Primero escribamos cuál es el propósito de tu sitio y cuál es tu objetivo con él. ¿ Es ante todo, un sitio de comercio electrónico o un sitio de cartera? Podrían ser ambos, pero querrás priorizarlo porque eso va a dictar lo que va en la parte superior frente a la inferior. Por ejemplo, muchos sitios podrían tener las metas o prioridades y propósitos de vender productos, enseñar a la gente sobre su empresa, y hacer crecer su correo electrónico y usar literalistas. Pero cada uno de esos va a tener un ranking de partidos diferente. No se puede hacer lo mismo a todos. Por ejemplo, para mí, mi principal prioridad con el sitio es decirle a la gente de qué se trata el medio con lo alto. Mi segunda prioridad en realidad es vender gente para que les sea fácil comprarla y comprar cosas. Después también en tercer lugar, para poder compartir con ellos algunos contenidos gratuitos y descargas. Mi primera prioridad es darle a las personas la información que necesitan para saber seguir y comprometerse con nosotros. Recuerda que, este no es necesariamente el orden de prioridad de mi estudio en su conjunto. Esta es mi prioridad para la página web. Piense en para qué es un sitio web que mejor se utiliza. Los clientes existentes o los fans existentes son personas que están en la cima de mi prioridad para un estudio en general. Pero para un sitio web, sé que la gente ya no viene necesariamente a los sitios web todos los días. Los tiempos han cambiado ahora sus medios morales y sociales. Ahí es donde tendo a comprometerme más con ellos porque ahí me están siguiendo. Pero un sitio web es un gran lugar para introducir una marca para alguien que tal vez nunca haya oído hablar de ti ni de ti de otra persona y solo quiere comprobar de qué se trata. Es por eso que enseñar a la gente sobre lo que está haciendo el Estudio y de qué se trata es una prioridad mucho mayor en ese caso. Entonces pienso en quién es mi público. Es agradable enumerar quiénes son tus audiencias objetivo para tu sitio web porque eso te ayudará a guiarte en tu plan y de qué hablar y también cómo hablar de ello y cómo presentarte. Para mí, lo rompo en una categoría básica de nuevos visitantes, compradores y fans. Yo lo priorico como nuevos visitantes primero porque creo que la página de inicio será más educativa y para enseñar a la gente sobre lo que es, si vienen encontrarlo. Entonces personas secundarias que están de compras. Esto suele invertirse para la mayoría de los sitios de comercio electrónico donde quieren vender primero el producto y luego contar su historia. Pero también lo he visto de la misma manera que lo hago, donde quieren explicar por qué empezaron a hacer este producto primero y realmente hacen que la gente compre en su historia antes de venderles el producto. Piensa en tu público y cuál es esa historia que quieres contar. Otro ejercicio útil cuando estás pensando en tus audiencias es crear personas de usuario. Esto es básicamente un make, un público objetivo que puedes crear y realmente darles como una personalidad. Eso ayudará a dar forma a parte de tu planificación también. Por ejemplo, he creado estas tres mujeres que representaban diferentes grupos de audiencia que he tenido en mente. Se puede pensar en cuál es su nivel de ingresos o en qué otras cosas les interesan, ¿dónde se encuentran en la vida? Están todavía en la universidad, están teniendo familia, ¿están jubilados? Eso en realidad es algo que realmente ayuda a la gente a pensar en la experiencia de usuario que quieren proporcionar con su sitio web. Recogemos algo de información con nuestros objetivos en mente. Piensa en tus sitios favoritos que son similares a lo que quieres hacer. No olvides echar un vistazo a los sitios web de muestra que Shopify ha vinculado dentro de cada uno de los sitios. Eso es realmente útil de ver también. Entonces yo personalmente conozco como esta marca de té llamada Smith Tea y he comprado en su sitio antes. A pesar de que es un negocio totalmente diferente al mío, lo que me gusta es que todavía tienen esa sensación de pequeño negocio independiente. Me ha gustado cómo lo colocaron y lo hicieron muy fácil de comprar, también aprender sobre la empresa. Me gustó que tengan esta información gratuita para recetas aquí abajo. Noto que tienen su boletín de redes sociales en la parte inferior. Arriba en la parte superior, está muy claro que puede comprar los productos y también explorar. Ver su contenido, que tengan su historia y Tea School, cómo empinar. Creo que esa es una forma muy común de que los sitios web están rompiendo su contenido en estos días. Tienen su sección de comercio electrónico y tienen sección de más contenidos. Cuando busco uno de mis Tés favoritos, es muy fácil de encontrar está bajo infusión de hierbas. Hago clic en él y mirando los sitios de la casa del concurso de productos han configurado eso también es realmente perspicaz porque querrás ver, ¿cómo está la gente describiendo su producto, qué tipo de fotos están mostrando? Me gusta mucho cómo te muestran mucho más perspicacia sobre estos Tés. A pesar de que sé que no voy a poder hacerlo exactamente igual a este sitio web porque es un sitio diferente y ya sea como clientes, como una plantilla diferente, seguiré siendo capaz de tomar algunas de esas ideas de, por qué me gustó esto experiencia y tratar incorporar eso a mi planeta y plantilla también. Volvamos a nuestro plan de sitio. Para prepararnos para crear nuestro esquema, enumeremos todo el contenido que sabemos que vamos a querer tener. Podemos mantener un realmente básico ahora mismo. Hagamos un sobre nosotros. Sé que quiero hacer tienda online, albergar el blog. Quiero tener una sección donde pueda tener mis libros y mi ilustración. ahora llamaré a eso una página de galería de Studio. Quiero tener un lugar que pueda compartir descargas digitales gratuitas y quiera poder enlazar a mis cuentas sociales, fomentar las inscripciones de newsletter, y asegurarme de tener un formulario de contacto y FAQ y una política de privacidad. El tuyo podría ser un poco diferente dependiendo de qué obviamente negocio o servicio estés teniendo. Pero este es un buen lugar para empezar. Una vez que tengas dispuesto el contenido de tu sitio, Empecemos a organizar eso en un esquema. Esto solo significa una lista organizada de muy alto nivel del contenido que querrás tener en tu sitio. Piensa en la parte superior de cada lista como potencialmente un enlace de navegación y luego la viñeta señala debajo de ella como subpáginas o subsecciones. Obviamente, esto no va a ser enlaces de navegación separados, pero en la página de inicio sé que quiero cubrir estas secciones en mis módulos. En realidad mantendría la plantilla que crees que usarás abierta lado a lado con tu esquema de trabajo. Tengo el esquema narrativo abierto aquí y es útil tenerlo para que puedas estar seguro de que la plantilla funcionará para lo que necesitas incluir. Cuando miro esta demo de vista, sé que en la parte superior hay una ilustración de héroe o imagen de héroe y quiero incluir nuestra historia allá arriba. Después ten una sección donde pueda tener una característica afilada y las diferentes secciones a las que la gente puede acudir. Ahora tenemos una página de inicio, producto y páginas no de producto. ¿ Cómo queremos que la gente navegue en cada sección y a otras secciones de manera fácil y clara. Empecemos con la página de inicio. Cuando la gente llega al sitio, quiero dar una visión general de lo que hacemos y hacer que sea fácil para la gente mirar a su alrededor. Quiero asegurarme de que nuestras historias Brenton Center y que nuestros productos sean secundarios pero aún así importantes, sus prioridades podrían ser lo contrario. Ahora quiero dividir mi página en un área de tienda y un área de explorador similar a cómo Smith Tea head diet. En Explorer conservaré todas mis páginas de contenido como nuestros libros, o blog, o descargas, e información sobre nosotros. Bajo tienda enumeraré todas mis categorías de alto nivel por ahora. Si estás ofreciendo un servicio, considera cómo querrás presentar eso. Por último, no olvides la información que tiende a entrar en un pie de página, como el registro de newsletter, enlace a Acerca de Nosotros, Contáctenos, Política de Privacidad, Tienda, Preguntas frecuentes e información para personas que podrían querer vender tu productos en sus tiendas. Si no estás seguro de lo que entra en un pie de página, solo tienes que ir a visitar algunas de tus páginas web favoritas y ver cómo lo hacen. Encontrarás que la mayoría de las personas siguen el mismo formato. Simplemente piensa en tu aerolínea como un documento vivo y una guía para mantenerte enfocado. Cuanto más pensado sea por adelantado, más eficiente será su proceso por el camino. Un consejo rápido y un recordatorio aquí es, a medida que empiezas a editar, trataría de mantenerme lo más claro y conciso posible. Al menos para mí cuando empecé a construir el sitio web, estoy tan tentada de incluir todo y quiero compartirlo todo. Yo quiero hacer las cosas súper complicadas y hacer realmente difícil encontrar las cosas por la razón que sea. Pero en realidad, esta vez cuando estaba construyendo mi nuevo sitio web actualizado, me he comprometido a mantener todo a un máximo de tres niveles de profundidad, lo que significa que todo debe poder alcanzarse en dos clics. El motivo de eso es que, una es que hace que sea mucho más fácil para la gente navegar por ahí. Podría ser muy claro para ti como alguien que sabe de qué se trata tu sitio web y quién ha construido el sitio web. Pero cuando se lo muestres a alguien que nunca ha estado ahí, rápidamente te darás cuenta de que la mayoría de las personas, en primer lugar, no pasan tanto tiempo en sitios web. En segundo lugar, se irán rápidamente si están en absoluto confundidos o abrumados. Yo diría que lo mantengas simple y de nuevo, concéntrate en cuál es tu prioridad y tu propósito con este sitio web. Por último, una vez que tu esquema se vea bien, te recomiendo crear una lista de todos los productos y las categorías que esperas en el lanzamiento. De esta forma podrás tener una vista realista de todos los activos y copiar que necesitarás crear. Para mí, tengo unas listas de productos bastante limitadas, así que funciona bien aquí para mostrar como un simple ejemplo. Tengo libros y juegos de regalo, estampados, accesorios, y la tarjeta de regalo. Desde aquí, mirando la página web, puedo empezar a construir una lista de los activos que sé que necesitaré crear. Obviamente, necesitaré un logo y necesitaré las largas imágenes que entran en estos pancartas de héroe y algunas imágenes para entrar en estos banners de forma cuadrada. Puedo agregar un video si me gustaría. piensa en una galería de productos diferentes imágenes y una tarjeta de regalo, ilustración que podría querer poner ahí y diferentes variaciones de producto que quiero mostrar. La mayoría de ustedes probablemente son dueños de un pequeño negocio y podría ser un especialista en fotografía, o ilustración, o diseño gráfico. Esperemos que muchos de estos activos ya estén creados para ti. Aunque ese no sea el caso, no te abrumes demasiado por esto. En primer lugar, hay muchas grandes opciones de foto de stock que están disponibles específicamente para este propósito. Voy a enlazar con algunos de esos recursos en la descripción del proyecto de clase. Echando un vistazo atrás a mi esquema de muestra, ¿cómo afectó mi pensamiento de mis prioridades y mi audiencia el contorno de mi sitio? Cuando estaba pensando en mi sitio, sabía que quería que me llenaran de ilustraciones y que prioriza esas imágenes sobre fotografías de productos en la página de inicio. Eso es exactamente lo que terminó pasando. Yo dirigí con el mundo más que con la tienda. Siempre puedo enlazar directamente a comprar artículos en mis e-mails y redes sociales, mi secuencia de página de inicio coincide con mi parte es de introducir el mundo y lo que estamos a punto de un visitante que podría no haber escuchado tanto de mí, lo cual antes yo. También se podría revertir todo dependiendo de tus prioridades. De hecho, eso parecería que la mayoría de la vista se irá con los productos y se asegurará de que la fotografía realmente brille. Una vez que te sientas bien con tu plan de sitio. Seamos en la siguiente lección, volveremos a construir sitio adder. Te veré ahí. 7. Diseño de Shopify: páginas de producto: Vuelvo a la página de inicio de nuestro panel de Shopify y Shopify sugiere que empecemos con agregar nuestro primer producto. Creo que esto tiene sentido porque a medida que empecemos a construir nuestra página de inicio y nuestro tema va a ser mucho más fácil. Tenemos al menos un producto del que trabajar. Empecemos con eso. Haga clic en “Agregar producto," y nuevamente, siempre se puede haber pasado apenas por “Todos los productos” y añadir un producto de ahí también. En “Añadir producto”, comenzaremos con la adición de nuestro primero. El ejemplo que voy a estar mostrando es mi libro, vamos a explorar. Tendrás que añadir en tu título. Cuando se trata de los detalles del producto, vas a querer pensar en cuánta información dar a tus clientes para que puedan tomar una buena decisión de compra. Piensa en todas las tiendas online que frecuentas y realmente miras las páginas de productos que tienen para ver qué tipo de información comparten contigo. Vería que normalmente no es demasiado largo, es realmente sucinto y te da la información que necesitarías para poder tomar una decisión de compra como, qué tan grande es, cuánto pesa, ¿ cómo se siente, cuál es el propósito de ello? Tengo una descripción ya hecha para esto, y voy a dejar esto aquí solo para darte un ejemplo de cómo se ve eso. Aquí he empezado con una rápida descripción de lo que es el producto. Aquí te presentamos en realidad un lugar para que compartas la voz de tu marca. Eso sólo significa, ¿cuál es la personalidad que quieres transmitir a través del texto en tu página web? Por ejemplo, podría ir mucho más sencillo con las descripciones de libros como: este es un libro ilustrado. Ocho pulgadas por ocho pulgadas, detalles de lámina dorada, 50 páginas, y eso es todo. Eso podría funcionar en realidad para algunas marcas o algunos negocios que son simplemente más sencillos y quieren cortar al grano. No necesitas necesariamente ninguna narrativa o un lenguaje descriptivo. Para mí personalmente, me gusta hablar en un lenguaje más conversacional y me gusta agregar alguna explicación narrativa detrás del propósito del producto y por qué te podría gustar. Para mí, empecé con algo más casual diciendo, Let's Go Explora como un libro ilustrado que sigue a un par de exploradores mientras navegan por las etapas de sus viajes. Eso podría ser demasiado caprichoso o demasiado florido para algunas marcas, pero es perfecto para lo que quiero hacer. A continuación elegí tres puntos de bala. Personalmente me gusta poner las especificaciones en los puntos de bala, por lo que es realmente fácil y rápido para la gente leer. Cuando pienso en alguien comprando un libro de imágenes que no pueden sostener y ver en persona, ¿qué necesitan saber? Porque en una página de un sitio web, ese libro va a verse igual ya sea de cinco por cinco pulgadas o de 12 por 12 pulgadas. Ayudará decir que se trata de un libro de ocho por ocho pulgadas. Me gusta resaltar detalles que no podrán contar sin tocarlo, como este es un libro lay-flat y es de tapa dura. Quiero resaltar que tiene detalles de lámina de oro, es como cubierta texturizada de lienzos. Entonces quieres compartir cuántas páginas tiene, por lo que 50 páginas con totalmente ilustrado y es un acabado mate premium. Eso ayuda a la gente realmente a visualizar qué tipo de libro es este. Entonces puedes agregar un poco más de descripción si quieres. Acabo de compartir un poco sobre para qué podría ser bueno este libro, para demostrar que es realmente apropiado para todas las edades y es un buen regalo. Algo más que hago es enlazar a productos relacionados si es relevante. Tengo un e-libro digital de Let's Go Explore. Pensé que sería útil enumerarlo aquí abajo en caso de que alguien esté interesado en el libro pero no esté listo para comprar una copia física, o tal vez vivan internacionalmente y solo quieren un simple E-book. Ahora que tenemos nuestro título y nuestra descripción en su lugar, vamos a los medios de comunicación. Aquí es donde vas a poner todas las fotos de tus productos. Nuevamente, miraría los sitios que frecuentas y pensaría qué están mostrando que te ayuda a decidir qué comprar, o mirar a los competidores en tu espacio. Realmente depende de lo que le estés vendiendo. Por ejemplo, las personas que están vendiendo camisetas, hay más o menos un tipo de conjunto común de imágenes que quieres mostrar el frente, la espalda, y tal vez una foto de estilo de vida. Si es algo que es un poco más complicado o algo que no es súper fácil entender qué es en una foto en la que quizá quieras pensar, ¿cómo están mostrando otras personas algo parecido? O tal vez cómo puedo mostrarlo en diferentes ángulos tiene realmente claro lo que es. Para mí, un libro es bastante sencillo. Ya he preparado los archivos que necesito para esto. Yo diría en general, tener 5-6 fotos es suficiente. Tener más fotos siempre es útil, pero empieza a llegar a un punto en el que es innecesario y simplemente crea más trabajo para ti. Piensa en si decides hacer 20 fotos por cada producto, tal vez eso podría ser útil para algunas personas por ahí, pero el margen de lo mucho más útil que es más de seis fotos, realmente no vale ese esfuerzo extra que eres va a tener que hacer para crear 20 fotos por cada producto que tengas. Definitivamente quiero tener la foto principal, que es la portada. Yo quiero tener una foto de la espalda, foto de las espinas. Pueden ver lo grueso que es y además muestra un poco más de detalle de la lámina dorada y la textura del lienzo y dos fotos de cuadros en su interior. Escogeré éste. Todos esos serán subidos a tus medios. Es realmente fácil reorganizarlos. Simplemente arrastras y sueltas. Nuevamente, quieres pensar en la historia correcta para contar. Obviamente, quiero empezar con la portada, y esta también va a ser la imagen de héroe que aparece en previsualizaciones y como primera imagen de cualquier producto, por lo que quieres elegir la más básica ahí. Creo que para la segunda, quiero mostrar el interior del libro. Seguro que la gente quiere saber cuál es el estilo de la ilustración, ¿qué pueden esperar en el interior? Por lo que quería destacar eso a continuación. Entonces quiero terminar con la columna lateral y el baño. Eso tiene sentido. Imagina si vas a entrar en una tienda y eliges un libro, así es como lo experimentarías. Miraría la portada, la abriría, vería las fotos dentro y luego la cerraría y leería la parte posterior. Creo que ese es un bonito conjunto de imágenes para este producto en particular. Podemos pasar a la siguiente sección, que es la fijación de precios. Esto es bastante sencillo. El libro es de 20 dólares y así ponlo aquí. Comparar a precio es en realidad cómo configuras un artículo de venta, para que en realidad no marques algo a la venta, todo lo que haces es bajar el precio y poner en el Compare at at price y Shopify automáticamente marcará eso como un artículo de venta. Por ejemplo, decido hacer un medio de descuento a la venta. Yo quiero hacer este $10 y en lugar de solo poner $10, que simplemente se verá como este producto siempre fue solo $10, se pone en $20 como Comparar al precio. Ahora mostrará los 20 dólares tachados dentro de 10 dólares como pieza nueva. Eso solo es útil para que la gente entienda esto es una venta especial, esto es un descuento y por supuesto, solo psicológicamente la gente gravitará hacia eso más, que si solo estuviera listado como $10. Esta sección aquí abajo es en realidad algo que Shopify agregó un poco más recientemente. Es una forma para que usted realice un seguimiento interno de cuánto margen está obteniendo en cada producto. Eso solo significa cuánta ganancia estás obteniendo además de cuánto te costó hacer ese producto en particular. Por ejemplo, digamos que este libro de me costó $5 para hacer por cada uno, pondría aquí 5 dólares y luego Shopify calculará automáticamente el margen y la ganancia que estoy obteniendo sobre eso. Toda esa información irá a la sección de inventario que les mostré antes. Lo que es genial de eso es que eventualmente a medida tus productos crecen y tal vez empieces a tener más miembros del equipo ayudándote, podrás ver cuáles son mis artículos de alto margen y cuáles se están vendiendo realmente bien. Eso puede ayudar a comenzar a guiar la decisión de negocio para usted. Porque por supuesto, querrás empezar a enfocarte en los productos de alto margen, de alto volumen, idealmente. Podemos dejar eso ahí, y cobrar impuesto a este producto, realmente depende de tus leyes estatales de impuestos sobre las ventas. Yo estoy en California, así que definitivamente tenemos impuesto sobre las ventas, y así estoy para mantener encendido el impuesto de cobro sobre este producto. En ese sentido, Shopify calculará automáticamente el impuesto que necesito para cobrar a mis clientes porque en la configuración, he puesto en que mi ubicación de tienda está en California, así que eso en realidad es realmente útil. El siguiente apartado es inventario. Podría ser un poco innecesario si apenas estás empezando y dices que eres un artista fuera vendiendo solo tus propias impresiones, no necesariamente necesitas tener un sesgo, que es una unidad de almacenamiento de valores o códigos de barras. Pero para mí personalmente, me gusta estar bastante organizado, y así que recomiendo al menos leer sobre ello, aprender sobre lo que es y luego decidir si es necesario para dónde estás en tu negocio ahora mismo . Es básicamente una forma de que hagas un seguimiento de tu inventario y a medida que empiezas a tener alertas, y entonces cualquiera que tenga muchos productos lo sabe, es solo difícil ser preciso a veces si solo utilizas descripciones. Encuentro que los sesgos son realmente importantes, digamos si estoy haciendo un pedido de venta completo, es útil asegurarse de que tengan los sesgos correctos. Digamos que hay tres pasadores diferentes de los que pueden elegir, quizá no lo describan de una manera que sea obvia, por lo que de cuál están hablando, pero el sesgo básicamente lo hará prueba completa de que estoy hablando de lo correcto uno. Los sesgos son un sistema que puedes crear para ti mismo, lo que sea que funcione para ti, y lo que me gusta hacer, es empezar con la categoría, así que reserva, y luego LGE significa vamos a explorar. Entonces pondré en el año que lo hice primero. Así es como se configuran mis sesgos, y es una manera fácil para mí de entenderlo, y para mí hacer un seguimiento, y lo usaré para los tipos y cantidad de producto que tengo, nunca tengo que preocuparme por una repetición o superposición. Ponemos este sesgo ahí dentro, y sí tengo un código de barras para eso, así que déjame sacar eso de mi existente. Tengo ISBN para el libro, y luego tengo un par de opciones aquí abajo. Seguimiento de cantidad significa que Shopify va a ayudar a rastrear la cantidad que estoy vendiendo. A mí me gusta tener siempre eso encendido. Puedes ingresar la cantidad con la que comienzas. Digamos que tengo 500 de estos libros disponibles, ya que la gente compra los libros, se reducirá automáticamente. A medida que vendo, podré ver cuántos se vendieron, y a medida que meto más, puedo ajustarlo también. Algo que me gusta hacer por artículos que no necesariamente tienen un inventario inicial, digamos que hago bajo demanda o son descargas decisionales que estoy ofreciendo de forma gratuita, solo lo dejo en cero, y luego simplemente entra en negativo. Digamos que he ofrecido una descarga gratuita y ha habido 200 descargas de esas, solo va a mostrar 200 negativas, y es una manera sencilla para mí hacer un seguimiento de cuántas personas lo han descargado. Entonces esta opción seguir vendiendo cuando está agotado, esto realmente depende de la situación. Sigo vendiendo fuera de stock comprobado cuando obviamente, por ejemplo como descargas, quiero que entre en la dirección, así que siempre guardo esto encendido. Pero incluso para productos físicos, digamos para Prince, sé que puedo conseguir esos hechos con bastante rapidez, así que aunque pasara a venderme, aún quiero dejar que la gente pueda comprarlo porque voy a poder seguir cumpliendo a tiempo. Si lo dejas sin marcar, básicamente lo que pasa es cuando tu cantidad va a negativo o cero, Shopify girará automáticamente esa página del producto para decir agotado, y eso podría ser genial si eso es lo que quieres hacer. Es solo que agotado, gente ya no puede agregarlo a sus carros, y generalmente hay un botón que les permite enviarte un correo electrónico para decir, “Por favor, notifíqueme cuando este artículo esté disponible de nuevo”. Pero eso realmente depende de la situación, ¿ como quieres que se muestre como agotado o quieres permitir que la gente siga comprándolo? Después nos metemos en el envío. El envío es donde primero se puede identificar si se trata de un producto físico. Como mencioné, tengo descargas digitales y esto siempre se comprueba en esos casos. Aquí, puede agregar alguna información para su producto, lo cual es útil porque puede ayudar a calcular las tarifas de envío para sus clientes. Es algo que pasarás por todos tus productos en un complemento, media libra aquí. Cada vez que alguien lo compre, siempre sabrá que es media libra, así que no tengo que seguir poniendo eso ahí. Entonces si envías internacionalmente, puedes agregar aquí la información de tu personalizada, por lo que parte de eso está precargada. Para aquellos de ustedes que nunca han enviado a nivel internacional antes, es algo que hay que poner en su etiqueta cuando la envías, y en realidad es mucho mejor que como era antes. Recuerdo que en algún momento aún tenías que ir a la oficina de correos y llenar este formulario y adjuntarlo a tu caja para enviarlo internacionalmente. Mientras que ahora, puedes hacerlo por completo en este proceso de pago único, y es mucho más fácil y rápido, y hace que sea mucho más fluida en realidad enviar internacionalmente en comparación con tus clientes nacionales. Por aquí, pondré en Estados Unidos, puedes buscar estos códigos para tus productos, y así en realidad hay uno para los productos de libros infantiles. Ya tengo eso aquí, así que puedo poner eso aquí y eso aparece en la etiqueta. Por último, esta última parte es la varianza. Si dices que estás vendiendo una camisa y obviamente vendrá en diferentes tamaños y tal vez diferentes colores, puedes sumar hasta tres variantes diferentes. Pondría en tamaño y simplemente pondría pequeño, mediano, grande. Lo que pones aquí es en realidad cómo va a aparecer para tu cliente en el menú desplegable, que lo sepas, cuando estás seleccionando qué talla quieres. En realidad quieres deletrearlo si prefieres que te muestren de esa manera, y solo agregas otra opción si quieres agregar colores, y puedes subir a otro material asociado. Una sección más es la vista previa del listado del motor de búsqueda. Shopify ha configurado automáticamente lo que parece. El título está ahí, la URL está ahí, y han sacado la descripción que he puesto de la parte anterior de esta sección. Pero muchas veces, la descripción que he puesto en la página del producto para cuando el cliente llega a mi sitio web, podría ser diferente a lo que quiero mostrar cuando solo estás en Google y aparece en el listado de SEO. Aquí puedes personalizarlo. Se va a Editar sitio web, SEO con sólo hacer clic en ese enlace que estaba aquí arriba, y se puede cambiar el título de la página. Por ejemplo, en tu sitio dicen que querías decir Lost in Space camiseta personalizada pero en SEO quizá quieras ser un poco más general, como camisetas para personas que aman el espacio o algo así, y lo mismo para el descripción. Aquí he pensado más desde la perspectiva de un cliente que acaba de llegar a mi sitio y una vez saber más sobre este producto. Pero para propósitos SEO, tal vez quieras pensar más en ¿qué está buscando la gente? ¿ En qué va alguien más probable que quiera hacer click? Se puede personalizar eso ahí, y luego finalmente, se puede personalizar la URL en el mango. Tirarán en el título de tu libro o en el título de tu producto, pero puedes personalizarlo si dices que quieres que sea más corto o quieres que simplemente sea más fácil para la gente escribir y recordar. Golpeo guardar, y felicitaciones, hemos agregado nuestro primer producto. En este punto, adelante y empiece a agregar su primer producto, si así lo desea. De nuevo, he creado el conjunto de fotos de muestra que puedes usar para al menos probarlo y asegurarte de que sabes cómo hacerlo en caso de que aún no tengas tus fotos personales de producto. Una vez que hayas terminado de configurar eso, veámonos en la siguiente lección donde seguiremos con el resto de páginas secundarias, colecciones, blogs, y navegación. Te veré ahí. 8. Diseño de Shopify: otras páginas: Ahora que hemos configurado una página de producto, voy a correr por algunos de los otros elementos secundarios que quieres configurar antes de sumergirnos en la página de inicio porque va a hacer mucho más fácil ver lo que estamos haciendo. Empecemos con Colecciones. Como verán aquí, he configurado algunos productos más de la misma forma que configuré con los otros. Entrémonos ahora a la sección de colecciones haciendo click aquí. Ya he preparado unos cuantos antes de tiempo para que podamos pasar un poco más rápido. Aquí he establecido una colección llamada Let's Go Explore, y dije que la condición es que la etiqueta sea igual a Let's Go Explore. Cuando me desplace por aquí, veré que Shopify ha configurado automáticamente algunos artículos de colección para mí ya. Al hacer clic en el elemento, la forma en que están todos conectados, es que en la propia página del producto, he añadido una etiqueta Let's Go Explore, y es lo mismo para los tres. Otra colección automática que configuré se llama Conjuntos de regalo. Similar al otro, excepto ahora estoy coincidente por tipo de producto. Aquí, todos estos artículos a continuación se categorizan como Regalos Sets, y la diferencia es, yo diría que, el tipo de producto es obviamente por categorías. Puedes configurar camisetas, pantalones, libros, lo que sea que vendas. Entonces en las etiquetas, es posible que quieras mezclar y emparejar algunos de esos elementos que están en diferentes categorías. Por último, se puede configurar una colección manual. Vamos a crear una colección llamada Best Sellers, y aquí abajo, vamos a dar click en Manual. Golpea primero Save, y luego ahora vas a poder seleccionar los artículos que quieras poner. Digamos que quiero hacer, la Caja de Aventura, el Paquete de Cuidados, y el Libro. Esos son nuestros bestsellers y quiero poder actualizarlo manualmente. Digamos que el mes que viene son diferentes. Entonces quiero añadir algo más. También hay cosas que Shopify configura automáticamente, para que puedas organizarlo de la manera que quieras, o bien puedes organizarlo manualmente. Es una ligera diferencia en configurar un producto digital versus productos físicos así que quería mostrarte eso muy rápidamente. Volvamos a nuestros productos, y he empezado a poner uno de esos aquí arriba. Aquí se ve que todo está configurado igual. Tengo un título, una descripción, y las imágenes, y he configurado una etiqueta y un tipo de producto. Ahora quiero saber cómo le agrego la descarga real para que la gente pueda obtenerla. En primer lugar vas a querer descargar la app Descargas digitales de Shopify, y ya la he descargado aquí. Pero todo lo que tienes que hacer es ir a visitar la Shopify App Store, y luego buscar descargas digitales, y será ésta. En este punto, todo lo que tienes que hacer cuando llegues a tu página de producto, verás esta opción de botón aquí llamada Más Acciones. Una vez que tengas disponible la aplicación de descargas digitales, podrás agregar datos adjuntos digitales. Da click en eso, y verás una pantalla que aparece así. Aquí, ya he subido mi PDF, el Kit de Bienvenida de Teahouse, y siempre puedo cambiarlo aquí o eliminarlo. Ahora cuando la gente echa un vistazo con este artículo, podrán recibir la descarga por correo electrónico. Pasemos a lo siguiente. Ahora que tenemos configurados productos y colecciones, vamos a configurar una página sencilla que podremos enlazar a ella desde nuestra página principal. Una buena para empezar es obviamente About Us. Tengo esa configuración. Vayamos a Tienda Online y pinchemos en Páginas. Ya verás eso, tenía que empezó aquí. En estas plantillas gratuitas, tus sub páginas van a ser mucho más sencillas, y te voy a mostrar la diferencia en la siguiente lección donde te mostré mi plantilla de sitio completo. Esta es la página Acerca de Nosotros. He puesto una imagen, y la copia que tengo para mi sitio, dando vuelta, y hay un formulario de contacto en la parte inferior. El modo de encender el formulario de contacto está aquí abajo. Haga clic en Página entonces no tendré un formulario de contacto en la parte inferior, pero si desea el formulario de contacto en esta página Acerca de Nosotros. Vamos a mantenerlo de esa manera. Si alguna vez has configurado un blog o algo con una situación de formato de texto, notarás que lo que ves aquí es diferente a lo que ves al previsualizar la página. Lo que te recomiendo es que lo pongas fuera de la forma en que quieres que se configure, y solo previsualice y comprueba que esté buscando de la manera que quieras. A veces te darás cuenta de que hay un espaciado apagado que se ve diferente a lo que esperas, y simplemente volverías atrás y arreglarías eso aquí. El modo en que estoy obteniendo la diferencia entre, esta fuente de encabezado, y esta fuente de párrafo, es justo a través de las secciones de formato existentes. Aquí, solo destacarías, la sección que quieres ser títulos, y tu tema viene con sus diferentes formatos de encabezamiento. Elegí esta porque es una fuente de encabezado más de tamaño mediano, también podemos ir más grande. Vamos a configurar rápidamente una página juntos para que sepas cómo funciona. Voy a configurar una página de política de privacidad ya que eso se requiere en muchos países ahora. Tengo mi texto de política de privacidad aquí. Sólo voy a copiar y pegar eso. De nuevo, tengo mi título, tengo un texto aquí dentro. Veamos cómo se ve ese solo copiar y pegar. Guardémoslo y asegurémonos de que sea visible. También puedes ocultarlo. Digamos que tienes una página que quieres lanzar en una fecha determinada, Siempre puedes establecer una fecha publicada específica para eso. Echemos un vistazo a cómo se ve eso. En general se ve bien. Ahora tengo mi página de Política de Privacidad para mí. Puedes seguir adelante y hacer todas las páginas que necesites de frente, o simplemente configuras una pareja para que puedas empezar a construir en nuestra página principal. Pasemos a la siguiente sección. Vamos a configurar nuestro primer blog. Tengo uno empezado justo aquí. Nuevamente, es un concepto muy similar. Tienes un título, tienes tu contenido, puedes formatear el contenido de la misma manera que lo haces con las páginas. Solo hay algunas diferencias. Puedes agregar un extracto porque algunos de los módulos que tendrás en tu página podrán previsualizar algunos de los extractos de la entrada, y luego podrás tener una imagen destacada para tu entrada de blog. De nuevo, se puede establecer la visibilidad y si se publicó en un momento específico, y se puede agregar a su autor. Digamos que tienes varios miembros del personal diferentes usando la cuenta de Shopify, puedes decir quién fue el autor de la publicación del blog, y luego puedes agregarla a un blog específico, y luego también puedes agregarle etiquetas. Lo bueno es que, puedes configurar varios blogs diferentes dependiendo de cuántas piezas de contenido diferentes tengas. momento, este blog trata sobre nuestro nuevo sitio. Digamos que quiero configurar otra entrada de blog, luego vas a Administrar blogs, y agregas un blog aquí. Se pueden controlar algunas cosas como si se permiten o no comentarios, y cuál es el título del blog. Ya configuré el segundo llamado Tutoriales. Volvamos a las entradas de blog y agreguemos una entrada de blog a ese tutoriales uno. Hagámoslo en, “Hoto-usar-su-Welcome Kit”, agregaré una imagen de nuestro kit de bienvenida, y luego copiaré y pegaré algún texto de muestra que ya he preparado. Ahora tengo mis dos posts de blog listas también. Pasemos a la siguiente sección. El último que quiero configurar antes de sumergirnos en la página principal es la Navegación. Demos click en Navegación bajo Tienda Online. Con lo que empezarás es el menú de pie de página y el menú principal. He montado una simple aquí llamada Tienda, y te mostraré cómo hacerlo. Puedes agregar un menú, y decir que quieres agregar uno llamado Blogs. Añadamos uno llamado Noticias. Aquí, los enlaces pueden agregar enlace a varias cosas diferentes dentro de Shopify. Categorizarán cosas para ti por colección, productos, páginas, publicaciones de blog. Sabemos que montamos el blog llamado, Noticias, y que montamos un blog llamado Tutoriales. También puedes buscar. La última vez hice clic en blogs para encontrarlo, pero también puedes buscar tutoriales y lo encontrarás, podamos guardar ese menú. También quiero mostrarte cómo hacer menús anidados. Los menús anidados son aquellos en los que cuando abres un menú, puedes bajar un submenú dentro de él, y también puedes hacerlo dentro de Shopify. Vayamos al menú principal. Yo quiero llamar a este Tienda, y quiero llamar a otra sección Explorer. Vamos a tener ese enlace por ahora ser página Acerca de Nosotros. Para crear un submenú, todo lo que necesito hacer es volver a hacerlo. Pongamos rápidamente en nuestras colecciones. En realidad quiero llamar a eso, Vamos Explora, puedes comprar por categoría, y luego todo lo que haces es hacer clic y arrastrar. Ahora que anidamos dentro de ella. Planeo tener tres menús anidados en mi página de inicio. Simplemente voy a seguir adelante y poblar, comprar y explorar menús de la misma manera que lo hice para casa. En general, yo sólo estaría consciente de no hacer que los niveles de página sean demasiado profundos o anidados. Idealmente, el cliente debería poder acceder a todas sus páginas dentro de 2-3 capas. Ahora tengo todos los elementos que necesitamos para construir en nuestra página principal. Estemos ahí la próxima lección y empezaremos a hacer justamente eso. Te veré ahí. 9. Diseño de Shopify: ajustes del tema: Echemos un vistazo bajo el capó de nuestra viga seleccionada. Quiero seguir personalizando tema de análisis. En la página de inicio, puedes ir aquí y seleccionar el botón Personalizar tema. O como siempre, puedes hacer click debajo de la tienda en línea del lado izquierdo, y te llevará al mismo lugar. Tengo narrativa seleccionada y vamos a golpear “Personalizar”. Nuevamente, este es el diseño de nuestro espacio de trabajo de sitio web, y tenemos la navegación de nuestros módulos aquí a la izquierda. Vamos por debajo de esta pestaña justo aquí en la parte superior de la derecha llamada Configuración del tema. Aquí es donde puedes configurar todas las reglas para tu sitio web. Echemos un vistazo a lo que podemos controlar. Tu tema viene con un estilo preestablecido. Si no te sientes cómodo con los colores y la topografía, está totalmente bien mantener lo que hay, y eso es en realidad lo que voy a estar haciendo en esta clase. Pienso en ello como, después de todo, estos temas son diseñados por profesionales. Como viste, cada tema viene con cuatro estilos diferentes. Idealmente, has escogido uno que estás listo como, y no tienes que cambiar demasiado si no quieres. Pero a mucha gente le gusta obviamente personalizar sus colores y sus multas y ajustar todo, así que quiero mostrarles lo que es posible también. Estos ajustes de temas son geniales porque lo que sucede es que es un cambio universal que asegura que tu página sea consistente. Diga, usted quiere cambiar este color de acento primario aquí que afecta botones y adornos especiales, cambiará eso a través del tablero. De vuelta en el día en que tenía que ajustar las cosas manualmente, entonces tienes que asegurarte de cambiar ese color, por ejemplo, en cada botón de tu sitio, y podría haber algunas inconsistencias. Eso es lo que realmente me gusta de estos ajustes. La cantidad de cosas que puedes personalizar varían de plantilla a plantilla. En la plantilla de página te mostraré, aquí hay mucho más listado, pero esto es suficiente para empezar. Hay muchas teorías sobre qué son buenos colores para usar para los sitios web. Por ejemplo, a mucha gente no le gusta usar botones rojos porque piensan que evitará que la gente quiera hacer click en él, porque tenemos esta asociación psicológica de rojo con stop. Por otro lado, piensan que los colores como el blues y los greens son buenos, porque tenemos una asociación psicológica con esos colores, es decir, go. Pero al mismo tiempo, en mi opinión, verás un montón de sitios web profesionales rompiendo las reglas de cualquier manera. Creo que realmente debes probarlo con tu público para ver qué funciona. Lo que recomiendo es comenzar con colores que dibujan la mirada del visitante a las cosas que quieres que hagan, y también pensando en los colores de tu propia marca. Si el color de tu marca es rojo, podría no estar mal usar rojo ya que te refieres a color de ascenso. Por otro lado, si tu sitio es muy blues y greens y coincide con tu marca, entonces ve por eso también. Proporcionaré algunas sencillas salas de color en las plantillas de descripción de la clase para que pueda ayudar a guiar a aquellos de ustedes que quieran un poco más de ayuda en esa área. Aquí, puedo ver que puedo cambiar el color del acento. Ahora mismo, lo tienen como rojo, y luego tenemos los colores Texto e Icono, los colores de fondo, y otros colores. Tomando un desplazamiento rápido por aquí, no me importa cómo se configura y cómo se ve eso, pero lo único que realmente hago, quiero cambiar va a ser este color de acento. Utilizo mucho blues en mi trabajo, así que solo usemos este azul que ya está disponible y cambiemos eso. Como verás, todas esas cosas que solían ser rojas ahora son azules. Todo lo demás me queda bien por ahora, así que voy a dar clic fuera de aquí y entrar en tipografía. Aquí, ya verás lo que puedo cambiar. Soy capaz de cambiar y determinar la fuente de mis encabezados, los textos del cuerpo, y el tamaño base global de los textos. Empecemos por arriba. Esto significa que si quiero cambiar a pequeño, verás que se actualiza en vivo. Tan solo notarás que este texto de aquí abajo se acaba de convertir en pequeño. En general, encuentro que a los diseñadores les encanta el tipo más pequeño, porque tal vez se ve más limpio o más moderno, pero cuando se trata de usabilidad, que pensar, digamos por ejemplo, una audiencia mayor necesita una fuente más grande para ver . Tendrás que ayudarlos usando una fuente de visibilidad más grande. Voy a sake con medio aquí. Podrás controlar las fuentes y si haces clic rápidamente en cambiar aquí, verás que hay muchas fuentes que ya vienen con estas plantillas, y creo que es suficiente para empezar. De hecho, si sigues desplazándote, verás que solo hay más de lo que necesitarás para elegir realmente. Pero algunas personas podrían tener una fuente muy específica que siempre usan con todo el trabajo de su marca, o una fuente que realmente les gusta y quieren usar, y no está listada aquí, puedes agregar fuentes personalizadas o simplemente necesitan ayuda experta en codificación. Pero voy a estar eligiendo las que ya existen aquí solo para mantenerlo sencillo, y me gustan las que eligieron. Aquí verás que han combinado una fuente serif para los encabezados con una fuente sans serif para su cuerpo. Ese es un emparejamiento muy común. Serif para aquellos de ustedes que no saben, sólo significa que la fuente serif tiene los pequeños trazos al final de las letras. San serifs significa que no tiene ese trazo al final de las letras. La gente en general asocia las fuentes serif para ser más clásicas, y las fuentes sans serif para ser más modernas. Por supuesto, hay excepciones a esa regla, pero ese es generalmente el sentimiento que se asocia con cada tipo. Lo bonito de combinar una fuente serif para encabezados, y una fuente sans serif para cuerpo es que es un buen contraste. Es realmente algo que depende de ti en la estética que quieras. mí me gusta que tenga un poco de sentimiento formal por títulos importantes, pero un sentimiento más casual por el cuerpo. Algunas personas también revertieron ese sistema. Creo que realmente depende de ti de cómo quieres jugar con la vibra de tu tipografía, pero de lo único de lo que me mantendría alejado es tener dos fuentes diferentes que parecen similares. Es mejor mantenerlo limpio, si vas a elegir una fuente serif que se vea bastante moderna para simplemente elegir una, lugar de decir, Avenir para el cuerpo y luego Arial para los encabezados. Es solo un poco demasiado cerca para dar suficiente contraste y una buena vibra. Incluyo algunas divertidas sugerencias de emparejamiento en la guía de clase, para que para aquellos de ustedes que quieran un poco más de ayuda adelantado puedan ver qué emparejamientos comunes que se dan, los tipos de fuentes que están disponibles para ustedes. Si eres un profesional con la topografía, siéntete libre de ir salvaje aquí y recoger las que te gusten. Haga click en tipografía, y lo siguiente que podemos ver es cajón de carrito. Aquí solo hay un par de opciones. Como mencioné con diferentes plantillas, vas a poder controlar cosas diferentes. Pero aquí hay dos cosas. Puedes hacer el cajón del carrito, lo que solo significa que cuando agrego un producto a mi carrito, saldrá un pequeño pop-up por un costado, y te mostraré un ejemplo de eso vivo más tarde. La diferencia es que obviamente has comprado en sitios que o bien te llevan directamente a una página de carrito, creo que Amazon lo hace de esa manera, y otros donde solo hay un pequeño pop-up que aparece. Depende de ti lo que prefieras. Nuevamente, hay diferentes teorías sobre cómo eso afecta los comportamientos de los clientes. El enfoque de Amazon te embuda para cumplir con esa decisión de compra, y hace que sea realmente fácil y sin fisuras realizar un chequeo. Personalmente prefiero pequeños cajones que salen para mostrar que he agregado al carrito, pero permítanme seguir navegando muy fácilmente. Depende de ti qué tipo de experiencia quieres darle a tu visitante. Entonces me gusta encender nota de carrito. Eso es solo un poco de área para que la gente agregue nota de orden. En ocasiones, permiten a la gente personalizar algo, o agregar una pequeña nota que escribirá a mano en su mensaje. Ese es un gran lugar para que la gente pueda enviarme mensajes o comunicarse conmigo a través de las notas del pedido. En lo social, podrás personalizar una imagen de compartir social y algunas otras cosas. Echemos un vistazo rápido. Podrás explorar imágenes gratuitas que tengan. Tienen un montón de fotos en stock si no tienes nada tú mismo. Pero sí tengo una imagen que me gustaría usar. Subiré la imagen, y este es mi estandarte de héroe. Quiero asegurarme de que cuando alguien comparta mi sitio, esta es la imagen que aparece. Yo soy capaz de precisar eso aquí, que me gusta mucho. Ahora eso es en vivo. Bajo miradas sociales, se llega a decir si se quiere o no permitir que los clientes compartan sus productos y publicaciones de blog en diversas redes sociales. Nuevamente, eso es solo una preferencia personal sobre si quieres habilitar eso no lo son. No veo ningún daño en ello, así que voy a mantenerlo encendido. Entonces aquí es donde vas a ingresar todos tus vínculos sociales. El siguiente apartado es el favicon. El favicon es sólo ese pequeño ícono que aparece junto a la pestaña de tu página web. Aquí arriba en Shopify, se puede ver el pequeño favicon que tienen. Entonces en Instagram se ve poco favicon de Instagram. Creo que es una gran manera de personalizar y agregar algo de branding a tu sitio. Si dejas un espacio en blanco, entonces no va a causar un error, pero me gusta tener algo que muestre un reflejo de mi logo. Ten en cuenta que es muy diminuto, así que si tu logo es bastante complicado, quizás quieras crear una versión simplificada de tu logo para eso. Eso es exactamente lo que hice. Aquí verás mis archivos de logotipo, que tengo un archivo de logotipo completo que se ve así, y luego una versión de solo texto. Pero ninguno de esos va a funcionar bastante bien para el favicon, así que creé un activo favicon separado que sólo tiene el ícono de la casita en un círculo. Eso lo puedo agregar aquí. Tendrás que asegurarte de que tenga un fondo transparente si no es un cuadrado. Por ejemplo, si no fuera un PNG transparente, detrás del círculo, se vería un cuadrado blanco, y en esta pestaña, se vería un círculo azul en el cuadrado blanco, que no es el look que quiero. Tengo un círculo transparente y puedo agregar eso aquí en mi favicon, y ahora aparece. Lo último que podemos hacer en Configuración del tema es checkout. Aquí, bajo el banner, puedes seleccionar la imagen de fondo. Eso solo significa que en la parte superior, puedes agregar una imagen de banner. Por ejemplo, podría elegir el mismo si quisiera. Déjenme simplemente agregar las cosas que sé que sí tengo, que es el logotipo. Nuevamente, he preparado todos estos de antemano, y creo que ahí es donde tener esa lista de activos que necesitas crear para tu sitio web va a ser útil para ti. Puedes agregar una imagen de fondo a tu área de contenido principal, pero personalmente me gusta simplemente dejarla como color. En general, es bueno no tener demasiadas distracciones en tu página de pago, porque eso solo abruma al comprador y a la gente le gusta mantener el proceso de caja muy sencillo y tan transparente como sea posible. Simplemente guardo el color de fondo tal como está, los campos de granja que quiero mantener en blanco, y luego en el resumen de pedidos otra vez, puedes agregar una imagen de branding si quieres, pero me gusta mantenerla limpia y sencilla, por lo que solo uso el color de fondo. Por último, tienes algunos ajustes de topografía aquí. Creo que aquí hay menos por la codificación en el back-end. No vas a poder conseguir como costumbre de una selección en el código, que entras en el código tú mismo. Simplemente escogeré el que esté más cercano a lo que tienes. En la parte inferior, este tema te permite personalizar algunos de los colores en tu caja. En general, quiero mantenerlo igual que lo que tengo en mi sitio. Voy a dejar aquí el blues y los errores aquí mismo. Puedo ver que es diferente si eliges priorizar los colores de tu marca en tu página web, pero una vez que vas con las recomendaciones convencionales en tu página de pago, digamos, en tu web tienes una marca naranja, y todos tus botones son de color naranja, pero en la página de pago, tú decides que este es un lugar estoy bien con romper mis reglas de marca a favor de la convención de usar blues y greens para indicar go, y rojo para indicar error. Estoy contento con cómo se ve esto y voy a dar clic en Guardar. Una vez que tus ajustes de tema se vean bien, o al menos tienes un laico de la tierra de lo que puedes cambiar en el futuro, volvamos a la pestaña Secciones. Revisaremos los módulos para nuestra página de inicio y empezaremos a llenar eso. Te veré ahí. 10. Diseño de Shopify: página de inicio: Por fin estamos listos para empezar a construir nuestra página de inicio. Nuevamente, quiero enfatizar que estoy usando la plantilla gratuita llamada narrativa, que es un poco diferente a mi actual sitio web en vivo. Te voy a mostrar cómo construyo algo similar a lo que tengo usando una plantilla gratuita. Pero va a ser una versión más simplificada de lo que verías en línea. Tan solo para darte un rápido adelanto de lo que parece eso, aquí está el sitio que construí con narrativa. Tiene el héroe, las características, los favoritos, muy similar en realidad a mi página en vivo. Empecemos por construir esta página. Algo que quiero decir de este tipo de módulos es que, la plantilla vendrá con una configuración que es como la vista previa que has visto. Por supuesto, se ve muy bonito, pero puede que no lo necesites todo. Sólo ten en cuenta que no tienes que usar cada cosa que te dan y no tienes que hacerlo en el orden que tienen. Por supuesto, lo hace más sencillo, sobre todo si no te sientes cómodo con la construcción de sitios web ya, pero verás que en realidad me deshago de muchos de los módulos de plantilla con los que viene, y simplemente lo mantuve realmente simple. Creo que un buen ejercicio que hacer es realmente mirar algunos sitios populares, así que tengo everlane.com jalado hacia arriba. Estos sitios gastan mucho dinero pensando en la experiencia del usuario, la interfaz, y cómo es mejor animar a la gente a comprar y se ponen realmente convenientes para que lo hagan. He hecho compras en Everlane a lo largo de los años y he notado que han cambiado de ida y vuelta entre tener solo una página de inicio realmente simple con una llamada a acción versus una más larga que tiene contenido, imágenes, cosas sobre su marca, y parece que ahí es donde están de vuelta ahora. Si quieres empezar con tu página web, puedes ir con algo en estas líneas. Voy a empezar a construir este sitio. En el camino, haré algunos comentarios sobre lo que estoy pensando mientras estoy construyendo. Este slider superior tiene cuatro imágenes diferentes las cuales no necesito, así que solo voy a quitar todas esas. Ahora, puedo actualizar mi copia. Aquí, voy a enlazar a esa página que construyó. Voy a intentar cambiar los colores del encabezado a blanco para que tenga una mejor legibilidad. Voy a cambiar el color del botón a un gris más oscuro. Muchos de estos módulos tendrán opciones de estilo de imagen. Este permite un círculo, cuadrado, y ninguno, y no quiero ninguno. Verás que hay muchas cosas con las que puedes jugar en términos de posicionamiento en qué lado está la imagen. Cosas que no puedes cambiar son, por ejemplo, que tienes esta barra, cuánto espacio entre las imágenes, y el texto, y los encabezados, y el botón. Otra cosa que quiero cambiar es este color de fondo, para que sea un poco más oscuro para que coincida con la foto. A continuación, tienen este producto destacado, me voy a deshacer de, y una sección de video. No tengo una sección de video de mi sitio, así que me voy a deshacer de eso. Siguiente sección que quiero es resaltar nuestros best sellers. Escojamos esa colección de los más vendidos que hicimos antes. Tenemos esa colección configurada, quiero moverla por debajo justo aquí. Ahora, nuestra colección más vendida está arriba, así que vamos a añadir un poco de texto. Se puede ver que el encabezado blanco no está funcionando realmente en todo, así que cambiemos eso. Voy a cambiar mis encabezados al mismo color gris oscuro que utilicé para los botones para una apariencia más limpia. A continuación, quiero configurar una galería y así añadiría una presentación de diapositivas. Ahora, voy a configurar las dos diapositivas para la presentación de diapositivas. Quiero mostrar aquí mi último contenido gratuito. Por ejemplo, puedo hacer uno sobre mi descarga gratuita de kit de bienvenida y el otro puede enlazar a nuestro blog principal. Ya he configurado ambos activos de antemano, y siempre puedo actualizarlos a medida que avancemos. He configurado mis enlaces de blog y mis enlaces de descarga. Vamos a mover eso hacia arriba debajo de sus favoritos de tienda. En el siguiente apartado, quiero resaltar algún contenido. Aquí, han hablado de una tarjeta de regalo, pero quiero mostrar nuestra nueva entrada de blog sobre la descarga. Aquí, quiero usar un estilo de botón secundario. El modo en que pensamos en eso es sólo para comunicarnos a los lectores, o visitantes, diferentes jerarquías en la información. El estilo primario puede llamar la atención cosas en las que realmente quieres que hagan clic y el estilo secundario se puede usar para cosas como blogs y piezas de contenido que no son tan importantes. Ahora, sólo voy a seguir adelante y añadir algunos visuales para este punto culminante. Por último, quiero terminar con algunos enlaces para seguirnos y unirme a nuestra casa de té. Nuevamente, voy a agregar en una sección, estoy usando la imagen con opción de texto. Yo quiero igualar ese color de fondo. Nuevamente voy a colocar el título y el texto que preparé de antemano. Mientras configuras tu página, está bien dejar el texto del marcador de posición al principio. Yo diría, solo nota la cantidad de textos utilizados y tenlo en cuenta cuando estés preparando tu propio texto real para asegurarte de que encaja bien. Voy a usar el mismo módulo para construir una sección de seguidor justo debajo de la sección únete a nosotros. Esta vez, voy a poner la imagen a la derecha para que guíe el ojo del lector y haga una distinción entre las dos secciones. Volvamos a conducir hasta el fondo de nuestro contenido. A ver cómo se ve eso. Este es un buen ejemplo de algo que se ve muy cool en la plantilla, pero te animo a cambiar constantemente al móvil porque muchos de tus visitantes van a estar ocupados en el móvil, y así que quieres asegurarte de que esa experiencia es tan buena como la experiencia de escritorio. Cuando miro esto, esa sección de galería tiene menos sentido para mí porque la gente tendrá que hacer algún gesto de dedo para abrirlo, y podría no ser súper obvio. Entonces me voy a deshacer de esa sección. Hablemos de estos últimos artículos aquí abajo que no voy a usar. Testimonios es algo que a mucha gente le gusta usar, pero para mí es innecesario. Entonces voy a pasar a esa sección. es que no me guste o no lo quiera, es que estoy pensando en cómo editar mejor abajo lo que tengo en mi página de inicio. Como has visto en las otras páginas, como Everlane e incluso la compañía de té, hay mucha información, pero no han tirado todo ahí dentro. Voy a escoger y elegir lo que quiero mostrar. Para mí, esto viene secundario a las cosas que ya elegí usar. Por último, estamos aquí abajo en el pie de página y puedes decidir cuál de estas cosas quieres mostrar. No me gusta mostrar icono de pago así que apago eso, y no necesito el efecto de paralaje. Yo sí quiero mostrar el boletín de noticias inscríbase, y ustedes pueden editar ese texto aquí. Yo quiero poner algo que esté más en línea con mi voz de marca, así que pondré aquí. No quiero este color. Vayamos a estos ajustes de tema, entramos en colores, puedo encontrar el color de fondo del pie de página aquí mismo. Voy a cambiar eso por un azul oscuro. Puedo cambiar el texto del pie de página a blanco, así que eso es legible, y eso me gusta mucho más. Lo último que quiero mostrarles es que debajo, verán la navegación que configuramos antes con toda esa navegación anidada. En caso de que eso fuera un poco confuso, quiero mostrarte rápidamente cómo puedes construir un wireframe muy simple para pensar a través de los módulos que necesitarás, para que sepas cuáles deshacerte y cuáles guardar o agregar. En el plan de sitio de muestra, he echado un vistazo al esquema que tengo y a los módulos que están disponibles en esta plantilla. Construí esta mesa muy sencilla para pensar cuánto tiempo de una página de inicio quiero tener, qué estructura me gustaría que pareciera, y para asegurarme de que he cubierto todo el contenido que me propuse cubrir. Como verás, son bloques muy sencillos. Ahí hay una imagen larga y tengo el orden de contenido que me gustaría, lo que es nuevo, artículos de tienda de características, enlaces a contenido, resaltado y elemento de contenido, y por último, permitiendo que la gente sepa dónde unirse y seguirnos. Siguiendo esta estructura, pude decidir que no necesito videos, ni testimonios, ni ese bonito artículo que me proporcionaron, pero en realidad no encajaba en lo que necesitaba. Te recomendaría que si no estás seguro de cómo jugar con tus módulos, para volver a tu esquema y crear una estructura alámbrica muy simple del contenido de orden y estructura que te gustaría. Es algo que puedes hacer a través Google Docs con una mesa o simplemente usar un lápiz y papel. Esperemos que puedas empezar a ver que a medida que construyes tus páginas, tus productos, tus colecciones, conectándolos todos a la navegación y configurando tu página de inicio, llegarás a tu producto final de tu sitio web terminado. Creo que eso se ve bien. En la siguiente clase, te voy a mostrar mi sitio web real con la plantilla de pago que uso y algunos de los pros y contras y beneficios, que puedas tomar una decisión por ti mismo, ya sea que valga la pena o no para tu sitio web. Te veré ahí. 11. Diseño de Shopify: comparación de plantillas de pago: Ahora voy a hacer un recorrido rápido por mi sitio en vivo y te mostraré una plantilla de pago que utilizo. Voy a repasar los pros y los contras de cada uno y te dejaré decidir si vale o no para tu sitio. Tengo mi sitio real jalado aquí y diría que algunas de las principales diferencias son el “Nav” en la parte superior. Si le echas un vistazo a este, tiene este menú desplegable y realmente no puedo controlar eso, no puedo cambiar ese menú de “Nav” a este “Top”, que me gusta más. También tiene una capacidad de menú mucho más potente donde puedo agregarle imágenes, puedo tener unas de anidación de me gustaría. Por ejemplo, estoy seguro que has visto en sitios de comercio electrónico, en esto se cierne, puedes tener estos sitios anidados mucho más complejos y tener imágenes también. Eso es algo que puedes hacer con esta plantilla de pago. Después tener opciones como sólo poner este texto a la izquierda aquí. Mi imagen está configurada para que la gente pueda ver este medio, y como viste en éste, podría quedar un poco de bloque. hecho de tener esa opción de decir a dónde quiero que vaya el texto es realmente agradable. Aquí podría haberlo puesto en un centro, podría haberlo puesto en el lado derecho, y solo hay mucho más control con esta plantilla. También hay cosas como decidir cómo quieres que recorte en el móvil. Algo frustrante con el que podrías encontrarte es que a veces tienes una imagen que funciona muy bien en el escritorio, pero luego se ve gracioso en el móvil porque es demasiado en cuclillas o demasiado alta. Tener una opción para recortarlo de una manera que sea amigable con el móvil puede ser realmente útil. Otra cosa que me gusta mucho de esta plantilla es que tengo este módulo aquí mismo que me permite seccionar diferentes páginas. No hay esta opción en la plantilla gratuita, y cuando busco la plantilla pagada adecuada para mí, realidad estoy mirando los módulos que me ofrecen, para asegurarme de que cubran mis necesidades. De lo contrario, esta sección, esta galería y estas dos secciones de aquí abajo son realmente similares. Si tienes un sitio web bastante simple y solo estás tratando de vender algunos productos, ten un “Acerca de la página” y una política de privacidad, como dije antes, las plantillas gratuitas son más de lo que necesitas. Pero si quieres crear algo que sea un poco más personalizable y poder mover texto y tener una navegación realmente compleja, digamos porque tienes muchos productos, entonces definitivamente querrás considerar un porque tu uso va a ser un poco mayor. Por último, lo último que hace o rompe las plantillas gratuitas versus plantillas pagadas para mí, es que creo estas sub páginas como esta casa de té. Esto es como la página sobre que configuramos bajo la plantilla libre. Como viste en el ejemplo anterior, esa era una plantilla muy básica con solo una capacidad de poner una imagen y texto y realmente no poder moverse. Con esta plantilla de pago, soy capaz de tener módulos igual que soy capaz de tener en la página de inicio. La capacidad es un poco más limitada, pero es exactamente lo que necesito para construir las páginas que quiero. Aquí he construido nuestra página que enlaza con el blog, tiene algunos módulos para dirigir a la gente para que vaya a conseguir lo descargable y tiene más áreas de llamada para contenido que quiero mostrar. También he construido esta otra página que repasa las historias que tenemos y permite una galería de imágenes. Todo esto fue construido a través de módulos, posible que puedas lograrlo a través de alguna codificación personalizada en las plantillas gratuitas, pero es mucho más fácil de hacer con estos módulos existentes. Yo diría que esas son las principales diferencias entre una plantilla pagada y una plantilla gratuita. Tendrás más opciones para diferentes módulos, tendrás mayor control sobre cosas como la colocación del texto y el dimensionamiento. Simplemente tendrás un menú y sistema de navegación mucho más potente, así como desarrollo de subpáginas. Que necesites o no todo eso realmente depende de lo que necesites para tu sitio web. Espero que eso sea útil para decidir qué es lo mejor para ti. Ahora vamos a reunirnos en una próxima clase, conseguiremos que finalicen nuestros ajustes y nos prepararemos para lanzar nuestro sitio. Te veré ahí. 12. Finalizar Shopify: ajustes: Estamos casi listos para lanzar. Volvamos a nuestra configuración en el tablero para asegurarnos todo se vea bien antes de que estemos listos para presionar ese botón en vivo. Para navegar de nuevo al tablero, harás clic en este icono en la esquina superior izquierda. Ahora, vamos a ir bajo ajustes. Voy a repasar rápidamente las cosas que creo que son más importantes para volver a comprobar. Obviamente, miré a través de todos los ajustes, pero aquí están las cosas que crees que son más importantes para asegurarte de que te queden bien antes de irte a vivir. En general, ingresarás los detalles de tu tienda, nombre de tu tienda, el correo electrónico de contacto, donde quieres que tus clientes se sientan en contacto contigo, tu dirección de tienda, tu tiempo, tus medidas de peso, y tu moneda. Bajo pago, quieres asegurarte de que has encendido todo lo que quieres que la gente pueda usar, y que has apagado cualquier cosa que no quieras que puedan usar. Yo sí recomiendo mantener estos cheques acelerados encendidos. La gente está tratando de usar mucho más Apple Pay y Google Pay y simplemente hace que sea más fácil para ellos el check out rápido. A continuación, vayamos a la caja. Aquí, tienes algunas opciones como si permitir cuentas de clientes, cómo quieres permitir que se retiren. Personalmente me gusta usar cheques por correo electrónico, y decidir qué partes quieres requerir de ellos. En general, quiero conseguir sus nombres y cualquier cosa que se asegure de que sus paquetes lleguen con ellos. A continuación, vamos al envío. Aquí, puedes configurar tus tarifas de envío. Muchas empresas ofrecerán, por ejemplo, tarifas de envío planas dentro de Estados Unidos o de su país de origen y tal vez calculadas las tarifas de envío internacional. Personalmente he encontrado que las tarifas de envío internacional son realmente caras y realmente varía dependiendo del país. Al inicio de mi tienda, tenía una tarifa plana de envío internacional, pero ahora la he actualizado para que la gente lo calcule y use un costo de vida real. Creo que eso también ayuda a hacerlos sentir que este es realmente el costo que estamos recibiendo. Porque mucha gente podría tener algún shock de pegatinas cuando vean cuánto cuesta enviar internacionalmente. Allí puedes configurar tus roles de envío. También puede configurar paquetes guardados. Por ejemplo, frecuentemente envío en cerca de tres tamaños diferentes y puedo pre-llenar esa información en Shopify, incluyendo el peso para que automáticamente calcule eso en la caja. Hay algunas opciones diferentes en boletines de embalaje y etiquetas de envío y si quieres integrarlo con alguna cuenta de envío que puedas tener. También puedes configurar cosas como configurar la recolección local. Eso ha sido realmente útil dados los tiempos. A continuación, en impuestos, quieres asegurarte de que estés configurado como de acuerdo a las reglas de donde estés haciendo negocios. Yo estoy en California en EU sin embargo, quiero asegurarme de que se estén cobrando los impuestos de la venta correcta. En ubicaciones, agregarás en cualquier ubicación de tienda diferente, ubicaciones de almacenamiento, o tal vez, si estás vendiendo anuncios, ciertas convenciones o mercados todo el tiempo. Tendrás que añadir esos. Bajo las notificaciones, puedes tener algún control sobre muchos tipos diferentes de correos electrónicos en tus clientes podrían recibir. Las tarjetas de regalo son bastante sencillas, y los archivos son solo todos los archivos que has subido a lo largo de la construcción de las ventas de tu sitio. Encuentro que aquí tengo todas mis imágenes. Esta sección es realmente útil si quieres subir un montón de archivos a la vez. Como viste antes, estaba subiendo uno por uno. Si estoy construyendo algo que sé que necesito todas estas imágenes, entonces en realidad es mucho más conveniente venir a esta sección de archivos y simplemente subirlo por ahí. Canal de ventas es otra vez así de similar también. Si acabo de agregar ese signo plus aquí mismo, puedes agregar otros canales como Amazon y Facebook. Planes y permisos va a ser donde puedas agregar tus cuentas de personal, y la facturación es algo que, por supuesto, es importante para asegurarte de que has configurado antes de tiempo t, para poder habilitar compras e incluso salir a vivir. Toda tu información de facturación debe estar actualizada. También podrás ver los cargos de Shopify en tu cuenta aquí también. Vengo aquí cuando estoy haciendo mi contabilidad y contabilidad para ver los cargos, y mis ingresos, y la división entre. Por ejemplo, el envío versus la suscripción de cuentas. Lo bueno es que quieres llenar una política de reembolsos, una política de privacidad, términos de servicio y política de envíos y parece mucho trabajo, pero Shopify en realidad tiene estas plantillas listas para ir. Simplemente puedes hacer clic en este botón y tendrás una plantilla llena y solo leerla para asegurarte de que esté en línea con lo que quieres ofrecer. Una vez que tus ajustes estén bien, te recomendaría pedirle a un amigo o familiar que eche un vistazo final a través de todo tu sitio para asegurarte de que todos los botones estén enlazando a los lugares correctos. Es común que cuando estás configurando un sitio web y no tienes todas tus páginas o producto configurado de antemano, estés poniendo algunos enlaces de marcador de posición a cosas que ya existen. Al final de la misma, has olvidado cuáles son los que están vivos y cuáles son los que aún necesitan actualizarse. Tener un par de ojos frescos para mirar a través que será realmente útil para hacer un seguimiento de. También ayudará a salir a la superficie cualquier pregunta que pueda tener la gente si piensan que es confuso qué hacer, cuándo llegar a la página principal o no estás seguro de cómo echar un vistazo. Todas esas cosas serán más fáciles de tratar cuando tengas a alguien más ayudándote a buscarlas, y siempre que estés listo para lanzar tu sitio, recuerda volver a tus preferencias bajo línea almacene y escoja un plan para deshabilitar la contraseña. Una vez que hayas terminado de configurar tu configuración, veámonos en la clase final y última. Te veré ahí. 13. Clase extra: portafolio de Adobe: Bienvenido a la clase de bonos. Si bien el resto de este tutorial estaba enfocado en Shopify, sí quería tomarme algún tiempo para hacer un paseo por la otra plataforma que uso, que es la cartera de Adobe. Lo puedes encontrar en portfolio.adobe.com. La cartera de Adobe es una gran opción de sitio de portafolio para aquellos de ustedes que ya tienen una suscripción a Creative Cloud y no necesariamente buscan vender nada en línea. Me di cuenta de que mucha gente no sabe que es un servicio gratuito que viene con su suscripción. un poco más limitado que Shopify, pero con un poco de pesca divertida, creo que está perfectamente bien para un sitio de portafolio. Por otro lado, para aquellos de ustedes que no tienen ya una suscripción a Creative Cloud, no lo recomiendo como opción. En ese caso, recomendaría probar algo como Cargo Collective, que es una opción gratuita o Squarespace, que es una opción de pago. De hecho construí mi sitio web de bodas en Squarespace y creo que sí tiene algunos pros. Si fuera a descomponer las diferencias de pros y contras entre Shopify y Squarespace, diría que Squarespace es un poco más barato. En primer lugar, después Shopify, si eliges una opción de comercio electrónico de mocos. Es, ya existentes, las plantillas son un poco más agradables en cuanto a diseño. Su ideal para sitio web de bodas, sitios de portafolio o negocios busca como restaurantes que solo quieren dar información de una manera hermosa pero no necesariamente venderles ningún producto en línea. Por otro lado, los temas de Shopify son mucho más personalizables en mi opinión. Soy capaz de hacer mucho más en cuanto a su capacidad de E-commerce. Yo sí creo que Shopify en última instancia tiene la ventaja si estás tratando de construir una plataforma de comercio electrónico. Volver al portafolio de Adobe. El back-end es un poco más incómodo en cómo está configurada en mi opinión, pero no es difícil conseguir el ahorcamiento de en absoluto. Echemos un vistazo. Cuando empieces, verás una página que te pide iniciar un nuevo sitio y puedes crear hasta cinco sitios. Vamos a dar click aquí para ver dónde están tus opciones. te pedirá que digas con qué quieres empezar. Se puede hacer una sencilla página de bienvenida, que es casi como una tarjeta de visita digital o se puede hacer una colección de trabajo, que es lo que son la mayoría de los sitios de portafolio. Al hacer clic en eso, verás que hay 12 plantillas gratuitas que vienen con el portafolio de Adobe. Se ven bonitas, pero desafortunadamente no puedes comprar nada más ni subir las tuyas, tienes que usar algo aquí. Personalmente encontré que eran bastante limitados en cuanto a lo que podían hacer fuera de crear páginas de proyectos y páginas de información muy simples. Otras que probé, pensé que Lucas era el que más funcionalidad ofrecía en cuanto a poder dejarme un poco las cosas personalizadas. Ese es el que uso. Esta es mi página de inicio, solo haz un desplazamiento rápido a través y lleno todo esto usando las plantillas de páginas aquí mismo. Me di cuenta de que necesito crear una página para esta clase bajo mi pestaña de habilidad compartida aquí mismo. Pensé que sería genial usar eso como ejemplo de cómo hacer la construcción de una página en un portafolio. Al ir a páginas debajo de lo esencial, y querrás hacer clic en este signo más abajo aquí, verás cinco opciones. La opción de página es la que uso con más frecuencia, es algo que puedo crear páginas de proyecto para costos de blog y páginas de información. Las páginas de bienvenida son páginas de aterrizaje de pantalla completa. Los álbumes de sala de luz son solo una capacidad de conectarse a tus álbumes en la colección de habitaciones de Adobe Light , te mostraré más tarde, pero básicamente es una colección de sub páginas y los enlaces son solo enlaces directos que pones en tu navegación. Hagamos clic en la página causa construir su sitio. Yo sí quiero poner esto bajo las habilidades que eres tab, pero vamos a ver qué pasa que lo meto en la navegación. Crear la página. Ya verás que ahora se llena automáticamente en mi nav aquí arriba. En este caso, no quiero hacer eso. Vuelve a hacer clic en las páginas y es realmente fácil de arrastrar y soltar para organizar tu navegación. Pasa el cursor sobre este ícono de la hamburguesa de la izquierda y arrástralo hacia abajo y solo mata compartir. Ahora, en la propia página, hay algunas formas de empezar. Obviamente, tienes estas opciones de módulo aquí mismo, que son igual que los módulos con los que puedes construir en Shopify. Estás limitado a estas 10 opciones que tiene Adobe. También tendrás algunas cosas que podrás ajustar en este panel izquierdo. A diferencia de y Shopify, que tenía el dashboard y luego el espacio de trabajo del sitio web dentro de ese panel, este es todo el sistema para la cartera de Adobe. Hay más en solo un tablero muy sencillo aquí arriba, podemos organizar las páginas y el nav configurar tus integraciones con tus otros programas de Adobe. Puedes cambiar el tema muy fácilmente aquí y luego ajustar los ajustes. Esta sección amplia del sitio justo aquí es como la configuración del tema en Shopify. Podrás ajustar tus fondos universales, colores y fuentes. Podrás ajustar el contenedor del sitio web, que es como ancho y alineaciones. Estilos de contenido multimedia es donde editarías todos los diversos tipos de estilos de textos como encabezados, subencabezados, párrafos, subtítulos, etcétera. Podemos encender y apagar su logotipo. Te darás cuenta de que cambió aquí mismo. Oculta tu nav o show, y lo mismo con el pie de página. Entonces en esta página podrás editar las cosas son específicas de esta página en particular. Pero sigamos adelante y empecemos a construirlo aquí. El primero que quiero hacer es encender el cabezal, solo agrega el título de la página a la parte superior y lo hago por todas mis páginas de habilidadcompartir. Entonces quiero agregar una imagen de héroe para mostrar una vista previa de la clase. He preparado todos los activos que necesito con anticipación. Añadamos esta imagen como la imagen introductoria. Ya verás que el anterior bloque de opción Módulos ha desaparecido. Pero si solo haces clic en este signo más, aparecen las mismas 10 opciones. Pero voy a seguir adelante y dar click en texto. Caer en ese texto. Por lo que he caído en un adelanto de la plataforma Shopify. Lo que es bueno que Adobe ha agregado más recientemente es una capacidad para agregar imágenes o textos a la izquierda y a la derecha de una imagen existente. Si pasas el cursor sobre esta imagen, verás que aparecen estos signos más y si quieres agregar algo a la izquierda, obviamente pintarías aquí. Si quieres agregar algo a la derecha, darías click en el botón de la derecha. Quiero agregar una imagen de cartera de Adobe junto a ella para indicar que voy por encima de estas dos plataformas. Aparecen lado a lado. Aquí hay algunas herramientas de alineación. Me he asegurado de que las imágenes que estoy usando tengan la misma altura, pero digamos que no lo eran, podré alinear las imágenes como me gusten con estas tres opciones. Este icono central también te permite hacer clic y arrastrar si quieres alinearlo de manera diferente. Pero para mí, sí quiero que esté centrado y parejo. Algunos otros ajustes que puedes hacer es al pasar el cursor sobre la imagen, puedes hacer clic en este icono de lápiz y verás varias opciones que puedes elegir a continuación. Obviamente puede mover los artículos en la página. Se puede reordenar el contenido de la página en sí. Eso es como en el Shopify, panel lateral izquierdo donde puedes hacer clic y arrastrar. Se puede agregar Alt Text. Esto es genial para SEO y texto de accesibilidad. Se pueden agregar enlaces. Tendencia esta imagen en un enlace activo, lo cual es bonito y te mostraré en mi página de inicio cómo se utiliza eso. Podemos añadir un pie de foto para que pueda dar click en Shopify. Entonces para este, cartera de Adobe. Pero realmente quería hacer era entrar en la alineación de ancho y márgenes. Haciendo clic aquí, solo quiero añadir un poco de espacio para respirar entre estas dos imágenes. Vamos a cambiar ambos anchos al 95 por ciento de su máximo. También se puede especificar por píxeles, pero por ahora usando porcentaje. A continuación, agreguemos algunos textos más que he preparado, una imagen más que quería compartir, que era el backend de mi sitio de Shopify, para que la gente pueda obtener una vista previa de eso también. Por último, quiero añadir un botón. Portafolio de Adobe, a veces lo editas directamente dentro de este panel derecho aquí, y a veces editas cosas en este panel de la izquierda. Es por eso que, quiero decir, a veces es un poco incómodo, pero una vez que te das el ahorcamiento es bastante sencillo. Demos click en “Editar este botón” y por aquí, pondría clase View, por ejemplo. A lo mejor en Skill share para que la gente sepa exactamente en qué se están metiendo. Por ahora, pondremos el enlace de posición de mi sitio de perfil de profesor, pero eventualmente queremos actualizarlo al sitio real. Sí quiero que se abra en una ventana nueva, y ajustemos esa fuente a algo que coincida mejor con mi sitio. Se puede ajustar la altura y el relleno de los botones. Por ejemplo, cambiemos al 50 por ciento y bajemos el relleno a eso. Eso me queda bien por ahora. Entonces por supuesto puedes seguir adelante y agregar, por ejemplo, un formulario de contacto o incrustar un video. Por ejemplo, puedo incrustar video de tráiler compartido de MySQL aquí una vez que esté disponible. Pero por ahora, creo que es suficiente para esta página. Lo siguiente que quiero mostrarles es cómo agregar imágenes de galería. Ten en cuenta que aquí he añadido dos imágenes separadas. El motivo por el que quería hacer eso es porque no quiero que esto se pueda hacer clic en una galería. Si lo hiciera, déjame mostrarte lo que haría. Voy a entrar en otra página de compartir habilidades, la para mi ilustrado durante la clase. Porque quería agregar algunos ejemplos más al final de esta página. Aquí, voy a dar clic en la cuadrícula de fotos esta vez y subir estas imágenes que he preparado y Adobe portfolio sube todas las imágenes a esta cuadrícula. Desafortunadamente, no tienes tanto control sobre cómo deciden dividirlo, como esta fila de tres. Pero puedes al menos reordenar la cuadrícula si quieres. Por ejemplo, si quisiera mover algunos de estos alrededor, simplemente iría y aquí agregaría una cuadrícula y solo puedes hacer clic y arrastrar. Puedes agregar subtítulos, puedes agregar fotos, solo tienes que hacer click en ellas. En este caso, al hacer clic en ellos, podrás tener como funcionalidad de galería. Es realmente fácil hacer clic a izquierda y derecha en estas flechas para ver la galería en un formato más grande. Esa es la diferencia entre las imágenes y las galerías de fotos. Déjame mostrarte sólo unos ajustes más que utilizo a menudo. Al seleccionar este texto, podré obviamente cambiar el estilo. Pero aquí es donde irías a ajustar el tipo de texto que es. Ahí es donde entrarías en sub encabezados para asegurarte de que sea uniforme en tus sitios. Pero esto hace que sea fácil asegurarme de que he aplicado el estilo de la fuente de una manera consistente. Lo siguiente que quiero mostrarles es cómo crear una colección de páginas. Entonces por ejemplo, en la clase compartida de Skill, viste que tengo una colección de páginas para mis principales tutoriales en mi portafolio. Tengo enlaces a todos mis diversos proyectos de cliente que quiero compartir. Bajo posts, tengo toda mi entrada de blog donde comparto recursos de forma gratuita, como empezar. Mucha gente me preguntó cómo empezar y secarse así que decidí armar esta entrada de blog que cubre todos los recursos que me gustan y uso. Hay un lugar al que puedo dirigir a la gente. Para realizar estas colecciones, haga clic en páginas. Después agregas una colección y verás aquí cómo está configurada. Verás este ícono de la cuadrícula y coincide con esta colección aquí mismo. Decir que quería crear una nueva colección de retratos. Daría clic en colección agregar retratos, y luego simplemente comenzaría a agregar páginas a esta colección. Si quisieras duplicar algunos de tus proyectos existentes, por ejemplo, es realmente yendo a este icono de engranaje a la derecha de cada proyecto. Da click en eso y verás que hay bastantes opciones de lo que puedes editar y cambiar y también subir y reimportar para ser manos, claro, este es un producto de Adobe y ser manos como producto de Adobe, hace que sea realmente fácil hundir la vida de tu proyecto. Lo que quería hacer es duplicar esta página. Entonces me limitaría a hacer clic y arrastrar esa copia a retratos. Entonces por supuesto puedo hacer clic en él e ir y editarlo según sea necesario si say fue utilizado para un contexto diferente. Por último, si, por ejemplo, desea vender algunos productos digitales en su sitio de portafolio, una cosa que podría hacer es adjuntarlo a, por ejemplo, una cuenta de Gumroad. Puedes hacer que esto funcione como un sitio de comercio electrónico algo así, siempre y cuando sea bastante limitado en lo que quieres hacer. Espero que ese fuera un pico útil en la cartera de Adobe para que puedas tomar una decisión sobre qué opción es la mejor para tus necesidades. 14. ¡Reflexiones finales y agradecimientos!: Estamos al final de la clase. Pasamos por tanto, y tú eres increíble por lograrlo todo el camino. Espero que ahora tengas una idea clara de cómo hacer la planificación para tu sitio, y luego construirlo tú mismo. Espero que compartas tus planes de sitio con nosotros en la sección de proyecto de clase. Puedes hacerlo yendo a la pestaña de proyectos y recursos debajo de este video en escritorio, y haciendo clic en crear un proyecto. No puedo esperar a ver qué vas a construir. Si te gustó aprender conmigo, te doy la bienvenida a revisar mis otras clases en SkillShare y a seguir mi perfil de profesor para ser notificado de cuando salgan nuevas clases. Hasta entonces, muchas gracias por acompañarme y divertirse aprendiendo.