Construa seu site e loja: Guia para iniciantes para Shopify e Design de site

1. Trailer do curso: crie seu site!: Olá e bem-vindo. Nesta aula, vou mostrar-lhe como você pode construir seus próprios sites bonitos sem qualquer conhecimento de codificação. Se você está querendo criar seu próprio site para você ou para a sua pequena empresa, mas você tem sido um pouco intimidado pelo processo, ou apenas não sabe por onde começar, então você está no lugar certo. Estou animado para mostrar o quão acessível é fazer você mesmo. Meu nome é Mimo e sou um ilustrador e um criador, um pequeno empresário. Através do meu estúdio, Mimochai, crio livros ilustrados e vendo meus produtos de ilustração pessoalmente e online. Eu também tenho meu próprio site de portfólio onde eu compartilho alguns dos meus clientes freelance trabalho e recursos úteis. Eu mesmo construí esses dois sites e eu realmente realmente gosto de fazer sites. Eu pensei que seria útil mostrar aos outros como eles podem fazê-lo também. Comecei no ensino médio codificando meus próprios sites HTML super básicos para mim e meus amigos. Muito mais tarde, eu era um editor líder de projeto na Drill Design Agency focado em branding e sites. Agora crio e mantenho meus próprios sites usando o portfólio da Shopify e da Adobe. As coisas percorreram um longo caminho desde os meus dias em HTML. Agora você pode construir esses belos sites totalmente funcionais apenas usando modelos sem conhecimento de codificação. Esta classe é projetada para criadores e proprietários de pequenas empresas, mas acredito que qualquer pessoa que queira criar seus próprios sites se beneficiará disso. No final desta aula, espero que você tenha uma idéia clara de como planejar seu site e construí-lo você mesmo. Então vamos começar. 2. O que vamos aprender: Estou tão feliz que você decidiu se juntar a essa aula. Quero observar rapidamente que, para aqueles de vocês que precisam, você sempre pode ativar as legendas clicando no botão na parte inferior deste vídeo. O que vamos aprender? Vou mostrar-vos o meu processo completo de construir um website do início ao fim. Vamos rever o back-end da Shopify, mostrarei a você como percorrer os modelos para escolher o melhor para suas necessidades e aprenderemos a planejar, projetar e construir nosso site para aproveitar as limitações e pontos fortes do uso de modelos. Então, este é o meu site mimochai, e eu só quero dar uma prévia rápida para mostrar o que é possível usando um modelo da Shopify. Eu tenho uma loja de e-commerce, eu tenho uma galeria, eu tenho um blog e há uma página Sobre Nós e Formulários de Contato e Newsletters, basicamente tudo o que você precisa para começar seu próprio site. Vou me concentrar na Shopify porque essa é a plataforma que eu uso. Eu acho que é ótimo para lojas de e-commerce. Acho que é muito poderoso e um bom equilíbrio entre design e funcionalidade. Por outro lado, se você não está vendendo nenhum produto ou serviço, eu realmente acho que isso é provavelmente um exagero. Eu também vou adicionar uma aula sobre meu site de portfólio pessoal, que é onde eu mantenho meu trabalho de cliente e minhas postagens de blog pessoais e recursos que eu compartilho com pessoas que estão em uma jornada semelhante a mim. Eu uso o portfólio da Adobe para isso, que é um serviço gratuito que vem com qualquer assinatura da Creative Cloud. Então eu também quero ser muito claro sobre o que esta classe não é. Esta não vai ser a sua típica classe de desenvolvimento de design de construção de site no sentido de que eu não estou entrando em qualquer codificação aqui. Eu não vou realmente aprofundar os princípios de UX e UI , porque muito disso já é considerado nesses modelos. Em vez disso, esta classe é realmente destinada a pessoas que não estão tentando construir sites em tempo integral, mas querem criar um bom site para sua pequena empresa, para sua prática freelance, ou talvez para um projeto em que eles estão trabalhando. Eles podem ser experientes em computadores, mas eles não têm certeza de como navegar no back-end de uma plataforma ou como exatamente os modelos funcionam, ou usar módulos para sua vantagem. Então esta classe vai ser criada para isso. Eu acho que os sites que esses modelos podem construir são mais do que suficientes para pequenas empresas e criativos freelance. Na verdade, muitas das marcas com as quais você pode adorar fazer compras também estão hospedadas na Shopify. Será injusto comparar esses sites para dizer premiados sites super personalizados porque esses sites podem custar até sete números para construir e eles são construídos usando desenvolvedores profissionais e, no mínimo, esses desenvolvedores geralmente custam 5-6 figuras. Por outro lado, eu sei que muitas pequenas empresas e criativos freelance não têm necessariamente o orçamento para fazer isso, mas eles têm a capacidade de fazer isso sozinhos. Então eu quero mostrar a vocês o quão capacitante é saber como construir seu próprio site e gerenciá-lo sozinho. Outro bônus disso é que, às vezes, quando você trabalha com um desenvolvedor para desenvolver seu site, eles podem construí-lo de uma maneira que não é muito fácil para você continuar e manter e gerenciá-lo sozinho no caminho para você terá que continuar pagando para fazer até mesmo mudanças básicas na manutenção. Por outro lado, se você aprender a fazer isso sozinho e entender como ele funciona no back-end, você será capaz de entrar e continuar [inaudível] e mudar as coisas você mesmo. Se você ficar muito ocupado, você sempre pode ensinar alguém como fazer isso por você. Algo sobre saber como funciona e sentir que você sempre pode ir lá e consertar você mesmo se precisar, é muito empoderador. Então, agora que sabemos o que vamos aprender com esta aula, vamos nos encontrar na próxima lição onde vou rever nosso projeto de classe. Te vejo lá. 3. Seu projeto do curso: Espero que até o final desta aula, você saia com o plano de visão clara de como construir seu site e você não terá mais medo ou incerteza de como fazer isso sozinho. A tarefa oficial da turma é criar um plano para o seu site, que é um documento simples que irá rever seus objetivos, o propósito do seu site, seu público-alvo e um esboço do site que vai sobre o conteúdo do que você tem em a estrutura do seu site. Isso pode ser feito em lápis e papel ou em um computador, cabe a você. Vou mostrar o que usei, que é apenas um Documento básico do Google, e vou compartilhá-lo com a classe para que você possa usá-lo como modelo inicial, se quiser. Então, se você estiver pronto, você pode ir em frente e construir seu site, e eu espero que você vai compartilhá-lo com a turma, que seria incrível. Mas, por favor, não sinta que essa é a expectativa de concluir este curso porque todos realmente trabalham em um ritmo diferente. Antes de começarmos, quero observar rapidamente que a Shopify custa dinheiro após o término da avaliação gratuita. Seus planos mensais começam em US $29 por mês, que é o que eu uso. Eu recomendaria iniciar sua avaliação gratuita quando você estiver realmente pronto para começar a criar. Para o exemplo de classe, usarei um modelo gratuito da Shopify para que todos possam acompanhá-lo, e fornecerei um conjunto de fotos de estoque que você pode usar como ativos de espaço reservado para brincar. Vou então mostrar-lhe o back-end do meu próprio site, que usa um modelo pago, e vou rever as diferenças para que você possa tomar uma decisão por si mesmo sobre se vale a pena ou não. A última coisa é que eu recomendaria assistir esta classe ao longo de todo o caminho para que você possa obter um lay da terra e, em seguida, pode voltar e vê-lo novamente mais devagar, idealmente com o modelo de sua escolha aberto lado a lado para que você possa me acompanhar e aprender mais facilmente. Eu realmente espero que você vai compartilhar seu plano do site com a gente no material do projeto da classe. Acho que será uma ótima maneira de obter motivação e feedback de outras pessoas, e espero que isso inspire você a realmente construir sua visão. Estou animado para mergulhar nas aulas reais. Vamos nos encontrar na próxima aula onde nos familiarizaremos com a Shopify. 4. Visão geral da Shopify: Vamos dar uma olhada na Shopify. Vou dar-lhe uma visão geral de alto nível do layout e mostrar-lhe como encontrar o caminho. Você também pode dar uma olhada na página inicial deles para ver os diferentes recursos que eles consideram destaques. Para começar, você vai querer iniciar uma avaliação gratuita. Você não precisará inserir nenhuma informação de pagamento ou escolher um dos níveis de preços. Apenas para dar uma prévia, há três planos diferentes da Shopify, e ele vai do básico de US $29 por mês para o normal para avançar em 299 por mês. Eu só uso o plano básico da Shopify e é perfeitamente adequado para minhas necessidades. Eu diria que as principais diferenças são considerar quantas contas de pessoal você precisa para quantos logins você precisará dar às pessoas que o ajudam a gerenciar o site, quão profissional e final seus relatórios precisam ser. Algumas preocupações de envio diferentes que você pode ter e algo que pode não ser super óbvio é o volume de pedidos que você tem. Se você está esperando pedidos de volume muito alto e gerar muita receita, pode fazer sentido para você começar no plano normal da Shopify porque as taxas de processamento de pagamento com cartão de crédito são um pouco mais baixas, então você pode realmente fazer essa diferença. Acho que para a maioria das pessoas que frequentam esta aula, você pode começar com o plano básico e atualizar à medida que cresce. Uma vez que você iniciar seu teste gratuito e inserir suas informações, você deve obter um painel para sua página inicial que deve ser assim, bastante simples, mas vamos dar uma olhada ao redor. À esquerda estão todas as diferentes guias de navegação que você pode ver e eu diria que está dividido em guias operacionais aqui em cima, e seus canais de vendas aqui em baixo. Em Início, você verá um painel que mudará à medida que seu site cresce, portanto, quando eu fizer login, vejo uma visão geral dos dados, como os visitantes do meu site, que veem vendas e dicas diferentes que a Shopify oferece perfis diferentes. Para mim eles me dizem coisas como, este cliente tem feito compras aqui muito ou as pessoas que olham para este produto tendem a olhar para este produto, talvez você queira empacotá-los. Mas, por enquanto, já que somos novos, ele lhe dará conselhos e orientações sobre como começar a vender online. Você pode adicionar um produto, personalizar seu tema, conectar-se ao seu domínio personalizado e entraremos em tudo isso daqui a pouco. Em vez disso, vamos continuar indo para as diferentes guias. Aqui está a página de pedidos, medida que o seu pedido começa a chegar, é aqui que todas as informações viverão, para que você possa ver onde seus clientes estão, quanto eles estão solicitando e ser capaz de classificá-los e também deixar notas uns aos outros. Digamos que há alguém ajudando você com a realização, é bom porque você pode realmente deixar notas para essa pessoa e eles podem responder a você também. Há também um recurso em que, se alguém adicionou algo ao carrinho, mas nunca fez o check-out, você poderá ver isso aqui. Tenho certeza que a maioria de vocês provavelmente recebeu e-mails abandonados de lojas que você freqüenta, e isso é a mesma coisa. Basicamente, você pode decidir se quer ou não enviá-los. Às vezes, não é que alguém tenha mudado de idéia, pode ser que eles estavam confundidos com o processo de pagamento ou eles apenas se distraíram, então não faz mal enviar-lhes apenas um e-mail de acompanhamento para garantir que que tudo estava bem. Em Produtos, este é o lugar onde você vai adicionar todos os seus produtos diferentes, e assim você pode importar uma planilha, digamos que você tem todos os seus produtos ou você está morando em outro lugar, sites do Hudson Etsy, ou você pode adicioná-los um por um. A razão pela qual todos eles vivem aqui, é que mais tarde você vai ver que existem diferentes canais de vendas e todos eles se conectam de volta ao mesmo produto fundamental, e por isso realmente torna mais eficiente manter o controle do produtos diferentes que você tem. Em transferências, é aqui que as pessoas que podem colocar seu inventário em lugares diferentes, então digamos que você tem alguns em seu escritório e alguns em um armazém, você será capaz de rastrear com precisão diferentes transferências que você pode precisar ter. Um inventário é mais a planilha de visão geral do que está em estoque, para que você possa ver quantos você ainda tem. Você pode ver o que está fora de estoque e você também pode indicar o que está chegando. Diga, você pediu um reabastecimento de algo que estará aqui em 30 dias. Você será capaz de acompanhar isso em uma seção recebida separada do que está atualmente na loja. Coleções é onde você poderá agrupar diferentes produtos. Coisas como categorias diferentes, você pode querer ter como tops, fundos, jaquetas e acessórios ou você pode querer ter vendas diferentes. Então 30% de desconto, 50% de desconto e coisas como feriados, coleções sazonais e coisas assim. Você poderá criar uma coleção aqui e decidir se deseja que ela seja algo que seja montado automaticamente, como por tipo de produto ou por tag, ou algo que você deseja adicionar manualmente. Finalmente, os vales-presente são algo que a Shopify realmente adicionou recentemente como um serviço gratuito a todos os planos, então isso é realmente ótimo porque não só as pessoas podem comprar um vale-presente quando não têm certeza do que obter o destinatário do presente. Mas pode ser alguém que quer te apoiar, mas não sabe o que eles querem obter imediatamente. Em Clientes, é aqui que todos os seus dados de clientes vão entrar. À medida que os pedidos chegam, você poderá ver as informações do cliente, como onde eles fazem compras, quantas vezes eles pedem de você, e você poderá começar a ver as tendências. Também é um bom lugar para adicionar informações de seus clientes que você pode ter coletado de outro lugar, como talvez informações que você está coletando em um mercado que você está vendendo em ou em sua loja. O Analytics é basicamente etapas para seus sites, para que você possa ver coisas como suas vendas, suas sessões de loja, a frequência com que seus clientes estão retornando, frequência com que esses clientes estão se convertendo e se é esmagador para você ou você nunca lidou com estatísticas antes, não se preocupe, como seus pedidos e visitantes começam a chegar, será bastante auto-explicativo e eu acho que maioria das pessoas realmente gosta de olhar para suas estatísticas. Os relatórios são basicamente os relatórios que a Shopify ajuda a gerar para o seu site com base nos dados que eles coletam, você possa analisar coisas como vendas e aquisições, suas margens de lucro, clientes e o comportamento deles e seu finanças e, claro, como você atualizar seu plano embora relatórios obter mais e mais em profundidade. Para mim, acho que os relatórios de planos básicos estão bem. Live View é um lugar onde você pode ver onde seus visitantes estão. Portanto, ele não compartilha informações de dados privados, mas você pode ver agora onde eles estão localizados, e então eu realmente não uso isso com muita frequência, mas eu posso ver para algumas lojas que meu convidado certos picos de tráfego de diferentes locais em diferentes vezes e pode ajudá-los a tomar algumas decisões importantes para seu site. Em seguida, em Marketing, este é um lugar que eu não venho visitar muitas vezes porque eu realmente não compro anúncios do Facebook ou anúncios do Google e coisas assim. Mas para aqueles de vocês que precisarem, serão capazes de gerenciar tudo isso daqui, se quiserem. Outra coisa boa é que o e-mail da Shopify está chegando em breve, então até agora, maioria das pessoas teve que usar aplicativos de terceiros, o mais popular é conhecido como Mailchimp. Eu uso um chamado Omnisend, muitas pessoas usam um chamado Klaviyo, e isso sempre foi algo que você tinha que fazer separado fora da Shopify. É ótimo que eles estejam integrando isso com seu serviço e será gratuito até outubro de 2020 para todos os planos e depois disso, há algum custo, mas na verdade é menor do que o que eu pago com aplicativos de terceiros. Então isso é realmente ótimo. sobre o desempenho das campanhas de marketing que você configurou, e a automação é onde você pode configurar algum marketing automático para expandir seus negócios Campanhas é onde você poderá ver relatórios sobre o desempenho das campanhas de marketing que você configurou, e a automação é onde você pode configurar algum marketing automático para expandir seus negócios. banda e verificar os e-mails que eu mencionei anteriormente. Mas algumas pessoas se aprofundam muito nisso e esta não é uma aula que vamos entrar em marketing. Mas é bom saber que está lá. Em seguida, há descontos, e é claro que você pode criar códigos de desconto para seus sites, como 20% de desconto no seu pedido ou obter frete grátis, então você vai gerenciar tudo isso aqui e você será capaz de ver. Basta manter o controle de quais expiraram e quais ainda estão pendentes, e você pode realmente torná-los bastante costumes. Há uma opção para decidir se deseja fazer um código de desconto ou descontos automáticos, e quando você entrar lá, você verá que existem tipos diferentes. É como uma porcentagem, uma quantidade fixa, frete grátis, comprar uma jaqueta obter uma t-shirt livre tipo de coisa, e você pode fazer todos os tipos de limitações ou entradas específicas para que você realmente crie um desconto bastante acostumado código que é bom. Finalmente, você tem sua guia Aplicativos e, se você entrar na loja de aplicativos da Shopify, é basicamente esse outro mercado. Shopify tem alguns de seus próprios originais, então são coisas como imprimir faturas, criar downloads digitais que as pessoas podem acessar. Mas há também um monte de aplicativos de terceiros e eles fazem de tudo, desde gerenciar SEO, até configurar um programa de recompensas de fidelidade, até lidar com anúncios de compras e fica bastante atualizado com o que está acontecendo. momento, estou a filmar isto no meio da quarentena do coronavírus, e há uma aplicação que te está a ajudar a não haver contacto. Há um monte de coisas realmente úteis aqui e alguns são gratuitos, muitos deles são pagos, mas eu já disse, para começar, não fique sobrecarregado ou muito cortado aqui, porque é fácil ficar tentado a transformar todos eles em e, em seguida, ele fica esmagador e confuso. Em vez disso, eu começaria a construir o seu site e, em seguida, olhar para o que você realmente precisa para ativar aqui. Essas são as principais guias operacionais. Vamos dar uma olhada rápida no canal de vendas, então a loja online vai ser onde vamos passar a maior parte do nosso tempo nesta classe, e você também pode adicionar outros canais de vendas, como um ponto de venda, Facebook, Instagram. Nós não vamos entrar nisso aqui, mas é bem direto, é apenas conectar-se às suas contas existentes. No canal de vendas, é aqui que você encontrará tudo o que tem a ver com seu site. Suas postagens de blog, suas páginas, suas navegações, domínios, e entraremos em contato com isso daqui a pouco. Mas eu quero mostrar a vocês a seção de temas muito rápido. É aqui que vamos fazer a maior parte do nosso trabalho. Você escolherá seu tema aqui. Você pode procurar temas e personalizá-los aqui também. Aqui você deve ver esta caixa amarela que diz que sua loja online é protegida por senha. Isso significa que, neste momento, se alguém que não seja você for visitar seu site, não verá seu trabalho em andamento rascunho do site. Eles verão uma boa página que apenas diz em breve e incentiva as pessoas a se inscreverem no seu boletim informativo para que você possa informá-los quando ele for lançado. Em postagens de blog, é aqui que você configurará seus blogs se quiser, portanto, não há, é claro, obrigatórios para configurá-lo. Mas é bom mantê-lo, incorporá-lo em seu site para fins de SEO, que só significa que as pessoas que estão procurando conteúdo é melhor se eles vão para seus próprios sites blogs de modo que espero que eles vão para o seu site também. Páginas são tudo o que é diferente da sua home page que vive em seu site. Então, você vai configurar sua página sobre nós aqui, qualquer FAQ que você possa querer ter, uma política de privacidade, e eu vou lhe mostrar isso em uma lição posterior. A navegação é bastante auto-explicativa, mas vou mostrar-lhe como configurar isso para o seu site. Domínios é basicamente o que estava em sua página inicial quando você logou pela primeira vez. Quando comecei, configurou meu próprio domínio em um serviço de domínio separado chamado hover. Mas agora você pode simplesmente configurá-lo diretamente através da Shopify, que é bom para que você possa comprar um domínio, verificar se ele está ao vivo, então eu chamei esse shopmimochai como minha página de teste e vamos ver se ele está disponível, e é que eu possa comprá-lo diretamente e o preço é competitivo para o que você quer de um site de terceiros, então você também pode comprá-lo pela Shopify se isso for mais fácil para você, e você pode configurar isso lá. Finalmente, em Preferências, é aqui que você pode configurar coisas como a forma como deseja que sua loja online apareça na pesquisa. O título, a meta-descrição, e também coisas como a imagem que seu compartilhamento social vai puxar. Digamos, seu amigo compartilha seu site na conta do Facebook. Normalmente, eles rastreiam seu site e puxam uma imagem para compartilhar como uma pré-visualização, você pode ditar o que essas imagens são, que geralmente é mais seguro do que dependendo do que elas vão decidir mostrar, e você também pode inserir seu Código de análise e seu pixel do Facebook aqui. Se você não sabe o que são essas coisas, basta clicar neste link ao lado deles para saber como configurá-las. Eu não vou muito fundo aqui, mas está basicamente disponível lá para você, se você precisar. Finalmente, esta seção de proteção por senha é onde você poderá desativar sua página de senha depois escolher um plano e também personalizar sua senha para as pessoas que você deseja mostrar o site. Em seguida, aqui em configurações, você encontrará todas as configurações típicas que você pode esperar. Seu endereço, suas localizações, diferentes planos e permissões que você deseja dar a membros da equipe ou pessoas que o ajudam, sua cobrança, habilitação de vales-presente e check-out de diferentes opções de envio. Nós não precisamos mergulhar agora, mas no final desta aula, quando finalmente começarmos a ver o nosso site pronto para o lançamento, eu vou mostrar-lhe as coisas que eu acho que são mais importantes para verificar novamente para ter certeza de que eles estão todos no lugar. Se tudo isso parece esmagador, não se preocupe. Primeiro de tudo, você sempre pode ir até a barra de pesquisa, procurar o que você está tendo dúvidas sobre. Eu coloquei no envio para que eles mostrem onde você pode alterar as configurações de envio, e também há recursos em sua central de ajuda. Ao clicar em seu nome, você poderá visualizar sua conta e editá-la, e poderá acessar a Central de Ajuda da Shopify, visualizar os fóruns da comunidade e contratar um especialista da Shopify para ajudá-lo, se precisar, e também aprender atalhos de teclado. Se você clicar nisso, você verá todos os atalhos diferentes que você pode fazer com o teclado. Além disso, à medida que avançamos nesta aula, vou mostrar-lhe o que você tende a ir com mais frequência e qual dessas guias você realmente não vai ir com muita frequência. Não se preocupe em pregar tudo isso na frente, é bom conseguir uma posição da terra e entender o que está acontecendo. Agora que fizemos isso, vamos nos encontrar na próxima lição onde vamos começar a escolher nossos modelos. Te vejo lá. 5. Configuração da Shopify: como escolher um tema: Vamos começar a configurar o nosso site. Eu recomendo assistir esta aula e a próxima aula juntos porque eu acho que eles andam de mãos dadas. É importante ver quais modelos estão disponíveis para que você possa começar a planejar seus sites. Mas você precisará saber o que deseja em seu site para decidir qual modelo é melhor para você. Você não quer ir e planejar algo que você não pode eventualmente construir. O que eu acho que é melhor é dar uma olhada nos temas que você pode usar e, em seguida, ir para o planejamento do seu site e, em seguida, voltar a solidificar sua seleção para garantir que ele se encaixa dentro do que você precisa fazer. Vamos dar uma olhada nos temas que estão disponíveis. Se você não estiver pronto, você vai querer voltar para a seção da loja online sob temas. Isto é o que você deve ver, Debut é o que vem automaticamente com o seu plano. Mas há tantos mais que você pode dar uma olhada. Você pode explorar temas gratuitos aqui e esses são todos os que a Shopify oferece gratuitamente e, em geral, todos ficam ótimos. Para mim, pessoalmente, eu acabo usando um modelo pago porque enquanto estes são todos bons para começar, eu finalmente sempre achei que cada um tinha uma limitação que eu precisava usar um modelo pago para, mas eu vou entrar em mais tarde. Por enquanto, eu recomendo ir para a loja de temas porque todos os gratuitos também estão lá ao lado dos pagos e você poderá acessar mais informações sobre os gratuitos aqui. Quando você entrar na loja de temas, isso é o que você verá, e você será capaz de ver o que está em destaque, você pode ver o que está em alta. Você pode ver o que eles recomendam e eles também permitem que você navegue por indústria ou o que você está tentando mostrar ou até mesmo descritivo, ou então você realmente tem imagens lindas. Talvez queiras verificar estas coisas. Dê uma olhada em volta. Ao clicar no botão, você poderá ver os diferentes estilos que estão incluídos em cada um deles. Este estilo significa apenas que é uma predefinição que você pode escolher uma que você gosta tão idealmente, você não tem que mudar muito se você não está familiarizado com cores e fontes e graficamente projetado demais, mas você sempre pode editar um monte de este material no back-end também. Você pode ver a demonstração. Estas são páginas de demonstração que os desenvolvedores criaram. Eles não são sites reais, mas eles usam produtos reais e fotografia real para mostrar o que é possível com seus modelos, e eu acho que eles são realmente ótimos para ver o que você vai ser capaz de construir você mesmo. No início, muitos desses sites podem parecer muito parecidos com você, mas à medida que você mergulha mais fundo, você verá que cada um tem diferentes pontos fortes e fracos e você vai querer igualar os fluxos, obviamente, do tema que você selecionar com o que você realmente precisa para o propósito de seu site. Outra grande coisa é que na parte inferior, todos eles mostram lojas reais que estão usando seu modelo considerado. Eu realmente acho que é ótimo olhar para essas lojas reais e ver o que outras pessoas fizeram. Você verá que mesmo com o mesmo tema as pessoas fizeram coisas muito diferentes e você pode ver o que eles decidiram usar e não usar e eu só acho que é uma inspiração realmente útil. A lógica geral dos templates é geralmente muito semelhante, então mesmo se você escolher um modelo diferente do que eu acabar usando, você será capaz de acompanhar e descobrir isso também. Dei uma olhada em todos eles, aqueles que estavam disponíveis e eu decidi que eu gostava deste chamado de Narrativa mais. Há algumas razões, eu realmente gosto da foto de largura total no topo. Quando entrei para ver a demo, gostei muito da capacidade de contar histórias que tinha. Eu tenho um inventário muito pequeno e estou focado mais na ilustração, então eu realmente gosto de como ele já está definido. É o mais próximo do que eu tinha em mente. Ele tem algumas características legais, como este seletor de variação aqui. Eu posso ir em frente e adicionar tema clicando aqui. Para os temas gratuitos que você pode realmente adicionar quantos quiser. Se você quiser, você pode adicioná-los todos para que você possa manter o controle deles e, em seguida, excluir aqueles que você não deseja mais tarde. Uma vez que você adicioná-lo aqui, ele aparecerá em sua biblioteca de temas. Agora vamos dar uma olhada em como esses temas funcionam. Em ações, você poderá renomeá-lo, duplicá-lo, baixar o arquivo de tema e editar o código e os idiomas. Não vamos nos meter muito aqui, mas vou te mostrar o que você precisa saber para começar. Então este é o tema ao vivo, atual, obviamente. Vou só mover este. Isso só significa que ele vai movê-lo para o meu tema atual porque eu quero trabalhar nele. Quando você clica em Personalizar, é aqui que você vai entrar no seu construtor de sites. Novamente, é como um mundo dentro do mundo. Penso nisso como um espaço de trabalho do site dentro do painel da Shopify. Ele também tem um painel esquerdo e um painel direito, mas funciona um pouco diferente. No painel esquerdo aqui, pense em tudo isso como blocos de construção, módulos que compõem seu site. No lado direito, é o painel de visualização da aparência do seu site. Você pode ter imaginado se você nunca usou uma estrutura como esta antes que você poderia entrar aqui e clicar sobre ela e começar a editá-la. Mas, na verdade, você entra nesses módulos para editar todos os textos e a cópia. Outra coisa é quando você clica no painel de visualização e na verdade é uma coisa totalmente funcional, então não é apenas um gráfico. Isso é útil porque, em seguida, digamos, você tem um produto que você configurou e clica em Exibir, você realmente irá até esse produto e poderá editá-lo quando estiver tudo configurado. Aqui estão todos os seus módulos e você pode adicionar seções também. Ao clicar no botão Adicionar Seção, você poderá ver todas as diferentes opções disponíveis para o seu tema e, na verdade, existem diferentes para cada tema. Há alguns comuns que estão sempre lá, mas alguns temas têm mais do que outros, ou têm outros diferentes. Para este, você tem uma postagem de blog e quando você clicar nele, você será capaz de ver uma prévia do que vai parecer para o seu site, e isso é realmente ótimo porque pode nem sempre ser óbvio na descrição. Você pode passar e ver o que você gosta, e se algum deles estiver falando com você, você sempre pode clicar em Adicionar e ele será adicionado aos seus módulos. Digamos que você é como, oh, eu quero mostrar um mapa da nossa loja é e eu quero adicionar isso. Isso é realmente ótimo também, é que agora ele está ao vivo no meu painel de visualização. Mas digamos, eu mudo de idéia, não é grande coisa você apenas entra e então você remove a seção. Agora ele está de volta a como era por padrão. Eu diria que é muito tentador adicionar tantos módulos quanto possível e vamos entrar nisso mais na seção de planejamento. Mas manter o foco seu propósito e o que você quer que as pessoas façam vai ser importante. Manter-se organizado e permanecer diligente o seu plano vai ser muito útil em como construir isso. Dentro de cada um desses módulos, você pode clicar e editá-lo. Aqui na seção de depoimentos você será capaz de alterar o texto e isso acontece muito rapidamente como dizer que você quer adicionar isso. Você pode ver que isso apareceu imediatamente. Mas, por enquanto, a principal coisa que eu quero saber é que uma vez este pequeno seis pontos aqui é onde você pode arrastar e soltar. Digamos que temos um produto aqui em baixo e eu só quero levar isso para o topo. Isso acontece automaticamente, e é muito fácil e intuitivo quando você pega o jeito dele, e é realmente ótimo. Você não pode realmente mudar coisas como, quão alto este botão está nesta seção ou como tudo isso está definido. Mas você será capaz de pegar os blocos eles mesmos e reorganizá-los o quanto você quiser. É como um Legos, você não pode realmente mudar a forma dos blocos que eles dão a você, mas você pode transformá-lo em qualquer coisa que você quiser. Dê uma olhada para ver com o que você pode construir e com quais módulos você poderá trabalhar. Então vamos nos encontrar na próxima lição. Vamos começar a mergulhar no planejamento do conteúdo do nosso site. Te vejo lá. 6. Planejamento da Shopify: como criar um plano de site: Vamos começar a falar sobre o plano do nosso site. Eu acho que é fácil ficar animado para começar a conectar suas fotos e seu conteúdo, e você é bem-vindo para fazer isso. Mas, em seguida, faça uma pausa e realmente comece a traçar o seu plano para o seu site. Isso ajudará você a manter o foco e há muitos ativos que você precisará criar e ajudará a evitar trabalhos desnecessários. Para os nossos propósitos, eu quero manter o site delineando muito informal e simples. Eu tenho um modelo aqui que eu posso mostrar-lhe e compartilhar com você para que você possa usá-lo como quiser. Mas será uma documentação muito simples. Você poderia ir por um buraco de coelho inteiro e fazer um curso de 10 semanas sobre UX e UI, princípios e armações. Mas uma vez que esta aula é destinada a ser para pessoas que não necessariamente têm tempo para fazer isso. Nós já estamos usando um modelo que é projetado por profissionais que levam em conta um monte dessas melhores práticas lise plano em torno do modelo. Vamos pensar sobre o conteúdo que queremos ter no site. Parte da razão pela qual eu gosto de trabalhar com sites é porque eu gosto de sintetizar informações em contornos e, em seguida, tirar essas informações e exibi-las de uma forma visualmente atraente, que é basicamente o que é construir um site. Vamos primeiro escrever qual é o propósito do seu site e qual é o seu objetivo com ele. É, em primeiro lugar, um site de comércio eletrônico ou um site de portfólio? Pode ser ambos, mas você vai querer priorizar porque isso vai ditar o que vai no topo contra o fundo. Por exemplo, muitos sites podem ter os objetivos ou prioridades e propósitos de vender produtos, ensinar as pessoas sobre sua empresa e aumentar seu e-mail e usar literalistas. Mas cada um deles vai ter um ranking de partido diferente. Você não pode fazer todos do mesmo jeito. Por exemplo, para mim, minha principal prioridade com o site é dizer às pessoas o que significa com alto é sobre. A minha segunda prioridade é vender as pessoas para facilitar a compra e a compra de coisas. Em seguida, também em terceiro lugar, para poder compartilhar alguns conteúdos gratuitos e downloads com eles. Minha primeira prioridade é dar às pessoas as informações que precisam para saber como seguir e se envolver conosco. Lembre-se disso, esta não é necessariamente a ordem de prioridade do meu estúdio como um todo. Esta é a minha prioridade para o site. Pense sobre o que é um site melhor utilizado. Clientes existentes ou fãs existentes são pessoas que estão no topo da minha prioridade para um estúdio em geral. Mas para um site, eu sei que as pessoas não estão necessariamente vindo a sites todos os dias. Os tempos mudaram suas mídias morais e sociais agora. É onde estou tendendo a me envolver mais com eles porque eles estão me seguindo até lá. Mas um site é um ótimo lugar para apresentar uma marca para alguém que pode nunca ter ouvido falar de você ou ouvido falar de você de outra pessoa e só quer verificar o que você está fazendo. É por isso que ensinar as pessoas sobre o que o Studio está fazendo e sobre o que se trata é uma prioridade muito maior nesse caso. Então penso em quem é o meu público. É bom listar quem são seus públicos-alvo para o seu site, pois isso ajudará você em seu plano e sobre o que falar e também como falar sobre ele e como se apresentar. Para mim, divido isso em uma categoria básica de novos visitantes, compradores e fãs. Eu priorizá-lo como novos visitantes primeiro porque eu acho que a página inicial será mais educacional e para ensinar as pessoas sobre o que é, se eles vêm encontrá-lo. Então pessoas secundárias que estão fazendo compras. Isso geralmente é invertido para a maioria dos sites de comércio eletrônico onde eles querem vender o produto primeiro e depois contar sua história. Mas eu também vi isso da mesma maneira que eu vejo, onde eles querem explicar por que eles começaram a fabricar este produto primeiro e realmente fazer as pessoas comprarem em sua história antes de vendê-los. Pense no seu público e qual é a história que você quer contar. Outro exercício útil quando você está pensando em seu público-alvo é criar personas de usuários. Este é basicamente um make, um público-alvo que você pode criar e realmente dar-lhes como uma personalidade. Isso vai ajudar a moldar um pouco do seu planejamento também. Por exemplo, criei essas três mulheres que representavam diferentes grupos de audiência que eu tinha em mente. Você pode pensar sobre o que é seu nível de renda ou em que outras coisas eles estão interessados, onde eles estão na vida? Eles ainda estão na faculdade, eles estão tendo uma família, eles estão aposentados? Isso realmente é algo que realmente ajuda as pessoas a pensar sobre a experiência do usuário que eles querem fornecer com seu site. Vamos coletar algumas informações com nossos objetivos em mente. Pense em seus sites favoritos que são semelhantes ao que você quer fazer. Não se esqueça de dar uma olhada nos sites de amostra vinculados pela Shopify em cada site. Isso é muito útil para ver também. Então eu pessoalmente sei como esta marca de chá chamado Smith Tea e eu comprei de seu site antes. Mesmo sendo um negócio totalmente diferente do meu, o que eu gosto é que eles ainda têm aquela sensação de pequeno negócio independente. Eu gostei de como eles colocaram para fora e tornou muito fácil de comprar, também aprender sobre a empresa. Eu gostei que eles têm esta informação livre para receitas aqui em baixo. Notei que eles têm seu boletim de mídia social na parte inferior. No topo, é muito claro que pode comprar os produtos e também explorar. Veja seu conteúdo, que eles têm sua história e Tea School, como íngreme. Eu acho que essa é uma maneira muito comum que os sites estão quebrando seu conteúdo hoje em dia. Eles têm sua seção de e-commerce e eles têm mais seção de conteúdo. Quando eu olho para um dos meus chás favoritos, é muito fácil de encontrar está sob infusão de ervas. Eu clico nele e olhando os sites de concursos de produtos de casa configuraram que até é muito perspicaz porque você vai querer ver, como as pessoas estão descrevendo seu produto, que tipo de fotos eles estão mostrando? Eu realmente gosto de como eles mostram muito mais conhecimento sobre esses chás. Mesmo que eu saiba que eu não vou ser capaz de torná-lo exatamente como este site porque é um site diferente e quer como clientes, como um modelo diferente, eu ainda vou ser capaz de tomar algumas dessas idéias de, por que eu gosto deste experiência e tentar incorporar isso no meu planeta e modelo também. Vamos voltar ao plano do site. Para nos prepararmos para criar nosso esboço, vamos listar todo o conteúdo que sabemos que vamos querer ter. Podemos manter um básico agora mesmo. Vamos fazer um sobre nós. Eu sei que eu quero fazer compras online, hospedar o blog. Eu quero ter uma seção onde eu possa ter meus livros e minha ilustração. Vou chamar isso de página da galeria do estúdio por enquanto. Eu quero ter um lugar onde eu possa compartilhar downloads digitais gratuitos e quero ser capaz de vincular às minhas contas sociais, incentivar inscrições em boletins informativos e ter certeza de ter um formulário de contato, FAQ e uma política de privacidade. O seu pode ser um pouco diferente dependendo do que obviamente negócios ou serviço você está tendo. Mas este é um bom lugar para começar. Depois de ter o conteúdo do seu site definido, Vamos começar a organizar isso em um esboço. Isso significa apenas uma lista organizada de alto nível do conteúdo que você vai querer ter em seu site. Pense no topo de cada lista como potencialmente um link de navegação e , em seguida, o marcador aponta abaixo dele como subpáginas ou subseções. Obviamente, isso não vai ser links de navegação separados, mas na página inicial eu sei que eu quero cobrir essas seções em meus módulos. Eu realmente manteria o modelo que você acha que vai usar aberto lado a lado com o seu esboço de trabalho. Eu tenho o esboço narrativo aberto aqui e é útil tê-lo para que você possa ter certeza de que o modelo funcionará para o que você precisa incluir. Quando olho para esta demonstração de exibição, eu sei que no topo há uma ilustração de herói ou imagem de herói e eu quero incluir nossa história lá em cima. Em seguida, tenha uma seção onde eu possa ter uma característica afiada e as diferentes seções que as pessoas podem ir para. Agora temos uma página inicial, produtos e páginas que não são produtos. Como queremos que as pessoas naveguem em cada seção e para outras seções de forma fácil e clara. Vamos começar com a página inicial. Quando as pessoas chegam ao site, eu quero dar uma visão geral do que fazemos e tornar mais fácil para as pessoas olharem ao redor. Quero ter certeza de que nossas histórias Brenton Center e que nossos produtos são secundários, mas ainda importantes, suas prioridades podem ser o oposto. Agora eu quero dividir minha página em uma área de loja e uma área de explorador semelhante a como Smith Tea cabeça dieta. Em Explorer, manterei todas as minhas páginas de conteúdo, como nossos livros , blog, downloads e informações sobre nós. Sob a loja vou listar todas as minhas categorias de alto nível por enquanto. Se você está oferecendo um serviço, considere como você vai querer apresentar isso. Finalmente, não se esqueça das informações que tendem a entrar em um rodapé, como inscrição em boletim informativo, link para Sobre Nós, Fale Conosco, Política de Privacidade, Loja, FAQ e informações para pessoas que possam querer vender o seu produtos em suas lojas. Se você não tem certeza do que entra em um rodapé, basta visitar algumas de suas páginas da Web favoritas e ver como elas fazem isso. Você verá que a maioria das pessoas segue o mesmo formato. Pense na sua companhia aérea como um documento vivo e um guia para mantê-lo focado. Quanto mais pensado for adiantado, mais eficiente será o seu processo. Uma dica rápida e lembrete aqui é, como você começa a editar, eu tentaria manter o mais claro e conciso possível. Pelo menos para mim quando comecei a construir o site, eu estou tão tentado a incluir tudo e eu quero compartilhar tudo. Quero tornar as coisas super complicadas e tornar difícil encontrar coisas por qualquer motivo. Mas, na verdade, desta vez, quando eu estava construindo meu novo site atualizado, eu me comprometi a manter tudo em um máximo de três níveis profundos, que significa que tudo deve ser alcançado dentro de dois cliques. A razão para isso é que, um deles é que torna muito mais fácil para as pessoas navegarem por aí. Pode ser muito claro para você como alguém que sabe do que é o seu site e que construiu o site. Mas quando você mostra para alguém que nunca esteve lá, você rapidamente descobrirá que a maioria das pessoas, primeiro lugar, não gasta muito tempo em sites. Em segundo lugar, vai sair rapidamente se eles estão confusos ou sobrecarregados. Eu diria mantê-lo simples e novamente, concentre-se em qual é a sua prioridade e seu propósito com este site. Finalmente, uma vez que seu esboço está bonito, eu recomendo criar uma lista de todos os produtos e categorias que você está esperando no lançamento. Dessa forma, você pode ter uma visão realista de todos os ativos e copiar que você precisará criar. Para mim, eu tenho uma lista de produtos bastante limitada, então funciona bem aqui para mostrar como um exemplo simples. Tenho livros e conjuntos de presentes, impressões, acessórios e o cartão de presente. partir daqui, olhando para o site, posso começar a construir uma lista dos ativos que sei que precisarei criar. Obviamente, eu vou precisar de um logotipo e eu vou precisar das longas imagens que vão para esses banners de heróis e algumas imagens para ir para esses banners em forma quadrada. Posso adicionar um vídeo, se eu quiser. Você pensa em uma galeria de produto diferente imagens e um cartão presente, ilustração que eu poderia querer colocar lá e diferentes variações de produto que eu quero mostrar. A maioria de vocês é provavelmente criar uma pequena empresa proprietários e você pode ser um especialista em fotografia, ou ilustração, ou design gráfico. Felizmente, muitos desses ativos já foram criados para você. Mesmo que não seja o caso, não fique muito sobrecarregado com isso. Em primeiro lugar, há um monte de grandes opções de fotos stock que estão disponíveis especificamente para este fim. Vou ligar para alguns desses recursos na descrição do projeto da classe. Olhando para trás o meu esboço de amostra, como meu pensamento sobre minhas prioridades e meu público afetou o esboço do meu site? Quando eu estava pensando no meu site, eu sabia que eu queria ser preenchido com ilustrações e que ele prioriza essas imagens em vez de fotografias de produtos na página inicial. Isso é exatamente o que acabou acontecendo. Eu lidei com o mundo e não com a loja. Eu sempre posso vincular diretamente para itens de compras em meus e-mails e mídias sociais, minha sequência de página inicial corresponde a minha parte é de introduzir o mundo eo que estamos prestes a um visitante que pode não ter ouvido muito sobre mim, o que eu antes. Também pode ser tudo invertido, dependendo de suas prioridades. Na verdade, que parece mais visão vai sair com os produtos e certifique-se de que a fotografia realmente brilha. Uma vez que você está se sentindo bem sobre o seu plano do site. Vamos para a próxima lição, vamos voltar para o local de construção de sombreadores. Te vejo lá. 7. Design da Shopify: páginas de produtos: Estou de volta à página inicial do painel da Shopify e a Shopify sugere que comecemos adicionando nosso primeiro produto. Eu acho que isso faz sentido porque à medida que começamos a construir nossa página inicial e nosso tema vai ser muito mais fácil. Temos pelo menos um produto para trabalhar fora. Vamos começar com isso. Clique em “Adicionar produto”, e novamente, você sempre pode ter ido apenas através “Todos os produtos” e adicionar um produto de lá também. Em “Adicionar produto”, começaremos a adicionar nosso primeiro. O exemplo que vou mostrar é o meu livro, vamos explorar. Você vai querer adicionar em seu título. Quando se trata dos detalhes do produto, você vai querer pensar sobre quanta informação fornecer aos seus clientes para que eles possam tomar uma boa decisão de compra. Pense em todas as lojas online que você freqüenta e realmente olhar para as páginas de produtos que eles têm para ver que tipo de informação eles compartilham com você. Eu veria que geralmente não é muito longo, é realmente sucinto e dá-lhe a informação que você precisaria para ser capaz de tomar uma decisão de compra como, quão grande é, quanto pesa, Qual é a sensação, qual é o propósito disso? Tenho uma descrição já feita para isso, e vou deixar isso aqui só para dar um exemplo de como isso se parece. Aqui eu comecei com uma descrição rápida do que é o produto. Aqui está um lugar para você compartilhar a voz da sua marca. Isso significa apenas, qual é a personalidade que você deseja transmitir através do texto em seu site? Por exemplo, eu poderia ir muito mais direto com as descrições de livros como: este é um livro ilustrado. 8 polegadas por 8 polegadas, detalhes de folha de ouro, 50 páginas, e é isso. Isso pode realmente funcionar para algumas marcas ou algumas empresas que são apenas mais simples e querem ir direto ao assunto. Você não precisa necessariamente de qualquer narrativa ou linguagem de descrição. Para mim, pessoalmente, eu gosto de falar em uma linguagem mais conversacional e eu gosto de adicionar alguma narrativa explicativa por trás do propósito do produto e por que você pode gostar dele. Para mim, comecei com algo mais casual dizendo, Vamos Explorar como um livro ilustrado que segue um par de exploradores enquanto navegam pelas etapas de suas jornadas. Isso pode ser muito caprichoso ou muito florido para algumas marcas, mas é perfeito para o que eu quero fazer. Em seguida, escolhi três pontos de bala. Eu, pessoalmente, gosto de colocar as especificações em pontos de bala, por isso é muito fácil e rápido para as pessoas lerem. Quando penso em alguém comprando um livro ilustrado que não podem ver pessoalmente, o que precisam saber? Porque em uma página do site, esse livro vai parecer o mesmo, seja cinco por cinco polegadas ou 12 por 12 polegadas. Ajudará dizer que este é um livro de oito por oito polegadas. Eu gosto de destacar detalhes que eles não serão capazes de dizer sem tocá-lo, como este é um livro lay-flat e é de capa dura. Quero destacar que tem detalhes de folha de ouro, como uma capa texturizada de tela. Então você quer compartilhar quantas páginas ele tem, então 50 páginas com totalmente ilustrado e é um acabamento fosco premium. Isso ajuda as pessoas a visualizarem que tipo de livro é esse. Então você pode adicionar um pouco mais de descrição, se quiser. Eu só compartilhei um pouco sobre o que este livro pode ser bom para, para mostrar que é realmente apropriado para todas as idades e é um bom presente. Outra coisa que eu faço é vincular a produtos relacionados, se for relevante. Tenho um e-book digital de “Vamos Explorar”. Eu pensei que seria útil para listá-lo aqui no caso de alguém está interessado no livro, mas não está pronto para comprar uma cópia física, ou talvez eles vivem internacionalmente e só querem um simples e-book. Agora que temos nosso título e nossa descrição no lugar, vamos para a mídia. Este é o lugar onde você vai colocar todas as suas fotos de produtos. Mais uma vez, eu olharia para sites que você freqüente e pensar sobre o que eles estão mostrando que ajuda você a decidir o que comprar, ou olhar para os concorrentes em seu espaço. Depende mesmo do que você está vendendo. Por exemplo, as pessoas que estão vendendo camisetas, há praticamente um conjunto comum de fotos que você deseja mostrar na frente, na parte de trás, e talvez uma foto de estilo de vida. Se é algo que é um pouco mais complicado ou algo que não é super fácil entender o que é em uma foto que você pode querer pensar, como outras pessoas estão mostrando algo semelhante? Ou talvez como posso mostrá-lo em ângulos diferentes tem realmente claro o que é. Para mim, um livro é bastante simples. Já preparei os arquivos que preciso para isso. Eu diria, em geral, ter 5-6 fotos é bastante. Ter mais fotos é sempre útil, mas começa a chegar a um ponto em que é desnecessário e apenas cria mais trabalho para você. Pense sobre se você decidir fazer 20 fotos para cada produto, talvez isso possa ser útil para algumas pessoas lá fora, mas a margem de quanto mais útil que é mais de seis fotos, realmente não vale a pena esse esforço extra que você está vai ter que fazer para criar 20 fotos para cada produto que você tem. Eu definitivamente quero ter a foto principal, que é a capa. Quero ter uma foto das costas, foto das espinhas. Eles podem ver o quão grosso é e também mostra um pouco mais de detalhes da folha de ouro e a textura da tela e duas fotos de imagens dentro. Eu escolho este. Todos eles serão enviados para a sua mídia. É realmente fácil reorganizá-los. Você só arrasta e solta. Mais uma vez, você quer pensar sobre a história certa para contar. Obviamente, eu quero começar com a capa, e esta também vai ser a imagem de herói que aparece em pré-visualizações e como uma primeira imagem de qualquer produto, então você quer escolher o mais básico lá. Acho que para o segundo, quero mostrar o interior do livro. Tenho certeza que as pessoas querem saber qual é o estilo da ilustração, o que eles podem esperar por dentro? Então eu queria destacar isso a seguir. Então eu quero terminar com a espinha lateral e o banho. Isso faz sentido. Imagine se você estiver entrando em uma loja e escolhendo um livro, é assim que você vivenciaria. Eu olhava para a capa, abría-a, via as fotos dentro e depois fechava e lia as costas. Eu acho que é um bom conjunto de imagens para este produto em particular. Podemos passar para a próxima seção, que é o preço. Isto é bastante simples. O livro custa $20 e então coloque isso aqui. Comparar por preço é realmente como você configura um item de venda, então você não marca algo em venda, tudo o que você faz é baixar o preço e colocar no preço Compare e a Shopify marcará automaticamente isso como um item de venda. Por exemplo, eu decido fazer metade fora da venda. Eu quero fazer este $10 e em vez de apenas colocar $10, que vai apenas olhar como este produto foi sempre apenas $10, você colocar em $20 como Compare ao preço. Agora ele vai mostrar os $20 riscados dentro de $10 como uma nova peça. Isso é apenas útil para as pessoas entenderem que esta é uma venda especial, este é um desconto e, claro, apenas psicologicamente as pessoas vão gravitar para isso mais, do que se ele foi apenas listado como US $10. Esta seção aqui em baixo é realmente algo que a Shopify adicionou um pouco mais recentemente. É uma maneira de você manter internamente o controle de quanta margem você está ganhando em cada produto. Isso só significa quanto lucro você está ganhando além de quanto custa para fazer esse produto em particular. Por exemplo, digamos que este livro me custou $5 para fazer para cada um, eu colocaria $5 aqui e, em seguida, a Shopify calculará automaticamente a margem e o lucro que estou fazendo com isso. Toda essa informação vai para a seção de inventário que eu mostrei antes. O que é ótimo sobre isso é que, eventualmente, à medida que seus produtos crescem e talvez você comece a ter mais membros da equipe ajudando você, você será capaz de ver quais são meus itens de alta margem e quais estão vendendo muito bem. Isso pode ajudar a começar a orientar a decisão de negócios para você. Porque, é claro, você vai querer começar a se concentrar nos produtos de alta margem e alto volume, idealmente. Podemos deixar isso lá, e cobrar imposto sobre este produto, realmente depende de suas leis estaduais de impostos sobre vendas. Eu estou na Califórnia, então nós definitivamente temos imposto sobre vendas, e então eu tenho que manter o imposto sobre este produto ligado. Nesse sentido, a Shopify calculará automaticamente o imposto que preciso para cobrar aos meus clientes porque, nas configurações, coloquei que a localização da minha loja está na Califórnia, então isso é realmente útil. A próxima seção é o inventário. Pode ser um pouco desnecessário se você está apenas começando e dizer que você é um artista vendendo apenas suas próprias impressões, você não precisa necessariamente ter uma inclinação, que é uma unidade de manutenção de estoque ou códigos de barras. Mas para mim, pessoalmente, eu gosto de ser bem organizado, e então eu recomendo pelo menos ler sobre isso, aprender sobre o que é e depois decidir se é necessário para onde você está no seu negócio agora . É basicamente uma maneira de você manter o controle de seu inventário e quando você começa a ter alertas, e então qualquer pessoa que tem um monte de produtos sabe disso, às vezes é difícil ser preciso se você apenas usou descrições. Acho que as distorções são muito importantes, digamos que se estou fazendo uma ordem de venda inteira, é útil ter certeza de que elas têm as distorções certas. Digamos que há três pinos diferentes que eles podem escolher, eles podem não descrevê-lo de uma forma que é óbvio, então de qual deles eles estão falando, mas a inclinação vai basicamente torná-lo prova completa de que eu estou falando sobre o direito Um. Skews são um sistema que você pode criar para si mesmo, o que funciona para você, e o que eu gosto de fazer, é começar com a categoria, então reserve, e então LGE significa vamos explorar. Então eu vou colocar no ano que eu fiz pela primeira vez. É assim que minhas inclinações são configuradas, e é uma maneira fácil para eu entendê-lo, e para mim para manter o controle, e eu vou usar para os tipos e quantidade de produto que eu tenho, eu nunca tenho que me preocupar com uma repetição ou sobreposição. Nós colocamos essa inclinação lá, e eu tenho um código de barras para isso, então deixe-me tirar isso do meu já existente. Eu tenho ISBN para o livro, e então eu tenho algumas opções aqui em baixo. Monitorar a quantidade significa que a Shopify ajudará a rastrear a quantidade que estou vendendo. Gosto de ter isso sempre ligado. Você pode inserir a quantidade que você começa com. Digamos que eu tenha 500 desses livros disponíveis, enquanto as pessoas compram os livros, isso reduzirá automaticamente. Como eu vendo, eu vou ser capaz de ver quantos foram vendidos, e como eu conseguir mais dentro, eu posso ajustá-lo também. Algo que eu gosto de fazer para itens que não necessariamente têm um inventário inicial, dizer que eu faço sob demanda ou são downloads decisórios que estou oferecendo gratuitamente, eu apenas deixá-lo em zero, e então ele só entra em negativo. Digamos que eu ofereci um download gratuito e houve 200 downloads desses, ele só mostra 200 negativos, e é uma maneira simples de manter o controle de quantas pessoas baixaram. Então esta opção continuar vendendo quando fora de estoque, isso realmente depende da situação. Eu continuo vendendo fora de estoque verificado quando, obviamente, por exemplo, como downloads, eu quero que ele vá para o endereço, então eu sempre mantenho isso ligado. Mas mesmo para produtos físicos, digamos para Prince, eu sei que eu posso obter esses feitos muito rapidamente, então mesmo se eu acontecer de eu vender para fora, eu ainda quero deixar as pessoas ser capaz de comprá-lo porque eu vou ser capaz de ainda cumprir na hora certa. Se você deixá-la desmarcada, basicamente, o que acontece é quando sua quantidade for negativa ou zero, a Shopify mudará automaticamente a página do produto para dizer esgotado, e isso pode ser ótimo se você quiser fazer isso. É que está esgotado, as pessoas não podem mais adicioná-lo aos seus carrinhos, e geralmente há um botão que permite que eles enviem um e-mail para dizer: “Por favor, avise-me quando este item estiver disponível novamente.” Mas isso realmente depende da situação, como você quer que ele mostre como fora de estoque ou você quer permitir que as pessoas continuem comprando? Depois entramos no transporte. O envio é onde você pode primeiro identificar se é um produto físico. Como eu mencionei, eu tenho downloads digitais e isso é sempre verificado nesses casos. Aqui, você pode adicionar algumas informações para o seu produto, que é útil porque ele pode ajudar a calcular as taxas de envio para seus clientes. É algo que você vai passar por todos os seus produtos em um suplemento, meio quilo aqui. Toda vez que alguém compra, ele sempre saberá que é meio quilo, então eu não tenho que continuar colocando isso lá. Em seguida, se você enviar internacionalmente, você pode adicionar as informações de seu personalizado aqui, de modo que parte disso é pré-preenchido. Para aqueles de vocês que nunca enviaram internacionalmente antes, é algo que você tem que colocar em sua etiqueta quando você enviá-lo para fora, e na verdade é muito melhor do que como era antes. Lembro que em algum momento você ainda tinha que ir aos correios e preencher este formulário e anexá-lo à sua caixa para enviá-lo internacionalmente. Enquanto que agora, você pode fazer isso completamente neste único processo de checkout, e é muito mais fácil e rápido, e torna muito mais fácil realmente enviar internacionalmente em comparação com seus clientes domésticos. Para aqui, eu vou colocar nos Estados Unidos, você pode procurar esses códigos para seus produtos, e então há realmente um para livros infantis produtos. Eu já tenho isso aqui, então eu posso colocar isso aqui e isso aparece no rótulo. Finalmente, esta última parte é variância. Se digamos que você está vendendo uma camisa e, obviamente, ela virá em tamanhos diferentes e talvez cores diferentes, você pode adicionar até três variantes diferentes. Você colocaria em tamanho e apenas colocaria pequeno, médio, grande. O que você coloca aqui é realmente como ele vai aparecer para o seu cliente no menu suspenso, que você saiba, quando você está selecionando o tamanho que deseja. Você quer realmente soletrar isso se preferir ser mostrado dessa forma, e você apenas adicionar outra opção se você quiser adicionar cores, e você pode ir até outro material associado. Mais uma seção é a visualização da listagem do mecanismo de pesquisa. A Shopify configurou automaticamente o que parece. O título está lá, o URL está lá, e eles puxaram a descrição que eu coloquei da parte anterior desta seção. Mas muitas vezes, a descrição que eu coloquei na página do produto para quando o cliente chega ao meu site, pode ser diferente do que eu quero mostrar quando você está apenas no Google e ele aparece na listagem SEO. Aqui você pode personalizá-lo. Você vai para Editar site, SEO clicando no link que estava aqui em cima, e você pode alterar o título da página. Por exemplo, em seu site dizer que você queria dizer Lost in Space t-shirt personalizado, mas em SEO você pode querer ser um pouco mais geral, como tee-shirts para pessoas que amam o espaço ou algo assim, e a mesma coisa para o descrição. Aqui eu pensei mais a partir da perspectiva de um cliente que acabou de chegar ao meu site e uma vez saber mais sobre este produto. Mas para fins de SEO, você pode querer pensar mais sobre o que as pessoas estão procurando? O que é que alguém vai mais provável querer clicar em? Você pode personalizar isso lá e, finalmente, você pode personalizar o URL no identificador. Eles puxarão o título do livro ou o título do produto, mas você pode personalizá-lo se quiser que ele seja mais curto ou se quiser que seja mais fácil para as pessoas digitarem e lembrarem. Eu apertei salvar, e parabéns, nós adicionamos nosso primeiro produto. Neste ponto, vá em frente e comece a adicionar seu primeiro produto, se você quiser. Novamente, criei o conjunto de fotos de amostra que você pode usar para, pelo menos , testá-lo e certificar-se de que você sabe como fazê-lo caso você ainda não tenha suas fotos de produtos pessoais. Quando terminar de configurar isso, vamos nos encontrar na próxima lição, onde continuaremos com o resto das páginas secundárias, coleções, blogs e navegação. Te vejo lá. 8. Design da Shopify: outras páginas: Agora que configuramos uma página de produto, vou percorrer alguns dos outros elementos secundários que você deseja configurar antes de mergulharmos na página inicial, pois isso tornará muito mais fácil ver o que estamos fazendo. Vamos começar com Coleções. Como você verá aqui, criei mais alguns produtos da mesma forma que configurei com os outros. Vamos para a seção de coleções agora clicando aqui. Eu já preparei alguns antes do tempo para que possamos passar um pouco mais rápido. Aqui eu defini uma coleção chamada Vamos Explorar, e eu disse que a condição é que a tag é igual a Vamos Explorar. Quando eu rolar para baixo aqui, verei que a Shopify já configurou automaticamente alguns itens de coleção para mim. Clicando no item, da forma como todos estão conectados, é que na própria página do produto, adicionei uma tag Vamos Explorar, e é a mesma para todos os três. Outra coleção automática que configurei é chamada Gift Sets. Semelhante ao outro, exceto que agora estou combinando por tipo de produto. Aqui, todos esses itens abaixo são categorizados como conjuntos de presentes, ea diferença é, eu diria que, tipo de produto é obviamente por categorias. Você pode arrumar camisetas, calças, livros, o que quer que esteja vendendo. Em seguida, nas tags, você pode querer misturar e combinar alguns desses itens que estão em categorias diferentes. Finalmente, você pode configurar uma coleção manual. Vamos criar uma coleção chamada Best Sellers, e aqui, vamos clicar em Manual. Pressione Salvar primeiro e agora você poderá selecionar os itens que deseja colocar. Digamos que eu queira fazer, a Caixa de Aventura, o Pacote de Cuidados e o Livro. Esses são os nossos best-sellers e eu quero ser capaz de atualizar isso manualmente. Digamos que no mês que vem são diferentes. Então quero acrescentar outra coisa. Há coisas que são configuradas automaticamente pela Shopify também, para que você possa organizá-las da maneira que quiser ou organizá-las manualmente. É uma pequena diferença na configuração de um produto digital versus produtos físicos, então eu queria mostrar isso muito rapidamente. Vamos voltar para nossos produtos, e eu comecei a definir um desses aqui em cima. Aqui você vê que tudo está configurado da mesma forma. Tenho um título, uma descrição e as imagens, e configurei uma etiqueta e um tipo de produto. Agora quero saber como adiciono o download real para que as pessoas possam obtê-lo. Primeiro, você vai querer baixar o aplicativo Downloads digitais da Shopify, e eu já baixei aqui. Mas tudo o que você precisa fazer é visitar a Shopify App Store e, em seguida, procurar downloads digitais, e será este. Neste ponto, tudo o que você precisa fazer quando você chegar à sua página do produto, você verá esta opção de botão aqui chamada de Mais ações. Uma vez que você tenha o aplicativo de downloads digitais disponível, você poderá adicionar anexos digitais. Clique nisso, e você verá uma tela que aparece assim. Aqui, eu já fiz upload do meu PDF, o Kit de Boas-Vindas da Casa de Chá, e eu sempre posso alterá-lo aqui ou excluí-lo. Agora, quando as pessoas fizerem check-out com este item, poderão receber o download por e-mail. Vamos passar para a próxima coisa. Agora que temos produtos e coleções configurados, vamos configurar uma página simples que poderemos vincular a ela a partir de nossa página inicial. Um bom para começar é, obviamente, Sobre Nós. Eu tenho essa configuração. Vamos para a Loja Online e clique em Páginas. Você verá que, se tivesse começado aqui. Nesses modelos gratuitos, suas sub-páginas serão muito mais simples, e eu vou mostrar a diferença na próxima lição onde eu mostrei meu modelo de site completo. Esta é a página Sobre Nós. Eu coloquei em uma imagem, e a cópia que eu tenho para o meu site, devolvendo, e há um formulário de contato na parte inferior. A forma de ligar o formulário de contacto é aqui em baixo. Clique em Página, então eu não terei um formulário de contato na parte inferior, mas se você quiser o formulário de contato nesta página Sobre Nós. Vamos manter assim. Se você já configurou um blog ou qualquer coisa com uma situação de formatação de texto, notará que o que você vê aqui é diferente do que você vê quando visualiza a página. O que eu recomendo é que você colocá-lo para fora da maneira que você quer que ele seja configurado, e apenas visualizá-lo e verificar se ele está olhando do jeito que você quer. Às vezes você vai perceber que algum espaçamento está fora que parece diferente do que você espera, e você simplesmente volta e conserta isso aqui. A maneira que eu estou recebendo a diferença entre, esta fonte de cabeçalho, e esta fonte de parágrafo, é apenas através das seções de formatação existentes. Aqui, você apenas destaca, a seção que você quer ser títulos, e seu tema vem com seus diferentes formatos de cabeçalho. Eu escolhi este porque é uma fonte de cabeçalho mais de tamanho médio, nós também podemos ir maior. Vamos apenas configurar rapidamente uma página juntos para que você saiba como ela funciona. Vou configurar uma página de política de privacidade já que isso é necessário em muitos países agora. Tenho aqui o texto da minha política de privacidade. Só vou copiar e colar isso. Mais uma vez, tenho o meu título, tenho uma mensagem aqui. Vamos ver como é que apenas copiar e colar se parece. Vamos salvá-lo e ter certeza que está visível. Você também pode escondê-lo. Digamos que você tem uma página que você deseja lançar em uma determinada data, Você sempre pode definir uma data de publicação específica para isso. Vamos dar uma olhada em como isso parece. No geral parece bom. Agora tenho a minha página da Política de Privacidade para mim. Você pode continuar e fazer todas as páginas que você precisa na frente, ou você apenas configurar um par para que você possa começar a construir em nossa página inicial. Vamos passar para a próxima seção. Vamos montar nosso primeiro blog. Tenho um que começou bem aqui. Novamente, é um conceito muito semelhante. Você tem um título, seu conteúdo, você pode formatar o conteúdo da mesma forma que você faz com as páginas. Há apenas algumas diferenças. Você pode adicionar um trecho porque alguns dos módulos que você terá em sua página poderão visualizar alguns dos trechos da postagem, e então você pode ter uma imagem em destaque para sua postagem do blog. Novamente, você pode definir a visibilidade e se ela foi publicada em um momento específico, e você pode adicionar seu autor. Digamos que você tenha vários membros da equipe diferentes usando a conta da Shopify, você pode dizer quem criou a postagem do blog e, em seguida, você pode adicioná-la a um blog específico e, em seguida, você pode adicionar tags a ela também. O que é bom é que, você pode configurar vários blogs diferentes dependendo de quantas peças de conteúdo diferentes você tem. Neste momento, este blog é sobre o nosso novo site. Digamos que eu queira configurar outra postagem de blog, então você vai para Gerenciar blogs, e você adiciona um blog aqui. Você pode controlar algumas coisas, como se comentários são permitidos ou não, e qual é o título do blog. Preparei o segundo chamado Tutoriais. Vamos voltar a postagens de blog e adicionar uma postagem de blog a esse tutoriais. Vamos fazer, “How-to-use-your-welcome Kit”, adicionarei uma imagem do nosso kit de boas-vindas, e depois copiarei e colarei alguns exemplos de texto que já preparei. Agora eu tenho minhas duas postagens de blog prontas também. Vamos passar para a próxima seção. A última coisa que eu quero configurar antes de mergulharmos na página inicial é a Navegação. Vamos clicar em Navegação em Loja Online. O que você vai começar é o menu de rodapé e o menu principal. Eu criei um simples aqui chamado Loja, e eu vou te mostrar como fazer isso. Você pode adicionar um menu e dizer que deseja adicionar um chamado Blogs. Vamos adicionar um chamado News. Aqui, os links podem adicionar links para várias coisas diferentes na Shopify. Eles vão classificar coisas para você por coleção, produtos, páginas, postagens de blog. Sabemos que criamos o blog chamado Notícias, e que criamos um blog chamado Tutoriais. Você também pode pesquisar. Última vez que cliquei em blogs para encontrá-lo, mas você também pode procurar tutoriais e você vai encontrar, possamos salvar esse menu. Eu também quero mostrar-lhe como fazer menus aninhados. Menus aninhados são aqueles em que, quando você abre um menu, você pode soltar um submenu dentro dele, e você também pode fazer isso na Shopify. Vamos para o menu principal. Eu quero chamar esta Loja, e eu quero chamar outra seção Explorer. Vamos ter esse link para agora ser sobre nós página. Para criar um sub-menu, tudo o que preciso fazer é fazer isso novamente. Vamos colocar rapidamente em nossas coleções. Na verdade, eu quero chamar isso de “Vamos Explorar “, você pode comprar por categoria, e então tudo que você faz é clicar e arrastar. Agora que nos aninhamos dentro dela. Estou planejando ter três menus aninhados na minha página inicial. Eu só vou para ir em frente e preencher, fazer compras e explorar menus da mesma forma que eu fiz para casa. Como um assunto geral, eu apenas estaria consciente sobre não tornar os níveis de página muito profundos ou aninhados. O cliente deve, idealmente, ser capaz de acessar todas as suas páginas dentro de 2-3 camadas. Agora eu tenho todos os elementos que precisamos para construir em nossa página inicial. Vamos estar lá na próxima lição e vamos começar a fazer exatamente isso. Te vejo lá. 9. Design da Shopify: configurações de temas: Vamos dar uma olhada sob o capô do nosso feixe selecionado. Quero continuar a personalizar o tema de análise. Na página inicial, você pode ir aqui e selecionar o botão Personalizar tema. Ou, como sempre, você pode clicar sob a loja online no lado esquerdo, e ele irá levá-lo para o mesmo lugar. Eu tenho narrativa selecionada e vamos clicar em “Personalizar”. Mais uma vez, este é o layout do nosso espaço de trabalho do site, e nós temos a navegação de nossos módulos aqui à esquerda. Vamos passar por esta aba aqui na parte superior à direita chamada Theme Settings (Configurações do tema). É aqui que você pode configurar todas as regras para o seu site. Vamos dar uma olhada no que podemos controlar. Seu tema vem com um estilo predefinido. Se você não se sentir confortável com cores e topografia, é totalmente bom manter o que está lá, e isso é realmente o que eu vou estar fazendo nesta aula. Penso nisso como, afinal, esses temas são projetados por profissionais. Como você viu, cada tema vem com quatro estilos diferentes. Idealmente, você escolheu um que você está pronto como, e você não tem que mudar muito disso se você não quiser. Mas muitas pessoas gostam de, obviamente, personalizar suas cores e suas multas e ajustar tudo, então eu quero mostrar a vocês o que é possível também. Essas configurações de temas são ótimas porque o que acontece é que é uma mudança universal que garante que sua página seja consistente. Digamos, você quer mudar esta cor de acento principal aqui que afeta botões e ornamentos especiais, isso mudará isso em toda a placa. No dia em que ele tinha que ajustar as coisas manualmente, então você tem que ter certeza de mudar essa cor, por exemplo, em cada botão em seu site, e pode haver algumas inconsistências. Isso é o que eu realmente gosto nessas configurações. A quantidade de itens que você pode personalizar varia de modelo para modelo. No modelo de página vou mostrar-lhe, há muito mais listados aqui, mas isso é muito para começar. Há muitas teorias sobre o que são boas cores para usar para sites. Por exemplo, muitas pessoas não gostam de usar botões vermelhos porque acham que isso vai impedir que as pessoas queiram clicar nele, porque temos essa associação psicológica de vermelho com stop. Por outro lado, eles acham que cores como azuis e verdes são boas, porque temos uma associação psicológica com essas cores, o que significa ir. Mas, ao mesmo tempo, na minha opinião, você verá muitos sites profissionais quebrando as regras de qualquer maneira. Eu acho que você realmente deve testá-lo com seu público para ver o que funciona. O que eu recomendo é começar com cores que atraem a atenção do visitante para as coisas que você quer que eles façam, e também pensar nas cores de sua própria marca. Se a cor da sua marca for vermelha, pode não ser errado usar vermelho, pois você quer dizer cor de subida. Por outro lado, se o seu site é muito azul e verde e corresponde à sua marca, então vá para isso também. Eu fornecerei alguns salões de cores simples nos modelos de descrição de classe para que ele possa ajudar a orientar aqueles de vocês que querem um pouco mais de ajuda nessa área. Aqui, eu posso ver que eu posso mudar a cor do sotaque. Agora, eles têm como vermelho, e então nós temos as cores Texto e Ícone, as cores de fundo e outras cores. Fazendo uma rolagem rápida por aqui, não me importo como ele está configurado e como isso parece, mas a única coisa que eu realmente faço, eu quero mudar vai ser este sotaque cores. Eu uso muito blues no meu trabalho, então vamos usar esse azul que já está disponível e mudar isso. Como você verá, todas essas coisas que costumavam ser vermelhas agora são azuis. Tudo o resto parece bom para mim por enquanto, então eu vou sair daqui e entrar em tipografia. Aqui, você vai ver o que eu sou capaz de mudar. Sou capaz de alterar e determinar a fonte dos meus títulos, os textos do corpo e o tamanho base global dos textos. Vamos começar pelo topo. Isso significa que se eu quiser mudar para pequeno, você verá que ele é atualizado ao vivo. Você só vai notar que este texto aqui em baixo acabou de se tornar pequeno. Em geral, acho que os designers adoram tipo menor, porque talvez pareça mais limpo ou mais moderno, mas quando se trata de usabilidade, você tem que pensar, digamos, por exemplo, um público mais velho precisa de uma fonte maior para ver . Você vai querer ajudá-los usando uma fonte de visibilidade maior. Vou saquê com médium aqui. Você é capaz de controlar as fontes e se você clicar rapidamente em mudança aqui, você verá que há um monte de fontes que já vêm com esses modelos, e eu acho que é muito para começar. Na verdade, se você continuar rolando, você verá que há apenas mais do que você realmente precisa escolher. Mas algumas pessoas podem ter uma fonte muito específica que eles sempre usam com todo o seu trabalho de marca, ou uma fonte que eles realmente gostam e querem usar, e ele não está listado aqui, você é capaz de adicionar fontes personalizadas ou apenas precisa de ajuda especializada em codificação. Mas eu vou escolher os que já existem aqui só para manter as coisas simples, e eu gosto dos que eles escolheram. Você verá aqui que eles combinaram uma fonte serif para os títulos com uma fonte sans serif para seu corpo. É um par muito comum. Serif para aqueles que não sabem, significa que a fonte serif tem os pequenos traços no final das letras. San serifs significa que não tem aquele golpe no final das letras. As pessoas em geral associam fontes serif para serem mais clássicas, e sem fontes serif para serem mais modernas. Claro, há exceções a essa regra, mas esse é geralmente o sentimento associado a cada tipo. A coisa boa de combinar uma fonte serif para cabeçalhos, e uma fonte sans serif para corpo é que é um bom contraste. É realmente algo que depende de você sobre a estética que você quer. Eu gosto que ele tem um pouco de um sentimento formal para títulos importantes, mas um sentimento mais casual para o corpo. Algumas pessoas também reverteram esse sistema. Eu acho que é realmente até você sobre como você quer jogar com a vibração de sua tipografia, mas a única coisa que eu iria ficar longe de ter duas fontes diferentes que parecem semelhantes. É melhor mantê-lo limpo, se você vai escolher uma fonte serif que parece bastante moderna para apenas escolher uma, em vez de dizer, Avenir para o corpo e, em seguida, Arial para os títulos. É apenas um pouco perto demais para dar um contraste suficiente e uma boa vibração. Incluo algumas sugestões de emparelhamento divertidas no guia de aula, modo que para aqueles de vocês que querem um pouco mais de ajuda inicial pode ver o que os emparelhamentos comuns que são dadas, os tipos de fontes que estão disponíveis para você. Se você é um profissional com topografia, sinta-se livre para enlouquecer aqui e escolher os que você gosta. Clique na tipografia, ea próxima coisa que podemos ver é gaveta carrinho. Aqui estão apenas algumas opções. Como eu mencionei com modelos diferentes, você será capaz de controlar coisas diferentes. Mas aqui há duas coisas. Você pode fazer a gaveta do carrinho, que significa que quando eu adicionar um produto ao meu carrinho, um pequeno pop-up vai sair do lado, e eu vou mostrar-lhe um exemplo disso ao vivo mais tarde. A diferença é que você obviamente comprou em sites que ou levá-lo direto para uma página de carrinho, eu acho que a Amazon faz isso dessa forma, e outros onde há apenas um pequeno pop-up que aparece. Cabe a você o que você prefere. Novamente, existem diferentes teorias sobre como isso afeta os comportamentos dos clientes. A abordagem da Amazon faz com que você cumpra essa decisão de compra, e torna realmente fácil e perfeita a compra. Eu, pessoalmente, prefiro pequenas gavetas que saem para mostrar que eu adicionei ao carrinho, mas me permitem continuar navegando muito facilmente. Cabe a você que tipo de experiência você quer dar ao seu visitante. Então eu gosto de ligar a nota do carrinho. Isso é apenas uma pequena área para as pessoas adicionarem nota de pedido. Às vezes, eles permitem que as pessoas personalizem algo, ou adicionem uma pequena nota que irá escrever à mão em sua mensagem. Esse é um ótimo lugar para as pessoas poderem me enviar mensagens ou se comunicar comigo através das notas de pedido. Nas redes sociais, você poderá personalizar uma imagem de compartilhamento social e algumas outras coisas. Vamos dar uma olhada rápida. Você pode explorar imagens gratuitas que eles têm. Eles têm um monte de fotos stock se você não tiver nada. Mas eu tenho uma imagem que eu gostaria de usar. Vou enviar a imagem, e esta é a minha bandeira de herói. Eu quero ter certeza de que quando alguém compartilha meu site, esta é a imagem que aparece. Eu sou capaz de especificar isso aqui, o que eu realmente gosto. Agora isso é ao vivo. Sob o olhar social, você começa a dizer se você quer ou não permitir que os clientes compartilhem seus produtos e posts em várias redes sociais. Novamente, isso é apenas uma preferência pessoal sobre se você deseja habilitar que não são. Eu não vejo nenhum mal nisso, então eu vou continuar com ele. Então aqui é onde você vai inserir todos os seus links sociais. A próxima seção é o favicon. O favicon é apenas aquele pequeno ícone que aparece ao lado da aba do seu site. Aqui na Shopify, você pode ver o pequeno favicon que eles têm. Então, no Instagram, você vê o pequeno favicon do Instagram. Eu acho que é uma ótima maneira de personalizar e adicionar algum branding ao seu site. Se você deixar um espaço em branco, então não vai causar um erro, mas eu gosto de ter algo que mostra um reflexo do meu logotipo. Tenha em mente que é muito pequeno, por isso, se o seu logotipo é bastante complicado, você pode querer criar uma versão simplificada do seu logotipo para isso. Foi exatamente o que eu fiz. Você verá aqui meus arquivos de logotipo, que eu tenho um arquivo de logotipo completo que se parece com isso, e então uma versão somente texto. Mas nenhum deles vai funcionar bem para o favicon, então eu criei um ativo favicon separado que só tem o pequeno ícone da casa em um círculo. Posso acrescentar isso aqui. Você vai querer ter certeza de que ele tem um fundo transparente se não for um quadrado. Por exemplo, se não fosse um PNG transparente, atrás do círculo, você veria um quadrado branco, e nesta aba, você veria um círculo azul no quadrado branco, que não é o visual que eu quero. Eu tenho um círculo transparente e posso acrescentar isso aqui no meu favicon, e agora ele aparece. A última coisa que podemos fazer em Configurações de Tema é finalizar a compra. Aqui, sob o banner, você pode selecionar a imagem de fundo. Isso significa que na parte superior, você pode adicionar uma imagem de banner. Por exemplo, eu poderia escolher o mesmo se eu quisesse. Deixe-me adicionar as coisas que eu sei que tenho, que é o logotipo. Novamente, eu preparei tudo isso com antecedência, e eu acho que é aí que ter essa lista de ativos que você precisa criar para o seu site vai ser útil para você. Você pode adicionar uma imagem de fundo à sua área de conteúdo principal, mas eu pessoalmente gosto de deixá-la como uma cor. Em geral, é bom não ter muitas distrações em sua página de checkout, porque isso é apenas sobrecarrega o comprador e as pessoas gostam de manter o processo de checkout muito direto e tão perfeito quanto possível. Eu apenas mantenho a cor de fundo como está, os campos de fazenda que eu quero manter branco, e, em seguida, no resumo do pedido novamente, você pode adicionar uma imagem de marca se você quiser, mas eu gosto de mantê-lo limpo e simples, então eu só uso a cor de fundo. Finalmente, você tem algumas configurações de topografia aqui. Acho que há menos aqui por causa da codificação no back-end. Você não vai ser capaz de obter como personalizado de uma seleção no código, como você mesmo vai para o código. Vou escolher o mais próximo do que você tem. Na parte inferior, este tema permite que você personalize algumas das cores em seu checkout. Em geral, eu quero mantê-lo o mesmo que o que eu tenho no meu site. Vou deixar o blues aqui e os erros bem aqui. Eu posso ver que é diferente se você optar por priorizar as cores da sua marca em seu site, mas uma vez que você vai com as recomendações convencionais em sua página de checkout, digamos, em seu site você tem uma marca laranja, e todos os seus botões são laranja, mas na página de checkout, você decide que este é um lugar que eu estou bem em quebrar minhas regras de marca em favor da convenção de usar blues e greens para indicar ir, e vermelho para indicar erro. Estou feliz com a forma como isso está olhando e vou clicar em Salvar. Assim que suas configurações de tema estiverem boas, ou pelo menos você tiver uma posição do que você poderá mudar no futuro, vamos voltar para a guia Seções. Vamos rever os módulos da nossa página inicial e começar a preencher isso. Te vejo lá. 10. Design da Shopify: página inicial: Estamos finalmente prontos para começar a construir nossa página inicial. Mais uma vez, eu quero enfatizar que eu estou usando o modelo livre chamado narrativa, que é um pouco diferente do meu site real ao vivo. Vou mostrar a vocês como eu construo algo semelhante ao que eu tenho usando um modelo livre. Mas será uma versão mais simplificada do que você veria online. Só para lhe dar uma prévia rápida do que isso parece, aqui está o site que eu construí com narrativa. Ele tem o herói, as características, os favoritos, muito semelhante na verdade à minha página ao vivo. Vamos começar com a construção desta página. Uma coisa que eu quero dizer sobre esses tipos de módulos é que, o modelo virá com uma configuração que é como a visualização que você viu. Claro, parece muito bonito, mas você pode não precisar de tudo. Basta ter em mente que você não tem que usar todas as coisas que eles lhe dão e você não tem que fazer isso na ordem que eles têm. Claro, isso torna mais simples, especialmente se você não está confortável com a construção de sites já, mas você vai ver que eu realmente me livrar de um monte de módulos de modelo que ele vem com, e apenas mantê-lo realmente simples. Eu acho que um bom exercício para fazer é realmente olhar para alguns sites populares, então eu tenho everlane.com puxado para cima. Esses sites gastam muito dinheiro pensando sobre a experiência do usuário, a interface e como é melhor incentivar as pessoas a fazer compras e eles ficam realmente convenientes para eles fazerem isso. Eu fiz compras na Everlane ao longo dos anos e eu notei que eles mudaram para frente e para trás entre ter apenas uma página inicial realmente simples com uma chamada para ação versus uma mais longa que tem conteúdo, imagens, coisas sobre sua marca, e parece que é onde eles estão de volta agora. Se você quiser começar com seu site, você pode ir com algo ao longo dessas linhas. Vou começar a construir este site. Ao longo do caminho, vou fazer alguns comentários sobre o que estou pensando enquanto estou construindo. Este controle deslizante superior tem quatro imagens diferentes que eu não preciso, então eu vou apenas remover todas essas. Agora, posso atualizar minha cópia. Aqui, vou ligar para a página que ele construiu. Vou tentar mudar as cores do cabeçalho para branco para que tenha uma melhor legibilidade. Vou mudar a cor do botão para um cinza mais escuro. Muitos desses módulos terão opções de estilo de imagem. Este permite um círculo, quadrado, e nenhum, e eu não quero nenhum. Você verá que há muitas coisas com as quais você pode jogar em termos de posicionamento em que lado a imagem está. As coisas que você não pode alterar são, por exemplo, que você tem essa barra, quanto o espaçamento entre as imagens, o texto, os cabeçalhos e o botão. Outra coisa que eu quero mudar é essa cor de fundo, para torná-la um pouco mais escura para combinar com a foto. Em seguida, eles têm este produto em destaque, eu vou me livrar, e uma seção de vídeo. Eu não tenho uma seção de vídeo do meu site, então eu vou me livrar disso. A próxima seção que eu quero é destacar nossos best-sellers. Vamos escolher a coleção de best-sellers que fizemos anteriormente. Temos essa coleção preparada, quero movê-la aqui embaixo. Agora, nossa coleção de best-sellers está pronta, então vamos adicionar algum texto. Você pode ver que o cabeçalho branco não está realmente funcionando ao longo, então vamos mudar isso. Vou mudar meus cabeçalhos para a mesma cor cinza escuro que usei para os botões para um visual mais limpo. Em seguida, eu quero configurar uma galeria e então eu adicionaria uma apresentação de slides. Agora, vou preparar os dois slides para a apresentação de slides. Quero mostrar o meu conteúdo gratuito mais recente aqui. Por exemplo, eu posso fazer um sobre o download do meu kit de boas-vindas gratuito e o outro pode ligar para o nosso blog principal. Configurou os dois ativos de antemão, e sempre posso atualizá-los à medida que avançamos. Eu configurou meus links de blog e meus links de download. Vamos mover isso para baixo dos favoritos da loja. Na próxima seção, quero destacar algum conteúdo. Aqui, eles falaram sobre um vale-presente, mas eu quero mostrar nossa nova postagem no blog sobre o download. Aqui, eu quero usar um estilo de botão secundário. A maneira como pensamos sobre isso é apenas para comunicar aos leitores, ou visitantes, diferentes hierarquias na informação. O estilo primário pode chamar a atenção coisas que você realmente quer que eles cliquem e o estilo secundário pode ser usado para coisas como blogs e peças de conteúdo que não são tão importantes. Agora, eu vou apenas ir em frente e adicionar alguns visuais para este destaque. Finalmente, quero terminar com alguns links para nos seguir e juntar-se à nossa casa de chá. Novamente, eu vou adicionar em uma seção, Estou usando a imagem com opção de texto. Quero combinar com essa cor de fundo. Mais uma vez, vou colocar o título e o texto que preparei de antemão. Enquanto você estiver configurando sua página, não há problema em deixar o texto do espaço reservado no início. Eu diria, basta notar a quantidade de textos usados e mantê-lo em mente quando você está preparando seu próprio texto real para garantir que ele se encaixa bem. Vou usar o mesmo módulo para construir uma seção seguidor logo abaixo da seção Junte-se a nós. Desta vez, vou colocar a imagem à direita para guiar o olho do leitor e fazer uma distinção entre as duas seções. Vamos voltar para a parte inferior do nosso conteúdo. Vamos ver como isso está parecendo. Este é um bom exemplo de algo que parece muito legal no modelo, mas eu encorajo você a alternar constantemente para celular, porque muitos de seus visitantes vão estar ocupados no celular, e assim você quer ter certeza de que a experiência é tão bom quanto a experiência de desktop. Quando olho para isto, a secção da galeria faz menos sentido para mim porque as pessoas terão de fazer um gesto de dedo para a abrir, e pode não ser super óbvio. Então eu vou me livrar dessa seção. Vamos falar sobre esses últimos itens aqui que eu não vou usar. Testemunhos é algo que muitas pessoas gostam de usar, mas para mim é desnecessário. Então eu vou me mudar para essa seção. é que eu não goste ou não queira, é que eu estou pensando em como melhor editar o que eu tenho na minha página inicial. Como você viu nas outras páginas, como Everlane e até mesmo a empresa de chá, há muita informação, mas eles não jogaram tudo lá dentro. Vou escolher o que quero mostrar. Para mim, isso vem secundário às coisas que eu já escolhi usar. Finalmente, estamos aqui no rodapé e você pode decidir qual dessas coisas você quer mostrar. Eu não gosto de mostrar o ícone de pagamento, então eu desligo isso, e eu não preciso do efeito de paralaxe. Eu quero mostrar a inscrição no boletim informativo, e você pode editar esse texto aqui. Quero colocar algo mais alinhado com a voz da minha marca, então vou colocar aqui. Não quero esta cor. Vamos para essas configurações de tema, ir para cores, eu posso encontrar a cor de fundo do rodapé bem aqui. Vou mudar isso para um azul escuro. Eu posso mudar o texto do rodapé para branco, então isso é legível, e eu gosto muito mais disso. A última coisa que quero mostrar é que por baixo, você verá a navegação que configuramos anteriormente com toda aquela navegação aninhada. Caso isso tenha sido um pouco confuso, eu quero mostrar rapidamente como você pode construir um wireframe muito simples para pensar nos módulos que você vai precisar, então você saberá quais deles se livrar e quais manter ou adicionar. No plano de site de exemplo, dei uma olhada no contorno que tenho e nos módulos que estão disponíveis neste modelo. Eu construí esta tabela muito simples para pensar em quanto tempo de uma página inicial eu quero ter, qual a estrutura que eu gostaria que ela se parecesse, e para ter certeza de que eu cobri todo o conteúdo que eu proponho para cobrir. Como você verá, são blocos muito simples. Há uma imagem longa e eu tenho a ordem de conteúdo que eu gostaria, o que há de novo, itens de loja de recursos, links para conteúdo, destaque e item de conteúdo, e finalmente, permitindo que as pessoas saibam onde se juntar e sigam. Seguindo essa estrutura, eu fui capaz de decidir que eu não preciso de vídeos, ou depoimentos, ou aquele item bonito que eles forneceram, mas na verdade não se encaixava no que eu precisava. Eu recomendaria que, se você não tiver certeza de como brincar com seus módulos, volte ao seu esboço e crie um wireframe muito simples da ordem e do conteúdo da estrutura que você gostaria. É algo que você pode fazer através do Documentos Google com uma tabela ou simplesmente usar um lápis e papel. Felizmente, você pode começar a ver que, à medida que você constrói suas páginas, seus produtos, suas coleções, conectando-os todos à navegação e configurando sua página inicial, você chegará ao produto final do seu site finalizado. Acho que isso parece bom. Na próxima aula, vou mostrar-lhe meu site real com o modelo pago que eu uso e alguns dos prós e contras e benefícios, que você possa tomar uma decisão por si mesmo, se vale a pena ou não para o seu site. Te vejo lá. 11. Design da Shopify: comparação de templates pagos: Agora eu vou fazer um tour rápido do meu site ao vivo e mostrar-lhe um modelo pago que eu uso. Vou rever os prós e contras de cada um e deixá-lo decidir se vale a pena ou não para o seu site. Eu tenho o meu site real puxado para cima aqui e eu diria que algumas das principais diferenças são o “Nav” no topo. Se você der uma olhada neste, ele tem este menu drop-down e eu realmente não posso controlar isso, eu não posso mudar esse menu “Nav” para este “Top”, que eu gosto mais. Ele também tem uma capacidade de menu muito mais poderosa onde eu posso adicionar imagens a ele, eu posso ter um aninhamento de que eu gostaria. Por exemplo, tenho certeza que você já viu em sites de comércio eletrônico, neste paira, você pode ter esses sites muito mais complexos aninhados e ter imagens também. Isso é algo que você pode fazer com este modelo pago. Em seguida, ter opções como apenas colocar este texto à esquerda aqui. Minha imagem está configurada para que as pessoas possam ver este meio, e como você viu neste, pode ficar um pouco bloqueada. Ter a opção de dizer para onde quero que o texto vá é muito bom. Aqui eu poderia tê-lo colocado em um centro, eu poderia tê-lo colocado no lado direito, e há apenas muito mais controle com este modelo. Há também coisas como decidir como você quer que ele corte no celular. Uma coisa frustrante que você pode encontrar é que às vezes você tem uma imagem que funciona muito bem no desktop, mas, em seguida, parece engraçado no celular porque ele é muito agachado ou muito alto. Ter a opção de cortá-la de uma forma que seja compatível com dispositivos móveis pode ser muito útil. Outra coisa que eu realmente gosto sobre este modelo é que eu tenho este módulo aqui que me permite para seção fora páginas diferentes. Não há essa opção no modelo gratuito, e quando eu estou procurando o modelo pago certo para mim, eu estou realmente olhando para os módulos que eles me oferecem, para ter certeza de que eles vão cobrir minhas necessidades. Caso contrário, esta seção, esta galeria e estas duas seções aqui em baixo são realmente semelhantes. Se você tem um site muito simples e você está apenas tentando vender alguns produtos, tem uma “página Sobre” e uma política de privacidade, como eu disse anteriormente, os modelos gratuitos são mais do que você precisa. Mas se você quiser criar algo que é um pouco mais personalizável e ser capaz de mover texto e ter uma navegação realmente complexa, dizer porque você tem um monte de produtos, então você definitivamente vai querer considerar um pago porque seu uso vai ser um pouco maior. Finalmente, a última coisa que faz ou quebra os modelos gratuitos versus modelos pagos para mim, é que eu criar essas páginas sub, como esta casa de chá. Isso é como a página sobre que configuramos sob o modelo livre. Como você viu no exemplo anterior, que era um modelo muito básico com apenas a capacidade de colocar uma imagem e texto e não ser realmente capaz de se mover. Com este modelo pago, eu sou capaz de ter módulos exatamente como eu sou capaz de ter na página inicial. A capacidade é um pouco mais limitada, mas é exatamente o que eu preciso para construir as páginas que eu quero. Aqui eu construí nossa página que tem links para o blog, tem alguns módulos para direcionar as pessoas para ir buscar o download e tem mais áreas de chamada para o conteúdo que eu quero mostrar. Eu também construí esta outra página que revisa as histórias que temos e permite uma galeria de imagens. Tudo isso foi construído através de módulos, você pode ser capaz de alcançá-lo através de alguma codificação personalizada nos modelos gratuitos, mas é muito mais fácil de fazer com esses módulos existentes. Eu diria que essas são as principais diferenças entre um modelo pago e um modelo livre. Você terá mais opções para diferentes módulos, terá maior controle sobre coisas como posicionamento de texto e dimensionamento. Você só terá um sistema de menu e navegação muito mais poderoso, bem como o desenvolvimento de sub-páginas. Se você precisa ou não de tudo isso realmente depende do que você precisa para o seu site. Espero que isso seja útil para decidir o que é melhor para você. Agora vamos nos reunir em uma próxima aula, vamos finalizar nossas configurações e nos preparar para lançar nosso site. Te vejo lá. 12. Finalização da Shopify: configurações: Estamos quase prontos para o lançamento. Vamos voltar às nossas configurações no painel para ter certeza de que tudo está bem antes de estarmos prontos para apertar o botão dinâmico. Para navegar de volta para o painel, você clicará neste ícone no canto superior esquerdo. Agora, vamos para as configurações. Eu vou rapidamente rever as coisas que eu acho que são mais importantes para verificar novamente. Obviamente, olhou através de todas as configurações, mas aqui estão as coisas que você acha que são mais importantes para garantir que estão olhando bem para você antes de ir ao vivo. Em geral, você inserirá os detalhes da loja, o nome da loja, o e-mail de contato, onde deseja que seus clientes sintam que entrarão em contato com você, o endereço da loja, seu tempo, suas medidas de peso e sua moeda. Em pagamento, você quer ter certeza de que você ativou tudo o que você quer que as pessoas possam usar e que você desativou qualquer coisa que você não quer que eles possam usar. Eu recomendo manter esses check-outs acelerados ligados. As pessoas estão tentando usar o Apple Pay e o Google Pay muito mais e facilita a compra rápida. Em seguida, vamos para o checkout. Aqui, você tem algumas opções, como se deseja permitir contas de clientes, como você deseja permitir que eles façam check-out. Eu, pessoalmente, gosto de usar check-out por e-mail e decidir quais peças você deseja solicitar deles. Em geral, eu quero obter seus nomes e qualquer coisa que faça com que seus pacotes cheguem com eles. Em seguida, vamos para o transporte. Aqui, você pode configurar suas taxas de frete. Muitas empresas oferecerão, por exemplo, taxas de envio fixas dentro dos Estados Unidos ou seu país de origem e talvez calculadas taxas de frete internacional. Eu pessoalmente descobri que as taxas de envio internacional são muito caras e realmente varia dependendo do país. No início da minha loja, eu tinha uma taxa de envio internacional fixa, mas agora eu atualizei para que as pessoas calculem e usem um custo real. Eu acho que isso também ajuda a fazê-los sentir que este é realmente o custo que estamos recebendo. Porque muitas pessoas podem ter algum choque de adesivo quando vêem quanto custa enviar internacionalmente. Você pode configurar suas funções de envio lá. Você também pode configurar pacotes salvos. Por exemplo, eu frequentemente envio em cerca de três tamanhos diferentes e posso preencher previamente essas informações na Shopify, incluindo o peso para que ele calcule isso automaticamente na finalização da compra. Existem algumas opções diferentes em guias de remessa e etiquetas de remessa e se você deseja integrá-las a quaisquer contas de remessa que você possa ter. Você também pode configurar itens como configurar a retirada local. Isso tem sido muito útil, dadas as horas. Em seguida, em impostos, você quer se certificar de que você está configurado de acordo com as regras de onde quer que você esteja fazendo negócios. Eu estou na Califórnia, nos EUA, porém, eu quero ter certeza de que os impostos da venda certa estão sendo coletados. Em locais, você adicionará qualquer local de loja diferente, locais de armazenamento ou, talvez, se você estiver vendendo anúncios, certas convenções ou mercados o tempo todo. Você vai querer adicionar esses. Em notificações, você pode ter algum controle sobre muitos tipos diferentes de e-mails que seus clientes podem receber. Cartões de presente são bastante simples, e os arquivos são apenas todos os arquivos que você carregou ao longo da construção das vendas do seu site. Descobri que tenho todas as minhas imagens aqui. Esta seção é realmente útil se você quiser carregar um monte de arquivos de uma só vez. Como você viu antes, eu estava carregando um por um. Se eu estou construindo algo que eu sei que eu preciso de todas essas imagens, então é realmente muito mais conveniente para vir a esta seção de arquivos e apenas carregá-lo por lá. Canal de vendas é novamente semelhante também. Se eu acabei de adicionar esse sinal de adição aqui, você pode adicionar outros canais como Amazon e Facebook. Planos e permissões vai ser onde você pode adicionar suas contas de equipe, e faturamento é algo que é, claro, importante para garantir que você tenha configurado antes do tempo t, para habilitar compras e até mesmo entrar ao vivo. Todas as suas informações de faturamento devem estar atualizadas. Você também poderá ver as cobranças da Shopify em sua conta aqui. Venho aqui quando faço a contabilidade e a contabilidade para ver as despesas, a minha renda, e a divisão entre elas. Por exemplo, envio versus assinatura de contas. O que é bom é que você deseja preencher uma política de reembolso, uma política de privacidade, termos de serviço e política de envio e parece muito trabalho, mas a Shopify realmente tem esses modelos prontos para uso. Você pode simplesmente clicar neste botão e você terá um modelo preenchido e basta ler através dele para ter certeza de que ele está em linha com o que você quer oferecer. Assim que suas configurações estiverem boas, eu recomendaria pedir a um amigo ou familiar para dar uma olhada final todo o site para garantir que todos os botões estejam vinculados aos lugares certos. É comum que quando você está configurando um site e você não tem todas as suas páginas ou produtos configurados de antemão, você esteja colocando alguns links de espaço reservado para coisas que já existem. No final, você esqueceu quais são os que estão ao vivo e quais são os que ainda precisam ser atualizados. Ter um novo par de olhos para olhar através que vai ser realmente útil para manter o controle de. Também ajudará a esclarecer quaisquer perguntas que as pessoas possam ter se acharem que é confuso o que fazer, quando chegar à página inicial ou se você não tiver certeza de como verificar. Tudo isso será mais fácil de lidar quando você tiver alguém ajudando você a olhar através deles, e sempre que você estiver pronto para iniciar seu site, lembre-se de voltar para suas preferências em armazenar e escolher um plano para desativar a senha. Quando você terminar de configurar suas configurações, vamos nos encontrar na última aula. Te vejo lá. 13. Curso bônus: Adobe Portfolio: Bem-vindos à aula de bónus. Embora o resto deste tutorial estivesse focado na Shopify, eu queria dar um tempo para fazer uma análise da outra plataforma que eu uso, que é o portfólio da Adobe. Você pode encontrá-lo em portfolio.adobe.com. O portfólio da Adobe é uma ótima opção de site de portfólio para aqueles que já têm uma assinatura da Creative Cloud e não estão necessariamente procurando vender nada online. Percebi que muitas pessoas não sabem que é um serviço gratuito que vem com sua assinatura. um pouco mais limitado do que a Shopify, mas com alguma pesca divertida, acho que é perfeitamente bom para um site de portfólio. Por outro lado, para aqueles que ainda não têm uma assinatura da Creative Cloud, não recomendo isso como uma opção. Nesse caso, eu recomendaria tentar algo como Cargo Collective, que é uma opção gratuita ou Squarespace, que é uma opção paga. Eu realmente construí meu site de casamento no Squarespace e eu acho que ele tem alguns prós. Se eu fosse quebrar as diferenças de prós e contras entre a Shopify e o Squarespace, eu diria que o Squarespace é um pouco mais barato. Primeiro de tudo, depois Shopify, se você escolher uma opção de comércio eletrônico Snot. É, existente, modelos são um pouco mais agradáveis em termos de design. É ótimo para site de casamento, sites de portfólio ou empresas de pesquisa como restaurantes que só querem dar informações de uma maneira bonita, mas não necessariamente vendê-los quaisquer produtos on-line. Por outro lado, os temas da Shopify são muito mais personalizáveis na minha opinião. Eu sou capaz de fazer muito mais em termos de sua capacidade de comércio eletrônico. Acho que a Shopify finalmente tem a vantagem se você estiver tentando criar uma plataforma de comércio eletrônico. Voltar ao portfólio da Adobe. O back-end é um pouco mais estranho em como é configurado na minha opinião, mas não é difícil pegar o jeito de em tudo. Vamos dar uma olhada. Quando começar, você verá uma página que solicita que você inicie um novo site e poderá criar até cinco sites. Vamos clicar aqui para ver onde estão suas opções. Você será solicitado a dizer com o que deseja começar. Você pode fazer uma página de boas-vindas simples, que é quase como um cartão de visita digital ou você pode fazer uma coleção de trabalho, que é o que a maioria dos sites de portfólio são. Clicando nisso, você verá que há 12 modelos gratuitos que vêm com o portfólio da Adobe. Eles parecem bonitos, mas infelizmente você não pode comprar mais nada ou fazer upload do seu próprio, você tem que usar algo aqui. Eu pessoalmente descobri que eles eram bastante limitados em termos do que eles poderiam fazer fora da criação de páginas de projeto e páginas de informação muito simples. Outros eu tentei, eu pensei que Lucas era o único que ofereceu a maior funcionalidade em termos de poder me deixar as coisas personalizadas um pouco. Esse é o que eu uso. Esta é a minha página inicial, basta fazer uma rolagem rápida e eu preencher tudo isso usando os modelos de páginas bem aqui. Eu percebi que eu preciso criar uma página para esta classe sob minha guia de compartilhamento de habilidades aqui. Eu pensei que seria ótimo usar isso como um exemplo de como construir uma página em um portfólio. Indo para páginas em itens essenciais, e você vai querer clicar neste sinal mais aqui, você verá cinco opções. A opção de página é a que eu uso mais frequentemente, é algo que eu posso criar páginas de projeto para custos de blog e páginas de informação. As páginas de boas-vindas são páginas de destino em tela cheia. Os álbuns de sala de luz são apenas uma capacidade de se conectar aos seus álbuns na coleção de salas do Adobe Light, vou mostrar-lhe mais tarde, mas é basicamente uma coleção de subpáginas e os links são apenas links diretos que você coloca em sua navegação. Vamos clicar em causa página construir seu site. Eu quero colocar isso sob as habilidades que você é guia, mas vamos ver o que acontece que eu colocá-lo na navegação. Crie a página. Verá que agora está automaticamente preenchido no meu navegador aqui. Neste caso, não quero fazer isso. Clique de volta para as páginas e é muito fácil arrastar e soltar para organizar sua navegação. Passe o mouse sobre este ícone de hambúrguer à esquerda e arraste-o para baixo e apenas matar compartilhamento. Agora, na página em si, existem algumas maneiras de começar. Obviamente, você tem essas opções de módulo aqui, que são exatamente como os módulos com os quais você pode construir na Shopify. Você está limitado a essas 10 opções que a Adobe tem. Você também terá algumas coisas que poderá ajustar neste painel esquerdo. Ao contrário da Shopify, que tinha o painel e, em seguida, o espaço de trabalho do site dentro desse painel, esse é o sistema completo para o portfólio da Adobe. Há mais em apenas um painel muito simples aqui, podemos organizar as páginas e o nav configurar suas integrações com seus outros programas da Adobe. Você pode alterar o tema muito facilmente aqui e, em seguida, ajustar as configurações. Esta seção ampla do site aqui é como as configurações de tema na Shopify. Você poderá ajustar seus fundos universais, cores e fontes. Você poderá ajustar o contêiner do site, que é como largura e alinhamentos. conteúdo de mídia é onde você editaria todos os vários tipos de estilos de texto, como cabeçalhos, subcabeçalhos, parágrafos, legendas, etc. Podemos ligar e desligar o seu logotipo. Você vai notar que mudou bem aqui. Esconda seu nav ou show, e a mesma coisa com o rodapé. Em seguida, nesta página você será capaz de editar as coisas que são específicas para esta página em particular. Mas vamos começar a construí-lo aqui. A primeira coisa que eu quero fazer é ligar o mastro, ele apenas adiciona o título da página para o topo e eu faço isso para todas as minhas páginas de compartilhamento de habilidades. Então eu quero adicionar uma imagem de herói para mostrar uma pré-visualização da classe. Preparei todos os bens que preciso antes do tempo. Vamos adicionar esta imagem como a imagem introdutória. Você verá que o antigo bloco de opções Módulos desapareceu. Mas se você clicar neste sinal de mais, as mesmas 10 opções aparecem. Mas eu vou ir em frente e clicar no texto. Largue esse texto. Então, deixei cair em uma pré-visualização da plataforma Shopify. O que é bom que a Adobe adicionou mais recentemente é a capacidade de adicionar imagens ou textos à esquerda e à direita de uma imagem existente. Se você passar o mouse sobre esta imagem, você verá que esses sinais de adição aparecem e se você quiser adicionar algo à esquerda, obviamente você clicaria aqui. Se você quiser adicionar algo à direita, você deve clicar no botão à direita. Quero adicionar uma imagem do portfólio da Adobe ao lado dela para indicar que estou revisando essas duas plataformas. Eles aparecem lado a lado. Há algumas ferramentas de alinhamento aqui. Eu me certifiquei de que as imagens que estou usando são da mesma altura, mas digamos que não eram, eu vou ser capaz de alinhar as imagens como eu gosto com essas três opções. Este ícone central também permite que você clique e arraste se quiser alinhá-lo de forma diferente. Mas para mim, quero que seja centrado e equilibrado. Alguns outros ajustes que você pode fazer é quando passar o mouse sobre a imagem, você pode clicar neste ícone de lápis e você verá várias opções que você pode escolher abaixo. Obviamente pode mover os itens ao redor na página. Você pode reordenar o próprio conteúdo da página. Isso é como no painel do lado esquerdo da Shopify, onde você pode clicar e arrastar. Você pode adicionar Texto Alt. Isso é ótimo para SEO e texto de acessibilidade. Você pode adicionar links. Tendência esta imagem em um link ativo, o que é bom e eu vou mostrar-lhe na minha página inicial como utilizado isso. Podemos adicionar uma legenda para que eu possa clicar na Shopify. Então, para este, o portfólio da Adobe. Mas eu realmente queria fazer era ir para alinhamento de largura e margens. Clicando aqui, eu quero apenas adicionar um pouco de espaço de respiração entre essas duas imagens. Vamos mudar ambas as larguras para 95 por cento do seu máximo. Você também pode especificar por pixels, mas por enquanto usando porcentagem. Em seguida, vamos adicionar mais alguns textos que eu preparei, mais uma imagem que eu queria compartilhar, que era o backend do meu site da Shopify, para que as pessoas possam ter uma prévia disso também. Por último, quero adicionar um botão. Portfólio da Adobe, às vezes você edita diretamente dentro deste painel direito aqui, e às vezes você edita coisas neste painel esquerdo. É por isso que, quero dizer, eu às vezes é um pouco estranho, mas uma vez que você pega o jeito é bastante simples. Vamos clicar em “Editar este botão” e aqui, eu colocaria classe View, por exemplo. Talvez no compartilhamento de habilidades para que as pessoas saibam exatamente no que estão se metendo. Por enquanto, vamos colocar o link de espaço reservado do meu site de perfil de professor, mas eventualmente queremos atualizar isso para o site real. Eu quero que ele abra em uma nova janela, e vamos ajustar essa fonte para algo que corresponda melhor ao meu site. Você pode ajustar a altura e o preenchimento dos botões. Por exemplo, vamos mudar para 50% e diminuir o preenchimento para isso. Isso parece bom para mim, por enquanto. Então, é claro que você pode continuar e adicionar, por exemplo, um formulário de contato ou incorporar um vídeo. Por exemplo, eu posso incorporar o vídeo de trailer compartilhado MySQL aqui uma vez que ele esteja disponível. Mas por enquanto, acho que é o suficiente para esta página. A próxima coisa que quero mostrar é como adicionar imagens de galeria. Tenha em mente que aqui eu adicionei duas imagens separadas. A razão pela qual eu queria fazer isso é porque eu não quero que isso seja clicável em uma galeria. Se eu soubesse, deixe-me mostrar-lhe o que eu faria. Vou entrar em outra página de compartilhamento de habilidades, aquela para a minha ilustrada durante a aula. Porque eu queria adicionar mais alguns exemplos na parte inferior desta página. Aqui, vou clicar na grade de fotos desta vez e carregar essas imagens que preparei e portfólio da Adobe carrega todas as imagens nesta grade. Infelizmente, você não tem tanto controle sobre como eles decidem dividi-lo, como essas linhas de três. Mas você é capaz de pelo menos reordenar a grade, se quiser. Por exemplo, se eu quisesse mover alguns desses ao redor, eu iria e aqui adicionar uma grade e você pode apenas clicar e arrastar. Você pode adicionar legendas, você pode adicionar fotos, basta clicar nelas. Neste caso, quando você clicar neles, você poderá ter como funcionalidade de galeria. É muito fácil clicar para a esquerda e para a direita nessas setas para ver a galeria em um formato maior. Essa é a diferença entre imagens e galerias de fotos. Deixe-me mostrar-lhe apenas mais alguns ajustes que eu costumo usar. Quando eu selecionar este texto, eu vou ser capaz de obviamente mudar o estilo. Mas aqui é onde você iria para ajustar o tipo de texto que ele é. É aí que você iria para subcabeçalhos para se certificar de que é uniforme em todos os seus sites. Mas isso torna mais fácil ter certeza de que eu apliquei o estilo da fonte de uma maneira consistente. A próxima coisa que quero mostrar é como criar uma coleção de páginas. Então, por exemplo, na classe compartilhada de habilidades, você viu que eu tenho uma coleção de páginas para meus tutoriais principais no meu portfólio. Tenho links para todos os meus vários projetos de clientes que quero compartilhar. Em postagens, tenho toda a minha postagem no blog onde compartilho recursos gratuitamente, como começar. Muitas pessoas me perguntaram como começar e secar, então eu decidi montar este blog posts que cobre todos os recursos que eu gosto e uso. Há um lugar para onde posso dirigir as pessoas. Para fazer essas coleções, clique em páginas. Em seguida, você adiciona uma coleção e você verá aqui como ela é configurada. Você verá este ícone de grade e ele corresponde a esta coleção bem aqui. Para dizer que eu queria criar uma nova coleção de retratos. Eu iria clicar na coleção adicionar retratos, e, em seguida, apenas começar a adicionar páginas para esta coleção. Se você queria duplicar alguns de seus projetos existentes, por exemplo, é realmente indo para este ícone de engrenagem à direita de cada projeto. Clique nisso e você verá que há algumas opções do que você pode editar e alterar e também carregar e reimportar para ser mãos, claro, este é um produto da Adobe e ser mãos como um produto da Adobe, torna realmente fácil afundar a vida do seu projeto. O que eu queria fazer é duplicar esta página. Então eu só clicava e arrastava aquela cópia para os retratos. Então, é claro, eu posso clicar sobre ele e ir e editá-lo conforme necessário se dizer foi usado para um contexto diferente. Por último, se, por exemplo, você quiser vender alguns produtos digitais em seu site de portfólio, uma coisa que você poderia fazer é anexá-lo, por exemplo, a uma conta Gumroad. Você pode fazer isso funcionar como um site de comércio eletrônico, bem como, desde que seja bastante limitado no que você quer fazer. Espero que esse tenha sido um pico útil no portfólio da Adobe para que você possa tomar uma decisão sobre qual opção é melhor para suas necessidades. 14. Considerações finais e agradecimentos!: Estamos no fim da aula. Passamos por tanta coisa, e você é incrível por ter feito tudo. Espero que agora você tenha uma idéia clara de como fazer o planejamento para o seu site e, em seguida, construí-lo sozinho. Espero que você compartilhe seus planos de site conosco na seção de projetos de classe. Você pode fazer isso indo para a guia projetos e recursos sob este vídeo na área de trabalho, e clicando em criar um projeto. Mal posso esperar para ver o que vai construir. Se você gostou de aprender comigo, eu lhe dou as boas-vindas para conferir minhas outras aulas no SkillShare e seguir meu perfil de professor para ser notificado sobre quando novas aulas saem. Até lá, muito obrigado por se juntar a mim e se divertir aprendendo.