Personalização de temas no Shopify — Crie uma loja virtual na Shopify sem programação

1. Apresentação: Se você deseja criar um site da Shopify sem contratar uma equipe de designers e desenvolvedores, esta aula é para Se você nunca viu meu rosto antes, meu nome é Christopher Dodd Sou um dos melhores professores aqui no skillshare.com e especialista em desenvolvimento da Shopify Trabalhando com a plataforma Shopify desde 2019. Nesta aula, mostrarei o processo transformar sua marca de comércio eletrônico em uma loja Shopify bonita e responsiva para dispositivos móveis sem precisar aprender ferramentas avançadas de web design, como Figma ou tocar no código interno do Em vez disso, vamos nos concentrar na abordagem nativa da Shopify ao design sem armazenamento de código O editor da loja online. Nesta aula, abordaremos os principais componentes de uma marca de comércio eletrônico e criaremos um comprador por loja do zero usando as seções existentes em nosso tema Ao final da aula, você terá uma vitrine funcional que poderá ser usada para lançar sua própria marca. Vamos começar. 2. Prefácio: Então, como mencionei na introdução desta aula, vou guiá-lo pelo processo de transformar sua marca de comércio eletrônico em uma loja Shopify bonita e responsiva para dispositivos móveis usando o Editor da loja online, e vou fazer isso usando essa marca falsa da Macha essa marca falsa Como você pode ver aqui, eu já tenho todos os meus ativos prontos para uso. Se você quiser acompanhar exatamente os mesmos recursos, deixarei um link aqui nesta aula para você baixar exatamente os mesmos arquivos. Se, no entanto, você quiser acompanhar sua própria marca, eu o encorajo a organizar os ativos de sua marca e imagens do site em um local que você possa acessar facilmente, como fiz com esta pasta para minha marca falsa Sans Você ainda não chegou a esse estágio de desenvolvimento da sua marca, pode usar uma ferramenta como o ov At, que é uma ferramenta de IA que pode ajudá-lo a desenvolver uma marca do zero. Como você pode ver aqui, todos os ativos na minha pasta aqui foram gerados a partir do aplicativo Lovart E se você quiser saber exatamente como eu fiz isso, confira meu vídeo gratuito no meu canal do YouTube. Mas, independentemente de você usar os ativos da minha marca ou os seus, certifique-se de preparar essa pasta com antecedência, pois é isso que usaremos como base para o design de nossa vitrine no Shopper A segunda coisa que quero mencionar aqui é que obviamente existem recursos diferentes na própria plataforma Shopify que são usados para ajudar a criar a vitrine Além da personalização do tema da Shopify em si, você precisará adicionar alguns produtos à sua loja e organizá-los em coleções, Falaremos sobre alguns dos outros recursos da Shopify nesta aula Mas se você é totalmente novo na Shopify, primeiro vai querer se familiarizar com a plataforma Se ainda não o fez, recomendo que você faça minha aula de configuração de loja da Shopify aqui no Skillshare antes de fazer esta, pois ela fornecerá uma visão geral de como a plataforma funciona antes de mergulharmos especificamente na antes de mergulharmos especificamente Ally, como eu também mencionei na introdução, vamos criar uma vitrine na Shopify nesta nesta Para evitar totalmente o código, selecionaremos um tema pré-criado da Shopify na Loja de temas da Shopify da Shopify Esses temas podem ser considerados coleções de módulos pré-construídos que podemos usar como blocos de construção no Editor da loja online É importante observar aqui que esses blocos de construção dependem do tema com o qual escolhemos começar, e esses temas vêm em uma variedade de faixas de preço. Embora existam vários temas gratuitos que podemos usar, teremos mais opções de qualidade no Editor da loja virtual usando o que é chamado de tema premium. Em outras palavras, um tema pelo qual temos que pagar. Dito isso, os princípios que ensino nesta aula são universalmente aplicáveis a todos os temas E, como veremos nesta aula, podemos realmente começar a brincar com as seções e criar nossa vitrine no modo de teste, o que nos permite testar quantos designs quisermos antes de lançarmos esse tema Então, para resumir antes de começarmos , primeiro, prepare sua pasta de ativos de marca e, em segundo lugar, familiarize-se com a plataforma da Shopify Se você ainda não o fez, vá em frente e faça isso, e eu te encontrarei no próximo vídeo. 3. Utilização de um moodboard: Neste vídeo, discutiremos o moodboard, que, como diz aqui, é o processo de criar uma coleção visual para definir a direção, a estética ou o tom emocional de um projeto criativo Basicamente, o que estamos tentando alcançar nesta etapa, que podemos fazer um pouco mais tarde se você quiser adiar e realmente começar a colocar seus produtos em sua loja agora Isso é algo que podemos fazer ao longo nossa jornada como marca na Shopify é podemos constantemente nos inspirar outros sites e aprender o que eles estão fazendo, que podemos fazer um pouco mais tarde, se você quiser adiar e realmente começar a colocar seus produtos em sua loja agora. Isso é algo que podemos fazer ao longo de nossa jornada como marca na Shopify é que podemos constantemente nos inspirar em outros sites e aprender o que eles estão fazendo, o que pode seja eficaz, o que pode funcionar para nossa marca e incorporar isso em nosso próprio site. Portanto, obter inspiração em outros sites não é algo que fazemos uma vez, e está tudo pronto. Precisaremos constantemente analisar nossos concorrentes e ver o que eles estão fazendo. Na verdade, também podemos nos inspirar em sites de diferentes nichos, mas definitivamente em lojas que vendem um produto semelhante a nós, definitivamente queremos ver o que elas estão fazendo e possivelmente usando em nossa própria marca Assim, podemos encontrar outras marcas em nosso nicho. Idealmente, você saberia quem são seus concorrentes em seu nicho. Mas se precisar de ajuda com isso, você pode usar o Google ou um LLM como o Gemini para perguntar quais são seus principais concorrentes ou quais são as melhores ou mais populares marcas em seu espaço Então, a marca de exemplo para esta classe Skillshare é uma marca de mata, então vou pesquisar pó de matcha online E agora podemos ver um monte de sites otimizados para mecanismos de pesquisa surgindo. Talvez queiramos restringir isso ao nosso mercado específico. Então, como australiano, talvez eu queira colocar a Austrália aqui. Ou se você for americano, substitua isso pelos EUA. Você pode restringir isso o quanto quiser. Vou usar o Google Gemini, então vou dizer aqui quais são as principais marcas de matcha que vendem on-line, quais são as principais marcas de matcha que vendem predominantemente por meio de uma loja on-line Está me dando uma dessas opções A, escolha Bs. Sim, tem um monte de nomes em cada lado aqui. Então, muitos deles são muito japoneses, mas se olharmos para a marca O, ela é um pouco mais voltada para ocidentais Então, vamos dar uma olhada aqui no Jade Leaf Macho. Este é um dos maiores vendedores on-line dos EUA. Então, vamos dar uma olhada no site deles. Portanto, é um produto semelhante ao que vendemos com o pó macho em si e o kit para prepará-lo Sabendo que um pouco aparece aqui, vou encerrar isso. Depois, podemos dar uma olhada no site e ver o que gostamos nele, o que não gostamos nele e, o mais importante, o que podemos aplicar à nossa marca. Por exemplo, se ela tem uma grande variedade de produtos e não temos uma grande variedade de produtos , não podemos necessariamente aplicar isso à nossa marca. Se eles tiverem 1.300 avaliações sobre um único produto, não podemos necessariamente fazer 1.300 Mas se eles tiverem, digamos, por exemplo, depoimentos aqui que estão destacando particularmente ou receitas aqui, poderíamos criar nossas próprias receitas sobre como usar o pó Definitivamente , podemos nos inspirar neste site, ok? Além disso, vendê-lo por assinatura e como está distribuída a assinatura Bridget. Talvez gostemos disso. Então, o que eu vou fazer é que eu também vou gostar dos ícones aqui, e alguns gostam dos USPs aqui Ok, então vamos encontrar alguns outros exemplos. Vamos encontrar Macha completa. Ok. Novamente, esse é um processo bastante subjetivo. Eu quero que você veja o que você gosta neste site. Se eu gostar desse cabeçalho, posso simplesmente capturar a tela desse cabeçalho. Eu tenho meu conjunto de captura de , então ele vai direto para uma pasta que eu configurei para inspirar o site da marca, para que você possa Então, eu poderia simplesmente colocar tudo em uma pasta, se quisesse, e depois olhar para essa pasta ou organizá-la em algum tipo de tela. Eu tenho Figma aqui, então eu poderia fazer um monte de, digamos, cabeçalhos, certo Preciso fazer isso grande, certo? Então, eu poderia colocar aqui todos os meus cabeçalhos que eu gosto. Então, digamos, por exemplo, que eu também gosto desse cabeçalho. Obviamente, eles são completamente diferentes, mas digamos que gostei dos dois. Então eu poderia simplesmente alinhar todos os meus cabeçalhos que eu gosto aqui Novamente, você pode usar qualquer ferramenta de sua preferência com isso. Sou apenas um usuário do Figma, então faz sentido para mim usar o Figma, mas você pode juntar isso Algum software que você prefere? E como não vamos codificar o site de forma personalizada nesta aula do Skillshare , quero que você se concentre mais na lista seções do que nos requisitos exatos de Porque, a menos que escolhamos um tema que já tenha esse design de cabeçalho, esse é um design bastante personalizado. Portanto, a maioria dos temas não nos dará a funcionalidade de ter um cabeçalho exatamente parecido com este. Em vez disso, quero que você se concentre em qual é a seção acima da dobra na página inicial É bastante comum no comércio eletrônico. Isso é chamado de seção de heróis. E se olharmos para qualquer um desses sites, se eu voltar aqui, vamos dar uma olhada no pico da vida. Todos eles terão algum tipo de seção de heróis no topo aqui. Então, obviamente, vamos querer uma seção de heróis. Não vamos reinventar a roda aqui, mas talvez queiramos ver que tipo de seções de heróis gostamos Eles são todos muito parecidos aqui, mas este é bem limpo. Então, vou apenas fazer uma captura de tela. E então a mesma coisa aqui. Eu vou fazer heroína. Digamos que as seções da página inicial, certo? Então, podemos mostrar o herói aqui. Talvez gostemos de ver isso. Conforme mencionado, provavelmente teremos uma seção de heróis em nossa página inicial Isso é bastante normal. E então podemos ver coisas como: Ok, quais são os benefícios para a saúde? Isso pode ser algo que queremos destacar em nosso site, para que também possamos colocar isso em nosso quadro de humor. E isso nos ajudará a determinar o que realmente colocar em nosso site, quais seções realmente procurar para que possamos trazê-las. E talvez queiramos agrupá-los. Digamos que definitivamente queremos destacar os benefícios, certo? E tenho certeza de que as outras marcas aqui provavelmente têm algo semelhante. Então, vamos lá, benefícios para a saúde de nossos vegetais Então, deixe-me copiar e colar isso. Na verdade, vou copiar e colar de toda a largura. Assim, podemos reunir seções diferentes que obtêm o mesmo resultado em sites diferentes destacando os benefícios Então, este tem benefícios? Na verdade, este não tem o que tem é essa pequena seção de receitas. Então, deixe-me ver se consigo encaixar tudo isso em um quadro de site aqui, diminuindo o zoom. Parece que não posso, vamos. Então, vou pegar tudo isso. E digamos que aqui, teremos receitas de vitrine ou receitas mach, traga essa seção E, como você pode ver, estou dividindo isso seção por seção. Um site é essencialmente uma lista de seções. Então, podemos dividir isso nesta barra de anúncios, esse cabeçalho, essa seção de heróis, essa seção de benefícios, essa seção de coleção em destaque. Basicamente, podemos dividir qualquer site de comércio eletrônico padrão em seções, e é assim que funciona no Shopify Então, quando começarmos a construir nossa loja um pouco mais tarde, você verá a lista de seções disponíveis no tema e, em seguida, vamos trazê-las para nossos modelos, ok? Então, talvez eu chame esse herói e possa colocar uma moldura em torno de tudo isso para as seções que eu talvez queira colocar na página inicial Tudo bem, então eu posso agrupar tudo isso em seções da página inicial Agora, obviamente, meu texto está na cor errada, então vou corrigir. Certo? Então, obviamente, posso usar esses pedaços de inspiração em diferentes modelos no meu site do Shopify, mas apenas dando algumas ideias aqui Então, vou criar outro quadro aqui para a página do produto. Então, no Shopify, é um modelo de produto que vamos usar para todos os produtos, a menos que usemos modelos alternativos, mas na maioria das vezes usamos apenas um único Para nossos produtos. Então, vamos para a página principal do produto. Essas são as duas páginas principais qualquer site de comércio eletrônico da Shopify Ainda estou com o zoom reduzido aqui, então deixe-me ampliar novamente Depende do quanto eu quero uma captura de tela. Mas aqui podemos dar uma olhada no modelo de produto principal dessas outras marcas. Então deixe-me aqui, vou diminuir o zoom. E você pode ver que este não diminui o zoom muito bem, mas você pode ver aqui que muitos deles são oferecidos por assinatura. Deixe-me ir até onde está a página do produto aqui. OK. A deusa do sol Macha Ok, sim, este também está por assinatura. Assim, podemos dar uma olhada em como as galerias são configuradas, se gostamos das miniaturas à esquerda Ou gostamos deles na parte inferior. Novamente, seremos limitados pelo nosso tema. Não poderemos personalizar necessariamente exatamente como queremos sem a codificação personalizada, mas podemos chegar bem perto do tema E você pode ver aqui que temos alguns pequenos emblemas aqui. Vamos ver se isso está aqui, não. Acho que vi alguns distintivos aqui, não. Então, isso é algo único que Sun Goddess está fazendo é colocar alguns emblemas nas imagens do produto e aqui Vamos também ver como podemos expandir essas imagens. Você pode fazer isso por quanto tempo ou tão pouco quanto quiser. Quanto mais pesquisas você fizer, mais aprenderá o que outros sites estão fazendo e poderá ter algumas boas ideias. Mas, obviamente, como mencionei antes, ele precisa corresponder ao que você é capaz de alcançar com sua marca. Então, se você não tem o que foi, este teve 1.300 avaliações, se você ainda não tem uma tonelada de avaliações, então, você não pode necessariamente mostrar uma tonelada de avaliações, obviamente Mas podemos fazer alguns depoimentos. Se tivermos apenas um pequeno número de avaliações, podemos destacar cada avaliação individual como o uso de ícones aqui. Isso não é necessariamente uma seção, mas apenas uma inspiração de design para dizer: eu gosto desses ícones. Novamente, este é seu pequeno álbum de recortes, sua pequena tela para colocar toda a inspiração de seu design em uma única Não há um processo definido para isso. Esse é um processo flexível para obter inspiração de design, ok? Então, eu recomendo que você definitivamente dê uma olhada em seus concorrentes ou lojas vendem produtos similares a você. Obtenha um pouco de inspiração para eles. Os principais elementos que você gosta de colocar em seu quadro de humor, para que, quando começarmos a criar nossa vitrine no Editor da loja online, você já tenha uma ideia do que deseja colocar na E, como lembrete, você pode fazer isso em qualquer estágio do processo Você não precisa fazer seu moodboard agora, terminá-lo e depois passar para a próxima etapa Isso pode ser algo e deve ser algo que você faz ao longo da vida de sua marca, sempre buscando inspirações diferentes, e você sempre pode atualizar seu site à medida que obtém novas inspirações de outros sites ou apenas ideias que surgem da sua cabeça Mas esse é definitivamente um processo de pensamento que você vai querer ter antes de mergulhar direto no editor da loja virtual, que é o que faremos mais tarde na aula. 4. Entrada de produtos: Tudo bem, agora chegamos a uma loja da Bresh Shopify. Esta é a loja que criei para a Sans marcher. E se acessarmos o canal de vendas da loja virtual, você verá que é apenas o tema padrão no momento da gravação do Horizon que está em nossa biblioteca de temas. E se formos aos nossos produtos, você verá que nossa lista de produtos está completamente vazia. Neste vídeo, será bem curto porque vamos apenas adicionar produtos à nossa loja. Obviamente, para sua marca, dependendo de quantos produtos você tem, esse pode ser um processo longo. Se você quiser acompanhar a mesma lista de produtos do meu exemplo de marca CNS, tudo o que você precisa fazer aqui é clicar em Importar e podemos adicionar um arquivo CSV formatado da Shopify Então, vou até minha pasta de identidade de marca aqui, que contém todos os ativos da minha marca. E você pode ver aqui que há um chamado productlst dot Então você pode simplesmente clicar e arrastar isso até aqui. Vou publicar todos os novos produtos em todos os canais de vendas. Nosso site ainda não está ativo, então isso realmente não importa. Vou clicar em Carregar e visualizar. Então, basta verificar o mapeamento aqui, o título e a descrição e eles estão no lugar certo. Posso garantir que isso foi exportado da Shopify, então não há problema em importar, e isso levará um pouco Mas depois de um tempo, dirá produtos importados. Você verá que algumas imagens estão aparecendo aqui, o que é bom. Mas se examinarmos nosso pó de matcha aqui, sim, também temos as imagens Portanto, dentro desse arquivo CSV, ele deve ter um link para a imagem E se adicionarmos alguns produtos com imagens à nossa loja, se acessarmos o conteúdo e acessarmos os arquivos, veremos que eles também já foram enviados para nossa seção de arquivos. É importante observar aqui que recentemente tive um cliente que acabou de excluir alguns arquivos porque a loja estava cheia Qualquer coisa vinculada a esses arquivos em nossa lista de produtos ou em nosso tema acabará com conteúdo vazio se excluirmos nossos arquivos. Então, sim. Ao excluir arquivos, certifique-se que você não exclua os arquivos que estão em uso no momento Como você pode ver aqui, referências, ele é usado em um produto. Então, se excluíssemos isso, perderíamos essa imagem das imagens do nosso produto aqui. Agora, é claro, se você estiver usando sua própria marca, você não vai simplesmente importar minha lista de produtos e usá-la. Então, obviamente, você precisará passar pelo processo de adicionar seus próprios produtos, seja por meio de um processo automatizado, por meio de uma importação, como acabei de fazer, ou manualmente, clicando em Adicionar produto aqui. Quando você está adicionando seus produtos, a principal coisa em que você precisa se concentrar é obviamente o título , então vou dizer produto apenas como um exemplo aqui, título do produto, isso determinará aqui embaixo sua lista de mecanismos de pesquisa. Então você pode ver aqui que ele pegou o título do produto e o colocou como título do painel do produto, mas você também pode editá-lo aqui Na Shopify, o identificador não é apenas uma questão de SEO, mas também é a forma como direcionamos os produtos em nossa programação Portanto, é importante fazer isso com antecedência. Então, ao configurar seus produtos, você quer ter certeza de que o produto manipula essa última parte da URL aqui, é como você pretende que seja, ok? Mas, além do título, da imagem e preço e, obviamente, da adição algum inventário aqui para que possa ser comprado, isso é tudo o que você realmente precisa, e todo o resto é extra. Obviamente, se seu produto tiver opções diferentes, você precisará adicioná-las aqui, e isso criará variantes diferentes. Mas não vamos abordar a diferença entre produtos e variantes dessa classe. Já abordamos isso na configuração da Shopify Store, então não vou me aprofundar em como a plataforma Shopify realmente funciona fora do editor da Se quiser saber mais sobre isso, você pode ir para a aula anterior do Skillshare Mas, independentemente do método usado para obter alguns produtos em sua loja, você precisará de alguns produtos, então eu o encorajo a fazer isso agora. E outra coisa que vou fazer é organizá-los em uma coleção. E como temos uma gama de produtos tão pequena, vou criar uma coleção muito básica em vez da página inicial, que é a padrão, vou excluir essa Eu também poderia editá-lo ao meu gosto, mas vou excluí-lo e começar do zero E vou chamar isso de coleção Shop All. Muitas lojas fazem isso, e eu posso torná-lo inteligente aqui ou manual, porque tenho uma linha de produtos tão pequena que, de qualquer forma, não vai importar muito. Então, vou adicionar todos os quatro produtos da minha linha de produtos aqui, e isso vai adicioná-los à coleção All da loja. Então, no final deste vídeo, você deve ter seus produtos importados ou pelo menos alguns deles, e pelo menos uma coleção construída com alguns desses produtos dentro dela. OK. Agora, no próximo vídeo, vamos passar para as configurações de marca da nossa loja Shopify e também vamos colocar o logotipo da nossa marca e algumas cores Então, eu vou te ver no próximo vídeo. 5. Configurações de marca: Então, no último vídeo, adicionamos rapidamente nossa lista de produtos usando uma importação e os organizamos em uma única coleção. Vamos fazer mais um vídeo rápido sobre configurar algumas coisas em nossa loja antes de passarmos a selecionar nosso tema e configurar nossa vitrine com o editor da loja virtual, e isso é entrar nas configurações de nossa marca Acredito que esse seja um recurso bastante novo na Shopify, mas agora podemos adicionar coisas como nosso logotipo e as cores da nossa marca a uma seção de marca de nossas configurações em nossa loja da Shopify Foi feito anteriormente dentro do Editor da loja virtual ao configurar seu tema, e ainda é feito dessa forma. Mas a ideia das configurações de marca é que não estamos copiando e colando configurações em vários temas, que podem ser até 20 temas diferentes na sua biblioteca de temas Temos um local centralizado para colocar coisas que realmente não mudam, como as cores e o logotipo da nossa marca Então, vamos usá-lo agora e, obviamente, vincularemos isso ao nosso tema um pouco mais tarde. E se rolarmos para baixo, você verá que não são apenas logotipos e cores. Também podemos adicionar imagem de capa, slogan, breve descrição e alguns links sociais aqui Então, eu encorajo você a preencher isso o máximo possível. Neste vídeo, vou apenas adicionar o logotipo. Então, como você pode ver aqui, temos as imagens de nossos produtos aqui, mas ainda não temos nosso logotipo, então vou abrir minha pasta de identidade de marca e você pode ver que temos o logotipo, então vou arrastar apenas um lembrete de que esse logotipo, se dermos uma olhada, está muito bem recortado e tem um fundo transparente Ao preparar seu logotipo, recomendo que você faça o mesmo. E se você estiver interessado em como eu fiz isso, eu basicamente usei o preview, que é o aplicativo padrão no MAC para cortar uma imagem como essa, e então você pode usar uma ferramenta como remover o ponto Bg para remover o fundo de uma imagem se você não tiver um aplicativo como o Photoshop, ok? Mas, sim, você deseja adicionar seu logotipo, dessa forma, sem muito espaço ao redor do conteúdo real do logotipo e com um fundo transparente. Então, vou adicionar isso. E uma coisa legal sobre essas configurações de marca, como você pode ver, ela também é adicionada a essa pequena maquete no topo aqui Também podemos adicionar um logotipo quadrado. Não tenho certeza se tenho a versão quadrada aqui. Acho que não, mas essa também é uma opção. E agora vou adicionar as cores da minha marca. Então, vamos dar uma olhada em: podemos ver a lista aqui escrita na edição de texto. Ou podemos consultar nosso guia de identidade de marca aqui. Em vez disso, vou dar uma olhada no meu guia de identidade de marca. Então, vou abrir isso com uma prévia. E como você pode ver, eu tenho duas cores primárias e três secundárias, que eu acho que combinam perfeitamente aqui. Então, vamos adicionar minha primeira cor primária, que espero poder copiar e colar Sim, eu posso, aqui mesmo. Ele não gosta do hash, então vamos garantir que o hash seja guardado Então, se eu fizer algo assim, ele simplesmente perde o último caractere de três Ok, vamos lá. E então a cor contrastante é essa aqui. Então, eu gostaria de poder selecionar, na verdade, talvez eu vá até o documento aqui para ser mais fácil de copiar e colar. Embora estejam organizados um pouco errados aqui , deixe-me dar uma olhada aqui. Então, queremos passar a cor creme para a secundária. Tudo bem, agora podemos usar essa lista. Então, se eu voltar aqui para ver a cor contrastante, era bege suave Então, vou copiar isso sem o hash, e depois vou usar cores secundárias aqui, colocar o verde sálvia A próxima, obviamente, não é preciso dizer que você colocará as cores da sua própria marca aqui. Você está fazendo isso com sua própria marca. Mas se você está apenas seguindo meu exemplo de marca, você estará seguindo o processo da mesma forma que eu estou fazendo. E agora podemos clicar em Salvar para salvar essas cores. E se rolarmos para cima, podemos ver como essas cores meio que interagem em uma pequena maquete aqui Mesmo que não seja uma maquete de site real, parece muito boa a combinação dessas cores Tudo bem, então é isso para definir as configurações da marca. Obviamente, vincularemos esse logotipo e essas cores ao nosso tema por meio do editor da loja virtual, mas isso dependerá do tema que usaremos. A boa notícia de definir as configurações de marca aqui é que elas são consistentes em todas as lojas da Shopify, enquanto a parte que abordaremos a seguir ao escolher seu tema e depois colocar essas informações em seu tema varia de tema para tema Então, sem fervor, agora que definimos nossas configurações de marca e nossos produtos importados, vamos agora passar para o canal de vendas da loja virtual e começar a trabalhar em nosso tema 6. Escolha de um tema: Tudo bem, agora chegamos à parte da aula em que é hora de decidir sobre nosso tema da Shopify E há uma série de fatores que influenciam essa decisão. O primeiro fator, eu diria, é o preço. Então, se você tem orçamento zero, obviamente terá que escolher um tema gratuito ou usar esse recurso, onde está aqui embaixo, onde você pode escrever com o Shopify Magic, um prompt e gerar um tema com base no seu Eu não recomendaria isso necessariamente. Você pode testar isso e ver se produz um bom resultado, mas descobri que os resultados não são incríveis. E é melhor usar um tema que foi realmente criado por desenvolvedores reais e não por IA, pelo menos no momento da gravação. E então, suas opções, obviamente, você já tem uma instalada na sua loja Shopify Então, se eu clicar em Editar tema aqui, vou acessar o Editor da Loja Online do Tema Horizon. Portanto, esse tema Horizon foi lançado há um ou dois anos como tema padrão nas lojas da Shopify E, como você pode ver, não precisamos pagar por isso. Este é um tema gratuito. Ao avaliar temas, quero que você navegue por diferentes modelos e examine a lista de seções Então, uma pequena cartilha sobre o Online Store Editor. Falamos um pouco sobre isso em minha aula anterior do Skillshare sobre a configuração da Shopify Store Mas, essencialmente, sua vitrine da Shopify é apenas um monte de modelos, e podemos acessar esses diferentes modelos aqui na parte é apenas um monte de modelos, e podemos acessar esses diferentes modelos superior Então, como você pode ver, aqui o modelo atual em que estou é a página inicial Mas se eu clicar aqui, posso escolher outros modelos para ver. Portanto, as páginas principais que vamos ver são a página inicial e a página do produto E, como você pode ver, há um submenu aqui porque eu posso criar modelos alternativos para o modelo de produto, ou posso simplesmente usar o modelo de produto padrão Vamos usar apenas o modelo de produto padrão, então vou clicar nele e você pode ver que isso me leva a uma prévia desse modelo. E isso também depende do produto que estamos passando por esse modelo. Então, o que eu posso fazer é mudar o produto que estou vendo por meio deste modelo. Para, digamos, nosso principal produto, que é o pó marcher premium, e podemos ver como nosso modelo interage com um produto de entrada diferente Está bem? Vamos voltar para a página inicial. E dentro dessa área de modelo, você pode ver que há um botão para adicionar seção. Então, o que você vai querer fazer é examinar as diferentes opções ao avaliar um tema aqui na lista de seções Com o Horizon, na verdade, há uma lista bem grande. Novamente, se você não tem orçamento e quer apenas um tema gratuito , o Horizon está bem. Mas vamos dar uma olhada em algumas das outras opções na Loja de temas da Shopify Se eu for até os temas gratuitos populares, você pode ver que há alguns outros temas gratuitos aqui. Mas vamos visitar toda a loja temática. Tudo bem Agora, como você pode ver aqui, alguns dos que chegam ao topo, os mais populares, vêm com um preço de 300 a $400 Impulso. Este aqui é um dos mais populares. Eu o usei em vários projetos, mas ele terá um preço premium. Dito isso, se você fosse codificar seu próprio tema, provavelmente custaria mais de 400 USD. Então, eu acredito que você obtém um bom retorno para Buck com temas premium, e eu recomendo comprar um tema premium para qualquer pessoa que esteja nessa faixa de orçamento em que não possa pagar um site de 5.000 a $10.000 Você pode obter muito trabalho de desenvolvimento dentro de um tema muito modular com o qual você pode trabalhar no editor da loja online aqui no Assim, você pode dar uma olhada na loja de demonstração de qualquer um desses temas do Shopify e brincar com Está dentro desse pequeno contêiner aqui, mas eu posso expandir e você pode ver aqui há muito mais em termos de animação, e é muito nítida e premium Há muitas seções e também um mega menu muito bom. Então, alguns dos meus clientes já usaram esse tema premium antes. Mas, obviamente, existe na Loja de temas da Shopify. Voltamos a navegar por todos os temas, existem mais de 1.000 deles. Então, é muito difícil analisar e avaliar todos eles. É quase impossível. Então, você vai querer usar alguns desses filtros aqui. Eu não acho que você possa filtrar por preço. Só pode ser gratuito ou pago. Então, digamos que seu orçamento seja zero, você analisará esses 24 temas diferentes. Obviamente, você pode pegar um tema de fora da Loja de temas da Shopify, mas eu simplesmente não o recomendaria Todos esses temas na loja de temas passam por uma lista de verificação rigorosa para serem aprovados para existirem nessa loja temática uma lista de verificação rigorosa para serem aprovados para existirem nessa Então, eu definitivamente recomendo que você acesse a Loja de temas do Shopify Também pode filtrar por meio da indústria. Então, qual seria o nosso? Acho que seria comida e bebida, aqui mesmo. Assim, você pode filtrar por diferentes setores, tamanhos de catálogo pequenos e recursos diferentes. Mas você também pode usar a IA para ajudá-lo. Então, voltando ao nosso amigo Google Gemini, vou dizer que me ajude a escolher um tema do Shopify para minha sessão premium da marca MachaPowder Obviamente, substitua isso por sua própria marca se você estiver fazendo isso com sua própria marca. Ok, então aqui você pode ver que recomenda alguns temas aqui. Prestige é uma boa música que eu já ouvi antes. Vamos dar uma olhada no prestígio. Novamente, como muitas coisas nesta aula, esse é um processo um pouco subjetivo e vai depender muito de sua própria marca e de suas próprias preferências, mas podemos ver a demonstração de prestígio É um pouco mais moderno. Não sei se isso necessariamente faz sentido para nossa marca Macha, mas o que podemos fazer é clicar em Tri Theme em qualquer um desses temas clicar em Tri E o que o Tri Theme nos permite fazer é realmente começar a construir nossa vitrine com esse tema sem ter que pagar por Agora, é claro, sem pagar por isso, não teremos muitos recursos, por exemplo, não podemos realmente publicá-los em nossa loja. Então, como você pode ver aqui, ele será instalado na minha biblioteca de temas em caráter experimental. Então, isso acabou de ser feito agora. E geralmente há um botão aqui para publicar, que eu possa mover esse tema em nossa biblioteca de temas, que atualmente é uma prévia do tema principal e, portanto, publicá-lo no site. Não podemos fazer isso com um tema experimental. Só podemos clicar aqui para comprar. E se quisermos editar o código, não podemos realmente editar o código Eva. Parece que podemos pré-visualizar o tema. Isso é bom. Ok. E você pode ver que ele já está carregado em nosso logotipo. Simplesmente não podemos publicá-lo ou editar o código. Essas são as duas principais limitações aqui. Mas, na verdade, podemos passar o resto da turma construindo nossa vitrine com base em um tema como esse, sem precisar necessariamente comprá-la, a menos que estejamos prontos para realmente entrar no ar com essa vitrine Então, aqui você pode ver que meu logotipo já está pré-carregado. Então, se eu entrar no meu cabeçalho aqui, a imagem está extraindo o logotipo padrão das configurações de nossa marca Mas digamos que, por exemplo, não configuramos esse logotipo nas configurações de nossa marca, sempre podemos vinculá-lo diretamente aqui no Editor da loja virtual. Isso não é problema. clicar para conectar uma fonte dinâmica No entanto, vou clicar para conectar uma fonte dinâmica e conectar o logotipo da nossa marca só para ficar mais limpo aqui. Ok. Também está passando por algumas navegações Trabalharemos nas navegações um pouco mais tarde na aula Mas se examinarmos as configurações gerais do tema aqui, podemos começar a inserir algumas das cores e tipografias de nossa marca Vou começar com a tipografia primeiro. E para o corpo do texto, as fontes da nossa marca são, como diz aqui, Inter e tenor Então, a fonte do nosso corpo será Inter. Então, eu vou discar isso imediatamente. Em seguida, vou até aqui até a fonte do nosso título. E de acordo com nosso documento de marca , será Tennis Sands, certo? Então coloque isso aí. E você pode ver que não parece muito diferente, mas espero que você concorde que as fontes combinam muito bem. Tudo bem, agora vamos colocar nossas cores. Os temas modernos do Shopify agora têm esquemas Então você seleciona um esquema e, em seguida, ele traz todas as variáveis de cor dentro desse esquema. E o que isso permite que você faça é que, em vez de definir cores individuais em cada seção, você pode criar um esquema e trocar esse esquema em uma determinada seção Então, ele apenas restringe as opções para que em vez de adicionar um monte de variáveis de cor em cada seção, você simplesmente selecione um esquema e configure as variáveis de cor em um desses esquemas Então, vou adicionar um novo esquema, e você pode ver aqui, temos uma, duas, três, quatro, cinco, seis, sete variáveis de cores diferentes para adicionar. Então, aqui podemos colocar as cores da nossa marca. Há alguma habilidade aqui para determinar o que vai para onde. Para nossas cores de fundo, obviamente queremos algo um pouco esbranquiçado, e para nossas cores de texto, queremos algo um pouco mais escuro Está bem? Então, se eu olhar o gráfico real das cores da nossa marca aqui, eu já o abri, você pode ver aqui que já temos um certo esbranquiçado colocado aqui. Em vez disso, podemos mudar isso e adicionar uma cor específica ou adicionar um valor dinâmico e trazer, digamos , por exemplo, nossa cor contrastante secundária, para que eles vinculem a variável real à nossa cor de fundo geral E então, em termos de corpo de texto, podemos trazer nossa cor primária. Na verdade, essas seções não foram trocadas para usar nosso novo esquema de cores, então teremos que fazer isso um pouco mais tarde Vamos colocá-los agora, vamos ver o plano de fundo do botão, que geralmente é o inverso do que configuramos aqui Então, vou configurá-lo para ser basicamente o inverso. Então, vou configurar o plano de fundo para ser verde claro da marca e, em seguida, definirei o texto para ser a cor primária contrastante E então aqui embaixo, eu poderia usar a cor secundária dois e contrastá-la com a cor contrastante secundária Tudo bem, talvez precisemos editar e ajustar isso à medida que começamos a criar nossas seções Mas vamos para esta seção de apresentação de slides, por exemplo, e ela tem uma opção de esquema de cores? Parece que não tem isso. Mas vamos entrar, digamos, por exemplo, coleção em destaque aqui, e então podemos alterá-la para nosso novo esquema de cores cinco. E como você pode ver, parece bom, mas temos um pequeno problema com o botão. Deixe-me voltar aqui, vamos ver o texto do nosso botão aqui. E não precisamos necessariamente usar essas cores exatas, então posso simplesmente removê-las deixá-las brancas. Sabe, talvez eu queira usar a outra cor contrastante secundária Ok, deixe-me salvar isso. E acredito que o texto aqui usando uma cor primária não tem contraste suficiente, então vou sair dessa seleção e deixar o verde um pouco mais escuro Você sabe, este é um sistema flexível. Não precisamos respeitar totalmente o código de cores exato. Podemos deixar essa cor um pouco mais escura, e acho que esse esquema de cores funciona melhor Ok. Tudo bem, agora com nosso tema decidido, vamos passar para a próxima etapa, que é adicionar nossas seções. E se isso não funcionar para esse tema específico, sempre podemos trocar de tema. Mas agora, usando o prestige, vamos começar a configurar nossa vitrine usando as seções disponíveis no tema escolhido 7. Página inicial: Tudo bem, então aqui estamos dentro do editor da loja online, personalizando o tema Prestige Conforme mencionado no último vídeo, as opções de personalização do tema dependem muito do tema real que você escolher Esse editor de loja virtual será o mesmo, independentemente do tema usado, mas as opções em termos de quais seções você pode adicionar e as opções dentro dessas seções serão limitadas ou ativadas pelo tema. Está bem? Então, vamos continuar com o tema de prestígio aqui, mas você pode seguir em princípio com qualquer tema As seções e as configurações simplesmente serão diferentes. Uma coisa que você pode notar aqui é que estou em um tamanho de tela tão pequeno que esse ícone de hambúrguer está aparecendo no menu do celular Se eu expandir para tela cheia, você pode ver que isso se expande em itens de menu Não quero que apareça assim quando estou personalizando a página inicial, então vou diminuir o zoom, e isso deve nos trazer nossos itens de menu aqui. OK. Agora, com esse tema específico, podemos ver diferentes grupos de seções à esquerda aqui. Portanto, temos nosso grupo de cabeçalhos, nosso grupo de sobreposições e nosso grupo de rodapé, além do grupo que está abaixo do modelo Só para explicar isso um pouco antes de examinarmos as seções do próprio modelo. Na Shopify, podemos criar nossos próprios grupos de seções que se aplicam a cada modelo, e elas saem desse grupo normal de modelos No passado, era apenas uma cabeçalho e uma seção de rodapé Mas para que essas áreas sejam um pouco mais personalizáveis e permitam que seções extras sejam adicionadas a essas áreas, a Shopify criou algo chamado grupos de seções há alguns anos, e agora um grupo de rodapé e um grupo cabeçalho que serão bastante consistentes em todos bastante consistentes Mas esse grupo de sobreposições é algo bastante exclusivo do prestígio Tudo o que você precisa saber aqui é que esses grupos aparecerão em qualquer modelo que você esteja vendo, mas as seções abaixo desse título de modelo se aplicam somente ao modelo que estamos analisando Então, estamos vendo a página inicial agora, como podemos ver aqui Portanto, essas seções estão sendo exibidas em nossa página inicial. Como você pode ver, há muitas seções aqui. O que acontece quando você instala um tema da loja de temas no modo de teste é que você terá várias seções de demonstração adicionadas à página inicial, o que é um pouco chato Ele mostra pelo menos todos os recursos do tema ou pelo menos vários recursos, mas não queremos isso Queremos realmente construir nossa vitrine do zero. E ainda podemos selecioná-los adicionando uma seção por meio desse menu. Então, vou remover o máximo possível deles e permitir que eu exclua todos eles, exceto um, porque precisamos de exceto um, porque precisamos pelo menos uma seção em nosso modelo o tempo todo. Então, você pode ver aqui agora que, se eu rolar para baixo não temos mais nenhuma dessas seções e, para essa seção específica de apresentação de slides, não podemos excluí-la porque atualmente é a única seção em nosso modelo Agora, conforme mencionado na aula de moodboard, praticamente todos os sites de comércio eletrônico terão uma seção de heróis em Portanto, essa é uma decisão de design muito fácil de tomar. Queremos encontrar uma seção que seja uma seção de heróis que possamos adicionar ao topo do nosso modelo. O que vamos fazer é, dentro desse grupo de modelos aqui, clicar em Adicionar seção. E agora podemos ver um monte de seções em diferentes grupos como este. Podemos expandir e contratar esses grupos especificamente dentro do tema prestígio Portanto, essa seleção de seções diferentes dependerá do tema que você está personalizando Então, no tema prestígio, temos todas essas opções diferentes E ao passarmos o mouse sobre as diferentes seções, obviamente podemos ler o nome Mas, à direita, se uma predefinição tiver sido definida, podemos ver uma prévia visual da aparência dessa seção Então, à medida que rolamos o cursor sobre essas diferentes seções, você pode ver como elas poderiam parecer em sua loja com conteúdo de espaço reservado Está bem? Agora, essa apresentação de slides é algo que podemos usar como nosso herói, mas vou escolher entre esta lista de outros banners Vamos dar uma olhada nessa imagem com bloco de texto. E o que vou fazer é adicionar na imagem que preparei anteriormente, nossa seção de heróis do estilo de vida da Então, vou clicar e arrastar isso para meus arquivos aqui e, em seguida, clicar em Concluído. E então, obviamente, vou querer alterar o texto aqui, mas deixe-me verificar posso realmente mover essa caixa porque não a quero aqui no centro. Então, na verdade, eu quero me livrar desse efeito paralex. Ok, isso é melhor. Mas você pode ver aqui que essa caixa está meio que obscurecendo o conteúdo Então, a menos que haja uma opção para movê-la para a esquerda ou para a direita, não acho que essa seja a seção ideal para nossa seção de heróis. Então, o que eu vou fazer é olhar essa outra imagem aqui com sobreposição de texto Na verdade, não temos uma prévia disso, mas podemos vê-la aqui agora à medida que a trazemos com os dados predefinidos E você pode ver aqui que isso pode realmente funcionar um pouco melhor. Então, vou definir meu esquema de cores aqui para o esquema de cores da nossa marca e, em seguida, vou clicar em Selecionar aqui no campo da imagem para trazer a imagem que fizemos no anterior. OK. Acho que vai ficar melhor, embora o texto não tenha a cor certa em termos de contraste Então, o que podemos fazer, na verdade , é uma configuração de sobreposição aqui Então, como você pode ver, está colocando uma camada escura. O que poderíamos fazer é colocar uma sobreposição mais brilhante como essa e talvez aumentar a opacidade da sobreposição para criar mais contraste com Vou deixá-lo em preto e vou mudar o esquema de cores para torná-lo branco. Na verdade, acho que parece um pouco melhor. Mas cada um pode fazer o que parecer melhor para você. E então vou aumentar minha opacidade para um nível que eu acho que não obscureça muito a imagem e, ao mesmo tempo, dê algum contraste com o E em termos de personalização dos elementos reais desta seção, posso examinar os blocos dentro da seção Deixe-me deletar essas outras seções agora que decidi por isso como meu herói. Então, como você pode ver aqui, isso vai ficar bem como herói. Posso personalizar algumas outras coisas, como o chicote do conteúdo e a posição do conteúdo, para que eu possa colocá-lo no canto superior esquerdo, se eu quiser Eu posso colocá-lo no canto inferior direito se eu quiser. Parece meio bom, desde que esteja acima da dobra, mas eu definitivamente quero que o texto esteja acima da dobra. Então, vou deixá-lo no centro do meio. Então, o que eu vou querer fazer é personalizar esse texto. Então, como você pode ver aqui, há dois blocos nesta seção, e eu posso clicar aqui para adicionar mais blocos. Portanto, esta seção permite um subtítulo. Liquid significa apenas código personalizado, então podemos adicionar algum código personalizado. Podemos adicionar um botão. Talvez eu queira adicionar um botão aqui e, obviamente, reordená-lo, para que fique na parte inferior Então eu vou querer mudar a cópia. Então, eu tenho o documento de cópia do meu site aqui. Deixe-me abrir isso. E então, aqui no topo, eu posso ver uma pequena manchete, então eu vou copiar isso, colocar isso aqui E então, para o parágrafo, vou pegar esse parágrafo abaixo do título e colocá-lo aqui, certo? E então, para o texto do botão, também precisamos vincular esse botão a algum lugar, obviamente. Talvez eu apenas diga que descubra a diferença de sessão ou o que você quiser aqui, e então eu possa simplesmente criar um link para nossa loja ou coleção, ou eu poderia vincular diretamente ao nosso produto principal O pó de marcha premium, o que eu quiser aqui. E também posso personalizar a cor do botão. Eu posso mudar isso para um esboço. Vou torná-lo sólido ou mantê-lo sólido. E depois a cor de fundo, talvez eu use a cor principal da minha marca. Vai direto para objetos Meta aqui, mas posso clicar neste Chevron aqui para voltar à nossa marca e, em seguida, vamos experimentar primeiro a cor primária Acho que é uma cor muito ousada. Então, deixe-me substituir isso por uma cor secundária. E então, é claro, quero que o texto tenha uma cor branca diferente para contraste. OK. Então, eu gosto de ver isso. Se quisermos vê-lo em diferentes tamanhos de tela, podemos acessar esses ícones aqui. Então, se eu clicar em tela cheia, isso ocultará a barra lateral e a visualizaremos em uma tela um pouco maior. E então, se eu clicar em celular, podemos ver como fica no celular, o que é bastante restrito. Então, talvez queiramos atualizar nossas configurações um pouco aqui. Então, o que eu poderia fazer é alterar o tamanho da imagem da proporção original para grande. Ajuste a tela. Então, isso parece muito melhor no celular, e isso não parece muito ruim no desktop Eva. Acho que isso está nos dando o melhor dos dois mundos em termos de usar a mesma imagem de herói para desktop e celular. Conseguimos um bom resultado fazendo isso. Ok, então essa é a nossa primeira seção. Na verdade, podemos renomear isso se quisermos como herói, só para deixar isso um pouco mais claro E com nossa seção de heróis adicionada, vamos adicionar mais algumas seções. Agora, vou avançar um pouco mais rápido agora que entendemos como configurar pelo menos uma seção, e agora é só uma questão de decidir quais outras seções incluir em nossa página inicial e configurá-las Então, vamos clicar em Salvar e vamos trabalhar nas próximas seções. Portanto, para a primeira seção da página inicial , normalmente sempre será uma seção de heróis Então, isso é muito óbvio. Mas agora temos que decidir o que mais queremos em nossa página inicial E para inspirar essa decisão, podemos consultar nosso quadro de humor. E veja o que outros sites estão fazendo de que gostamos. Mas também precisamos combinar isso com as seções disponíveis no tema escolhido. Então, estamos meio que limitados às seções disponíveis em nosso tema aqui, que neste caso é prestígio Agora, é claro, se você está codificando seu site de forma personalizada, você pode fazer com que ele tenha a aparência que quiser e criar as seções que quiser E abordarei algumas das opções no final desta aula sobre como fazer isso. Mas, por enquanto, sem usar IA ou código, apenas usando a forma padrão no Shopify, precisamos ver quais seções estão disponíveis na versão real. Mas, ao que parece, eu realmente não tenho um quadro de humor e já tenho uma ideia do que quero criar Vou apenas examinar essa lista de blocos e ver o que faz sentido adicionar. Um formulário de contato na página inicial, não particularmente típico de uma marca dessa natureza Se eu tiver um boletim informativo, posso capturar inscrições no boletim informativo se eu tiver algum tipo de ímã de leads para coletar das pessoas Mas acho que algo muito comum é mostrar alguns produtos em nossa página inicial E podemos fazer isso usando o que é chamado de coleção em destaque na Shopify ou, nesse caso, uma seção de coleções em destaque Então, vou clicar aqui E o que isso me permite fazer é trazer uma determinada coleção ou conjunto de coleções. Portanto, no caso desta, podemos adicionar várias coleções diferentes. Por padrão, é apenas uma, mas para essa seção específica, podemos adicionar várias coleções. Então, o que vou fazer é clicar neste bloco para ver a coleção e, como você pode ver aqui, podemos vincular uma coleção da nossa loja, pois só temos uma porque temos uma pequena linha de produtos, vou apenas até a Link Shop A. Esse é o limite de produtos para mostrar, mas parece que só temos quatro em nossa loja Só vamos mostrar quatro. Portanto, esse é o máximo que aparecerá nesta seção. E então podemos colocar um cabeçalho para esta coleção, lembrando que podemos colocar várias coleções aqui, então eu poderia colocar um cabeçalho opcional aqui da Loja A. Como você pode ver, aqui embaixo, se você olhar de perto, padrão é Então, se eu deixar isso em branco, o título da seção é Comprar tudo de qualquer maneira, então isso não vai mudar o texto. Deixe-me mudar isso para a linha de produtos Al, certo? E então isso vai mudar o texto aqui. E então eu não quero um botão de ver tudo, porque isso é literalmente todos os produtos que temos em nossa loja. E então, se eu for até as configurações da seção, há outro pequeno texto aqui, o subtítulo, e eu vou removê-lo completamente Normalmente, com as seções da Shopify, se você remover o texto completamente no campo , ele removerá o espaço para onde o texto estava indo se o tema for criado corretamente, ou seja E, assim como da última vez, queremos analisar nossas diferentes opções de personalização aqui para encontrar oportunidades de tornar essa aparência ainda melhor Obviamente, queremos que ele use nosso próprio esquema de cores, então vou definir isso para o esquema cinco, e isso parece muito bom, na verdade. Se você tem uma daquelas marcas premium em que não mostra o preço ou o título , pode ativá-la. Eu não vou fazer isso neste caso. Podemos empilhar os produtos. Então, eu acredito que isso está relacionado ao celular, então vou mudar para a visualização móvel aqui. Se eu desligar isso, é uma espécie de contêiner de rolagem transbordante Mas se eu mudar isso para empilhar produtos , você verá que posso ter uma grade aqui de duas colunas ou uma grade simples de um produto por linha Portanto, depende da sua preferência pessoal. Eu meio que gosto desse, então vou deixar por isso mesmo. E então isso vai ser relevante aqui porque temos apenas quatro produtos. Então, a menos que mudemos isso para, digamos, por exemplo, dois no desktop, que eu acho muito grande , não precisaremos dividir várias linhas com uma linha de produtos de apenas quatro produtos. OK. Então, essas são as nossas opções na própria seção, mas nas configurações do bloco, também podemos vincular o botão que acabamos de remover aqui a algo. Obviamente, se tivermos uma visualização ou um botão, padrão é o URL da coleção, mas na verdade podemos fazer com que ele seja vinculado a outro lugar Vou simplesmente remover o botão completamente. Não acho que faça sentido, e isso é tudo para nossa seção de coleções em destaque. Eu poderia até renomeá-la para coleção em destaque, ok? Ou eu poderia chamá-la de nossa linha de produtos. OK. Isso não muda isso nos nomes das seções aqui, apenas na instância da nossa seção que é trazida para o modelo aqui. Ok, então eu vou clicar em Salvar nisso. Essa é a nossa segunda seção da página inicial construída. Tudo bem, vamos remover a barra lateral e ver o que temos até agora. Estou gostando disso Chegaremos ao cabeçalho um pouco mais tarde, mas em termos das seções específicas da página inicial, tudo está indo bem até agora Vou adicionar mais dois e depois finalizaremos e veremos o próximo modelo. Então, uma das coisas que você lembra da aula do mood board é que parecia que todas as outras marcas de matchers destacaram os benefícios de seu matchcher destacaram os benefícios de seu matchcher E outra coisa que eu gostei foram esses ícones aqui. Então, o que eu fiz foi gerar meus próprios ícones que você pode encontrar na pasta de ícones, e cada um desses ícones representa um benefício diferente. Então, antioxidante, se eu reduzir o tamanho disso, saúde cerebral, energia calma e desintoxicação Na verdade, tenho mais um aqui, mas provavelmente não vou usá-lo. Acho que quatro provavelmente são suficientes. Tenha algo que seja como uma lista de pontos, você pode usar algo como ícones para tornar essa lista um pouco mais rica, ok? Então, se voltarmos ao nosso modelo aqui, vamos encontrar uma seção que podemos usar para destacar esses benefícios. Então, vou clicar em Adicionar seção em nossa linha de produtos e dar uma olhada nos diferentes grupos de seções. Usando os títulos desses diferentes grupos para me informar. Não estamos procurando um banner. Procurando apelos à ação, talvez procurando algo de conteúdo. Portanto, não vamos algumas postagens de blog, pelo menos neste estágio, nem conteúdo com guias, nem uma imagem de antes e depois, mas podemos encontrar algo como essa seção de várias colunas aqui , desde que possamos adicionar uma Então, eu vou trazer isso aqui. E vamos dar uma olhada nas configurações de cada bloco. Sim, podemos adicionar uma imagem. Então, poderíamos usar essa seção de várias colunas. Deixe-me dar uma olhada em quais outras seções podemos ter disponíveis para nós. E no grupo Confiança e prova social, temos essa seção chamada Texto com ícones. Isso é exatamente o que estou procurando. Então, eu vou trazer isso aqui. Na verdade, podemos ver que o estamos usando aqui embaixo com os ícones incorporados no tema. Obviamente, esse tema vem com alguns ícones, como você pode ver aqui. Podemos adicionar nossos próprios ícones personalizados. Então, o que eu vou fazer é adicionar todos esses ícones neste carregador de imagens aqui E o que isso vai fazer é fazer o upload de todos eles de uma só vez. Mas depois que eles forem enviados, obviamente, vou selecioná-los um vez para destacar cada um desses benefícios. Está bem? Então, obviamente, vou precisar emparelhar isso com alguma cópia do site. Então, vamos voltar ao meu site, copie o documento aqui. E aqui temos alguns pontos que queremos ver em nosso site: defesa radical, ritual sustentado, faísca metabólica e desintoxicação vívida Podemos combinar nossos ícones com esses benefícios. Então, a primeira defesa radical, eu vou dar uma olhada aqui. Este ícone aqui parece ser a combinação certa. Então, vou adicionar isso aqui, mudar isso para defesa radical e, em seguida, pegar a legenda do documento de cópia do nosso site aqui mesmo O ícone para nossos ícones mais detalhados é obviamente muito pequeno aqui, então vou abordar isso um pouco Na verdade, acho que quero levar tudo até o valor máximo de 64. E também temos essa opção aqui para o ícone móvel WIP Definitivamente, queremos que isso também seja maior em dispositivos móveis. Então, vou colocar até 64 também. E como você pode ver aqui no celular, vamos fazer com que ele entre nesse tipo de controle deslizante com animações entre os OK. Portanto, a vantagem de usar um tema pronto para uso e não codificá-lo de forma personalizada é que não precisamos nos preocupar em codificá-lo para vários tamanhos de tela Esse tema deve funcionar automaticamente no celular sem que precisemos examiná-lo, mas também deve haver opções disponíveis no tema para personalizar essas opções Como você pode ver aqui, estou usando como padrão o esquema um. Então, eu vou querer mudar isso para o nosso esquema de cores. Se você quiser evitar essa etapa ao mudar o esquema de cores de cada seção recém-criada , poderíamos ter configurado nossas cores aqui. No esquema um. Na verdade, há uma opção aqui para ter o esquema de cores padrão. Então, vamos definir isso como cinco, e isso nos permitirá de cores que criamos usar o esquema de cores cinco por padrão, que é nosso próprio esquema . Está bem? Quais outras opções temos nas configurações da seção aqui antes de prosseguirmos com a personalização dos blocos Seção separada com borda. Portanto, é difícil ver isso com essas linhas azuis agora. Mas há uma fronteira em ambos os lados. Acho que está tudo bem por enquanto, então vou deixar isso E então essa outra opção para empilhar no celular, certo, mas não é tão bom empilhar . Eu vou devolver isso. E sim, acho que é isso para as configurações gerais da seção. Por enquanto, vou apenas digitar o resto dos meus ícones. Então eu vou aqui e qual foi o próximo ritual sustentado, ok? Então, este é sobre uma energia calma e focada que dura 4 horas. Na verdade, eu poderia aumentar esse zoom um pouco para vocês Parece que não consigo ampliar , então vou aumentar isso em termos de tamanho da fonte. Ok, então ritual sustentado, uma energia calma e focada que dura horas. Então, o que seria isso? Energia calma, provavelmente. Tudo bem, deixe-me colocar esse. Novamente, quero discar os ícones chicotes e substituir o conteúdo aqui. E o que foi? Ritual sustentado? Vou digitar isso em mim mesmo. Tudo bem, legal. E então a terceira aqui, qual é a faísca metabólica Portanto, um impulso natural à base de plantas para o seu metabolismo. Então, aumento do metabolismo. Acredito que tenho um aqui para metabolismo. Vamos colocar esse. Novamente, torne-os muito maiores, substitua o conteúdo, faísca metabólica e, em seguida, mais uma que eu possa adicionar aqui para uma desintoxicação vívida, rica em clorofila cultivada à sombra para ajudar seu corpo a filtrar e limpar naturalmente. Está bem? Então, isso é algo que fala sobre limpeza e desintoxicação Então eu acredito que este é o ícone certo para isso. Novamente, colocando os tamanhos do ícone, substituindo esse título e substituindo esse texto aqui. Tudo bem. Então, vamos dar uma olhada rápida em tela cheia e, em seguida, no celular, parece muito bom, mas está faltando um título. Então, deixe-me voltar às configurações da minha seção aqui. E, infelizmente, não há opção de título nessa seção específica, o que eu acho um pouco bizarro, mas isso mesmo Podemos incluir isso em uma seção diferente. Então, vou clicar em Adicionar seção aqui. E em muitos temas modernos do Shopify, deve haver uma seção chamada Rich Text, que é uma seção flexível na qual podemos inserir diferentes partes do texto usando blocos Então, como podemos ver no exemplo, temos subtítulo, título e parágrafo Vou excluir o subtítulo e o parágrafo. Vou colocar o texto acima com ícones, e vou usá-lo apenas como título. Então, mesmo sendo uma seção nova, ela ainda está usando o esquema antigo, eu acho, porque eu ainda não cliquei em Salvar Então, vamos fazer esse esquema cinco, e isso é um pouco grande demais. Então, vamos ver se podemos consertar isso. Vou remover esta seção com borda, mas depois vamos ver, remover espaçamento vertical. Ok, vamos lá. Portanto, qualquer configuração que possamos personalizar aqui, o estilo do título, o texto do título. E para o título aqui, temos em nosso site uma cópia da minha sessão marcha. OK. Então, esses são mais benefícios do matcha em geral, mas vinculando-o à nossa marca de marchador de sessões, podemos colocar E agora vamos dar uma olhada nisso. Ok, então nossa seção aqui embaixo ainda tem essa borda, o que realmente não faz sentido com o título aqui. Então, vou remover uma seção separada com borda, e isso fará com que a seção de título se misture um pouco melhor com nossa seção de ícones. OK. Tudo bem, então, tecnicamente, duas novas seções aqui Vou clicar em Salvar e vamos fazer uma última seção. Como eu disse, essa é uma marca totalmente nova, então não temos muitas avaliações. Então, vou dar mais valor às avaliações que realmente temos e, em vez disso, vou trazer depoimentos. Então, acredito que na verdade existe uma seção de depoimentos dentro do Prestige, se eu me dedicar à confiança e à prova social E então eu posso simplesmente clicar nos depoimentos aqui. Às vezes, você descobre que há uma seção em seu tema que corresponde exatamente ao que você está tentando alcançar. E esse é o melhor cenário, mas às vezes você precisa pegar as seções existentes e trabalhar com elas para criar algo em particular. Então, não sei por que, mas ele usa um esquema de cores diferente aqui. Vamos configurá-lo para o nosso esquema de cores do esquema cinco. E para o cabeçalho da seção, vou colocar aqui os comentários de nossos clientes. Obviamente, o resto do conteúdo aqui é opcional, então vou deixar isso em branco. E então podemos entrar aqui para ver esses diferentes depoimentos Como você pode ver, temos alguns espaços reservados aqui, compartilhe o que seus clientes estão dizendo sobre seus produtos, atendimento ao cliente ou taxa de frete Então, vamos removê-los. Volte para nossa lista de depoimentos aqui. Vou pegar esse da Sara. E então, no campo do autor, posso colocar Sara E, na verdade, temos imagens de todos esses autores de depoimentos Então, eu vou até aqui. E, assim como fiz com os ícones, vou enviá-los todos de uma vez e depois selecioná-los seletivamente à medida que os colocamos em campos diferentes Então, dentro da minha pasta de clientes aqui, eu tenho três clientes que estão fornecendo os depoimentos E eu acredito que Sarah M era a garota loira aqui. Então, podemos trazer uma foto dela. E isso parece um pouco estranho neste estágio, mas as imagens são, na verdade, navegação Então, se eu for até aqui e adicionar a próxima garota, não tenho certeza de qual é qual, mas isso realmente não importa. Trazemos um novo depoimento, voltamos ao testemunho dela Ela pode ser Maya, pegá-la, colocar seu depoimento aqui, pegar o nome dela, colocar no nome da oferta E você pode ver aqui esse tipo de ato como navegação para os diferentes depoimentos, ok Deixe-me ir aqui, selecione a última imagem. Essa garota pode ser Ava, coloque o nome dela lá embaixo, coloque sua citação aqui no conteúdo, e Wala, temos nossa seção de depoimentos Tudo bem? Então, se eu for para a tela cheia, podemos ver como isso fica em uma tela um pouco maior. E se usarmos o celular, podemos ver que obtemos essa navegação deslizante com os pontos Portanto, as navegações são um pouco diferentes aqui. E, novamente, vamos dar uma olhada em qualquer outra coisa que possamos fazer para tornar isso um pouco melhor. Há algo aqui chamado fator de tamanho da fonte, então podemos realmente reduzir o tamanho da fonte. Talvez eu o reduza um pouco porque você não quer reduzi-lo muito em dispositivos móveis, especialmente se seus espectadores , se forem do tipo mais antigo, terão dificuldade em lê-lo. A única outra opção aqui que não tocamos é a largura da imagem. Então, talvez brinquemos com isso para ver. Sim, acho que podemos tornar isso um pouco maior. Então, vamos fazer 160 em vez de 140. Para cada bloco de depoimentos. Eu cliquei acidentalmente entre os blocos, o que criou um novo bloco, então acabei de excluir E eu vou clicar em Salvar nisso. E vamos dar uma olhada em nossa página inicial completa. Obviamente, eu poderia usar o FEVA. Eu poderia adicionar mais seções da página inicial. Mas para este vídeo específico da classe Skillshare, vou deixá-lo nessas quatro seções ou tecnicamente em cinco seções , se você incluir o título como uma Aqui você pode ver que temos nossa seção de heróis. Isso nos leva à coleção ou a um produto específico. Ele mostra nossa linha de produtos com diferentes nomes e preços Por que ver Macha, os benefícios do nosso produto e alguns depoimentos aqui Se você está se perguntando de onde vem essa seção de texto com ícones, na verdade ela vem do grupo de pés. Então, se você quiser remover isso ou apenas ocultá-lo, você pode fazer isso dessa forma. Talvez eu esconda isso por enquanto, porque sim, não sabemos se podemos oferecer esses benefícios. Da mesma forma, no topo do cabeçalho, talvez não estejamos em contagem regressiva para uma supervenda. Então, na verdade, não estamos fazendo a contagem regressiva para uma supervenda, então vou remover isso. Mas é uma opção. Se você tiver uma venda no futuro, você pode adicionar esse cronômetro de contagem regressiva ou barra de anúncio ao chefe do grupo, especificamente dentro do Prestige Mas, por enquanto, vou apenas removê-los, e esta é nossa página inicial atual Como você pode ver, com algumas boas animações de imagem em rolagem. E então, se olharmos no celular, também parece muito bom. Está bem? Então, em termos de importância da página, provavelmente há duas páginas que são as mais importantes, a página inicial e a página do produto Então, no próximo vídeo, chegaremos à página do produto a seguir. 8. Página do produto: No último vídeo, personalizamos a página inicial da nossa loja da Shopify, mas agora vamos passar para a página provavelmente mais importante para otimizar em nossa loja da Shopify, que é a página do nosso produto a página inicial da nossa loja da Shopify, mas agora vamos passar para a página provavelmente mais importante para otimizar em nossa loja da Shopify, que é a página do nosso produto. Se eu for até o seletor de modelos aqui e selecionar produtos, ele abrirá um novo menu e me dará todas as opções para os diferentes modelos de produtos Está bem? Então, ao contrário da página inicial, há apenas uma Portanto, esse modelo se aplica a apenas uma página. Se virmos esse Chevron à direita aqui, indica que qualquer um desses modelos pode ser aplicado a vários recursos, seja um produto uma coleção ou uma postagem de blog, etc As páginas de cada um desses recursos diferentes serão bem parecidas. Normalmente, eles usarão o mesmo modelo. E é por isso que temos esse Chevron aqui, nos dá a capacidade não apenas um modelo de produto que se aplica a todos os produtos, mas a capacidade de atribuir produtos diferentes a modelos diferentes Então, como você pode ver aqui, esse é o padrão especificamente no tema prestige Isso pode ser diferente em seu tema, mas definitivamente teremos um modelo de produto padrão e, em seguida, teremos modelos alternativos aqui. Então, como você pode ver aqui, há um modelo alternativo incorporado ao tema de prestígio chamado pré-venda abaixo dos nomes dos modelos, você pode ver a quantos produtos cada modelo Então, aqui você pode ver que o modelo de pré-venda não está atualmente atribuído a nenhum produto. Portanto, se personalizássemos isso, não teria nenhum impacto em nossa vitrine menos que atribuíssemos um determinado produto a esse modelo E só para completar aqui, vou até o administrador da loja aqui e mostrarei isso para vocês. Acredito que teríamos abordado isso no vídeo sobre a configuração da loja. Mas só para ficar claro, para fazer com um determinado produto use um modelo diferente, vou até o modelo de tema e mudo de produto padrão para outro modelo de produto. Essa seleção vem apenas do tema publicado atualmente. Então, se olharmos para nossos temas publicados atualmente, você pode ver que nosso tema atualmente publicado é Horizon. Portanto, essa é uma pequena nuance do Shopify que pode ser meio Precisaríamos criar os mesmos modelos alternativos no tema publicado atualmente, caso o tema em que estamos trabalhando ainda não seja o tema publicado. Então, se eu quisesse fazer isso, eu poderia dizer alternativa, dar a ele o mesmo nome do modelo alternativo que criei no tema prestige Isso o criará no tema publicado atualmente e, para finalizar essa pequena demonstração tangente, agora poderei selecionar uma alternativa como modelo pelo qual esse produto passará Está bem? Mas neste exemplo, não teremos modelos de produtos alternativos. Nós vamos ter apenas um modelo. Portanto, não acredito que haja uma opção para excluir aqui. Eu posso acessar o código e excluir, mas não temos acesso ao código, e essa é uma classe sem código. Então, vamos voltar para o produto padrão aqui e, em seguida, vou abrir essa barra lateral aqui. Então, os mesmos princípios de antes, mas agora temos uma nova opção no topo, que é que podemos mudar o produto que estamos vendo. Assim, podemos ver a prévia desse modelo passando por diferentes produtos em nossa loja. Então, o que vou fazer é definir isso como produto central, nosso produto principal que tem várias imagens de produtos e é nosso principal produto, ok? E então o que vou fazer é personalizar esse modelo com base nesse produto. Está bem? Então você pode ver que está muito bem desde o início. O fornecedor que não queremos aqui, então, se eu clicar na seção aqui, você pode ver que cada um desses diferentes aspectos aqui são blocos diferentes que entram na seção principal do produto, que é essa coisa aqui Vou remover o fornecedor. Eu também posso reorganizá-los, para que eu pudesse colocar o preço acima do título, se eu quisesse, realmente não faz sentido, mas eu também poderia fazer isso Então, o que posso fazer é remover alguns deles, adicionar novos e reorganizá-los. Então, vamos dar uma olhada em todos os blocos disponíveis dentro desse tema específico. Como você pode ver aqui, posso adicionar elementos extras à nossa seção principal de produtos. Aqui mesmo, ok? Além disso, abaixo da seção principal do produto, como você pode ver aqui, ela é chamada de página do produto, mas em outros temas, pode ser chamada de seção principal do produto Eu normalmente me refiro a ela em diferentes temas como a seção principal do produto. É a seção principal que determinará a página do seu produto. Mas, abaixo dela, podemos adicionar outras seções Então você pode ver que temos essa seção de produtos relacionados. E só para ficar claro, isso é preenchido com base em uma API definida pela própria Shopify Então, se você não está fazendo isso aparecer, precisa clicar mais na sua loja para que o algoritmo da Shopify descubra o que está relacionado com base nos dados reais do usuário, que no seu caso é Então, só para que você conheça esta seção de produtos relacionados, como diz aqui, as recomendações dinâmicas mudam e melhoram com o tempo. Você pode criar recomendações manuais de produtos se quiser usar o aplicativo de pesquisa e descoberta da Shopify, mas, por padrão, Shopify determinará quais produtos são relacionados com base na forma como os usuários estão interagindo Ok. Eu falei muito e só fiz uma alteração até agora em nossa página de produto. Vamos ver as mudanças em nossa página de produto agora mesmo. Como sempre, seremos limitados pelas opções disponíveis no tema. Então, deixe-me dar uma olhada no objeto da nossa página de produto. E número um, vou mudar o esquema para nosso esquema de cores específico, então isso depende da marca E o que posso fazer aqui é reduzir a largura dos detalhes reais à direita para dar mais espaço às imagens, se eu quiser. Ou eu poderia fazer o oposto. Eu posso aumentar isso, dando menos espaço às imagens. Então, inclua isso em suas preferências pessoais. Acho que 33% provavelmente foi um bom número lá, lembrando que a web é relativa Então, se eu aumentar minha tela, isso tornará as duas colunas maiores, mas mantendo essa proporção de 33% Está bem? Examinando as outras opções aqui, posso escolher um layout diferente para as imagens do produto. Então, como você pode ver aqui, lembre-se de quando analisamos na aula de moodboard se as miniaturas estavam à esquerda ou na parte inferior se preferirmos que estejam na parte inferior, podemos realmente personalizar isso por meio do nosso tema aqui, dentro do tema Prestige dentro Na verdade, gosto mais da esquerda, então vou fazer isso. E então podemos diminuir a lacuna, se quisermos, especificamente no desktop, entre essas imagens. Parece que não está fazendo muita coisa. Talvez a largura da minha tela não seja grande o suficiente. Mas sim, os mesmos princípios se aplicam aqui. Precisamos trabalhar com as opções disponíveis em nosso tema, a menos, é claro, que o codifiquemos de forma personalizada, o que, mais uma vez, veremos no final da aula. Está bem? Então eu tenho meu título, tenho meu preço. Parcelas de pagamento Portanto, se configuramos nossa loja para oferecer suporte aos parcelamentos do Shop Pay, como você pode ver aqui , isso mostrará algo Mas digamos, por exemplo, não tínhamos isso como opção, vamos querer excluí-la mesmo que esteja vazia. Um separador é apenas essa linha aqui. Estamos inserindo a descrição do produto. Podemos reduzir isso em uma seção dobrável ali mesmo Não acho que isso necessariamente faça sentido. E então temos o seletor de variantes. Portanto, se o produto estivesse disponível em opções diferentes, é aqui que usaríamos a interface do usuário para escolher entre as diferentes opções. Seletor de quantidade, essa coisa aqui que permite que você adicione ao carrinho uma quantidade maior do que apenas uma Você tem esses botões de compra para adicionar o produto ao carrinho ou simplesmente ir direto para a finalização da compra com esse produto E então os produtos complementares, que, novamente, são semelhantes aos produtos relacionados , serão baseados no algoritmo. E nessa situação, atualmente não está mostrando nada. Então, eu vou remover isso também. Vou clicar em Salvar nisso. E o que vou fazer a seguir é não fazer uma mudança muito grande aqui. Vou apenas adicionar algumas seções de acordeão aqui embaixo para adicionar mais detalhes sobre E para fazer isso, vou usar metacampos. Mas se você não estiver familiarizado com metacampos, primeiro farei isso sem metacampos, para que eu possa mostrar a diferença, e então você verá por que os metacampos são necessários neste caso eu possa mostrar a diferença, e então você verá por que os metacampos primeiro farei isso sem metacampos, para que eu possa mostrar a diferença, e então você verá por que os metacampos são necessários neste caso. Então, o que vou fazer é ir até aqui e adicionar uma seção de acordeão, que neste tema e em muitos outros temas é chamada apenas de texto dobrável Você pode ver dentro dessas opções. Na verdade, meu tema parece estar travado no carregamento, então vou atualizá-lo agora mesmo Deveria ter salvo minhas alterações anteriores. Sim. Ok. Então, voltando aos blocos na seção da página do produto aqui, vou adicionar um novo bloco chamado Texto dobrável Para o nosso acordeão. E, como você pode ver, está sendo exibido abaixo da galeria de produtos no momento. Isso porque essa caixa de seleção está marcada aqui. Vamos desmarcar isso para que apareça aqui. E é bem simples. Tudo o que é é título e , em seguida, conteúdo para quando você o abrir, ok? Você também pode colocar um código líquido personalizado aqui, que é a linguagem de programação essencialmente dos temas do Shopify, que não abordaremos nesta aula em particular E você também pode, se o conteúdo for particularmente avançado, essencialmente mais avançado do que o que você poderia colocar dentro desse campo de texto rico. Você também pode trazer o conteúdo de uma página na sua loja da Shopify, ok Então, o que vou fazer aqui é acessar meu documento de cópia da web aqui. E para o produto premium Matcher Powder, temos alguns detalhes Temos alguns ingredientes e, em seguida, temos algumas instruções sobre como usar. Então, o que eu vou fazer é pegar esses pontos e depois colocá-los aqui. E então o que eu vou fazer é chamar esses detalhes, ok? E então eu vou criar mais dois desses. Vou adicionar um para os ingredientes, texto dobrável aqui Novamente, não quero que apareça embaixo da galeria. Eu quero que apareça aqui. Este vai ser ingredientes, e então eu vou copiar os ingredientes aqui, certo? E depois mais uma para saber como usar. Então, vou até aqui, texto dobrável, removê-lo de baixo da galeria e colocá-lo de volta aqui A próxima foi como usar. Então, vou copiar esse conteúdo e colá-lo aqui. Está bem? Então, agora o que podemos ver se eu apenas esconder a barra lateral, você pode ver que adicionamos alguns detalhes à nossa página de produto aqui, que é muito bom, exceto por um problema, ok? Se formos para outro, deixe-me salvar isso para que ele não perca esse progresso. E então eu troco o produto de entrada por outro em nossa loja. Então, digamos que esta tigela de cerâmica. Você pode ver aqui que eu ainda tenho esses mesmos acordeões porque eles estão usando o Como você pode ver aqui, realmente não faz sentido falar sobre o pó macho com os ingredientes e como usar no produto da tigela de cerâmica, ok? Portanto, esse é o caso de uso perfeito para metafeld. metacampos são campos adicionais que podemos adicionar a determinados recursos, como produtos, e então podemos extrair esses valores dinâmicos. Então, como temos aqui com o título, não estamos definindo o título real no Editor da loja virtual. Isso é apenas extrair do produto em si. Da mesma forma, o preço e a variação, certo? É extraído do produto real em si, não do modelo Está bem? Então, para fazer isso, vou precisar voltar à minha loja, então vou ter que sair do editor da loja online. E então, de qualquer lugar da nossa loja, há esse botão de configurações aqui embaixo. Vou clicar nele e, em seguida, vou descer até os campos Meta e os Objetos Meta. Ok. Agora, novamente, metafeld pode parecer algo complicado, mas é basicamente apenas um campo adicional que você pode adicionar a qualquer um desses recursos, certo Assim, podemos adicionar ao objeto variante, o objeto de coleção, os pedidos dos clientes. Há muitas opções, mas a mais comum provavelmente serão os produtos. Então, vamos aqui para adicionar alguns novos campos aos nossos produtos e, em seguida, podemos clicar em Adicionar definição aqui. Então, o que eu vou fazer é dizer detalhes. Certo? E para o tipo, queremos apenas combinar o tipo do campo no editor da loja virtual. Este aqui, eu posso identificá-lo facilmente, mas não tenho certeza se diz exatamente que é um campo de texto rico, mas isso é chamado de campo mas isso é chamado texto rico porque, ao contrário disso, que é apenas um campo de texto básico que só nos permite inserir texto, o campo de texto rico nos permite colocar marcadores, listas numeradas, links, negrito certos pontos e até mesmo colocar cabeçalhos. Então, rich text é o tipo que vamos procurar aqui. Então, vou digitar texto rico para filtrar até isso. Também podemos usar metapilos para colocar uma lista de valores, então eu poderia mudar isso para lista de valores em vez de apenas um Mas, nesse caso, precisamos apenas de um valor. E então eu posso adicionar uma descrição aqui se eu achar que os administradores precisarão de ajuda para identificar o que é isso Então, eu poderia dizer detalhes mostrados na página do produto, por exemplo. Acho que é bastante autoexplicativo. Poderíamos usar esses detalhes no produto em qualquer lugar da nossa loja. Pode ir a mais lugares do que apenas a página do produto. Então, vou clicar em Salvar e vou fazer exatamente o mesmo para mais duas definições. Então, eu vou até aqui. Você pode ver que já temos detalhes definidos lá. O próximo foram ingredientes e, mais uma vez, a mesma coisa, texto rico. E então, exatamente a mesma coisa, pois eu poderia simplesmente organizá-los na ordem correta. Como usar, clique aqui, Rich Text mais uma vez e clique em Salvar. Ok, então vou mover isso aqui para baixo para que eles estejam na mesma ordem em que aparecem. E com essas definições definidas, agora tudo o que precisamos fazer é adicionar dados a esses campos personalizados no produto ao qual eles pertencem. Então, vou sair daqui e depois vou para o produto principal, o produto ao qual esses ingredientes detalhados e como usar realmente se aplicam, e depois vou rolar até o final para encontrar meus metacampos qual esses ingredientes detalhados e como usar realmente se aplicam, e depois vou rolar até o final para encontrar meus metacampos Então, aqui você pode ver detalhes dos ingredientes e como usar. Vamos definir isso no nível do produto agora, e não no editor da loja on-line, que, como mencionei antes, se aplicará a todos os produtos que usam esse modelo. Está bem? Então, novamente, posso copiá-lo do Editor da Loja Online, posso copiá-lo daqui. Vou apenas copiá-lo daqui, entrar em detalhes, copiar isso, entrar em ingredientes, copiar isso e depois ver como usar e copiar isso. Ok. Vou clicar em Salvar nisso. E só para deixar mais claro, se eu for a outro produto em nossa loja, a tigela de cerâmica, por exemplo, você verá que, se eu for até os metacampos do produto, esses valores não serão definidos para todos os Eles são definidos apenas em um nível de produto individual, ok? Então é assim que podemos atribuir informações a um produto, mas não ao outro na Shopify Agora que esse metacampo foi vinculado, podemos usar algo chamado vinculação dinâmica para preencher esse conteúdo do campo de detalhes com o valor do com o valor do Então, vou pegar todos esses pontos aqui, removê-los e clicar nesse botão aqui para conectar uma fonte dinâmica. Então, vou clicar aqui e depois não saberemos por que ele está mostrando opções para se referenciar. Só precisamos pressionar esse Chevron para voltar e queremos acessar o objeto do produto, e então você pode ver aqui que poderíamos extrair outros aspectos que já existem do objeto do produto aqui, como o título ou o fornecedor ou aqueles que já criamos Então, vou adicionar meus detalhes aqui, certo? Ainda não está aparecendo, mas vou clicar em Salvar e espero que apareça para mim Na verdade, acabei de perceber que ainda estamos usando o produto cerâmico. Então é exatamente isso que esperamos que aconteça se os detalhes estiverem em branco e simplesmente não mostrarem o acordeão, ok Então, se eu fizer outro desses, se eu for até os ingredientes e me livrar desses ingredientes, conectar à fonte dinâmica, adicionar ingredientes do metafampo, você verá que eles desaparecem da página do produto em particular Mas se eu mudar o produto que estou vendo para aquele em que os valores do metafampo foram definidos, você pode ver os detalhes e os ingredientes que estão chegando Eu vou fazer esse último, como usar. Vou remover o conteúdo do nível do modelo e trazer uma fonte dinâmica que vai desde o próprio produto real até como usar o metacampo aqui. Clique em salvar nisso. E agora, em vez do que tínhamos antes, que aplicávamos a todos os produtos, isso só se aplicará a esse produto em particular. E então, como vimos uma pequena prévia de antes, se eu for até o produto de tigela de cerâmica, você verá que eles, mesmo os blocos estejam aqui no Online Store Editor, porque esse valor está em branco, simplesmente não os mostrarão. Então, ele mostrará o valor acordo com o metaf, mas se estiver vazio, simplesmente não mostrará nada , e é exatamente como deve funcionar Ok, então, para finalizar esta página do produto antes de passarmos para as outras páginas, eu poderia adicionar um pouco mais a este modelo de produto. Talvez eu queira lembrar por que eles comprariam sem os benefícios de nosso Então, em vez de recriá-lo, o que posso fazer é realmente voltar para o modelo em que essa seção já existe E eu posso copiá-lo. Então eu posso ir até aqui. Obviamente, existem duas seções diferentes, mas essa será mais fácil replicar do que esta E o que posso fazer aqui é clicar aqui para copiar ou botão direito do mouse aqui e clicar em Copiar. Depois, posso acessar o modelo do meu produto aqui, clicar com o botão direito do mouse aqui e clicar em Colar no meio. Ok. Aí está. Portanto, a seção com todas as configurações que tínhamos anteriormente está sendo exibida. E então eu só preciso adicionar essa seção de rich text novamente. Vou apenas pesquisar texto rico aqui. Ele adicionará algum conteúdo extra por padrão, mas eu só preciso dele para o título. Então eu vou entrar aqui e dizer, por que fazer uma sessão? E então eu quero definir isso para o esquema de cores correto, remover essa borda separada e, em seguida, também a seção de produto relacionada que acabei de notar não é o esquema de cores correto, então vou defini-la para o nosso esquema de cores. Agora mesmo. Também podemos mudar isso para um esquema de cores ligeiramente diferente , se quisermos inverter as cores, talvez Mas agora temos essa seção duplicada em nosso modelo de produto E se dermos uma olhada em nosso modelo de produto agora, vou dar uma olhada no produto principal. Então, vou dar uma olhada aqui no nosso principal produto, o pó premium Macha, e vamos dar uma olhada na página do nosso produto agora mesmo Obviamente, há muito mais que poderíamos fazer na página do produto se você tiver pessoas usando o produto. Obviamente, quanto mais provas sociais e demonstrações do produto você puder colocar nesta página, melhor. Assim, você pode adicionar mais seções abaixo da seção principal do produto. Mas neste vídeo, abordamos algumas das opções do tema Prestige e, o mais importante, falamos sobre metacampos que podemos trazer por meio de links dinâmicos no editor da loja virtual para que possamos definir dados no nível do produto, dessa forma, e ter essa capacidade Acesse nosso modelo nas áreas certas usando o ponteiro da loja online. Ok, então, com a página do produto e a página inicial fora do caminho, vamos passar para algumas outras páginas no próximo vídeo e encerrar este site construído 9. Outras páginas: OK. Então, neste momento, configuramos as duas páginas mais importantes em nosso site da Shopify, a página inicial e a página do produto Vamos continuar analisando a lista e otimizando o restante das páginas. Então, se eu for ao meu seletor de modelos aqui, começaremos na página inicial Personalizamos o modelo do produto. Vamos dar uma olhada agora no modelo de coleção, e só temos um aqui, o modelo de coleção padrão. OK. Portanto, as páginas de coleção não serão muito importantes para nós como uma loja com uma linha de produtos de apenas quatro produtos, mas há algumas otimizações que podemos fazer Como podemos ver em nosso grupo de modelos aqui, temos duas seções, o banner da coleção e a página da coleção. Obviamente, o contraste aqui não é o ideal. Vamos definir os dois para o nosso esquema de cores. Isso já está muito melhor. Então, vamos definir isso para nosso esquema de cores cinco, que é nosso esquema de cores personalizado que está na marca. E acho que podemos deixar isso um pouco mais bonito adicionando uma imagem de fundo Então, eu vou fazer isso agora. Vou entrar na minha pasta de imagens aqui e dar uma olhada, acho que essa aqui pode ser uma boa imagem de fundo. Então, eu vou trazer esse e clicar em pronto. E agora precisamos fazer mais algumas mudanças. Isso o tornou muito grande. Acredito que o tamanho da imagem tenha sido definido para a proporção original da imagem. Na verdade, quero que seja bem apertado. Então, isso é tão pequeno quanto parece, X pequeno. E então eu realmente não quero aquele texto verde escuro. Então, vou voltar para o esquema quatro, e isso parece muito melhor, ok? Portanto, também podemos remover a configuração do título transparente aqui e mostrar ou ocultar as migalhas de pão aqui Não sei se faz sentido ter uma loja em casa, a loja A, mas se você tem muitas coleções, talvez queira manter esse elemento de migalhas de pão E se houver uma descrição da coleção, ela será exibida. Eu poderia simplesmente remover isso no caso de haver esse efeito paralelo Não tenho certeza se eu vibro com esse efeito paralelo. Depende de você deixar isso aí ou não. Novamente, tudo depende do seu tema. A opacidade, talvez eu aumente um pouco mais para aumentar esse contraste O texto está um pouco acima do rótulo da imagem, o que não é o ideal. Provavelmente queremos usar uma imagem de fundo ligeiramente diferente qual o texto não seja sobreposto ao texto, mas vou deixá-la lá por enquanto E olhando aqui, vamos ver quais são as opções para nossa seção principal da página de coleção. Temos nossos produtos MAX por página de 48, mas temos apenas quatro produtos. Não acho que precisemos filtrar por disponibilidade e preço, então vou remover completamente os filtros E então eu não sei se precisamos ter esse seletor de grade Eu acredito que este é o seletor de tamanho da grade. Então, vou simplesmente remover isso. E isso simplifica muito mais nosso design. Acho que isso faz mais sentido quando estamos lidando com uma linha de produtos tão pequena, compre os quatro produtos aqui. E estamos saindo de Sort by lá dentro. Não tenho certeza se também podemos nos livrar da classificação por, mas normalmente as páginas da coleção têm a opção ordenar por no canto. Desligue isso. E eu também posso desligar a quantidade de produtos, certo? Então, são apenas esses quatro produtos. Vou deixar a contagem de resultados do produto aqui. E clique em salvar nisso. Estou muito feliz com isso. Obviamente, você vai querer personalizá-lo de acordo com suas preferências dentro das opções disponíveis do tema que está usando, se não estiver usando prestígio E agora que isso foi feito, vamos passar para o próximo modelo na lista. Essa é uma que não é muito comum. Não costumo trabalhar na página da lista de coleções. É apenas um único modelo que lista todas as coleções da sua loja. E como você pode ver aqui, só tenho uma coleção, então isso é bastante redundante O próximo, vale-presente. Isso só é relevante se oferecermos vales-presente. O próximo é o carrinho. Novamente, isso não é muito relevante se estivermos usando o cartão deslizante moderno. Então, se eu for até um produto, espero poder fazer isso dentro do Editor da loja online Caso contrário, provavelmente posso clicar aqui para visualizar. E então podemos realmente obter uma prévia funcional do nosso site até agora. Então, se eu fosse até aqui e clicasse em Adicionar ao carrinho, você veria que ele aparece em nosso pequeno cartão lateral aqui , em vez de nos levar à página do carrinho Então, por padrão, todos os sites do Shopify terão essa página de carrinho Mas se você estiver usando algum tema moderno, será mais provável que tenha esse carrinho deslizante interativo. Portanto, a personalização desse modelo específico, se for o caso, não é de muita importância Alguém literalmente teria que navegar até o seu site slash CART para acessá-lo se você estiver usando a gaveta de cartões Está bem? Aqui, você pode clicar no personalizador de contas de checkout Isso leva você a um personalizador totalmente diferente. Este é apenas um link para uma seção totalmente diferente da sua loja da Shopify. Então, eu não vou cobrir isso. Tecnicamente, isso está fora do editor da loja online. Em seguida, chegamos às páginas, blogs, postagens de blogs. Está bem? Então, obviamente, blogs e postagens de blog só serão relevantes se você estiver administrando um blog em sua loja de comércio eletrônico Isso é como um recurso secundário do Shopify. Shopify é uma plataforma de comércio eletrônico, portanto, fornece todos os recursos para vender um produto não seja conhecida como uma plataforma de blogs Talvez não seja conhecida como uma plataforma de blogs como o Wordpress, mas você tem a opção de adicionar blogs diferentes É um pouco confuso, mas você pode pensar cada blog como uma categoria diferente em seu blog em seu site Assim, você poderia ter, por exemplo, um blog para receitas e um blog para artigos de periódicos ou qualquer outra coisa. Certo? Então, na verdade, não vamos abordar isso nesta aula porque nossa loja também não será um blog. Mas se você quiser personalizar esses modelos, é um princípio semelhante ao modelo de produtos. Você tem sua lista de modelos alternativos aqui ou do modelo padrão, e isso dependerá de qual postagem de blog você executa por meio desse modelo, e cada uma das postagens de blog será executada por meio desse modelo de postagem de blog Cada um dos blogs usará esse modelo de blog padrão. OK. Aquela em que eu realmente quero me concentrar no resto deste vídeo são as páginas. Então, se clicarmos aqui para ver as páginas, você pode ver que temos a página padrão, página de contato, que é atribuída a uma página, perguntas frequentes e coleções de listas. Eles são o padrão em prestígio. Não será necessariamente o mesmo em seu tema, mas quase todos os temas do Shopify provavelmente sairão da caixa com um modelo de página obviamente padrão e um modelo de página de contato Ok, então, como as páginas funcionam na Shopify, especificamente neste recurso de página Se eu for para a página padrão aqui, você verá que ela nos mostrará o modelo de página aplicado a essa página específica, mas, assim como quando estávamos personalizando o modelo do produto, podemos clicar aqui para alterar isso e ir para outra página em nossa loja Assim como os produtos, isso está em uma seção diferente da nossa loja. Então, se eu voltar para nossa loja aqui, estou na seção de produtos atualmente. Mas se eu for até o canal de vendas da Loja Online aqui e clicar em Páginas, você verá que essas são as duas páginas que temos em nossa loja. Basicamente, a página da política de privacidade e a página de contato. Se clicarmos na página da Política de Privacidade aqui, você poderá ver que ela é executada por meio do modelo de página padrão. Mas se clicarmos aqui, há outro modelo de página chamado Contato. Ok, então aqui, se voltarmos apenas às opções de privacidade, o conteúdo dessa página está vindo desta seção de conteúdo aqui. Mas se deixarmos isso, vou clicar aqui para descartar minhas alterações De qualquer forma, eu não fiz nenhuma alteração. E se entrarmos aqui para entrar em contato, você verá que está vazio, mas está usando um modelo diferente. Portanto, o conteúdo dessa página específica está vindo de acordo com o que definimos aqui no modelo alternativo. Então, se eu entrar em contato, aqui mesmo, você verá que, em vez da seção de página padrão, que está oculta aqui, estamos usando este formulário de contato. E isso nos permite criar páginas com qualquer conteúdo personalizado que quisermos, ok? Obviamente, na página de contato, faz sentido trazer essa seção do formulário de contato, que já está disponível. Se tivermos outras páginas que queremos trazer para nossa Shopper fi Store que não se encaixam em nenhuma das outras categorias aqui, é aqui que fazemos isso E para finalizar esse vídeo, na verdade vou criar um com você agora mesmo. Então, a primeira coisa que vou querer fazer, na verdade, podemos começar no Editor da loja virtual e configurá-lo aqui e depois atribuí-lo a uma página ou podemos criar uma página e criar um modelo que atribua essa página imediatamente. Vou criar a página primeiro e vinculá-las. Então, vou até aqui, clique em Adicionar página e vou criar uma página Sobre nós para essa marca Shopper Pi E em vez de falar sobre nós, que é um pouco árido, vou dizer A história. OK. Vou clicar em Salvar nisso, torná-lo visível. Novamente, não importa se o tornamos visível ou oculto porque nosso site ainda não está ativo. E o que vou fazer é mudar isso para um novo modelo que vamos configurar em nosso editor de loja virtual. Então, vou até nosso seletor de modelos, vou até Pages, criarei nosso seletor de modelos, vou até Pages, um modelo e chamarei isso de Eva About Us ou Our Story Vou clicar em Criar modelo sobre isso. E como você pode ver, como ainda não está atribuído a nenhuma página específica, basta escolher a primeira página em nossa Loja Shopify Mas, como você pode ver, aqui em cima, diz, atribuído a zero páginas. Então, vamos corrigir isso. Vamos até aqui e acredito que terei que atualizar depois de adicionar o modelo E então eu vou clicar aqui. Novamente, temos o mesmo problema em que ele não me permite selecioná-lo , a menos que seja um modelo no tema ativo. Então, vou ter que duplicar o mesmo processo no tema que está no tema ao vivo Então, vou até aqui, fazer exatamente o mesmo processo, mas sobre o tema atualmente publicado, que é Horizon. E esse é o pequeno truque que me permitirá selecioná-lo aqui, como você pode ver, Nossa história Tudo bem, então vou clicar em Salvar e depois atualizarei aqui no Editor da minha loja online Agora você pode ver que nossa história está atribuída a uma página, mas ainda estamos vendo a página da política de privacidade fornecida por meio desse modelo. Então, vamos mudar isso para Nossa história. E agora, com um modelo criado e atribuído a uma página específica no back-end da nossa Loja Shopify, agora podemos personalizar essa E para acessar esta página, podemos ver a URL aqui, ok? Vamos agora e criar uma página que história de como a sessão espírita foi iniciada Em primeiro lugar, vou ocultar a seção da página padrão e, em seguida, vou pegar a história, que escrevi no documento de cópia da web aqui, e descobrir a melhor maneira de exibir essas informações com as seções disponíveis no tema, ok? Então, temos nossa história. É uma linha do tempo. Então, temos anos diferentes aqui com títulos diferentes para cada etapa da jornada. E então um parágrafo descrevendo a história em cada estágio. Está bem? Então, deixe-me dar uma olhada nas seções disponíveis no meu tema. E, obviamente, há uma variedade de maneiras diferentes de apresentarmos essas informações. Poderíamos fazer disso uma apresentação de slides. Poderíamos colocar imagens em camadas com blocos de texto aqui. Mas acredito que há uma seção real aqui com o nome de linha do tempo sob o título de contar histórias Então, como você pode ver aqui, há uma chamada linha do tempo aqui Então, com um nome como Timeline, você pode pensar que esta é uma seção apropriada para usar em nossa história aqui Então, primeiro de tudo, eu posso mudar o esquema de cores da seção para combinar com a nossa marca, e depois há esse esquema de cores interno, também. Portanto, talvez também queiramos configurar um esquema de cores inverso Talvez usemos Oh, definitivamente não queremos usar que alguém possa fazer algo assim. Deixe-me ver as diferentes opções aqui. Talvez em nosso esquema de cores, em nossas configurações de tema, apenas editemos o plano de fundo para focar um pouco mais na marca. E se usarmos essa cor e depois mudarmos do texto para nossa cor contrastante secundária Isso parece bom? Ok, isso poderia potencialmente parecer bom. Isso é meio que inverter as cores no outro esquema de cores Digamos, por exemplo, que é isso que vamos fazer. Então, o que podemos fazer é entrar e configurar um item para cada um desses anos. Assim, posso trazer a imagem que acompanha essa parte da história. Vou trazer tudo isso de uma só vez. Então, como você pode ver, aqui está uma pasta em nossa pasta de identidade de marca chamada história da marca que cobre cada estágio da jornada. Então, em vez de enviá-los um por um, vou colocá-los todos neste carregador de arquivos aqui para que eles carreguem todos de uma vez, e isso nos permitirá selecioná-los mais rapidamente em cada estágio E então vou selecionar o primeiro, o início da jornada da marca, que o ano foi, se voltarmos à nossa cópia aqui, 2020. Posso colocar isso como etiqueta de navegação ou, na verdade, vou usar isso como etiqueta de navegação, certo? Subtítulo 2020, o título vai ser o mesmo, e aí eu posso colocar a história aqui no conteúdo, certo? E depois vá para o próximo item, faça a mesma coisa, coloque a próxima imagem para a próxima parte da história. A etiqueta de navegação foi a descoberta. Também vou usar isso como cabeçalho dentro do bloco. 2021 para o subtítulo, e então vou personalizar o terceiro bloco aqui Vou colocar a imagem da terceira parte da história da marca, copiar a fonte da etiqueta de navegação e do título, substituir o subtítulo por 2022 E depois coloque o conteúdo aqui. E então, obviamente, faríamos isso nas outras duas ou três partes da história. Vamos dar uma olhada nisso antes de nos depararmos com o problema de adicionar todos esses outros itens. E podemos ver aqui que, se entrarmos em tela cheia, ela vai aparecer assim, certo, que é bonita e compacta, tem algumas animações legais E acho que isso funcionaria bem em uma página com outro conteúdo, mas essa é a nossa página de história. Então, acho que faz sentido ter uma seção separada para cada parte da jornada. Então, novamente, isso é preferência pessoal. Acho que seria melhor ter uma página mais longa com todo o conteúdo em uma única visualização Então, em vez de excluir essa seção específica, vou apenas esconder isso e encontrar uma seção que possamos empilhar para criar nossa Então, voltando à narrativa, ok, não gosto muito das outras opções dentro da categoria de contar histórias Deixe-me subir a lista. Imagem com texto. Ok, eu acho que este pode ser apropriado. Então, vou mudar o esquema de cores para o esquema cinco, nosso esquema padrão para nossa marca. Em seguida, selecionarei a primeira das imagens da história da nossa marca. Em seguida, vou clicar nele e ver os blocos para atualizar o título. Então, o subtítulo, eu acredito que foi 2020, certo? O fundador é o nome dessa parte da história, certo? Na verdade, o que diz aqui, estilo? Talvez o tornemos um pouco menor. Então, estilo H two. E então entramos no parágrafo e trazemos esse texto aqui. Tudo bem? Eu gosto disso. E então podemos adicionar outra dessas imagens com seções de texto. Altere o esquema para cinco. Talvez eu queira mudar a posição da imagem para a direita. Então, eles estão alternando. Vou adicionar nossa imagem para a segunda parte da história. Então entre em nossos blocos, subtítulo 2021, acredito que foi no próximo ano É a descoberta. Então, vamos copiar as outras partes que precisamos. Então, no parágrafo, será esse conteúdo. E então o título é a descoberta. G para garantir que todos sejam dois H em vez de H. Eu acredito que é apenas o estilo. Não está usando o H real, o que seria ruim para o SEO. Então, acho que, na verdade, prefiro que seja maior, então vou criar todos esses estilos H ou H one. Está bem? Deixe-me economizar e dar uma olhada nisso antes de prosseguir. Esqueci de colocar uma seção no topo da nossa história, então vou fazer isso primeiro Eu vou subir até aqui. E, como fizemos antes com a adição de um título em qualquer ponto do nosso modelo, vou simplesmente alterar o esquema de cores para cinco, uma seção de texto rico removendo o parágrafo e o subtítulo padrão e colocando nossa história no topo aqui OK. Agora, vamos dar uma olhada novamente. Então, temos nossa história, o fundador, a descoberta. Estou gostando disso, então vou continuar com essas seções e terminar de criar a página Obviamente, será o mesmo processo repetidamente. Então, vou passar por isso um pouco mais rápido. Então, vou apenas configurá-los e , em seguida, quantas outras partes da história temos? Temos um, dois, três, quatro. Ok, então vou configurar isso como eu quero com o esquema correto, e vou duplicar isso mais três vezes para economizar tempo. Tudo bem? Agora temos um, dois, três, quatro, e então eu só preciso alternar a posição da imagem. Então, vou colocar a posição da imagem à direita nessa e depois subir duas vezes, colocar a posição da imagem à direita nessa também. E então é só uma questão de preencher o conteúdo de cada um deles. Então, vou adicionar a terceira parte da história da marca. Novamente, volte aqui, insira o ano, que provavelmente é a fonte, faça mais um em tempo real com vocês, e depois vou passar pelo resto. Tudo bem, então essas são todas as seções em uma página. Vou clicar em salvar nisso. Vamos ver isso em tela cheia. Agora podemos ver toda a história da marca. Podemos conhecer a fundadora, a jornada que a levou a descobrir o matcha na fonte, trazendo isso para sua vida diária e, em seguida, com a missão de criar uma marca que transmitisse essa experiência a outras mulheres como E hoje, tornou-se o matcha preferido da mulher moderna do bem-estar Novamente, todas essas imagens e textos do site foram criados dentro da arte do amor. Não há Emma. Essa é uma história fictícia, mas o ideal é que você tenha uma história de marca da vida real para colocar em sua página de nossa história E, obviamente, se você conseguir imagens mesma qualidade ou até mesmo gerá-las com o nano Banana ou amar a arte peças que faltam, nas quais você não tem realmente uma fotografia real, não tem realmente uma fotografia real, você também pode usá-las para as imagens do seu site E com esta página Sobre nós, nossa página de produto, nossa página inicial, nossa página de coleção, tudo criado A última coisa que vamos querer fazer é atualizar a navegação do nosso site, porque, como você pode ver aqui, acabamos de receber a navegação padrão de página inicial, catálogo e contato. Provavelmente vamos querer mudar isso. Então é isso que abordaremos no próximo vídeo, e isso deve basicamente encerrar nossa vitrine 10. Navegação: Tudo bem, então esse vídeo provavelmente será rápido Só precisamos falar sobre navegações e como elas se vinculam ao nosso tema Quando se trata de criar uma vitrine na Shopify, há certas coisas que vivem dentro e fora do tema E, no caso das navegações, elas normalmente residem fora do tema e são trazidas usando o Editor da loja virtual, semelhante ao que vimos com produtos e metacampos Está bem? Então, costumava estar na Loja Online, mas agora podemos ir para o conteúdo. Em seguida, em Conteúdo, podemos encontrar menus e aqui temos nosso menu principal. Então, se você está se perguntando de onde vieram esses itens antes de casa, catálogo e contato, aqui estão eles, aqui dentro do nosso menu principal, ou no back-end, são chamados de listas de links. Então, como esse menu já está vinculado ao nosso tema, podemos personalizá-lo como quisermos e ele se aplicará diretamente ao nosso tema Então, como não temos um catálogo grande, vou removê-lo ou pelo menos editá-lo e alterar esse item de link para comprar. E em vez de vincular a todos os produtos, vou vinculá-lo ao nosso principal produto, o marcher premium Mas, obviamente, há alguma estratégia em sua navegação. Vai depender da sua marca e para onde você quer direcionar seus clientes. Então, no meu caso, quero direcioná-los para o produto principal que estou tentando vender aqui. E, em vez de entrar em contato, também quero ter um link para a página Sobre nós que criei, história da nossa marca que atualmente não faz parte de nenhuma outra navegação. Então, definitivamente, os usuários precisarão de um caminho para acessar essa página específica. Então, eu vou colocar isso aqui também. Então, vou clicar em Salvar. E como eu disse, como essa navegação está vinculada ao tema, se eu entrar no meu tema agora, devo ver se os itens do meu menu foram atualizados. Vamos ver como essa lista de links ou esse menu está vinculado ao nosso tema Se clicarmos na seção do cabeçalho, você pode ver aqui que temos todas essas opções diferentes e, em seguida, temos uma opção de menu. É aqui que escolhemos entre as listas de links no administrador, que eu possa clicar aqui para substituir, e isso me dará a opção de vincular outras navegações da seção de menu de nossa loja Você pode ver aqui que isso está claramente vinculado à nossa lista de links do menu principal. E é por isso que, quando editamos nossa lista de links do menu principal, ela insere nossas alterações diretamente em nosso tema Está bem? Se olharmos para as outras listas de links vinculadas ao nosso tema, se formos até aqui, devemos ter algumas em nosso rodapé Como você pode ver, nossas configurações gerais da seção de rodapé não as têm, mas nosso rodapé é composto por blocos diferentes Então, como você pode ver aqui, isso é extraído de algo chamado menu de rodapé Então, se eu abrir em uma nova guia para que ele possa alternar mais facilmente entre elas, e eu voltar para nossa seção de menus aqui, você pode ver o menu de rodapé Pesquisa e suas opções de privacidade. Você pode ver aqui que temos uma pesquisa e suas opções de privacidade estão ausentes. Talvez essa página tenha sido definida como oculta, mas podemos, é claro, entrar aqui e editá-las também. Então, em vez de pesquisar, o que realmente não faz sentido em nossa loja, vou remover a pesquisa e adicionar nossa variedade para levá-los à página de coleção do Shop All. Vamos vincular isso em nossa navegação, mas apenas no rodapé Em seguida, colocarei outro link para Nossa história. Então, podemos ir, opa, não produtos, mas páginas, nossa história Vou colocar isso acima das opções de privacidade. E, finalmente, podemos trazer de volta a página de contato que retiramos da navegação do menu principal. Então, coloque isso aqui acima das opções de privacidade, clique em salvar. E então devemos começar a ver todas essas mudanças refletidas aqui no editor da nossa loja virtual ou em nosso tema. Então, se eu clicar aqui. Ainda está mostrando as informações antigas. Deixe-me trocar isso rapidamente e depois voltar. Isso é um pequeno bug. Lá vamos nós. Ao pé do menu, podemos clicar aqui para mostrar o título ou não mostrar o título. Se clicarmos em Mostrar título, ele será retirado diretamente do título do menu por padrão, mas podemos dizer aqui, menu ou o que quisermos para personalizar esse título ali mesmo. Então, quando se trata de lista de tinta, há duas partes. Há a lista de links que realmente configuramos aqui nesta seção de menus da nossa loja Shopify e, em seguida, há o link desse menu em Então, para mostrar como criaríamos um novo menu e o vincularíamos ao nosso tema, talvez tenhamos uma segunda coluna de links de menu aqui. Então, vou adicionar um aqui. E, por padrão, ele apenas se vincula aos links do rodapé, o que nos dará uma duplicata Mas digamos, por exemplo, que, em vez disso, criamos um novo menu e dizemos um segundo menu de rodapé, e então podemos adicionar coisas aleatórias aqui Então, na verdade, digamos que nossos produtos, e talvez cada um deles possa ser apenas um link para cada um de nossos produtos, porque há apenas quatro deles. Então, vamos fazer, desculpe, um conjunto completo de marcha. Qual é o próximo? Elegante batedor Macha Ok, se definirmos o link primeiro , ele preencherá automaticamente o rótulo Isso é útil. Taça marcha premium e o pó de marcha em si Talvez coloquemos isso no topo. Clique em salvar nisso. E agora que criamos essa lista de tinta, agora podemos vinculá-la aqui dentro do nosso tema Então, podemos clicar aqui na configuração do bloco para substituí-la por nossos produtos, e então você pode ver que isso é exibido, ok? Então é assim que as navegações geralmente são feitas nos sites da Shopify Nós os configuramos aqui no back-end do nosso site da Shopify e, em seguida, os trazemos para nossa loja por meio desses campos da lista de links, se eu navegar até back-end do nosso site da Shopify e, em seguida, os trazemos para nossa loja por meio desses campos da lista de links, se eu navegar até lá. Assim, podemos trocar o menu inteiramente outra lista de links ou, se quisermos apenas alterar um item na lista de links, é claro que entraríamos aqui e podemos atualizar os diferentes itens aqui E isso também permite o aninhamento. Assim, podemos criar menus aninhados aqui com até três camadas de profundidade Tudo bem, então feche isso. Isso basicamente cobre tudo, pessoal. Vou remover a lista de produtos aqui. Isso foi só uma demonstração. E essa é essencialmente nossa vitrine que criamos Para o seu projeto de aula, pedirei que você mostre o que você construiu com o resto da turma Mas esse é o exemplo que eu mostrei para você nesta aula em particular. E no último vídeo antes da conclusão, vou falar sobre quais são suas opções agora para personalização avançada Como mencionei ao longo da aula, faríamos essa compilação sem código. Portanto, sem código, sem IA, basta usar o editor da loja online com um tema premium ou gratuito. Mas digamos, por exemplo, que há um recurso que você realmente deseja trazer para sua vitrine em que não existe uma seção dentro do seu tema atual Quais são suas opções então? É isso que vamos abordar no próximo vídeo. 11. Opções avançadas de personalização: Tudo bem, agora criamos a vitrine da nossa loja Shopify, usando o Editor da loja virtual usando E, como mencionei ao longo desta aula, estamos limitados pelas seções e pelas opções dentro das seções disponíveis em nosso tema de escolha, que, neste caso, é prestígio Mas se você quiser sair dessa limitação, mencionei anteriormente que abordaria isso no final da aula, e agora é a hora de fazer isso. E falarei sobre as duas opções sobre como usar o que é chamado de Shopify magic e sidekick para ajudar você a fazer edições E então a segunda opção é contratar um desenvolvedor real. Então, eu mencionei antes que, quando estamos usando um tema de teste, não podemos realmente editar o código e também estamos limitados em termos de recursos de IA. Se eu clicar para adicionar uma seção aqui, geralmente, há um botão aqui para gerar uma seção com IA. Então, o que eu vou ter que fazer é deixar o Prestige por enquanto porque ele está sendo julgado e mostrar isso a vocês sobre um tema que não está sendo julgado Então, vou demonstrar isso no Horizon, então vou até aqui para editar uma das coisas a serem observadas e algo sobre o qual falo no meu canal do YouTube é que todas essas seções têm código no back-end. Então, se eu clicar com o botão direito aqui, eu posso realmente clicar para editar o código. Eu posso fazer isso de qualquer lugar dentro do Editor da loja online, seja na pré-visualização visual ou aqui na barra lateral. Eu posso colocar meu cursor sobre a seção. Com o botão direito, clique em Editar código. Vou abrir esse editor de código para mim aqui, e aqui está todo o código. E você pode ver aqui todos os arquivos de código em pastas diferentes. Não vou me aprofundar no código e em como ele funciona nesta aula do Skillshare Na verdade, tenho três classes diferentes do Skillshare falando sobre desenvolvimento, desenvolvimento e codificação de temas do Shopify , desenvolvimento e codificação Eu entro em muitos detalhes nessas aulas sobre como personalizar seu tema por meio do sobre como personalizar seu tema por meio do Mas desde que fiz essas aulas, surgiram novos recursos na Shopify para gerar seções e blocos com IA Então, se eu clicar aqui para adicionar uma seção, você verá um botão aparecer que não vimos no tema Prestige porque estávamos no modo de teste, e esse é esse botão aqui para gerar Então, como você pode ver aqui na seção de pré-visualização, está promovendo que, se você tiver uma ideia, poderá dar vida a ela. Portanto, você está limitado apenas pelo que pode descrever aqui nesta caixa para adicionar à sua solicitação. Então, isso é algo com que brincar. Não vai ser necessariamente perfeito, mas podemos tentar agora. Então, uma das seções que eu criei antes de usar essa ferramenta de geração de bloqueio no Shuba fi é criar para mim uma seção de largura total que mostre duas imagens, cada imagem ocupando exatamente metade da largura da seção, ok Vou clicar em Enviar e depois deixaremos o Shopify Magic ou o sidekick fazer o que quiser. Como você pode ver, ele está criando um código para nós no back-end, mas poderemos visualizá-lo junto com as configurações da seção e tudo quando o processamento terminar. E como você pode ver aqui, ele gerou uma prévia do nosso bloco. Tecnicamente, é um bloco. Espero que, se eu clicar para sair daqui, eu ainda consiga Tecnicamente, ele cria um bloco, mas se você colocar apenas um bloco em uma seção vazia, você está basicamente obtendo uma seção Então, se eu voltar aqui, quero ter certeza que estou testando isso primeiro antes de clicar em Salvar, porque se eu clicar em Salvar, isso ficará bloqueado nesta seção e não poderei fornecer instruções de acompanhamento. Só para observar aqui, pessoal, que esse é um recurso muito novo e provavelmente evoluirá Então, se você estiver assistindo isso no futuro, isso pode ser mais avançado ou a interface do usuário pode ser diferente. Só queria deixar claro que isso provavelmente mudará muito no futuro. No momento da gravação, é assim que funciona. Então, como você pode ver, está me dando dois espaços para colocar imagens. Então, vamos colocar, eu vou colocar fotos dessas garotas. Isso realmente não importa. Estamos apenas demonstrando aqui, certo? E então vamos ver as opções que ele nos dá para que possamos aumentar a altura da imagem, ok? E a lacuna entre as imagens, eu não queria nenhuma lacuna, mas posso realmente adicioná-la se eu quiser e depois adicionar um raio de borda E então eu também posso controlar o posicionamento no celular, para que eu possa fazer com que fique lado no celular, se eu quiser, ou empilhado E essas são apenas configurações que presumimos que queremos. Então, é só uma suposição aqui , mas eu queria uma seção completa Eu queria algo que abrangesse toda a largura. Então, deixe-me ver se consigo fazer isso com instruções de acompanhamento. Eu vou dizer, bom. Mas você pode torná-lo realmente em toda a largura? Não quero o acolchoamento usual à esquerda e à direita. E então, só para ser superespecífico, a borda esquerda da imagem esquerda deve estar alinhada com a esquerda da página e vice-versa à direita Tudo bem. Pressione Enter e vamos ver se ele realmente consegue entender minhas alterações e ajustá-las adequadamente para a largura. Tudo bem, então parece que foi entendido corretamente. O lado ruim de fornecer instruções de acompanhamento para essa ferramenta de IA é que ela apagará todas as configurações anteriores. Portanto, dependendo da complexidade da seção, isso pode ser bastante irritante Então, deixe-me adicionar essas imagens novamente. OK. E isso é essencialmente o que eu estava procurando. Então, sim, ele fez um bom trabalho para uma seção simples como essa. Assim, você pode usar os recursos de IA do Shubafi para criar a aparência que deseja Vou configurá-lo lado a lado no celular. Então, talvez quiséssemos colocar algum texto em cima da imagem em ambos os lados. Torne isso vinculável, podemos fornecer essas instruções aqui também Mas é importante observar que se você clicar em Salvar aqui, estará bloqueando esta seção Então, se eu clicar em Salvar, isso me impedirá de criar novas solicitações de acompanhamento, mas eu posso entrar e editar o código se eu souber como editar o código Portanto, não posso responder, mas posso entrar e editar o código dessa forma Mas, novamente, o problema com isso é que você obviamente precisa entender o código para trabalhar com isso. Então, mais uma vez, se você quiser aprender a codificar, isso é o que há de melhor em termos de personalização de temas E há aulas aqui no Skillshare que eu criei Você pode usar se quiser entender a codificação real dos temas de Shaba fi Mas nesta aula, nos concentramos especificamente em criar uma vitrine sem qualquer codificação personalizada Agora, só para terminar com as coisas de IA, se formos até aqui, deve haver um pequeno botão aqui. Isso é muito novo no último ano no momento da gravação. Eu posso entrar aqui e pedir mudanças. Descobri que isso não funciona tão bem quanto apenas gerá-lo aqui porque acho que é um recurso mais novo, mas quero dizer, prevejo que só vai ficar melhor do que todas essas ferramentas de IA Adicione um botão sobre cada imagem que eu possa vincular em outro lugar da minha loja. Pressione Enter nisso. Então, como eu disse antes, você não pode fazer solicitações de acompanhamento aqui, mas depois de gerar uma seção de IA, seja ela gerada por IA ou não, você pode usar este pequeno editor de temas secundários E vamos ver aqui. Ajudarei você a adicionar um botão clicável sobre as imagens nesta seção Deixe-me ajustar o tema para adicionar botões. OK. Já funcionou se formos até aqui? Sim. Ok, então são meio que botões adicionados à esquerda e à direita. Então, sim, como mencionei, descobri que obtenho resultados muito melhores se estiver gerando a seção do zero com IA usando o campo prompt aqui. Então, eu definitivamente recomendo pensar bem antes de clicar em Salvar, porque, sim, suas únicas opções neste momento são personalizar o código ou usar esse recurso lateral de solicitar alterações. OK. Então, para finalizar, se as seções disponíveis em seu tema e IA não ajudando a obter o resultado exato que você deseja e você quiser um nível extra de personalização Bem, como mencionado, o nível mais alto de personalização que você pode ter com temas é editar o código Como vimos anteriormente, se clicarmos em Editar código em qualquer bloco, a totalidade do tema, incluindo as configurações da seção Então, se eu rolar até aqui, você pode ver no esquema aqui tudo isso é código JSON Mas só para demonstrar que até mesmo as configurações dentro do tema estão todas escritas em código. Assim, você tem acesso a todo o back-end, digamos, do seu tema da Shopify, incluindo as opções disponíveis no personalizador de temas E é exatamente isso que eu faço como desenvolvedor do Shopify. Eu ajudo os lojistas da Shopify a fazer personalizações mais avançadas suas lojas usando o poder do código, porque muitos vendedores querem personalizar suas lojas fora das Então é aí que eu entro como desenvolvedor. Vou deixar meu site aqui para você conferir, se estiver interessado, é Christopher dodd.com Você pode ver as marcas com as quais trabalhei aqui e alguns depoimentos de clientes anteriores, mas o princípio é que se você quiser personalização avançada, a programar ou aprenderá a programar ou contratar Então, seja eu ou outra pessoa que você possa encontrar, essa será sua melhor opção para a personalização total da sua vitrine E só para finalizar esta lição, se você é um lojista da Shopify que quer aprender mais sobre personalizações avançadas e como a tecnologia funciona na plataforma da Shopify, também tenho um canal no YouTube que você pode encontrar em youtube.com, também tenho um canal no YouTube que você pode encontrar se você é um lojista da Shopify que quer aprender mais sobre personalizações avançadas e como a tecnologia funciona na plataforma da Shopify, também tenho um canal no YouTube que você pode encontrar em youtube.com, símbolo de barra Chris Dodd Shopify. E neste canal, você pode aprender mais sobre o que eu faço e tópicos semelhantes aos que abordamos neste vídeo. Eu tenho dois vídeos aqui que se sobrepõem muito bem ao conteúdo desta aula em termos de como usar o editor da loja online e como usar chutes laterais e magia Mas também tenho vários outros vídeos sobre diferentes aspectos tecnológicos da sua loja Shopify de alguém que trabalha na plataforma há mais de seis anos Tudo bem, então se isso acabar, vamos concluir a aula do Skillshare e também falarei com você sobre seu projeto de classe no próximo vídeo 12. Conclusão e projeto do curso: Então, isso conclui esta aula sobre personalização de temas da Shopify Para seu projeto de classe, eu encorajo você a criar sua própria vitrine na Shopify, usando o método apresentado Se você tiver uma loja real, é claro que usaria sua própria loja para isso. Mas se você está fazendo esse curso apenas para praticar, você pode criar o que é chamado de loja de desenvolvimento gratuitamente. Você pode fazer isso inscrevendo-se em uma conta gratuita de parceiro e criando-a por meio do painel do desenvolvedor. Em seguida, com a configuração da loja da Shopify, escolha um tema na Loja de temas da Shopify e use o editor da loja virtual para personalizar o tema o editor da loja virtual para personalizar o de sua Você concluiu sua vitrine, compartilhe-a com a turma na seção de projetos da turma da maneira que achar mais confortável, seja por meio de capturas de tela ou por meio de um link direto Se você gosta dessa aula, deixe uma avaliação positiva e não deixe conferir algumas das minhas outras aulas aqui no skillshare.com, onde eu mergulho em desenvolvimento web, onde eu mergulho em desenvolvimento web, Shopify Obrigado, como sempre, por assistir, e vejo vocês na próxima.