Design de loja e Masterclass: Saiba tudo Shopify em A-Z

1. Introdução no curso de design de Shopify: E aí, pessoal, bem-vindos ao nosso novo curso para a Masterclass de design da Shopify Se você estiver vendo este curso pela primeira vez, não tem certeza se vai participar ou não. Deixe-me seguir em frente e estabelecer as bases. Diga exatamente o que está no curso para que você possa obter tudo o que espera. Então, antes de começarmos, deixe-me ir em frente e falar sobre mim. Eu criei várias lojas da Shopify no passado. Várias lojas lucrativas da Shopify e centenas de lojas da Shopify que eram não eram Se você está fazendo este curso, está aprendendo com alguém que já falhou antes, que sabe o que é deixar de perder para ganhar na Shopify O que eu aprendi mais importante com a Shopify é que, além do marketing, além da aquisição de tráfego, o aspecto mais importante Shopify é ter um design do qual você possa E é exatamente disso que trata este curso. Trata-se de criar um design para uma loja de A a Z sobre como criar um design adequado para a Shopify Se isso é algo em que você está interessado, vá em frente e participe do curso que possamos prosseguir e começar. Vejo vocês do outro lado. Te vejo em breve. 2. Apresentação do curso: Ei pessoal, bem-vindos à introdução do curso. Bem-vindo ao curso, a masterclass no design shopify. Vamos tomar tudo, das etapas a a Z quando se trata de design shopify, para permitir que você crie uma loja que pareça profissional, aquela que você está vendo aqui hoje. Há muitos recursos que vêm por trás da criação de uma loja profissional da Shopify. Mas se você quiser ir em frente e criar um, vamos falar sobre o que realmente vai ser no curso para que possamos começar. Então, para entrar em termos do curso, todas as lições que você está vendo aqui, exatamente qual é o título deles, exatamente o que você vai ser visto no curso real. Vamos analisar coisas como criar galerias, criar maneiras divididas. Vamos ficar tão granulares quanto criar o SEO para os produtos que você tem em sua loja da Shopify. Vamos falar sobre coisas que são um pouco básicas, como banners de heróis. E estamos até falando de coisas que são um pouco mais complicadas, como criar seu primeiro pop-up de newsletter e quais são os requisitos da loja da Shopify e coisas básicas que são necessários para cada design da loja Shopify. Você está realmente recebendo muito neste curso. Agora que você conhece a estrutura do curso, a quantidade de tempo que cada lição é. E como você pode ver que eles são, os horários aqui para cada lição são apresentados logo abaixo do título de cada lição do curso. Vamos prosseguir e falar sobre para quem é esse curso. É para quem quer construir uma loja da Shopify. As únicas ferramentas que realmente serão necessárias aqui é que você vai precisar de um computador e você não vai nem loja da Shopify. Essas são as coisas que mais importarão. Agora, você também pode obter um tema premium da Shopify opcional. Existem diferentes temas da Shopify por aí. É realmente sua escolha, dependendo do estilo que você deseja usar. Mas falaremos mais sobre isso. Você verá na lição número dois, onde falamos sobre todos os diferentes temas da Shopify que estão por aí. Tudo bem, a próxima coisa que vamos falar é essa introdução é, qual é o valor deste curso? Bem, o período à queima-roupa é que lojas atraentes geram receita, pessoal. A realidade é que, em 2022 e além de 2022, se você vai criar uma loja da Shopify, você vai precisar que ela seja o mais atraente possível e ninguém quer fazer compras em uma loja pouco atraente, isso cria desconfiança dentro dos consumidores. Então, se você quiser gerar renda na Shopify, você vai precisar ter uma loja atraente. Este curso é exatamente para isso. Isso mostrará exatamente como criar uma loja atraente. Como eu disse, assim como o que você está vendo aqui. Agora, vamos ter um projeto de classe. Você pode concluir o projeto da aula depois de terminar o curso, fazer o curso e basicamente o que você vai fazer um passo a passo, você vai projetar sua loja. E uma vez que você conclua seu design de sua loja e você se sinta confortável que eu quero que você vá em frente e copie e cole o link da sua loja, o ponto meu link da Shopify no projeto da classe e também adicione o senha. A senha não é uma senha privada, é uma senha acessível ao público para que possamos ir em frente e ver sua loja e ver como ela fica de dentro sem editar nenhum dos seus dados. Sem mais delongas, vamos em frente e começar. Vejo vocês na primeira lição. Tudo bem, vejo você. 3. Painel de painel e temas no Shopify: Bem-vindos à primeira lição do curso. Agora, vamos falar sobre o é o Painel da Shopify e os diferentes temas que você pode selecionar. Ok, então o que você está vendo agora é o painel da Shopify para este site que você está vendo aqui. Ok. Então o que vocês estão vendo aqui é um site que eu criei anteriormente, apenas por diversão e aspectos de design. E este é o back-end daquele site para não chegar aqui, você tem que ir ao plano da loja, você tem que criar uma conta. E quando você chegar à seção de criação do processo de contagem, você vai ver uma seção ou a página inicial que meio que se parece com isso, certo? E a primeira coisa que você deseja selecionar é o botão da loja online. E o que ele vai fazer é levá-lo agora para a página onde você pode enviar temas, certo? E então o que é um tema? Vamos discutir isso. Então, um tema é o design geral por trás de sua loja. Então, você sabe, certos aspectos da loja. Como, por exemplo, a forma como seus banners são projetados ou a forma como seus temporizadores de contagem regressiva projetam, diferentes designs de aspecto para o seu site incorporados dentro do que é referido como um tema. Agora há pagos e há temas gratuitos lá fora. Certo, então o que é um tema pavimentado, é o mesmo que um tema livre. As únicas diferenças que serão características diferentes e serão benefícios diferentes. Agora, um artigo especificamente vai ser um design de uma loja que normalmente pode ser melhor do que um tema livre. Eu sempre recomendo aos meus clientes e aos meus alunos é que vamos com vigas pagas porque as pinturas são normalmente melhores agora que nem sempre é o caso. Existem alguns feixes pagos que não valem um dólar para gastar, mas há temas gratuitos que são muito melhores, certo? E há alguns temas pagos que são benéficos e há alguns feixes livres que não são benéficos. Então, o tema que eu uso pessoalmente é o tema lobo da Shopify. Este é o site deles, mas há uma série de outros temas disponíveis. Então, por exemplo, se formos a, você sabe, temas livres aqui, explorar temas gratuitos, certo? Podemos explorar os diferentes designs de temas que a Shopify nos oferece. E poderíamos visitar a loja temática, onde há feixes pagos pela Shopify. Agora, existem temas de terceiros, como também para o Shopify turbo, todas essas marcas diferentes. O que você vai me ver fazer é me ver criar uma história usando uma loja intencional, tudo bem. Mas você pode usar qualquer tipo de tema ou qualquer tipo de configuração que você queira usar pessoalmente. Ok? Lembre-se que escolher um tema tem a ver com sua criatividade, mas você também quer ter certeza de que seu tema é funcional e criativo, certo? Então, quando eu digo funcional, o objetivo principal do tema é que ele vai converter em um nível mais alto do que o normal, ok, então um tema típico seria temas tipicamente livres não incorporar isso, mas como eu disse, não é necessariamente um exigência, é apenas uma opção. Ok, então vamos em frente e passar para a próxima lição onde falamos sobre diferentes configurações temáticas. 4. Configurações de temas e demonstração de pré-visualização: Ok, então vamos em frente e falar sobre 50m de configuração. Então, dependendo de onde você obtém seu tema, haverá diferentes predefinições ou configurações que o tema terá. Então, por exemplo, o tema que estou usando atualmente, o que é chamado de lobo da Shopify. Ele tem cinco demonstrações diferentes são cinco configurações diferentes ou modelos, ok, com temas gratuitos, eles têm modelos diferentes também. Então eu sei, por exemplo, o tema ilimitado tem modelos diferentes, certo? Então há preto e branco e há um ok vibrante, para, digamos, por exemplo, para este tema, você tem pranchas de neve, você tem ao ar livre, e você tem boxe, certo? Estas são demonstrações diferentes para os três temas aqui o que eu noto é que eles tipicamente abrangem desenhos semelhantes, apenas cores diferentes, certo? Com feixes pagos que são de terceiros na loja Shopify, você vai notar um pouco mais de diferença com um pouco mais de criatividade por trás deles, certo? Mas se você é um iniciante, temas gratuitos são um ótimo lugar para começar. Mas se você quer levar o e-commerce muito a sério, apenas percebi que temas pagos incorporar, maioria deles, pelo menos, incorporar diferentes demos. E para o tema específico que estamos usando aqui hoje, ele terá diferentes aspectos que podemos utilizar para expandir nossos negócios com as diferentes demonstrações. E essas demonstrações diferentes serão úteis. Então, se eu apenas uma pré-visualização, por exemplo, aqui, se apertarmos personalizar na página inicial para e vamos apenas ir em frente e esperar que isso carregue. Você vai notar que existem diferenças significativas entre a de homepage para eo regular, Digamos página do produto homepage. Então, se nós apenas selecionar nesta página do produto direita, para as leggings linguagens renascimento OG, desculpe-me. O que você está vendo aqui é uma página de produto com três segmentos de foco. Isto é o que eu chamo aqui, três segmentos de foco. E basicamente o que isso é, se houver um, você sabe, um conceito no qual você quer que seus espectadores se concentrem. Esses três segmentos de foco permitem que seus usuários visualizem, você sabe, as taxas de conversão e apenas espalhem sua mensagem melhor, certo? Por que nos escolher? Informações sobre devoluções, informações sobre envio. Quando as pessoas entendem mais informações sobre seu produto e sua empresa, há uma maior chance de se converterem como consumidor porque sabem mais informações sobre você, certo? Cria mais confiança. Então, apenas para ver a demonstração para, se clicarmos na página do produto aqui, ok, o que você vai ver como uma página de produto que é significativamente diferente da que você está vendo aqui. Então, por exemplo, isso não é significativamente diferente, mas você tem aqui três pontos de foco. Não há três pontos de foco nesta demonstração, certo? Então há diferentes razões e lugares diferentes onde você as teria. Vamos voltar. Por exemplo, página inicial para e terá personalizar e visualizar essa página do produto e vamos explorar as diferenças entre isso também. Então vamos em frente e ter esta carga e apenas dar-lhe um mini aqui. E enquanto esperamos que ele carregue, vamos para a página do produto, à direita, então vamos navegar até a barra superior aqui e selecionar a página do produto. O que você está vendo aqui é que há três pontos de foco agora, e há também uma caixa especial de foco oferta especial, certo? Esses são recursos diferentes que cada demonstração pode ter que você deseja incorporar em sua empresa, certo? Então, por exemplo, se você estiver criando um anúncio e isso pode ser um pouco avançado demais para discutir. Mas se você está criando um anúncio, eu estou em um determinado produto que diz 30% de desconto seu, você não quer incluir essa informação em algum lugar aqui e a caixa de oferta especial, por que é isso? Como eu disse, é uma característica diferente que diferentes temas permitem e eles só têm benefícios diferentes para eles. Ok, agora vamos entrar na parte real do design. Então vamos começar usando um design específico que gostamos. E vamos rever o projeto na próxima lição, e vamos tomar a decisão final para entrar nele. E na verdade vou explicar a vocês por que escolhi esse projeto em particular e como vamos escolher configurá-lo, certo? Então vamos entrar na lição três. 5. PUBLICANDO nosso tema PARA PRÉ-VISUALIZAÇÕES: Certo, agora que passamos por diferentes configurações e designs diferentes, aqui na lição três, vamos falar sobre qual tema ou qual demo vou escolher. Então eu vou escolher a demo número três. E para ser capaz de apenas ir em frente e publicar isso, vamos para o botão de ações, e vamos em frente e clicar em Publicar. Agora eu sei que a demo ainda não foi criada, mas uma vez criada, vai parecer muito melhor. Então vamos apenas ir em frente e clicar em Publicar e esperar que ele publique. Agora que a casa número três é agora a nossa demo publicada. Não há muito para ver na página, exceto para o básico. Então vamos em frente e personalizar aqui. Ok? E vamos apenas dar-lhe um minuto para carregar enquanto estamos esperando para carregar. Lembrem-se, rapazes, que quando carregarem a demo, pode levar apenas um minuto ou dois para começar. Então a maquete geral que estou vendo aqui é que temos uma bandeira de herói, certo? E isso é referido como um banner de herói porque ele se estende do lado esquerdo todo o caminho para o lado direito do tema ou do site, certo? Temos por baixo um banner dividido, seguido por uma grade de produtos com um seletor de produtos no topo. Esta vai ser uma ferramenta muito útil que vamos utilizar. E como eu disse, é por isso que escolher o tema certo importa muito. Então, se você encontrar um tema que tem esses benefícios, você definitivamente deve buscá-lo. Aqui está um banner que tem banners promocionais. Então, idealmente, haveria uma imagem aqui e haverá uma imagem aqui que onde você poderia meio que promover o negócio. Não tenho certeza de manter isso, mas vamos ver como, como as coisas vão com o design. Temos nossa seção de recém-chegados aqui para diferentes produtos e coleções diferentes que serão criados. E nós não temos Instagram pára seção loja, desculpe-me. E temos um rodapé. Então o que vamos fazer aqui com todo este site e este tema é que vamos fazer as coisas um pouco diferentes com o nosso design. Tudo bem, então vamos em frente e começar com a nossa maquete. Então, só para ir em frente e tornar as coisas mais fáceis para mim, eu gosto do conceito de ter este herói delimitado aqui. Então, na verdade, vou escolher manter o mínimo. Banners divididos é algo que eu sou muito, muito de um defensor deles, eu vou dividir banners. E vamos explicar isso em partes posteriores desta lição ou neste curso melhor. Mas dividir limites é algo que vai ficar para nós e nossa grade geral de produtos aqui. O que eu vou fazer é eu vou me livrar, eu vou me livrar deste banner e deste banner. Então vamos em frente e aperte apenas seção removida aqui. E então nós nos livramos desses produtos são esses limites em vez. E então temos nossos produtos, temos seção de recém-chegados aqui. Vou me livrar da nova seção de chegada. Temos aqui a nossa secção de vendas em flash. Nós vamos nos livrar disso. E só para se livrar de algo ou de uma seção aqui, basta clicar na seção. Você acerta esses pequenos três pontos, você aperta remover seção. E vamos em frente e nos livrar da seção de lojas do Instagram. Isso é algo que eu vou me livrar também. Ok, então vamos apertar remover seção. Então, atualmente temos nosso homebound ou, ou nossa frente são nosso banner herói, nosso banner split, e nosso produto grit. Ok? Agora, algo que eu preciso que todos façam é ter certeza de que eles adicionem seus próprios produtos. Então é isso que vamos para a próxima lição, é que precisamos adicionar nossos produtos e temos que criar coleções para esses produtos para poder categorizá-los e fazê-los aparecer em nosso site. Tudo bem, então vamos em frente e salvar nosso progresso até agora. Vamos apertar o botão salvar e ir em frente e passar para a próxima lição. 6. Banners de heróis: Certo, então, sem dúvida, uma das lições mais importantes em que falamos de banners. Então, quando falamos sobre banners de Herói especificamente, então tipicamente um banner aqui vai se parecer com isso, certo? Ele se estende do lado esquerdo todo o caminho para o lado direito do seu site. Temos algumas configurações que podemos implementar. Como por exemplo, podemos tornar o nosso cabeçalho transparente e ele pode vazar para o banner real que você pode ver aqui. Então, se eu, você sabe, uma desculpa, se eu clicar neste botão, ele vai criar seu próprio banner. Se eu clicar em transparente, vamos clicar neste banner. Basicamente, vazará o banner em nosso cabeçalho. Acho que gosto desta armação. Então o que eu vou fazer é selecionar uma imagem de banner ou melhores planos de fundo. Então, no meu caso, apenas, você quer se lembrar de caras, esse banner tem um propósito e seu foco. Você sabe, o que você apresenta, que foco ou você está apresentando para o consumidor? Você está vendendo camisetas? Você está vendendo roupas? Você está vendendo lápis ou ele é apenas cadernos. O que quer que esteja vendendo, deve estar em algum lugar na faixa. Também um bom lugar para um banners se você tem vários como este, como um banner deslizante, é que você quer tentar implementar o fator que onde você pode tipo de promover coisas e mostrar suas vendas, mostrar o seu descontos, mostre suas ofertas. Ser capaz de fazer isso. Você vai ter uma chance melhor com as taxas de conversão, certo? Isso é o que banners heróis ou para cada pedaço de imóveis em nosso site tem um propósito, e este é o propósito disso. Então vamos em frente e entrar na apresentação de slides aqui. E para o nosso primeiro slide, que vai ser o slide número um, vamos selecionar uma imagem. Agora, tenho algumas imagens pré-carregadas. Vocês podem selecionar qualquer imagem que quiserem. Então vamos apenas dar este atestado. Este era um banner que tínhamos disponível para nós. E eu acho que parece muito decente. E podemos selecionar os cabeçalhos diferentes. Agora, se você está se perguntando o que é este bloco que diz um 160 por 46. É simplesmente um logotipo, então não podemos editá-lo dentro do Banner. Como eu disse, isso é tipo coisas de cabeçalho que vamos falar nas futuras lições. Mas apenas por causa deste vídeo, podemos selecionar uma das camadas inferiores que salvamos. Neste caso, obviamente não vai parecer muito bom. Talvez queiramos tornar o logotipo um pouco menor para que ele não tire da imagem. Então, como fizemos, parece muito, muito limpo. Podemos até querer tornar o texto e a cor uma cor diferente para os banners. Então você pode ver aqui, agora é muito mais limpo. Podemos até editar o texto. Então, há um botão Shop Now aqui. Para fazer isso, vamos apenas para a apresentação de slides, também conhecida como banner. Podemos editar o texto. Então, neste caso, botão de cor. Podemos tornar o padrão para ser laranja e passar o mouse para ser branco, por exemplo. Então, sempre que alguém paira e as cores vão mudar o botão, e vamos em frente e apertar Salvar. E vamos apenas atualizar a página para que possamos ver como isso parece. Então eu vou voltar aqui e vamos nos refrescar. Deixe-me esperar pela poupança. Está bem, está salvo. E deixe-me carregar aqui. Vamos dar um segundo para carregar. Porque, como sabemos, há muito conteúdo na loja. Ok, lá vamos nós. Então temos o nosso texto, temos o nosso botão. Sempre que eu vou passar o mouse sobre o botão, ele vai ficar branco. E temos o nosso logotipo que é minimizado e temos um cabeçalho transparente. Agora vocês podem adicionar banners diferentes. Eu só vou manter esta faixa por enquanto só por causa deste vídeo, como eu disse, então nós cobrimos agora maneiras de herói. Vamos em frente e seguir em frente para dividir bandeiras. 7. Como criar produtos e coleções: Ok, então agora para criar nossos produtos e nossas coleções, nós vamos voltar aqui para o botão de saída. Vamos apertar o botão de saída. Vamos selecionar produtos. Agora, você vai ver que eu tenho uma lista de produtos prontos carregados. Isso é algo que vocês vão querer fazer e eu vou mostrar a vocês como fazer isso exatamente aqui e agora. Ok? Então a primeira coisa que você vai fazer é você vai passar o mouse sobre o lado direito e você deve ver um botão que diz adicionar produto. Certo, vamos em frente e selecionar isso. E para poder adicionar um produto que precisaria de um título, uma descrição, mídia e preços. Então nós não precisamos necessariamente de todos esses aspectos como Nós não precisamos de descrição, nós não precisamos de uma imagem. Mas para que a nossa loja pareça decente, vamos fazer isso. E já que estamos modelando nossa loja fora do negócio Alpha2, vamos fazer isso por causa deste vídeo. Então, se eu apenas procurei atleta atleta, eu vou encontrar um produto que estamos procurando promover, então não são promovidos, mas estamos olhando para colocar em nosso site em vez disso. Digamos que neste caso, estou procurando uma camiseta. Digamos que é esta camiseta, certo? Vou fazer o download das imagens. E agora, no seu caso, você não vai necessariamente baixar imagens de qualquer lugar. Você vai criar seus próprios produtos, ou talvez você está entregando ou qualquer que seja o caso. Então, neste caso, vou apertar este pequeno botão de download. E vamos baixar aqui. Baixe aqui, aqui e aqui. Ok, então agora que temos tudo meio baixado do jeito que queremos, vamos voltar aqui e arrastar e soltar cada imagem. Lembre-se de que você pode facilmente arrastar e soltar imagens em sua seção de mídia para o seu produto. Agora, agora que eu sei que eu tenho as imagens disponíveis, esta imagem média aqui vai ser a imagem de foco em nosso produto. Então, se eu fosse apenas dar esse nome, um produto chamado camiseta, e apenas aperte Salvar aqui. E se eu fosse pré-visualizar o produto e vamos fazer isso agora. Vamos em frente e ver a vista na minha loja online. Como meio que parece. Como você pode ver, este é o produto da foto principal. Não é óbvio que não queremos isso. Queremos mostrar esta foto como a de cima ou a principal. Então, vamos voltar aqui. E vamos arrastar e soltar a foto na frente. Ok, e vamos em frente e você pode ver aqui nossa mídia já salvou. Não tivemos notificação que apareceu. Neste caso, quero que o preço do meu produto seja correlacional. Então, basicamente, o que isso significa é que se tivermos outras camisas em nosso site, queremos cobrar o mesmo preço em todo o site, certo? Então isso faz com que o site pareça um pouco mais limpo e um pouco mais simples. Tudo bem, então vamos voltar aqui e fazer $28. Mas primeiro temos que criar variações. Então, se você não tem quaisquer variações para seus produtos, como diferenças de tamanho e cor, etc Você pode apenas digitar 20 aqui sem nenhum problema e você pode apenas salvar o seu trabalho. Mas no meu caso, temos variações no produto. Então eu vou rolar para baixo e ir para variance aqui. E vamos em frente e bater aqui. E vamos digitar o tamanho. É uma variante para nós. E nós vamos adicionar os tamanhos diferentes. Tão pequeno, temos médio, temos grande, e temos extra grande. E para qualquer um que queira saber como nós adicionamos isso, tudo que você tem que fazer é digitar a palavra e uma vez que você quer adicionar a palavra, você apenas aperta Enter. E então batemos em salvar aqui. E desde que os nossos produtos tenham todos o mesmo preço, carbono aparecerá aqui aos 28. E o que podemos fazer é aproveitar o tempo para visualizar o produto. Então, se eu revistar a camisa aqui, devemos ver a camisa pop-up. Então, aqui está. E vamos em frente e apenas ver o produto. E assim a camisa está disponível. Obviamente, como podem ver, o único problema que temos é que está fora de parar. Não pode ser encomendado. Então, como vamos ser capazes de manipular ações? Porque nós vamos voltar aqui e vamos editar nossa quantidade. Então, neste caso, eu poderia escrever algo como dez. Eu poderia escrever 100 aqui, ou mil. Eu poderia escrever 40 ou 30, eu poderia escrever 20. E vamos em frente e salve. Agora, se este é o seu produto, você comprou algo que você quer fazer é realmente você quer contar sua quantidade. Ou apenas, você pode ter uma configuração dentro da loja onde você não quer sequer contar a quantidade, mas isso é algo que é um pouco mais avançado no meu caso, eu sempre recomendo que todos contem quantidades para seus produtos, ok ? Agora, eu também não vou dar o nome à camisa do produto. Vou chamar-lhe apagão. Blackout T, certo? O blecaute T. Vamos em frente e aperte Salvar. Ok. Então temos o nome do nosso produto, temos as nossas fotos e temos os nossos preços. Agora. Agora só para me sentir confortável, eu só quero ir em frente e visualizar o produto mais uma vez e ter certeza de que ele parece realmente bom. E assim podemos ver aqui que temos a imagem principal que temos. Se continuarmos rolando, temos as outras imagens e também temos em estoque. Ok. Então, se alguém vai apenas fazer uma pergunta rápida sobre e esta seção de pressa. Com esta seção aqui, isso é como eu disse, um tema. E este é um padrão de tema. Então, dependendo do tema que você tem, você vai ter diferentes benefícios e diferentes olhares para suas páginas. E meu caso com o tema que eu comprei no tema que eu tenho é que eu começar a ter esse recurso, que basicamente o que este recurso faz é que ele é um conselheiro de incentivo. Então, quando as pessoas vêm ao meu site e eu tenho um anúncio que está em exibição ou algo assim. Diz estoque limitado disponível e eles vêem algo assim. Vai motivá-los a comprar mais. Ok, então isso é só uma pequena dica. Agora, antes de terminarmos a lição aqui, precisamos fazer mais duas coisas. Precisamos adicionar uma descrição e precisamos adicionar este produto ao que é referido como uma coleção, certo? Então adicionar uma descrição é muito simples. Basta digitar conteúdo e salvar para que você possa criar conteúdo e parafuso. Você pode colocar em itálico o conteúdo e sublinhá-lo, certo? Você pode adicionar marcadores. Então, se eu quisesse adicionar pontos de bala aqui, eu diria, você sabe, todos esses marcadores diferentes para meus produtos. Posso adicionar imagens. Então, se eu quisesse adicionar uma imagem à minha descrição como esta imagem e entrar, ou eu poderia fazer isso, certo? Há muitas coisas que posso fazer neste caso. Não é algo que eu queira fazer. Então eu vou em frente e me livrar de tudo isso. E o que vou fazer é copiar e colar a descrição que está disponível para mim. Obviamente, este não seria o caso em uma loja da vida real. Basicamente, você teria que ter sua própria descrição, suas próprias fotos, você é seu próprio nome de produto, todo esse tipo de coisa. Mas o que estou fazendo aqui é que estou remodelando o ingresso da loja para mostrar a vocês e dar a vocês uma ideia de como o design deve ser. Ok, então vamos em frente e voltar aqui. E assim temos todos esses diferentes produtos que temos disponíveis. Vamos em frente e voltar. Estes são apenas uma espécie de lista de produtos foram criados uma vez que vocês criaram uma lista de produtos que você quer ou que você terminou, nós vamos ter que criar coleções. Ok? Então, basicamente, quais coleções são as diferentes categorias para certos produtos? Então temos nossa categoria de produtos aqui ou coleção chamada tops masculinos, certo? E, a propósito, para criar uma categoria, basta clicar nas coleções e criar coleção, certo? E será algo parecido com isso. Você selecionará Manual para carregar o produto manual. E você só vai procurar por todos os produtos que possam se encaixar no pedido. Então, neste caso, temos paragens de homens e um dos tops dos homens é este blecaute T e então deixe-me ir em frente e pronto. Então você pode ver aqui ele é adicionado e nós podemos adicionar uma descrição se você quiser. É realmente opcional. No meu caso, eu não vou adicioná-lo, mas esta é uma maneira decente de ir em frente e começar. Então você quer fazer isso com todos os produtos que você tem. Você quer encaixá-los em coleções diferentes. E mais de um produto pode caber em mais de uma coleção. Então imagine se você tivesse um acessório como um par de óculos de sol. Essa pessoa óculos poderia caber na coleção de acessórios e poderia caber na coleção de óculos de sol. Assim, os produtos podem caber em mais de uma coleção ao mesmo tempo. Ok, então certifique-se de fazer isso. Você adiciona todos os seus produtos, você adiciona todas as suas coleções. Tudo bem, então vamos em frente e passar para o próximo segmento onde falamos sobre SEO para páginas de produtos. 8. SEO de produtos: Muito bem, pessoal, bem-vindos à lição número cinco, onde falamos sobre a realização de SEO para produtos. Então este é apenas um pequeno segmento, eu acho, em SEO. Há definitivamente maneiras de podermos conversar por horas e horas e horas em SEO. Mas o que SEO significa apenas é que ele representa a otimização do motor de busca. E basicamente, se você não sabe o que é um mecanismo de busca, um mecanismo de busca é, por exemplo, google.com, yahoo.com, Booking.com. Você sabe, estes são todos exemplos de motores de busca. E basicamente o SEO é onde você otimiza seu site para um mecanismo de busca. Agora, parte dessa otimização que você pode fazer na Shopify é certificar-se de que você está dizendo ao Google, ei, eu quero classificar essa palavra-chave específica. Então, neste caso, se eu estivesse vendendo essa camiseta, como se eu estivesse realmente vendendo, tudo bem, e basta clicar no professor. Chamamos esta camiseta de preto, certo? Se eu estivesse realmente vendendo esta camiseta, eu não gostaria de classificar no Google para a palavra-chave blecaute T para que quando alguém procurar por ela e eles possam ver o meu produto. Bem, como posso dizer ao Google que quero classificar? Bem, isso é algo que vocês vão querer fazer com todos os produtos que vocês têm. Você vai querer ter que ter a palavra-chave para a qual deseja classificar no título do seu produto. Você quer tê-lo em algum lugar na descrição. E você quer tê-lo como o tipo de produto e você quer tê-lo como ataque. Então este é apenas um pequeno truque que eu faço para ter certeza de que eu classifico no Google, ou pelo menos estou dizendo ao Google, hey, eu quero classificar para esta palavra-chave. Veja o que acontece é que o Google classifica fora de algo chamado de densidade de palavra-chave. E como eu disse, podemos falar muito sobre isso. Mas densidade de palavra-chave só significa quantas vezes essa palavra-chave é densa? Quão denso é isso? Quantas vezes ele foi encontrado dentro da página da Web? Então se eu adicionar blecaute aqui, certo? E se eu adicioná-lo aqui, e eu tenho na minha descrição em algum lugar, mesmo que possa não ser. Mas vamos apenas dizer que é e vamos dizer Tier I bater salvar. Agora, quando o Google começa a rastejar, o site pode dizer e eles podem dizer, ok, claramente este site quer classificar para blecaute T. Outra maneira de também são outra coisa que você quer prestar atenção é texto alt. Então, sempre que você não tinha imagem, você quer dizer ao Google o que é essa imagem, certo? Então você apenas clicar em texto alt e você adicionar a palavra-chave em seu texto alt. Vamos pressionar Salvar texto alt aqui. E vamos nos livrar disso e fazer a mesma coisa para cada produto, certo? E você pode realmente testar diferentes palavras-chave e coisas assim para diferentes textos alt. Mas, no geral, é uma boa abordagem de se ter, certo? E a razão é porque se você receber 100 visitantes extras entre 25020, seja qual for o número, é basicamente obter tráfego gratuito para o seu site que você não precisa pagar. Então é por isso que fazemos SEO e é assim que fazemos SEO. Certo, pessoal, então vamos para a próxima lição. 9. ADICIONANDO PRODUTOS ONLINE: Ok, vamos em frente e começar a lição número seis, onde começar a implementação do produto, certo? Então vamos em frente e ir para a loja online e vamos bater personalizar. Agora, a primeira coisa que vamos querer fazer é qualquer seção onde vemos produtos vazios podem ter que ser preenchidos com certos produtos que estavam vendendo. Como sabem, estamos vendendo produtos relacionados masculinos e femininos. Então, qualquer coisa assim é inaceitável. Temos de ter a certeza de que tem imagens de produtos. Então vamos em frente e bater a versão do produto aqui. E temos diferentes guias de produtos. Então, em uma aba, eu vou nomear uma guia, masculina para produtos masculinos e outra guia, eu vou chamá-la de Mulher. Ok. Então, temos uma mulher e temos uma masculina. Estas são guias diferentes que as pessoas vão ser capazes de alternar através. Agora deixe-me ir em frente e adicionar uma coleção para isso. Então, vamos clicar selecionar coleção. E vamos bater nos homens, vamos selecionar. Ok. Então, temos uma seleção de produtos masculinos aqui. E temos uma seleção que vamos adicionar para mulheres aqui. E vamos selecionar o nosso produto feminino. Então vamos procurar por mulheres. E as mulheres estão bem aqui. Vamos clicar em selecionar. Então, sempre que um consumidor clica em nossa grade de produtos aqui entre mulheres e homens, eles vão ser capazes de folhear nossos produtos. Agora, e se eu quiser que isso pareça um pouco mais limpo? O que vou fazer é organizar a aparência dos meus produtos. Então, como faço isso? Bem, vamos em frente e dar uma olhada nisso aqui. E vamos apenas memorizar o que é, que coleção é. Então, temos a coleção masculina e a nossa coleção feminina. Deixe-me ir em frente e adicionar a coleção aqui. E o que eu vou fazer é editar o design de como os produtos masculinos são, são selecionados. Então, se eu só clicar em “Procurar “, temos alguns produtos masculinos aqui. Então eu vou selecionar este, este, e qualquer outro produto relacionado a homens. Então temos estes, certo? Os corredores universitários, os calções do colégio. Estes são todos produtos femininos. Temos camisetas masculinas. E isso é basicamente agora tipo de como na vida você quer trazer a melhor impressão para a frente. Isto é, vai a mesma coisa para sites. Então o que eu vou fazer é apertar o menu aqui. E o que eu quero fazer é editar a ordem de onde os produtos mostrados, por que eles aparecem em um determinado estágio, porque isso vai me dar uma chance melhor de converter um. Meu site é apenas projetado de forma mais limpa. Tão limpo, se essa é a palavra certa. Então 1234 camisas aqui. Temos mais algumas camisas aqui. Então temos um pouco curto. Então, temos dez produtos no total. Vamos em frente e já está salvo. Então, se este botão está acinzentado assim, então isso significa que ele já está salvo. Então, podemos voltar aqui para nossas coleções e procurar por mulheres. Então será o último aqui. E nós vamos fazer exatamente a mesma coisa aqui. Então vamos em frente e procurar. E vamos selecionar todos os produtos femininos. Temos aqui duas centenas de produtos. Nós temos, começar de baixo, nós temos isso, isso, isso, isso, esses. Vamos ver se perdemos alguma coisa aqui em baixo. Vou continuar a rolar para cima. E isso parece ser uma boa configuração até agora. Vamos em frente e bater feito. E agora vamos classificar manualmente selecionando a ordem. E eu acho que eu quero selecionar este produto para ser o primeiro. Isto para mim primeiro. Terceiro aqui, vamos trazer os casacos sem costura. E este casaco sem costura, temos os shorts e o top de biquíni, então isso vai ser bom o suficiente. Obviamente já está salvo. Então vamos voltar para nossa página personalizada aqui e vamos apenas atualizar nossa página e ver como nossos produtos, coleções de produtos meio que olhar quando implementamos nosso próprio tipo de configuração de produto. Então vamos dar um segundo para carregar e deve estar tudo pronto para nós bem rápido. Talvez se eu sair daqui. Ok, então você pode ver aqui nós temos nossos produtos carregados agora. Então, algo que eu vou querer fazer é que eu vou querer trazer este aqui para o fundo direito com isso. E eu vou querer fazer essa edição, mas no geral, parece bem decente. Então você pode ver aqui, obviamente, o carregamento pela primeira vez. Então algo que eu poderia querer fazer é me livrar desses produtos porque eles têm forma diferente ou tamanhos menores. Mas isso é algo que vocês vão querer fazer com seus sites também. E você vai querer ter certeza de que as imagens são todas uniformes e todas do mesmo tamanho. Ok, e isso é só uma pequena dica para vocês. Então vamos em frente e fazer isso na câmera rapidinho. Então este acorde desempenho T tem que ser trazido para um fundo, se não apenas totalmente escondido. E isso, enquanto que aqui, esses três produtos devem ser apenas, vamos apenas esconder totalmente esses. Então o que vamos fazer é saltar de volta para as nossas colecções. Então vamos até aqui para a nossa bandeira, e vamos em frente e apenas me desculpe, não a nossa bandeira. Temos o nosso produto v3. Vamos para os homens, vamos para a coleção Edit. E como eu disse, precisamos editar nosso desempenho principal t e mover isso todo o caminho para o botão apenas para recursos de tamanho. E o que eu realmente quero fazer. Neste caso, uma vez que o desempenho do núcleo t é muito menor, vamos mover isso para o fundo aqui. E vamos puxar para cima o, vamos apenas fazer dez produtos no topo. Então, se eu apenas ir em frente e salvar isso e ter certeza que o corredor de identidade e o desempenho principal T. Então nós temos o corredor de identidade aqui. Eu vou cabeça. E então temos esse corredor de identidade. E nós temos o corredor do time. Então o que vamos fazer é nos livrar dessa raiz disso. Vamos nos livrar disso e nos livrar disso agora, tipicamente caras, normalmente, eu teria esses produtos disponíveis no site. Como é que alguma vez lá muito pequeno? As fotos não parecem boas. Então não quero arriscar a qualidade. Ou o aspecto de design só para tê-los disponíveis assim não é interessante para mim. Então nós temos, vamos ver quantos produtos temos. Temos 12 produtos de visível. Então, devem ser os primeiros 12. Então vamos olhar através de um através de 12 aqui. Então temos 1234567891011. Isto deve ser 11 e este deve ser 12. Certo, vamos em frente e nos certificar de que temos nove produtos disponíveis. Então vamos nos livrar disso. Vamos nos livrar disso. Vamos nos livrar disso. Vamos em frente e atualizar isso rapidinho. Ok, então nove produtos disponíveis. E se nós apenas atualizarmos isso, ele deve parecer exatamente do jeito que queremos agora deve parecer todo uniforme, tudo muito limpo. Vamos dar um minuto a isso. Ok. Sim, parece todo uniforme. Parece muito limpo. Agora, nós temos este produto meio que sair por aqui sem outros produtos com este espaço vazio. E isso não parece bom para mim. Então o que nós poderíamos fazer é que nós poderíamos, vamos apenas verificar algumas configurações aqui. Podemos editar o estilo do item do produto. Eu não sei se eu realmente quero fazer isso, mas o que eu quero fazer é mostrar, digamos, dez produtos. Digamos que nove produtos neste caso, seus oito. Sim, oito produtos tão bons. Vamos ficar com oito. E eu posso, obviamente, editar quantos produtos existem na linha aqui, mas isso não é interessante para mim atualmente enquanto falamos. Só não é algo em que eu queira me concentrar. Poderíamos obviamente editar o estilo do item. Então, neste caso, temos o estilo do item número seis. Vamos dar um segundo para visualizar o estilo número cinco do item. Veja se isso faz muita diferença para o nosso design. E vamos recarregar bem rápido só por causa da velocidade. Vamos voltar aqui. Deve carregar em um segundo. Lembrem-se, esse novo design para a Shopify é um pouco irritado. Então, a Shopify mudou sua interface de usuário. Então pode ser um pouco buggy, mas você pode ver aqui agora que o design real é diferente, certo? Então nós temos esse design agora, então cabe a você tipo de estilo que você gosta. Então, se eu voltar aqui e eu só tenho usado estilo, digamos número três, vamos ver como o som número três se parece. E se eu voltar aqui e me refrescar, deve levar alguns segundos. Então este é o estilo número três. Gosto muito do estilo número três. O que vocês acham? Vocês vão me avisar? Mas, você sabe, se as cores ficarem no caminho, eu acho que isso parece muito decente para o que estamos fazendo. Mas temos homens e mulheres. Então, com as mulheres, temos esses três produtos saindo, então teremos a mesma coisa. Então, podemos muito bem selecionar oito produtos para mulheres. Então vamos para V3 aqui, e vamos selecionar oito. Então, oito, vamos bater em Salvar. Tudo bem, vamos para as mulheres. E lá vai você. Temos oito produtos para mulheres. Agora, para que esse tipo de configuração ou o estilo pareça bom, teríamos que ter esse texto para parecer um pouco diferente. Talvez seja laranja, estão prontos para começar. Mas não vamos nos preocupar muito com isso por enquanto. Então é exatamente assim que você cria manipula e implementa seus produtos para sua loja. Ok, vamos passar para a próxima lição. 10. A arte da criação de banners de divisão: Certo, então dividem banners, queremos ter algum tipo de tema correspondente. Ok? Então, com um banner dividido, você realmente tem que analisar seus produtos, o que você tem para venda, o que você tem disponível. E a razão pela qual isso é importante é porque os consumidores querem ver a segmentação e seus produtos. Então, por exemplo, esta é uma loja de roupas masculinas e femininas. Bem, uma idéia disso é que temos homens e mulheres vindo à nossa loja de roupas. Queremos apresentar a eles o que eles provavelmente vão comprar o mais rápido possível. Tudo bem, então vamos em frente e tocar slideshow aqui, ou vamos voltar aqui melhor. E vamos bater no Banner. Agora, vai haver diferentes banners que você pode adicionar quando este tema, você pode usar o tema que quiser. Mas vamos em frente e selecionar um banner. E para a nossa primeira imagem de banner que temos, lembre-se que temos o Setting número um, ok? Que é esta imagem aqui. E temos a configuração número dois para esta imagem de banner. Então, idealmente, temos produtos masculinos e femininos. Então gostaríamos de dividir os banners em algo que seja igual ou similar. Então, vamos clicar nisso. Vamos ver como isso parece. Então temos uma faixa dividida aqui. Talvez pudéssemos clicar e ver como outros produtos são moldados. Vamos ver aqui. Então isso parece bom. Temos um monte de produtos diferentes. Essa coisa boa ao trabalhar com uma marca como esta é que eles têm um monte de imagens que podemos enviar e testar. Veja o que parece bom e o que não parece bom. Então podemos tentar um monte de coisas diferentes, certo? Temos um monte de imagens diferentes para selecionar. Então, como eu disse, você quer fazer upload de imagens diferentes e testar e ver como elas ficam. Você quer ter alguma uniformidade, obviamente. Então, se uma imagem é um tamanho, você quer ter outro tipo de imagem de correlacionar. E você quer mostrar também uma clara diferença entre os dois. Então imagine se esta foi a imagem número um, e digamos que esta seria a imagem número dois. Esta não é realmente uma maneira ideal de utilizar suas baterias divididas porque o conceito é que estamos vendendo produtos masculinos e femininos aqui e, em seguida, masculinos e femininos aqui. Então queremos separar as identidades. Então nós temos uma imagem aqui, digamos, e digamos, vamos ver se essa imagem meio que vê os tamanhos das imagens não correspondem. Então não queremos continuar com isso. Queremos ter certeza de que os tamanhos da imagem correspondem. Então talvez possamos clicar, por exemplo, nisso, certo? A loja básica que temos disponível aqui, ou as fotos em vez disso eu é que temos algumas imagens diferentes que vão mostrar como, por exemplo, esta. Temos esta imagem, certo? Assim como nós tivemos no demonstrado que eu criei. E nós temos, vamos apenas ir em frente e carregar mais para que possamos visualizar. E nós temos este. Então você pode ver aqui que há uma enorme diferença. Então, por exemplo, à direita, eu diria algo como talvez programas de treino. E à esquerda seria algo como roupas de trabalho. Tudo bem, então será um pouco diferente. Podemos editar obviamente as cores dos botões e coisas assim, mas este é apenas um lugar decente para começar com nossos banners divididos. 11. Como adicionar imagens ao nosso site: Ok, então vamos discutir como adicionar imagens ao nosso tema em nosso site aqui. Assim, podemos adicionar imagens de duas maneiras diferentes. Então podemos ir para, por exemplo, como um banner ou algo assim, mudar e, em seguida, basta carregar um monte de conteúdo aqui. Mas há outras maneiras de fazer isso, e é isso que vou compartilhar com vocês hoje. Então, se você pode ver aqui, eu baixei um monte de imagens. Se eu pudesse pegá-lo, arrastá-lo e soltá-lo, ele será carregado aqui. Ou o que posso fazer é ir para a página inicial da Shopify para poder sair e digitar arquivos. E você verá aqui uma opção para arquivos. Vamos clicar nisso. E carregará todos os arquivos. E nós podemos apenas carregar arquivos aqui e podemos apenas arrastar e soltar todas as imagens que queremos adicionar e abrir. Você vai ver que eles realmente vão começar a carregar. Há uma pequena barra verde que é considerada uma barra de carga que carrega tudo. Então a razão pela qual eu adicionei todas essas imagens é que isso é algo que você quer, vai querer fazer também, é que você vai querer ter que acumular todo o seu conteúdo antes de começar seu design de tema. Você quer ter tamanhos geralmente semelhantes. E você quer ter como uma maquete de uma idéia de como seu tema deve olhar ou como seu site deve olhar. E é por isso que este curso é para, certo? Para que possamos guiá-lo através disso. Mas você definitivamente quer fazer upload de algum conteúdo. E isso é apenas uma pequena dica que eu encontrei que torna vida um pouco mais fácil durante todo o processo de construção. Ok, então vamos passar para a próxima parte. 12. Como criar um segundo banner no nosso site: Ok, então agora que eu fiz upload de algum conteúdo, eu quero realmente criar um segundo banner para o nosso site. Então vamos em frente e ir para a loja online aqui. E vamos apertar o botão Personalizar. E vamos nos livrar desta pequena barra de carga aqui. E o que vamos estar esperando é todo o tema para carregar, certo, para, para que tudo carregue. Assim como agora. E você pode ver aqui no lado direito da bateria que temos um 123. Agora estes estão vazios. Eu poderia optar por usar este banner específico ou apresentações de slides que eles chamam, mas eu também posso usar outras coisas. Então temos banner, um, faixa para banir ou três, faixa para Ben 5, certo? E esse limite não é necessariamente assim. É todo o caminho através da bandeira seis, certo? Como um sistema atravessando assim. E também temos slideshow. Então vamos até aqui e carregar mais. E como eu disse, isso não vai ser o mesmo para tudo que depende do tema que você tem. E então eu vou rolar um pouco mais para baixo. E então temos um espetáculo diferente. Então você tem uma apresentação de slides, certo? Que é uma grande apresentação de slides de herói. Temos apresentação de slides para apresentação de slides três, certo? slides para apresentação de slides cinco. Então vocês meio que têm a idéia do que eu vou fazer com eles, apenas indo para ficar com a apresentação de slides que estamos usando atualmente. E eu só vou adicionar um novo banner. Então vamos clicar em selecionar imaturo. E vamos selecionar na imagem que queremos. E vamos pressionar select para que possamos ver como ele vai ficar. E isso parece bom para mim. Agora, uma vez que eu salvar o meu progresso e eu voltar aqui, vai ter que eles não vão ficar em cima um do outro assim. Haverá a pequena flecha aqui com 123 e estará disponível para nós. Eu realmente vou me livrar do número três aqui porque eu não acho que número três não é necessariamente necessário para o show lateral número três, vamos em frente e apertar salvar, e vamos apenas atualizar. Então vamos em frente e atualizar bem rápido. E isso deve nos dar exatamente o que precisamos, que vai ser 21 slideshow com duas imagens diferentes ou como banners, eles vão estar tocando seu banner. Então temos um aqui e temos que, lá vamos nós. Então isso é bom o suficiente para nós. Você pode ver que há como uma animação de coisas se movendo, certo? Então isso é bom. E então eu gosto disso. E isso é algo que eu vou ficar com para o nosso tema. Então temos 12 agora, se eu quiser que este seja o primeiro, eu vou arrastá-lo assim. E então será o primeiro, e então o amarelo será o segundo. Então este será o segundo. Isto terá a posição número um. Também podemos editar as margens. Podemos torná-los maiores ou menores. Neste caso, as margens padrão são perfeitas do que funcionam para mim. Mas se você quiser mudá-los, você pode apenas adicionar um número como 40 ou 20 ou algo assim. E isso mudará a visualização do pixel. E o meu caso, como eu disse, as margens são perfeitas onde estão. Então, vou salvar o meu progresso, está bem? E como eu disse, o que você está vendo aqui é que este é o tema carregando, certo? Ele mostra uma apresentação de slides para, uma vez que esta barra verde tenha carregado todo o caminho através, ele vai estar em cima um do outro como deveria ser. Vai ter um pequeno aqui, um pouco para gostar deste. E é exatamente assim que ele vai olhar no final do consumidor e no seu final. Então isso é apenas algo para ter em mente. 13. Edição de banners de Split: Ok, então algo que eu vou fazer é eu vou estar editando nossos batedores divididos. Você vai descobrir que há momentos em que você precisa editar o conteúdo em seu site, assim como eu tenho aqui. Agora, se vocês se lembram, o objetivo de um banner dividido era que nós basicamente podemos segmentar nossos produtos em nosso site, certo? Então temos produtos masculinos e femininos. Então queremos fazer um para homens e outro para mulheres. Bem, acontece que eu tenho o conteúdo para isso. Então vamos em frente e mudar as coisas. Então, por exemplo, eu tenho essa imagem, certo? E eu tenho essa imagem. Qualquer imagem que seja melhor para as mulheres. Então, vamos selecionar este. E para homens, vou selecionar, digamos esta imagem, certo? E você pode ver aqui o, ambos têm exatamente o mesmo tamanho. E eles parecem muito, muito bem juntos, certo? Então ele só mostra o, acentua as diferentes características do tema onde você pode ter esportivas e você pode ter roupas para sair, certo? Tanto para homens como para mulheres. E podemos brincar com as diferentes configurações e imagens diferentes. Então, se não gostarmos desta imagem, podemos testar como esta se parece ou talvez como esta parece, certo? Talvez este pareça um pouco melhor e isso é o que acontece. Então eu vou selecionar essa. E foi assim que eu o desenhei. Agora, o que nós vamos querer fazer é que nós vamos querer editar o texto nos banners divididos. Então, neste caso, eu quero ter minha mensagem para branco, certo? Porque o fundo é um pouco mais leve. E aqui diz bestsellers. Vamos deixar este texto branco. Certo, e essa parte deve ser branca. Nós também podemos mudar a cor como ele não necessariamente tem que ser branco para ter um cinza claro tendem a ele. Pode ter uma tonalidade vermelha. Podemos fazer coisas diferentes. Vou ficar com o branco aqui. Vamos em frente e ficar com o branco. Então lá vamos nós. Eu sei que o branco vai sair muito, muito bom com esta imagem. Então vamos em frente e fazer isso. Vamos com branco bem ali. E branco bem ali. Certo? Então, aqui um texto. E vamos deixar o botão branco também. Ok. Então o botão de cor branco deve ser este botão aqui. E isso vai levar um pouco de tempo para mudar uma vez que apenas salvar as configurações porque não é necessariamente texto. E vamos mudar isso aqui. Também podemos mudar a cor, qualquer tipo de cor que quisermos dentro deste gradiente. Então, se eu quisesse fazer como um azul, ou se eu quisesse combinar com as cores que eu tenho aqui, como uma coisa laranja, amarela. Eu também posso fazer isso. Então vamos apenas dizer que eu queria que fosse, você sabe, o que quisermos. Então, digamos que é uma cor amarela alaranjada. E nós podemos apenas testar e ver como isso seria. Então essa laranja, amarelo. Então esse não é o meu estilo. Eu não acho que isso parece muito bom. Então eu fico com o VL. Deixe-nos manter o branco. O branco parece bom o suficiente. Para que pudéssemos fazer isso. E vamos manter isso branco também. Então vamos em frente e salvar nosso progresso. Afirmam como as coisas parecem. E vamos dar uma chance aqui. E assim, até agora, quero dizer, parece decente. Como isso está sendo carregado, a cor do botão mudará. Mas algo que precisamos fazer também é ter certeza de que nossas maneiras divididas combinam com o produto certo. Então, neste caso, temos todos os nossos produtos para o banner um. E obviamente não queremos todos os produtos. Queríamos ser produtos femininos. Então vamos acertar as coleções aqui, e vamos procurar as mulheres. E isso vai levar a mulheres, certo? E para homens, obviamente não queremos produtos que queiram ser masculinos. Então, vamos clicar aqui e dizer masculino. E vamos bater em Salvar. Ok. E vamos voltar. E uma vez que atualizamos isso ou até mesmo a visualização do site, seremos capazes de ver tudo no aspecto que queremos ver. Então, se eu só bater, bem, é realmente refrescante para nós. Então eu realmente não preciso fazer isso. Malicioso. Dê-lhe um segundo aqui. Vamos rolar para baixo. Então lá vamos nós. Se clicarmos nele, ele nos levará diretamente ao nosso fundo ou não ao nosso fundo, nossa página de coleções de produtos. Ou é o que deve fazer, pelo menos. E lá vamos nós. Levou-nos à página da colecção de todos os produtos masculinos. Mas o que ele fez foi nos levar para a coleção errada. Então eu vou ter que fazer esse tipo de mudanças no meu tempo livre. Tudo bem, então isso é algo que você quer prestar atenção também. 14. Visualizar nosso banner de site: Certo, então o que fazemos? Uma pequena demonstração mostrando a vocês como o banner funciona e como funciona em uma seção anterior. Então este sou eu visualizando o site do lado de fora. Às vezes o editor pode não pegá-lo e eu estava um pouco confuso e eu queria ver e confirmar que ele funciona. Se nós apenas ir aqui para a web real, repente rolar para baixo para um dos botões. Clicamos no botão, você verá como ele nos leva para a categoria certa agora, então são a coleção certa. Então não é como se tivéssemos cometido um erro. Às vezes acho que isso vai acontecer com o editor. E já que estamos falando sobre coleções, eu quero falar sobre a página de coleções e como apenas fazer algumas mudanças nisso dentro da próxima lição. 15. Editando a página de coleções: Ok, então vamos para a lição número 13, onde falamos sobre a edição da página de coleções. Então, para fazer isso, vamos voltar para a nossa estação de edição aqui. Na Shopify, você pode ver aqui como nosso site está se unindo. Muito, muito bom. Nós temos nossos banners, certo, que os consumidores podem clicar, certo? Ele tem uma animação que é quase como zoom para fora de qualquer maneira. Temos nossas imagens aqui que quando você pega o mouse e passa o mouse, ele aumenta, certo? E nós temos nossos produtos mais vendidos para cada nicho ou cada seção dentro do nosso site onde temos médias, temos mulheres, tudo configurado em um visual muito limpo, muito profissional. Ok, então o que nosso próximo passo de ação é editar nossa página de coleções. Então, para fazer isso, temos na estação de edição aqui e podemos editar diferentes aspectos. Mas e se quisermos editar um pouco mais? Queremos ficar um pouco mais gritty, certo? Bem, é muito simples. Vamos apenas ir em frente e navegar para a nossa página de coleções. E o que você vai ser visto aqui é esta pequena seção onde você pode tipo de escolher onde você está editando ou qual é a sua edição. E para fazer isso, nós meio que chegamos a essa página. Você quer chegar a essa página. E agora podemos fazer algumas edições. Agora, para ser claro, nem todas as páginas de coleções serão necessariamente assim, certo? Como se tivéssemos Peg Nation aqui em baixo, certo? O que basicamente significa que as pessoas podem mudar através de diferentes páginas de produtos, certo? Temos uma lista completa de produtos diferentes, certo? No nosso caso, isso é um pouco diferente. Muitas páginas de coleção de pessoas são uma espécie de projetado de forma diferente, que significa que eles apenas têm como uma grade de produtos. E eu percebi que esta é a página da coleção que realmente ajuda drasticamente as taxas de conversão. Porque o que está acontecendo aqui é que ele está dando informações sobre o produto, certo? E ele está dando a você uma imagem do produto para limpar a imagem do produto. E então você tem opções aqui, certo? Você pode selecionar uma opção para comprar. Você pode clicar no produto. Há muitas coisas que você pode fazer. A primeira coisa que vamos querer fazer é ir em frente e voltar para o nosso cenário na página das nossas coleções, certo? E o que vamos querer fazer é ir para a nossa cabeça. Mas a primeira coisa que precisamos fazer é ter um logotipo, certo? Tem que fazer sentido. Tem que parecer bom. Temos um logotipo aqui que diz ativar sticky, mas este não é o mesmo caso o tempo todo, significa em nosso cabeçalho, se você olhar aqui, ele diz cabeçalho homepage, temos um logotipo disponível, mas o resto do nosso site? E é assim que navegamos aqui mesmo diz Cabeçalho outras páginas, e podemos selecionar nosso logotipo. Então vamos em frente e rolar o seu logotipo em direção e clique em selecionar. Ótimo, nosso logotipo finalmente chegou. O problema é que agora o site parece um pouco feio com um logotipo muito, muito grande no final do dia, isso não é otimizador de conversão, otimizado quando você tem um logotipo muito grande, certo? As pessoas não estão comprando seus produtos para o seu logotipo. Eles estão comprando o que você tem para oferecer. Então o que precisamos fazer é tornar isso um pouco menor. E felizmente com o Reno, otema, não temos que fazer nenhuma edição gráfica. E felizmente com o Reno, o Nós apenas arraste este pequeno controle deslizante e torná-lo menor. Então vamos ver como é o tamanho pequeno. Este tamanho pequeno, um pouco pequeno demais para mim. Então deixe-me ir para 70, talvez isso seja realmente bom o suficiente. Certo? Agora, podemos fazer algumas edições no cabeçalho, certo? Podemos mudar as cores como diferentes cores de textos. Podemos fazer o fundo preto, certo? E podemos fazer o texto para branco. Se, se isso melhorar alguma coisa, certo? Ou com licença, branco. E podemos fazer o fundo preto. Há muitas coisas que podemos fazer. No meu caso. Eu não gosto de ter um fundo preto, certo? Eu não gosto nada disso. Mas, sabe, isso é algo que às vezes as pessoas gostam de fazer. No meu caso, gosto de ter um fundo transparente. Você vê aqui, e isso é algo que vocês viram uma e outra vez. No meu caso, eu vou apenas fazer esta porção Black também. Então o texto será preto, certo? E então nós temos nosso logotipo, nós temos nossos, nossos links, nós temos nossos botões pretos. Ok? Agora temos um banner. Então este banner, isto é projetado dentro da página de coleções, certo? Então, com a nossa página de coleções, estes são os estilos que podem ser editados aqui. Então temos estilo 1234. Então, há quatro estilos diferentes. Estilo um, e vamos apenas ir em frente e vê-lo. Vai lidar com isso como se estivesse todo apertado. Na verdade, não parece bom. Na minha opinião, não se encaixa no design. Como se você vai ter um cabeçalho aqui que não é transparente, você não pode ter estilo um. Styled to é um pouco mais espaçoso, mas muito semelhante a começar um. Estilo três é, acredito que o que tínhamos anteriormente ou sei o que não tínhamos. Estilo quatro era o que tínhamos anteriormente. Se eu selecionar o estilo através, vocês vão vê-lo meio como Enquanto isso, onde é basicamente não são estes, esses ícones e essas imagens não são realmente verticais e verticais como este. Na verdade, são horizontais. Uma vez que a página é publicada, vamos em frente e ver como isso parece muito rápido. Então, parece um pouco com isso. Então, se eu quisesse, eu poderia fazer o fundo, certo? Algo como uma bandeira. Então, se eu fosse selecionar, este é o meu banner, certo? E aperte select. Isso vai carregar meu banner sobre isso e vamos em frente e apertar Salvar. E então ele vai apenas pré-carregar tudo para nós. Está bem. Vamos dar um minuto aqui. Às vezes, como eu disse, as coisas podem demorar um pouco mais. Se as imagens são mais, você sabe, trabalho pesado, então nós vamos apenas clicar aqui ele habilitado imagem de fundo. Só deve demorar um segundo ou dois. Vamos tocar em Salvar mais uma vez. E vocês podem ver aqui esta é a imagem que temos como pano de fundo. E vocês verão que há muitas coisas que teremos que fazer mudanças ao longo do curso aqui. Então, o curso do design do site e por que é isso? Então nós temos nosso logotipo, nós temos nossos textos, mas nós não podemos lê-lo mais porque a forma como nosso banner é projetado. Então nós vamos realmente ter que fazer é fazer algumas edições agora. E se nós rolarmos para baixo, você pode ver aqui que nosso, nosso, nosso, nosso cabeçalho é como escuro e as porcas são texto e nós também não podemos ver. Então vamos ter que fazer algumas mudanças. Ok, então algo que precisamos é que o texto seja como uma cor laranja, laranja claro o tempo todo. Como é que vamos fazer isso? Vamos em frente e voltar para o nosso cabeçalho. Ok? E vamos nos certificar de que nosso cabeçalho nas outras páginas iniciais como esta é laranja. Então vamos apenas para a laranja aqui ou talvez até mesmo selecionar cores que já usamos. E você pode ver aqui agora é laranja, então agora é um pouco mais viável ler em C. Ok, agora se eu rolar para baixo, certo, o que deveríamos estar vendo, deixe-me voltar aqui. O que eu deveria estar vendo é um pequeno cabeçalho, como um cabeçalho pegajoso que vai aparecer em apenas um minuto. Eu só disse, e isso é algo que você vai ter fazer quando você está editando seu tema. Então dê um segundo aqui. Ok, então você vê como ele rola para baixo assim. Agora é visível quando é preto, que é muito, muito limpo. Você vê como o resto do site tem este tipo de design branco transparente por rolar para baixo seu este recurso preto, que parece muito, muito agradável. Ok, então agora as imagens reais aqui, eu tenho que editar essas imagens e eu tenho que ter certeza que tudo isso faz sentido e legível. No meu caso, eu não quero necessariamente ir com este design de coleção, mas para o bem deste vídeo, quero dizer, por que não, certo? Então, como vamos fazer isso? Fazemos isso simplesmente por aqui. Então, se formos para a página da coleção, direita, esta coleção Pedro aqui, e rolamos para baixo até Configurações, configurações do tema. Agora temos a opção de editar cada um desses pequenos botões, eu acho que você pode dizer, certo? E então temos todos os itens, temos acessórios. Eu sei que é um pouco difícil de ler, mas podemos mudar a cor do título que posso ler para que vocês possam ver aqui este botão específico. Tudo bem, então em vermelho, faça isso, digamos vermelho e faça isso ler, escrever. E talvez seja um pouco mais visível. Mas o que posso fazer é adicionar uma imagem. Então, se isso é tudo, talvez eu queira ter uma foto de um homem e uma fêmea nessa imagem, certo? Já que são todos os itens e que pode ser a coleção da página inicial, certo? Se eu quisesse, digamos que vá para a coleção de imagens para homens e eu não teria homens para fora, mudar o logotipo. Diria que apanharam homens, certo. E eu teria apenas uma foto de um cara parado lá. Certo. Talvez esta foto, seja lá o que for, e talvez se for de mulher, certo? Então eu vou mudar isso para feminino. Vou selecionar uma imagem de apenas uma mulher. Talvez seja esta imagem, está bem? E então temos três fotos aqui. Agora, obviamente, ler não vai ser a cor que eu vou escolher. Acho que devemos igualar a nossa marca. Talvez torná-lo laranja ou talvez até branco. Branco pode ser um visual muito, muito limpo. Então vamos com branco e vamos ver como fica. Veja aqui. Desculpe por isso. Ok. Faça tudo branco. E vamos ver, nós podemos realmente nos livrar de algumas dessas, essas diferentes opções aqui. E podemos apenas dividir nossas categorias um pouco mais. Vamos continuar e salvar nosso progresso até agora e ver como as coisas acabam e como elas parecem. Então vamos dar um segundo para carregar. E não deve demorar muito, já que o nosso tema foi desenhado muito bem até agora. A única coisa que eu quero dizer na estipulação é que nem todo tema, como eu disse, tem esse tipo de configuração de coleção. Então você meio que quer procurar por isso. Então você pode ver aqui nós temos todos os itens, acessórios, masculinos, podemos acrescentar, eu vou perder, cometeu um erro aqui. Então, isto deve ser na verdade os produtos masculinos. Então, neste caso, vamos para que esta imagem seja mais masculina. E então vamos mudar este, que não é mesmo eu quero dizer, nós poderíamos fazer acessórios, eu poderia muito bem removê-lo, mas, você sabe, neste caso, nós poderíamos ir com acessórios e nós vamos apenas torná-lo uma imagem. Podemos ir com mulheres aqui e selecionar uma imagem também. Então, selecione este. E por diversão, o último que tem sapatos, podemos mudar isso para, digamos, camisetas, certo? Portanto, estes não são necessariamente diferentes, diferentes que eu recomendo. Só porque, você sabe, você vai querer configurá-lo um pouco mais limpo. E o que eu quero dizer com isso é ter, você sabe, fotos que realmente se encaixam no tamanho do tipo de imagem, certo? O 460 por 560. Então parece um pouco mais limpo. O texto, você vai querer ter tudo uniforme em termos de cor, certo? Então tem que ser se você vai fazer tudo limpar, manter tudo branco. Se você vai fazer, você sabe, o que quer que seja se você for fazer preto, mantenha tudo preto, certo? Então, neste caso, vou ficar todo branco. Então você pode ver aqui, Branco, Branco são as coisas que estavam acontecendo. Podemos mudar a ligação. Então, se eu rolar para cima, nós temos todos os itens, nós temos acessórios. Vou deixar os acessórios onde estão. Vamos fazer uma coleção aqui para dizer que não, não sei. Para os homens, vamos com os fundos dos homens, talvez. E como eu disse, estes não combinam, mas você quer fazê-los coincidir se você vai seguir este caminho. E vamos adicionar links aqui para, você sabe, coleções de qualquer coisa, o que quer que seja. Então, calças femininas da Coleção, algo assim. Vamos bater em salvar. No meu caso, como eu disse, e eu disse isso antes, eu não vou estar indo com esta configuração para o meu tipo de loja design. Não acho que seja preciso apenas a limpeza. Então eu vou com estilo para estilo para é de longe o meu favorito para este específico. Isso não é recomendado para todos. Você sabe, vocês podem gostar de estilo três mais do que estilo UX para você pode estender um. Depende de quem você é e do que gosta, certo? Eu acredito que o estilo e o estilo três levarão a melhores conversões só porque você tem a opção de ver todas as diferentes situações aqui, como roupas masculinas para homens, mulheres, o que quer que seja. Mas como eu disse, você sabe o que quer fazer. E é editado da mesma maneira. Então, se formos para as configurações do tema, é a mesma coisa, certo? Nós editamos em vez de todos os produtos, quem dirá que todos são produtos, certo? Em vez de roupas, vai dizer, digamos homens, certo? Pois, em vez de quatro homens, vai dizer mulheres. Em vez de quatro mulheres, poderíamos tirar isso completamente. Acessórios. Podemos tirar isso completamente também recém-chegados, vamos nos livrar disso. Ou na verdade, você sabe, nós podemos muito bem manter os recém-chegados, mas eu vou movê-lo para cima. Recém-chegados. Podemos adicionar vendas, digamos. Certo, então Sale. Ou autorização. Autorização, soa melhor. Autorização, certo? Ok, e talvez possamos adicionar apenas algumas coleções aqui. Então, coleções, vou adicionar todos os produtos para autorização para os recém-chegados. Eu vou ter uma coleção que pode ser talvez como navegar ou algo assim para as mulheres, nós vamos ter exatamente como todos os produtos femininos. Então, vamos clicar em mulheres e homens. Vamos nos livrar do que temos atualmente. E vamos para os homens. Então Mendel está bem ali. E agora que está tudo lá, temos nossa cor de fundo. Podemos mudar nossa cor de fundo para como um branco puro, tipo como o resto das páginas para que ele se mistura. E no geral, eu acho que isso parece bastante decente. O texto será escurecido, o que parece mais limpo e minha opinião. E sim, acho que isso parece muito decente. A única maneira de editar esta cor laranja podemos editar neste tema configurações como as configurações gerais do tema. Então, a partir da página de coleção vamos configurações de tema. Mas vamos continuar e esperar que isso recarregue e veja nosso novo design. Isso, eu estou muito animado para me livrar desse bar aqui. E deixe-me apenas ir aqui e apenas visualizar o site. E este era o nosso olhar antigo. Então mantive este olhar velho por uma razão. E vamos às compras agora. E podemos ver aqui, é projetado um pouco melhor, então parece um pouco mais limpo no geral. E estes são, como eu disse, todos os produtos que temos Whitman's, então vamos nos levar para os homens, certo? Você pode ver o quão rápido são dois, não é nada como a maneira como você edita o tema, certo? Recém-chegados. Então você vê como tudo carrega tão rápido e liberação. Tudo bem, então onde não poderia seção. Então há muito, há muito que é que precisa ser abordado. Certo? Então vamos em frente e voltar para a nossa página de coleções. Percebemos que há uma imagem vazia aqui. Isto é uma coisa de barra lateral. Então, há muitas coisas que podemos editar. E há, quero dizer, há tanta coisa, certo? Para que possamos. Há um banner de coleção, moderno. Então, o que isso significa? Então, se você quiser habilitá-lo, certo, haverá algumas coisas que você quer levar em consideração. Os caras da coleção Whitney. Há coisas que podem melhorar suas taxas de conversão. Há coisas que tiram suas taxas de conversão, certo? Então se, se eu fosse apenas para selecionar a imagem e vamos apenas dizer que eles querem em 1920 por qualquer coisa. Então, se eu fosse selecionar esta imagem, ou vamos apenas escolher uma imagem diferente para, pelo bem deste vídeo, vamos apenas escolher esta. Ok. O que apertou Selecionar. Tudo bem. E a propósito, temos uma barra lateral da coleção. Enquanto esperamos que isto carregue, podemos muito bem falar sobre isto. Ok? Temos uma barra lateral da coleção. Então, as barras laterais da Coleção estão aqui, certo? Se você estiver na página do produto, ele terá uma aparência diferente. Mas você tem barra lateral, barra lateral esquerda, certo? Eu gosto de barra lateral esquerda geralmente. Mas se não parecer tão bom, podemos nos livrar disso. Tipo, eu não me importo. Vamos clicar em Salvar, que é pré-visualização, como isso parece. Deve demorar cerca de um segundo e podemos ativar uma barra lateral esquerda pegajosa. Então, basicamente, o que isso significa são adesivos onde quer que você se mova, você rola para cima, rola para baixo. Se você estiver em um dispositivo maior, você sabe, ele vai ficar lá. Então, neste caso, não é pegajoso, então não nos move. Mas se habilitarmos a barra lateral pegajosa, então para salvar, certo, ela vai se mover conosco. E vamos em frente e voltar para o nosso, nós também podemos editar o fundo aqui. Então, se quisermos branco, vamos ao branco, certo? Produtos por página, produtos por linha. Há tanta coisa que podemos acrescentar. Então isso é como pegajoso ficaria, onde isso não se move, mas isso se move. E eu só acho que isso é um pouco mais limpo de olhar. Sou o Mike. Eu disse que parece muito decente. Se você quiser. Poderíamos salvar isso. E podemos ver como um produto, certo? E então isso é o que um consumidor normal faria, é clicar em uma página de coleções e eles visualizariam um produto. E eles também teriam os filtros configurados com base no tipo de que v como. Então, se você está dando uma olhada, então eu, tudo o que eu posso ver aqui é o produto agora algo que você vai querer prestar atenção também está aqui. Então esta é a página do produto, certo? Anteriormente eu selecionei que eu quero um cabeçalho transparente, certo? Então, neste caso, o cabeçalho não é mais transparente. Não sei onde está, mas está interferindo com o produto. Então isso vai me fazer fazer mais edições. E quero dizer que, hey, eu não posso ter um cabeçalho transparente. Então eu vou ter que voltar para outras páginas de cabeçalho e apenas remover cabeçalho transparente. E você pode ver aqui que parece muito mais limpo. E se eu voltar para casa, certo? E eu só vejo são páginas diferentes que temos disponíveis para nós. Certo? Então vamos dar um segundo e clicar em. Então você percebe como é transparente aqui porque isso é, como eu disse, é página inicial direita em sua página inicial. Mas se eu clicar na loja agora, certo? Ok, então vazamentos não podem ser abertos dentro do editor, ele será aberto em uma nova janela, tudo bem. Então aí está. Portanto, não é necessariamente mais transparente. Então, espero que isso faça sentido para todos. Se eu quisesse clicar em como digamos Loja Agora aqui deve se encontrar, Leve-me para várias páginas diferentes. Então esta é como a página da coleção e é a mesma característica. Então esta é uma barra lateral pegajosa e não importa qual coleção é, é tudo uniforme por toda parte. E isso é o que nós, o que nós precisávamos. Neste caso. Vou me livrar disso. Nós não precisamos dele. Se vai haver coisas que o seu negócio é meio que te pesam. Você não precisa disso. A configuração. Isto tem a ver com tudo o que o filtro, desculpe-me. Você deseja habilitar o recurso de filtro ou desabilitá-lo, habilitado para ordenar por. Então eu amo esses diferentes recursos como classificar por best-seller classificar por um a Z, preço baixo, preço alto, etc. Vamos clicar em Salvar aqui para que ele se reconfigura. Ok? E ele só tem um olhar limpo em geral. E também podemos mover este banner para baixo. Então nós podemos, nós podemos fazer um monte de coisas aqui. Podemos filtrar nosso acordeão. Então nós não temos acordeão para o, para o Desculpe-me, para, para o, o ordenar por, então o layout do filtro, nós podemos editar tipo de como as coisas funcionam lá dentro. Não vai haver muitas edições no meu lado e na área do Matt. Estas são as diferentes configurações para o filtro. Então, se temos, temos uma loja com etiquetas incolores, então temos preto com roxo, temos qualquer coisa. Você vai querer adicionar certas tags a determinados produtos. Então, a maneira como funcionaria é digamos que este é o sutiã infinito de superfície, certo? Se eu apenas ir aqui para a página inicial do produto e ir para os produtos, tudo bem, e eu procurei esses mesmos irmãos, então eu vou procurar no exterior ou procurar aqui melhor. E eu procuro. Vamos ver onde ele faz aqui. Vamos dar uma olhada. Então este é o verde ou deve ser o quarto verde. E você vê como é verde. Se eu adicionar dentro da minha etiqueta, eu digito verde, certo? Então você pode ver aqui que está marcado agora. Então vamos em frente e salvar isso. E se nós apenas vamos para nossa página de coleções, vamos voltar para, e é assim que ele parecia originalmente, para que ele não se pareça mais com isso. Vou recarregar esta página. E então se clicarmos no feminino, certo, porque é um produto feminino e apertamos o botão verde. Aí está, é verde, certo? Então, todos os produtos têm que ser marcados em cores se você quiser usar isso. E isso vai melhorar as taxas de conversão porque, como digamos alguém só compra roupas pretas, então eles vão ser capazes de clicar no preto e ver a lista de preto. Agora, temos roupas pretas? Nós nos saímos bem, certo? Se formos a todos os produtos, temos camisas pretas aqui, apenas três. E por que eles não apareceram é porque eles não são tatos e essa é a única razão, certo? Então essas são coisas que você vai querer prestar atenção quando se trata de projetar seu tipo de página como suas coleções. Então, tenha isso em mente. Agora, podemos fazer mais algumas edições na página de coleções. Então vamos voltar para a loja online aqui. E vamos bater em personalizar. Tudo bem, e a razão pela qual estamos colocando tanto tempo e esforço em nossa página de coleções é porque queremos que ela republique as vendas. Queríamos, queríamos repos conversões. Queremos que seja benéfico para o nosso negócio, certo? Então vamos apenas bater aqui e vamos dizer páginas de coleção. Está bem. Agora que estamos na página da coleção, vamos apenas fazer uma edição rápida aqui. Vamos para Configurações do tema ou desculpe-me, vamos para a página da coleção, em seguida, vá para Configurações do tema. E vamos apenas olhar para o tipo de coisas que podemos oferecer. Então nós temos um, se você notar aqui há um banner aqui, este é um batedor. Por que isso é melhor importante? Se você tem algo único para oferecer às pessoas algum tipo de desconto algo, é aqui que você vai colocar essa imagem. Então, neste caso, eu só vou estar colando uma imagem aleatória que nós temos. Digamos que eu queira clicar neste, certo? E aperte Salvar. Deixe-me ir em frente e bater Save bem rápido. Então, ele vai aparecer agora mesmo. É isso que você quer colocar como uma foto de produto? - Não. Você não quer estar fazendo isso a menos que estes são como todos os upsells para o que é referido como o principal produto se você estiver fazendo um único produto armazenado. Mas este caso. Eu adicionaria um desconto ou algo assim, algo que possa beneficiar alguém, certo? Então isso é só um widget, certo? Então, é uma tag widget ou seria o seu banner. Então este é seis, que é um banner widget. Se eu quisesse adicionar uma tag widget, eu posso fazer isso. Eu também posso adicionar nenhum. Então eu posso me livrar dessa seção completamente, certo? O que também é bom. E como eu disse, você pode editar todas essas tags diferentes em diferentes configurações adicionando, editando as configurações aqui. Ok, então há muita coisa que você pode fazer com isso. E apenas no geral, apenas mais coisas que você pode editar e configurar. Então isso é algo para prestar atenção. Quando fizerem essas edições, sejam pacientes porque o que estão fazendo aqui é lidar com muita coisa e o consumidor quer ter certeza de que está dando a eles o melhor de suas habilidades. Agora, para fechar a página de coleções, vamos para a nossa parte de trás aqui e vamos clicar no rodapé. Percebemos que os rodapés estão vazios, então precisamos adicionar um plano de fundo. Então, se você olhar aqui quando você clicar no rodapé, não há muito em que você pode clicar, exceto para como 44 para um. Todas essas configurações para rodapé, rodapé estrangeiro um, você vai para Configurações de tema, certo? E você edita essas configurações de rodapé aqui. Então, rodapé um para os dois de três, etc. Mas eu não quero fazer isso. Então vamos para o rodapé para e vamos bater configurações de tema, e vamos apenas selecionar nossa imagem de logotipo. Então esta é a imagem neste caso, certo? E ele deve selecionar, e isso é para a nossa imagem de logotipo, para o nosso rodapé, nós também podemos alterar o tamanho dele. Então, se eu queria torná-lo menor e pode torná-lo menor, vamos apenas visualizar como ele parece. Na verdade, gosto do jeito que parece. E agora, se quiséssemos editar cores, poderíamos fazer isso. Tudo isso está disponível, certo, porque estamos no rodapé um agora. Vamos voltar para aqui. Vamos para as nossas configurações de tema. Está tudo disponível aqui. Então rodapé um e podemos adicioná-lo, como eu disse, nossas cores, podemos editar tipo como as coisas parecem. Então, se eu quisesse ir para cores, nós temos nossa cor principal, cor do corpo, cor média para eu posso ir para Rodapé seis, vamos dizer dar uma olhada no que eles estão oferecendo. Eu posso ir para o rodapé três e ver o que eles estão oferecendo em um design de estilo diferente. E se eu quiser realmente colocar esses estilos à prova, eu teria que ir para, deixe-me ir aqui. Deixe-me dizer que meu trabalho até agora, eu teria que voltar. Vamos voltar. E vamos para esta seção de rodapé e apenas editar tipo o que vemos aqui. Agora, eu não quero a cor cinza, isso é apenas algo que eu quero ser claro sobre. Não quero a cor cinza. Acho que parece um pouco, você sabe, apenas preto eu estou bem em ir com ou apenas branco. Então vamos testar o que parece. E vamos mudar isso para branco rapidinho. E vamos ver como funciona. Se não parecer bom, então, você sabe, eu poderia ficar com o branco. Sim, acho que vou ficar com o branco. Então, neste caso, eu vou ficar com o branco aqui para a cor de fundo, e então o texto será preto para que pareça muito limpo para mim. E o que é que isso salva? E é assim que você edita sua página de coleções para que ela se ajuste ao que você quer e como você quer. Por isso, certifiquem-se de que façam isso antes de continuarmos a construir o resto da loja. 16. Explorando recursos, banners e blogs: Ok, então nesta lição, vamos estar explorando os diferentes banners e as diferentes ferramentas que podemos utilizar dentro do tema para torná-lo um pouco melhor e para adicionar um pouco mais de recursos. Então, só para esclarecer, temos uma bandeira de herói. Temos foi dividir banners que são como um casal emparelhado, certo? Temos os nossos best-sellers. Podemos alterar o imposto, podemos alterar a configuração das imagens. Podemos mudar como tudo é visto, coisas assim. Vamos ver o que mais podemos acrescentar. Temos uma seção, mas podemos adicionar, para que possamos adicionar seções em blogs. Então, se você quiser adicionar seções de blogs, podemos fazer um teste. Vamos em frente e adicionar o blog versão dois. Agora vamos em frente e adicionar a versão do blog de um tipo de comparação da maneira que eles olham. Então vamos ao blog um, que é o que estamos olhando agora. E vamos em frente e apenas selecionar um blog. E vamos bater nas notícias e vamos bater em Salvar. Então esta é a seção do blog, eu acredito que um, que é, vamos apenas colocá-la acima do número dois. Então tudo o que está sendo destacado é considerado seção um blog, certo? Então esta seção aqui é a seção um bloco. Então, idealmente, a maneira como funcionaria é que teríamos nossa lista de blogs assim. E então teríamos um blog principal x disponível aqui mesmo. E nós podemos mudar tipo de como o texto está alinhando Centro, meio, etc. Ou podemos editar o blogue número dois. Então, neste caso, selecione um blog, Vou selecionar Notícias também. E vamos ver como se parece. E, na verdade, é muito parecida. Você pode ver aqui que tem um filme verde quase em torno dele. E como eu disse, podemos editar essas coisas. Podemos limitar a quantidade de blogs que estão sendo mostrados. Então, neste caso, se eu quisesse mostrar, por exemplo, não mais do que dois blogs, certo? Para que eu pudesse fazer isso. Eu posso realmente fazer isso. Então eu queria mostrar, digamos que eu não queria mostrar a categoria ou eu só queria mostrar a data, apenas o título, e talvez um botão, certo, e remover o trecho. Nós podemos fazer isso. Então, há muitas coisas que podemos fazer com blogs. Agora, eu não construí em um blog para isso ficar bem. Mas se apertarmos Salvar aqui, podemos ver como nossos blogs realmente se parecem. Então, há um consumidor olhando através e eles vêem, oh, eu quero ler este blog, certo? Eles vão apertar o botão ler mais e ele vai levá-los para a página do blog. Agora a razão pela qual eu gosto disso é porque o blog parece muito criativo, muito legal, certo? Então você tem um blog aqui, postagem de blog aqui, duas postagens aqui. Temos páginas de artigos, certo? Nós podemos editar as páginas do artigo, nós podemos, e ele mostra as postagens recentes. Podemos fazer um monte de coisas diferentes com, com nossos blogs. No lado direito, temos uma barra lateral direita onde as pessoas podem procurar por certos blogs, podemos procurar certos textos diferentes que surgem. Podemos alternar nossos blogs através de tags, o que é extremamente importante também e ajuda a SEO. Temos o nosso belo cabeçalho aqui que parece bonito. Então, no geral, nós, cada loja na minha opinião, pelo menos precisa de blog, cada loja. E só parece bom. Ele só parece bonito e, e, e, e, e, e ele faz o trabalho feito. Tudo bem, então vamos voltar para personalizar aqui e vamos falar sobre o que mais podemos adicionar além de blocos. 17. Galeria do Instagram: Ok, vamos falar sobre o Instagram. Então você pode ver aqui que nós temos um banner, nós temos alguns banners divididos. A única coisa que resta a fazer que é quase uma necessidade, é navegar nas mídias sociais, nos promover. E isso vai ser feito através do Instagram, certo? E scrim é uma daquelas coisas que cada site ou toda bondade de negócios deve ter em sua página de perfil ou em sua página inicial ou algo assim para se promover. Agora, temos duas opções para o Instagram poder acessar essas duas opções, basta clicar em adicionar configuração, rolar para baixo até em scrim, você vai encontrá-lo. Agora, como eu disse, nem todos os temas são criados iguais. Algumas coisas podem não ter esses recursos, mas isso é algo que você quer prestar atenção ao selecionar seu tema. Agora, com o Instagram, certo? Há a versão 1 do Instagram e a versão 2. Não consigo conectar meu instrumento pessoal aqui. E a razão pela qual eu não posso fazer isso, mas vocês podem é porque meu Instagram é uma conta pessoal do Instagram. Então a primeira coisa que você vai querer fazer é que você vai querer ter uma conta do Instagram de negócios. E quando você fizer isso aqui, você adicionará seu ID de usuário e seu token de acesso. Todos estes são muito, muito fáceis de obter. Basta pesquisar, por exemplo, no Google, pesquisar, ID de usuário do Instagram. E há um software aqui onde você cola em seu ID de usuário assim, ou desculpe-me, seu ID de usuário. Então eu já digitei assim e ele diz, usuário fino. Agora não vai funcionar porque não é um negócio, Instagram. Mas se fosse um negócio e saísse, funcionaria e apareceria com o ID para o token de acesso. Você procuraria no Instagram, certo? Gerador de token de acesso. E ele mostrará como obtê-lo dentro da informação. Então, com o Facebook, eles meio que mostram como acessar o token de acesso. Agora, com isso sendo dito, ok pessoal, algo que nós vamos querer fazer aqui é que vamos querer ver como é um Instagram tipo Galeria. E é realmente muito simples. Então eu puxei para cima a demonstração tema apenas para dar um exemplo, seria o tema exato que eu estou usando. E isso é tipo de coisa do Instagram que eles têm aqui. Então você pode ver que é, é exatamente assim que parece. Então o, basicamente o conceito é que você quer ter imagens e você quer ter como um botão de loja, certo? E tudo isso é criado dentro do instrumento. Ele irá pré-carregar as imagens para você. Certo, então neste caso, se formos para os atletas alfa, Instagram deles, então vamos ao Instagram aqui e revistaremos o atletismo da Frota, certo? Procura Alfa, Salto. Vamos apenas clicar nele. Este seria o Instagram deles e todas essas fotos substituiriam o pedido para essas fotos. Está bem. Então é isso que o Instagram, como eu disse, você quer brincar com ele. Há a versão um e a versão dois. Neste caso, obviamente não vamos incluí-lo. Então podemos escondê-los ou apagá-los completamente. Certo? Agora, podemos adicionar galerias, mas isso será em uma conversa totalmente diferente, em um episódio diferente do Curso. 18. Explorando livros de visual de produtos: Agora vamos explorar um olhar livros. Então, se formos para Adicionar seção aqui, há uma seção onde podemos adicionar um livro olhar. Então, digamos que carregue mais e vamos rolar para baixo. Vamos carregar mais. Olha, os livros estão lá em cima, mas eu só quero rolar para baixo para que possamos ver tudo o que temos disponível para nós. E nós temos um livro de olhar versão um, livro de receitas versão dois. Então eu geralmente não me importo qual entre os dois que você seleciona. Acho que os dois são igualmente. Muito, muito bom. Então nós vamos apenas selecionar o número dois para o bem dele, vamos clicar select aqui. E basicamente o que podemos fazer é adicionar uma imagem de fundo. É a primeira coisa que podemos fazer. Ou podemos apenas adicionar slides diferentes para olhar livro. Então a primeira coisa que eu vou fazer é adicionar um slide e você percebe que há uma imagem aqui. É um 685 por 940. Idealmente, você vai querer ter todas as imagens do mesmo tamanho. Então, se eu fosse selecionar esta imagem aqui, talvez eu escolhesse, ir para um novo slide. Então eu vou querer voltar aqui e adicionar um novo slide e selecionar. E talvez eu queira este, certo? Idealmente, seríamos uma imagem que não usamos. Então, neste caso, usamos esta imagem. Então vamos com este, certo? Ou talvez até, digamos este. Ou podemos selecionar este e depois voltar e, em seguida, adicionar outro slide e adicionar, fazer este como este aqui. Então, algo assim seria um livro de “look”. Agora podemos realmente adicionar qual produto é um livro inválido. Então a maneira que isso funcionaria é que nós temos um produto selecionado e nós olhamos como, digamos que este é o produto. Aperte Selecionar. E você vai ver como um pequeno número um na foto, certo? Neste caso, é a sua própria foto. Então vamos voltar e remover. Vamos para o slide um. Vamos acertar o produto. Aperte Select, e lá vamos nós. Então temos um produto um aqui, certo? Quando as pessoas clicarem nele, haverá um pequeno pop-up. Está bem. E eu vou mostrar a vocês como isso parece em um minuto. Este é, digamos, o produto número dois. Então vamos rolar para baixo o produto número dois e clicar neste professor, certo? E vamos voltar aqui e ir para o slide número três e ir para produto número três e selecionar o produto para o produto número três. Então vamos apenas dizer que é o, este eu aqui. Então você pode ver aqui os números são colados nas imagens. Salvar. E vamos realmente visualizar como tudo isso parece. Então vamos para a nossa página inicial e ela já deve estar pré-carregada para nós. Então vamos rolar para baixo. Ok, claramente não se carregou ainda, então agora ele carregou. Então vamos em frente e recarregar novamente. E podemos ver aqui, lá vamos nós, ele está carregado. Então podemos acertar o número um. E você pode ver aqui que é um pop-up do produto real. Outro pop-up do produto e outro pop-up com o produto. Então você pode ver que eles combinam. Você deseja ter os mesmos produtos correspondentes ao fazer isso, e são todos os produtos que você pode selecionar. Agora podemos editar o texto. Então, se voltarmos aqui e me deixarmos ir aqui, e poderíamos editar o texto. Então, em vez de um livro de primavera, poderíamos escrever um livro de verão e haverá tudo em maiúsculas. E não tem que ser tudo em maiúsculas, a propósito. Apenas como você quer configurá-lo em como você quer projetá-lo. A descrição. Podemos deixar a descrição do jeito que está ou você pode editá-la, ou pode simplesmente se livrar dela completamente. Quando se trata de design, algo que você quer focar é, você sabe, é um tipo de sentido muito criativo. Se você quiser adicionar uma imagem de fundo, podemos adicionar uma. Então, se eu quisesse adicionar como uma foto de, digamos que a academia como fundo. Eu posso fazer isso. Eu recomendo? Não necessariamente. É que, você sabe, obviamente você quer ter algum tipo de experiência, mas você não quer ter um passado como este no próximo passo. Então eu vou mostrar a vocês como projetar um fundo. 19. Crie um fundo de livro de olhar: Ok, então o que você pode ver acontecendo aqui é que eu estou em Canva e nosso objetivo é criar um fundo para toda esta seção aqui no livro de olhar. Então, idealmente como se fosse verão, eu poderia, você sabe, eu poderia ter fotos que se relacionam com um livro de look de verão. Neste caso, vou escrever outono porque me faz sentir como se fosse outono. Então algo que você quer fazer é como ser um pouco criativo. Então algo que eu gosto de fazer e vou compartilhar isso com vocês, é eu gosto de ir a elementos dentro do Canvas e procurar algo como folhas, certo? Ou como queda ou algo assim. E você pode ver diferentes como fotos. Uma queda. Você sabe, você pode adicionar algumas fotos desse tipo ao fundo do seu Look Book. Você sabe, ser um pouco criativo com a aparência e apenas ter uma pequena idéia puxando para cima como a cena de um, como seria. Poderíamos adicionar folhas diferentes, como eu disse, diferentes. E podemos mudar as cores de sua aparência. Então podemos adicionar uma laranja bem aqui. E podemos fazer isso como um marrom, certo? Então podemos fazer isso como um marrom. E podemos duplicar esta imagem. E podemos torná-lo maior ou menor. E o ponto com isso é apenas, você sabe, apenas ser criativo. Esse é realmente o conceito todo. Será que esses fundos, você não tem que configurá-lo de uma certa maneira ou, você sabe, projetado de uma certa maneira. Mas, você sabe, as pessoas gostam da personalização e ter um site bonito em parte de ter um site realmente, realmente interativo e bonito é a maneira como ele se sente, a forma como os projetos, você sabe. Podemos duplicar isso e meio que fazer cores diferentes. Então poderíamos fazer como uma leitura, escrever como para como um Redleaf com quase como um, um, um, um preto aqui. E podemos multiplicá-los. E podemos lidar com eles de forma diferente, certo? E mova-os ao redor. E apenas fazer algo que pareça algo assim representa queda ou apenas um fundo que eu pessoalmente gostaria. Certo? Não tem que ser o mesmo por todo o lado. Então eu posso fazer com que este seja como uma folha amarela, certo? Podemos adicionar mais cores amarelas. Talvez eu goste deste tipo de folha ou deste tipo de folha, certo? Talvez eu queira fazer um pedaço vindo assim e apenas duplicar isso. E basta arrastar, arrastar e criar como uma pequena animação. Onde eu arrumei isso. Isso, como essa motivação para fazer isso é que eu estava olhando dentro de diferentes demonstrações temáticas e eu vi que eles faziam coisas assim. E eu pensei, ei, isso é como uma coisinha interativa e legal que você poderia fazer para o seu site. E você sabe, quem não iria querer fazer isso se isso faz com que o site pareça um pouco melhor, certo? Então algo assim, torná-lo um pouco menor e movê-lo para o lado. Sabe, estou dizendo para não ter que ser o mesmo o tempo todo. Então temos folhas de correr. Tudo bem, algo representa queda. Ok? Ou talvez apontar para este. E você pode ver aqui que parece muito decente. Podemos duplicar isto, certo? E fazer com que pareça com isso. E mova algumas coisas para cá. E então podemos baixar isso. E vamos baixá-lo como um arquivo transparente. E nós não baixamos necessariamente como um transparente, mas na verdade depende de você. E vamos arrastá-lo e soltá-lo aqui. Vamos ver como pode parecer bonito. Então, lá vai você. Olha como isso parece limpo. Sabe, parece muito, muito legal. E, dependendo do tamanho do dispositivo que você possa ter, se você estiver em dispositivos móveis, o look book será um pouco diferente. Veja, agora ainda não criamos as configurações para dispositivos móveis, mas vamos trabalhar para isso apenas alguns minutos. E eu tão claramente parece muito, muito bom. Então vamos passar para o nosso próximo aspecto. 20. Branding, coleções, FAQs e galerias: Certo, então um dos próximos aspectos das coisas que podemos falar é o recurso da marca dentro do tema, certo? E este não é apenas este tema. Outros temas também têm isso. E a marca apresenta um lugar onde você pode mostrar dentro do seu web design a marca ideal que você engloba ou que você tem algo que você pode mostrar. Um lugar para fazer isso é bem aqui. Então é assim que parece. Você pode fazer grande, muito criativo com isso. Isso não é algo que eu uso pessoalmente nos meus projetos, mas você pode utilizá-lo nos seus. Você sabe, se você tem diferentes benefícios para sua loja, como frete grátis ou frete rápido ou uma garantia de qualidade de algum tipo. Este é um lugar onde você pode fazer qualquer tipo de promessas, você sabe, apenas adicionando os pequenos ícones, certo? Então, isso é algo que eu usaria pessoalmente? Provavelmente não. Mas, sabe, se isso é algo que vocês querem fazer, agora vocês sabem como fazer, certo? Podemos dar uma olhada em algumas coleções. Então basicamente a forma como as coleções são apresentadas é um pouco diferente e cada situação é um pouco diferente. Então vamos em frente e adicionar cada recurso de coleção. Então temos coleções sub um, coleção, sub2, coleção, sub três, coleções de cinco. E vamos para a coleção sub versão um ou versão quatro. E vamos a outro da coleção sub um. Ok, então isso deve ser bom. Tudo bem, agora, isso é muito na nossa loja. Ainda não carregou. Então, o que vamos fazer é eu só vou apertar Salvar, ok, e apenas esperar que isso salve. E então vamos nos aprofundar como editá-lo e tomar, dando uma olhada no que os recursos podem fornecer um então agora que tudo está carregado, isso parece um monte de bobagens. Então vamos em frente e dar uma olhada no que realmente parece. Assim, podemos selecionar coleções para promover. Então, se eu quiser escolher como a coleção de garotas, certo? E aperte Select, essa é uma coleção que tecnicamente posso promover. Tudo bem, se eu quiser selecionar outra coleção, digamos leggings. E vamos dizer mais uma seleção de como vamos escolher os produtos de outra mulher. Então vamos escolher o nadador. Ok. Temos três coleções lá. Tudo bem, vamos voltar. Agora. Podemos adicionar migalhas de pão e coisas assim ou, sabe, mas não vamos nos preocupar com isso. Nossa análise atingiu Salvar. Ok. Vamos esperar que isso carregue. Vai demorar um minuto, porque isso é um monte de conteúdo. Mas o que você está vendo aqui é que ainda é cinza, como se não mudasse. Mas a razão pela qual não está mudando é porque não temos imagens para as coleções específicas. Ok? Vamos querer adicionar imagens para a coleção que projetamos. Certo, então criamos um pouco de foco ou ponto focal para nossas coleções. Digamos que eu queira ter esse passado e isso é apenas para, como eu disse, propósitos experimentais para eu ir em frente e descrever como os dedos parecem, certo? Então você tem esse pequeno estandarte, certo? Você vai querer adicionar um banner e você tem os produtos embaixo dele. Agora, por que não aparece nada? Bem, há duas razões. Número um, ainda não carregou, e número dois. Não adicionamos imagens a essa coleção específica, então vamos dar um minuto para salvar, certo? E vamos em frente e apenas visualizar a página web real. Faça tudo de novo. Tudo bem. Vê como as coisas mudam, certo? E você pode ver aqui que é o mesmo conceito. Então o que vamos ter que fazer é este 55558 por 700 é onde podemos adicionar imagens. Agora, você pode ver aqui, não há lugar para Adam aqui. Como se eu escolher aqui, não há lugar para Adam aqui. Mas o que eu posso fazer é ir e acertar editar coleção, certo? E com esta coleção de edição, tudo bem, vamos puxar a coleção. Precisamos adicionar uma imagem de coleção. Então eu sou como Nós tivemos anteriormente diferentes imagens de coleção para que possamos adicionar uma imagem de coleção para cada seção. Vamos bater em Salvar. Tudo bem, vamos voltar para todas as coleções. Nós temos. Quais eram as outras coleções que discutimos? Tínhamos Bras, tínhamos nadador. Então vamos para algum lugar. E vamos adicionar uma foto de, vamos, vamos, vamos fazer dessa maneira. Vamos apenas adicionar algumas imagens padrão. E, claro, essas não são as imagens que necessariamente usamos, mas você sabe, isso funciona bem o suficiente para nós. E vamos apenas recarregar isso, meio que prepará-lo. Então você pode ver aqui, é como um ponto focal. Vês o que estou a dizer? Então isso é algo que eu necessariamente faria? Provavelmente não, só por causa do design. Eu não acho que eu faria isso ruim. Importante no site onde ele precisa ter uma página inteira, do jeito que é. Há momentos em que você teria algo assim talvez, você sabe, eu estou dizendo como leggings, digamos aqui. E às vezes isso muda uma vez que você tem todas as imagens. Mas vamos apenas dizer que vamos com esta imagem para as leggings. E vamos bater em salvar. E vamos refrescar isso de novo. Você sabe, obviamente é ideal também. Quero dizer, você poderia usá-lo. Você só tem que ser criativo quanto a como você usaria algo assim. Claramente, não é algo que eu usaria e eu meio que expliquei isso antes. Mas como eu disse, você sabe, fazer o que flutua seu barco quando se trata de design, isso é algo que eu usaria? Provavelmente não. Então eu vou me livrar dessas coleções. Você pode, você pode mostrá-los. E coleções diferentes têm benefícios diferentes por sinal. Então, você sabe, se você pode, você sabe, você pode querer adicionar três coleções por linha, por exemplo. E isso mudará completamente o visual. Então não é necessariamente, tem que ser uma página inteira. Pode ser algo assim, certo? Então, cabe a você tipo de como você quer configurá-lo. Não é necessário ter uma certa configuração, mas podemos, só por diversão, mostrar a vocês como é para os três. Então deixe-me selecionar os mesmos aqui. Temos bronze. Temos, vamos voltar. Nadamos para onde? Deixe-me selecionar isso. Esta é a próxima versão da coleção, holofotes. Tudo bem. E nós temos mais um, nós temos atraso. Então são três bem ali. E podemos fazer essa configuração de como, digamos, três por linha. Então, parece semelhante. Então você pode ver aqui, é um pouco diferente. Parece semelhante, mas não é. Vamos para a coleção número cinco. Vamos fazer a mesma coisa. Certo? Então, navegue. Vamos voltar aqui. Vamos selecionar três coleções. Temos leggings e temos nadador. Certo? Então isso é semelhante, certo? Você pode ver aqui eles são todos tipo de semelhante dependendo do design, mas há certos projetos que eu iria com. Certos projetos que eu não faria. Isto é tipicamente algo que eu usaria talvez de vez em quando. Sabe, não é algo que eu faria o tempo todo necessariamente. Mas o benefício é que ele irá levá-lo para a coleção real com a qual ele se correlaciona, que é um design de benefício. Cabe a você como você meio que quer configurá-lo. Mas vamos voltar e personalizar aqui. Vamos nos certificar de que isso não está mais disponível em nosso site. Está bem, é. Então, podemos nos livrar deles. Então remova, tipo de movimento. Agora que sabem como fazer isso, a boa notícia é que podem fazer quando quiserem. Então essa é a boa notícia, certo? Então vamos em frente e apenas remover isso também. Mesmo que pareça bom, mas vamos removê-lo. Alguns outros recursos caras é que podemos adicionar uma seção sobre nós. E como eu disse, é meio que até você adicionar isso sobre nós. Não é algo que eu faria. O que vocês estão vendo são diferentes características que podemos ter. Podemos adicionar, você sabe, uma página de perguntas freqüentes na página de checkout real, certo? E podemos editar as perguntas mais frequentes. Podíamos fazer muitas perguntas frequentes à esquerda, certo? Então estas são todas as perguntas que estão ocorrendo. Podemos selecionar um plano de fundo, podemos desativá-lo para. Então, algo assim. E isso é basicamente, quero dizer, isso é algo que eu incluiria na minha página inicial. Podemos incluir mais algumas outras coisas, como um mapa. Não temos uma grade de galeria. As grades de galeria são muito, muito legais. Gosto de grelhas de alho e quase mostro a vocês como essas imagens parecem. Tudo bem? Tão importante que todas as suas imagens sejam do mesmo tamanho para uma grade de galeria. Tudo bem? Algumas imagens são claramente maiores do que outras, mas você quer que elas sejam do mesmo tamanho para que tenham um visual uniforme. Vamos em frente e adicionar um pouco mais. Vamos em frente e adicionar outra foto no meio aqui. Vamos ver o que vai ficar bonito. Por cima de tudo. Talvez algo assim. Certo, então claramente não é do mesmo tamanho. Algo que vou fazer é editar esse tamanho. Então talvez fazer isso não pode ser uma imagem diferente. Sim, pode ser uma imagem diferente. Então, algo assim. Talvez, você sabe, tipo como você quer projetá-lo. Então, sim, vamos ver aqui o que podemos fazer. Você quer fazer? Definitivamente testar imagens diferentes e cada galeria, By the way, as pessoas podem clicar, ver, direita, zoom in , zoom out, passar para a próxima imagem, zoom in, ir para a próxima. Então isso é algo a ter em mente. Temos a seção de e-mail aqui adicionada após as perguntas freqüentes, que é outro recurso que você pode adicionar, certo? Então você pode remover isso eu, em termos de design, eu manteria isso, você sabe, apenas pela característica dele. Editando o texto muito, muito auto-explicativo, certo? Em vez de nossa galeria de fotos, talvez dar uma olhada e o que oferecemos algo assim. E deixe-me apenas ter certeza que eu soletrar está certo. Isso é algo que talvez queiras fazer também. Você também pode mover o texto completamente. Então, se você quiser que ele desapareça, você pode fazer isso. Mas neste caso, eu só vou escrever Galeria, colocar um ponto final, salvar. Portanto, há coisas diferentes que você pode fazer com diferentes recursos. No geral, se eu fosse configurar os requisitos. Há coisas que você deseja ter em sua loja da Shopify como requisitos, e é isso que vamos fazer, vamos falar na próxima lição. 21. O que são requisitos de loja Shopify: Então, entre todas as características diferentes, haverá algumas coisas que serão necessárias para cada loja, em cada loja deve tê-las, certo? É justo dizer que todas as lojas devem ter certos requisitos, certo? Quando esses requisitos, vou expô-lo aqui e agora, todas as lojas precisam ter um herói Banner. Cada estandarte de herói deveria ter algum tipo de promoção. 40% de desconto, 20% de comprar um, obter um frete grátis, qualquer que seja o incentivo, deveria ter, certo? Cada loja deve ter um banner dividido assumindo que os produtos não são os mesmos, as coisas estão sendo vendidas. Cada loja deve ter um Banner dividido. Cada loja também deve ter um produto para grelhar. Isto é, você sabe, seção para que as pessoas possam selecionar o que querem dentro da grade de produtos. Ele só adiciona para mais personalização. E também os blogs devem estar disponíveis, isso é opcional. Mas olhar livros também são opcionais, agradáveis ou as coisas que estão indo para enviar sua loja para o próximo nível. Se tudo assim estiver disponível na primeira página, você vai muito difícil converter e adicionar esses diferentes benefícios à sua loja que intrigou as pessoas. Agora, também, cada loja deve ter algum tipo de Adicionar ao carrinho dinâmico. Então, se eu fosse para vir aqui , digamos Clique no produto, certo? E digamos que o tamanho pequeno para o carrinho. Você pode ver aqui que eu posso ter upsells disponíveis para mim. E há também um checkout para que eu possa prosseguir para o checkout e prosseguir o checkout. Vamos me levar direto para o caixa. Não é algo que eu queira fazer, obviamente. Mas você entende o meu ponto aqui. Isso é chamado de checkout de um passo. Por que as verificações de um passo realmente importam? É muito, muito simples. Uma vez que a criança vai aumentar a sua taxa de conversão. Porque as pessoas querem algo de verdade, vão clicar no Checkout e vão direto para o checkout e vão pagar. Está bem? Isso é importante. As pessoas esquecem disso, mas isso é importante. Mas, no geral, este é um curso de design. E espero que agora, especialmente no projeto. Depois de concluir o projeto, você estará pronto para projetar lojas imediatamente. Então, é algo que você quer fazer é que você tem banners. Está bem? Você é, e especialmente no projeto, apenas leia a explicação do produto. Você vai ter um banner, você vai ter um banner dividido. Você vai ter uma categoria de produto. O que eu quero que você faça é que eu quero que você tire screenshots de cada um que você criou e enviá-lo através do projeto. Está bem. Parece bom. Parece bom. Então todo mundo vai fazer isso. E isso vai ser o mínimo absoluto para todo mundo loja, eu entendo que algumas pessoas não querem estar acima e além com a criação e criação de páginas de perguntas freqüentes e coisas assim. Mas isso é algo que todos deveriam estar fazendo. Tudo bem, vamos entrar nisso. Então boa sorte com o projeto. Conclua o projeto submetido. Claro, se você tiver alguma dúvida, sinta-se à vontade para fazê-las. Tudo bem. Vejo-te. 22. Como criar um popup de carta de notícias: Vamos falar sobre como criar um pop-up de boletim informativo. Ok, então a primeira coisa que queremos fazer é ir para a loja online e queremos personalizar novamente. Ok. Agora, o que é um problema de boletim informativo? Propriedades do boletim informativo, apenas uma pequena caixa que aparece dizendo, você sabe, algum tipo de mensagem de incentivo promocional em troca de um e-mail. E a razão pela qual todo esse conceito é importante, certo? E, na verdade, apenas piscar a tela. A razão pela qual todo esse conceito é importante no mundo dos negócios é porque quando as pessoas visitam seu site, nem sempre estão interessadas em comprar seu produto imediatamente, certo? Eles podem estar interessados em comprar mais tarde, uma hora depois ou um dia depois. Talvez estejam à espera de um desconto especial, certo? Existem diferentes tipos de identidades de compradores, mas pelo menos o pop-up do boletim informativo nos permitirá capturar o lead e ser capaz de interagir com esse lead um pouco mais relater. Então, se nós apenas vamos até aqui para as nossas configurações de tema, certo, e para chegar às nossas configurações de tema, nós apenas vamos para baixo. Acerte configurações de tema. Há configurações diferentes que temos, certo? E então uma das configurações que estamos realmente procurando por caras é o popup, certo? E não barra superior, mas tema Popup aqui. E assim podemos optar por habilitá-lo. E queremos adicionar uma imagem para o, para o pop-up. Então vamos selecionar uma imagem e pode ser qualquer imagem. Então pode ser uma imagem, digamos assim, que apenas representa a marca. Bem, talvez até assim possa ser um pouco melhor. Vamos apenas ir em frente e esperar que ele carregue. Está bem. Podemos até adicionar um logotipo a ele. Eu tecnicamente não adiciono logotipos a ele. Acho que fica mais limpo sem o logotipo, mas vocês podem tomar essa decisão sozinhos. E vamos apenas esperar que ele carregue vai bater salvar. E então o que vamos fazer é tudo o que vamos fazer é apenas ir pré-visualizar o site. Então eu vou digitar o domínio do site aqui. Então eu vou atleta remixado meu Shopify.com. Eu posso até ter que levantar sim, eu vou ter que fazer isso em uma guia anônima. Então alpha leet re-mix dot minha loja phi.com. Vamos ver um pop-up. Lá vamos nós. Então o pop-up vai ficar como este. Diz “Junte-se à nossa lista de discussão”. Podemos adicionar algum texto pré-requisito ali, e as imagens aqui para representar a marca. Então, por que fazemos isso? Como eu disse, fazemos isso para capturar e-mails. E agora cada pessoa que está assistindo isso sabe exatamente o que fazer para criar um pop-up. 23. Como criar uma página em contato com contato com o contato: Uma vez que agora sabemos como criar pop-ups, algo que precisamos saber como criar uma página de perguntas frequentes entre em contato conosco página todas essas páginas diferentes que discutimos antes. Bem, para fazer isso, precisamos ir até aqui para o botão de páginas. Ok? E você pode ver aqui que eu não tenho páginas criadas. Tenho que criar essas páginas na Shopify, certo? Então eu vou apertar Adicionar página aqui. E o que vou fazer é dar um nome à página. Digamos que é um Fale Conosco, certo? Queremos um lugar onde nossos consumidores possam entrar em contato conosco. E nós só vamos até aqui para nos contatar. Podemos selecionar a versão um ou a versão dois. Vou selecionar a versão um, direita, e clicar em Salvar. E podemos realmente visualizar como isso parece. Então, se visualizarmos a loja online, certo, boom, lá vamos nós. Então podemos adicionar um banner, certo? E podemos adicionar um contato conosco. Vamos dar uma olhada em como é o número dois. Então, para mudar do número um para o número dois, basta selecionar o número para escrever Fale Conosco versão dois. Vamos clicar em salvar, e vamos em frente e clicar em pré-visualização aqui. E isso é um pouco diferente. Você pode ver aqui que há algum texto. Há algumas informações aqui, alguns nomes e mensagens de e-mail, e também o banner. Então cabe a você tipo de estilo que você gosta para a simplicidade. Para fins de simplicidade, eu gosto da versão um. Foi um pouco mais fácil. Tira a dor de cabeça do cliente sobre se preocupar com sua localização, coisas assim. E eles poderiam apenas visitar você descer uma mensagem imediatamente. 24. Como criar páginas personalizadas: Ok, então agora que aprendemos como criar uma página de contato conosco, você pode ver aqui há muito mais páginas que podemos criar. E então isso é algo que vamos realmente querer fazer. Então vamos em frente e voltar aqui e vamos criar uma página de lista de desejos. Então, basicamente, o que é uma lista de desejos é se eu apenas ir em frente e digitar o site aqui, afiliado remixou meu Shopify.com. Você pode vê-la nos produtos. Há um pequeno botão de coração, certo? E para que as pessoas possam salvar um produto na lista de desejos, eles têm que apertar este pequeno botão de coração. Mas se eu clicar nele, você pode ver aqui ele apenas recarregou o site. E isso porque não há uma página de lista de desejos verdadeira. Se houvesse uma página de lista de desejos, me levaria a um lugar onde eu pudesse criar uma conta, certo? Assim que eu criar a conta, ela me mostrará minha lista de desejos. Então eu vou ter que criar uma página de lista de desejos. Vou ligar para esta lista de desejos, está bem? E então eu seleciono lista de desejos aqui e clique em salvar. E não tenho muito que escrever ou tenho que fazer. Tudo está embutido para mim. Se eu apenas ir em frente e ver a página, ele vai me mostrar como é a página da lista de desejos, certo? Então diz por favor, registre-se agora. Então, obviamente, eu não estou registrado. Então não há nada que vai ser mostrado. Mas se eu sou consumidor e guardei algumas coisas e quero voltar a isso. A página da lista de desejos vai estar lá. Eu costumo achar que as listas de desejos não são usadas com tanta frequência no mundo de hoje. No entanto, eles ainda são usados, certo? Então, se você é uma grande empresa com milhões de tráfego todos os meses, definitivamente pode ser usado, certo? Como se você obter um milhão de tráfego, você pode esperar um 40 a 50 mil pessoas usam a lista de desejos, mas eles definitivamente não são usados com freqüência escrever de volta e 050 para as pessoas usariam lista de desejos o tempo todo. Mais da metade do tráfego do seu site estaria salvando lista de desejos e salvando os produtos para mais tarde. Normalmente, descobrimos que quando a marca é um pouco maior e há mais pessoas que vêm para essa marca. Quanto mais a lista de desejos será salva. E você escreve, você quer ter seu site quase como uma marca registrada para as pessoas, mas eles continuam voltando consistentemente para dados, informações, novos produtos para comprar, e assim por diante. 25. Como editar páginas personalizadas: Certo, então algo que queremos fazer é editar nossa página sobre nós. E se você notar aqui no menu suspenso, não há necessariamente página para isso. Então, a maneira como fazemos isso é adicionar as páginas ao menu em cima, certo? Então, se eu estiver no local de personalização para o tema, adicionamos as páginas ao menu na parte superior. E se eu quisesse personalizar algo como a página Sobre Nós são contacte-nos página ou qualquer tipo de páginas terciárias, certo. Isso são como Perguntas Frequentes ou algo assim. Eu iria apenas clicar na página real. Ele nos mostrará os dados dessa página. Clique no botão entre em contato conosco e editado para que eu possa editar isso como eu posso selecionar uma imagem de fundo. Então, mais uma vez, se eu quiser selecionar, digamos a foto da academia que eu tinha. Então, digamos que esta é a foto, certo? Eu posso ter esta foto e ela vai dizer algo como entrar em contato conosco. Mas, idealmente, eu gostaria que fosse uma versão mais leve do texto. Então eu teria que ir para minhas configurações e fazer essas edições, mas você pode fazer as alterações para o Banner real. Então talvez eu precise de algo um pouco de cor clara. Então eu não tenho muitos banners aqui, mas este é apenas um exemplo rápido. Então, se eu cliquei em algo assim, você pode ver aqui ele diz entrar em contato conosco agora esta não é necessariamente a imagem que eu usaria a menos que eu estou promovendo nadador. Mas vocês meio que entendem o ponto certo. Então você não quer ter uma imagem como esta porque ela vai sair pixelada, certo? Essas fotos não foram projetadas para isso, certo? Você pode ver aqui eles são todos pixelados. Há apenas pixelado porque eles não são projetados para o tamanho do banner. Eles são projetados para tamanho de foto, certo? Então você quer encontrar banner que se adapte aos critérios da página. Então, neste caso, temos texto preto. E teríamos que ir para as principais configurações de tipografia e cores para mudar isso. Mas, você sabe, você pode escolher, você sabe, qual faixa você quer, certo? Então, se você quiser apenas remover o banner e selecionar como uma imagem livre que eles têm disponível. Então se eu digitar Jim Wright e quiser algo de canhão de cor clara como este, certo? Isso funcionará da mesma maneira. Então, quero dizer, há, há um monte de coisas que podemos fazer. Podemos fazer isso meio assim, certo? Então, isso ainda parece melhor na minha opinião, bater salvar. Ok, e não há todo o tempo em que eu usaria minha própria imagem personalizada. Quero dizer, eles nos dão imagens grátis. Mas como eu disse, você poderia fazer a mesma coisa e nós vamos fazer isso bem rápido com a página sobre nós só para que todos possam ver e isso pode, todos podem entender. Então aqui temos o banner Sobre Nós e temos diferentes como texto de suporte. E então temos as razões para a seção de compras. Temos uma seção do Instagram. Tudo isso está dentro deste botão bem aqui. Diz sobre nós e podemos realmente fazer alguma edição. Então temos a imagem de fundo mais uma vez. Digamos que queríamos usar esta imagem para falar de nós, certo? E, obviamente, esta não é uma imagem que vou usar. Vou usar algo mais como um banner de algum tipo que promova a marca ou algo assim. Mas talvez se eu digitasse 4K fora, isso faria com que fosse um pouco mais sentido. Vamos ver aqui. Se eu clicar nesta imagem, como eu disse, você tem que tipo de prestar atenção em que tipo de banner você está selecionando e ter certeza de que ele parece bom em geral. Vamos ver aqui você pode editar algum texto, adicionar algumas imagens. Então temos um então se você olhar aqui para o texto, ele diz Justin, o que quer que tudo isso não está aqui. Na verdade, está bem aqui. Então, serviço número um, certo? E assim serviço número um, serviço número dois, a introdução. Então eu quero editar a introdução. Eu chamaria, digamos, nossa equipe ou algo assim, certo? Nossa equipe. Talvez mudar a descrição também sobre nós. Certo? E, em seguida, acrescenta, você sabe, alterar o texto aparecer que é perfeitamente bom, e selecionar uma imagem para a equipe. Então talvez não seja como uma imagem como esta. Seria como uma imagem relacionada com uma equipe com um monte de pessoas. Então vamos encontrar o único bem rápido. Então talvez algo assim, certo? Gostaria de mais de uma pessoa. E isso realmente funciona muito bem para lojas que têm páginas sobre nós para ter mais de uma pessoa dentro das fotos e apenas tipo de show como a empresa e as pessoas. Sabe, há muitas coisas que você pode fazer. Talvez eu me livre dessa parte de introdução, certo? E então sim, é isso mesmo. Como se fosse, é bastante auto-explicativo personalizar este tipo de páginas. Mas, no entanto, se vocês querem fazer algumas personalizações, agora você sabe como fazer em suas páginas personalizadas.