Desenvolvimento de temas do Shopify: crie e personalize a sua própria loja online

1. Introdução: Olá e bem-vindo ao Shopify Theme Development: Como construir ou personalizar sua própria loja online. Eu sou Chris, eu sou um professor de topo aqui no Skillshare.com, cobrindo tópicos como desenvolvimento web e freelancing on-line. E no curso de hoje, vou levar você por um processo eficiente para criar e personalizar lojas online usando a plataforma Shopify. Shopify é uma das principais plataformas de comércio eletrônico do mundo com mais de 800.000 lojas ativas da Shopify e, na minha opinião, o lugar mais ideal para começar a construir sua primeira loja online. Como designer ou alguém com conhecimento básico de desenvolvimento web, tudo o que você precisa para desbloquear o poder da Shopify é algum conhecimento básico da própria plataforma e sua linguagem de modelos chamada Liquid. E é exatamente nisso que vamos entrar neste curso. Nas lições a seguir, vamos nos concentrar em criar e personalizar sua frente de loja por meio do uso de um tema da Shopify, que é basicamente como um modelo que determina a aparência e a aparência da sua loja online. Aprenderemos sobre a estrutura do tema, incluindo layouts , modelos, seções e snippets, como editar seu código de forma eficiente e atualizar instantaneamente sua vitrine e, finalmente, como editar seu código não só pode atualizar a aparência do seu site, mas também fornecer opções dentro do seu admin da Shopify para adicionar e personalizar conteúdo dinamicamente. No final da aula, você deve ter uma compreensão sólida do que pode fazer com temas da Shopify e a confiança para fazer alterações quando necessário. Se você quiser vender seus próprios produtos ou usar essas habilidades para ajudar empresas como freelancer ou agência, este curso irá ajudá-lo a começar no caminho certo com a Shopify. Então, se você está pronto para começar, clique no próximo vídeo e eu vou vê-lo por dentro. 2. Conhecimento e ferramentas necessários: Antes de começarmos a girar nossa loja online e editar nosso tema, é importante discutir para quem é essa aula e quais habilidades você deve ter para isso. Em primeiro lugar, se você é alguém que é EVA, já está vendendo on-line, prestes a lançar sua própria loja online ou trabalhando em uma função em que você trabalha muito com a plataforma Shopify; definitivamente ajuda saber como sua vitrine é gerada, para que você possa encontrar o lugar certo para fazer alterações. Por outro lado, você pode ser alguém como eu que pode não ter sua própria loja, mas está animado para atender aos mais de 800.000 vendedores da Shopify, que provavelmente precisarão de ajuda com seu tema em algum momento. Para mim, aprender o desenvolvimento do tema da Shopify é uma ótima oportunidade para obter uma habilidade valiosa que você pode usar para oferecer serviços aos vendedores da Shopify. No entanto, como eu toquei no vídeo anterior, este curso vai beneficiar aqueles que já têm algum conhecimento e habilidades em HTML e CSS. Se você é completamente novo nessas línguas, eu recomendo que você aprenda um pouco desses dois primeiro, e parecendo que você está bem aqui no skillshare já, um bom lugar para começar é o meu curso anterior, Desenvolvimento Web Fundamentos HTML e CSS. Além disso, ele vai ajudar a ter alguma experiência com uma linguagem de programação como JavaScript ou PHP, como o líquido de linguagem de modelos da Shopify, usa blocos básicos de fluxo de controle e iteração para exibir conteúdo. Estou falando de coisas simples como quatro loops e declarações If, que deve ser super familiar se você já fez alguma programação no passado. Caso contrário, loops e condicionais são bastante básicos e especialmente fáceis de entender e líquidos. Você não deve ter muitos problemas de qualquer forma. Algo que é meio óbvio, mas ainda vale a pena mencionar, é que você deve ter alguma familiaridade com a própria plataforma da Shopify. Quer isso seja tão básico quanto saber o que é e o que ele faz ou melhor ainda, alguma experiência com a adição e organização de produtos, páginas e posts no blog dentro do administrador. Quanto mais familiarizado você estiver com a plataforma, é claro, mais fácil será entender o que está acontecendo. A Shopify torna o gerenciamento da sua loja online o mais fácil possível, então você não precisa necessariamente ter trabalhado com a Shopify antes para aprender as coisas que estou prestes a ensinar nesta aula. Finalmente, para cobrir brevemente os requisitos tecnológicos, assim como qualquer uma das minhas aulas de desenvolvimento web, as únicas ferramentas que você vai precisar é um navegador web e um editor de código. Você também estará usando um pouco a linha de comando neste curso, mas esse é um software que vem padrão em qualquer sistema operacional. Agora, se isso já parece confuso, então eu definitivamente recomendo que você dê um passo atrás, aprenda alguns conceitos básicos de desenvolvimento da Web e volte para esta aula em uma data posterior. Um bom lugar para começar é o meu curso aqui em Skillshare.com, Fundamentos de Desenvolvimento Web, um guia para iniciantes para a web. Para resumir rapidamente, tudo o que você precisa é de algumas habilidades básicas de desenvolvimento web, com HTML e CSS, um navegador web e o editor de código, e você deve estar pronto para começar. 3. Criando uma loja de desenvolvimento: Para começar a criar e personalizar nosso próprio tema da Shopify, precisamos de uma loja da Shopify. Para nossa sorte, podemos construir uma loja gratuita usando a conta de um parceiro da Shopify. Agora esta conta é totalmente gratuita e precisamos participar do programa de parceiros para obtê-lo. Alternativamente, se você já tem uma loja, esta primeira parte, onde nos inscrevemos em parceiros e entramos na loja através da conta do parceiro, não se aplica a você. Mas tudo desde quando entrarmos em nossa loja de desenvolvimento vai se aplicar a você e sua loja. Tudo o que você precisa fazer é entrar em sua loja. Caso contrário, se você ainda não tiver sua própria loja, talvez queira criar uma loja de desenvolvimento. O que é uma loja de desenvolvimento? Bem, eu tenho um artigo da Shopify bem aqui para investigar. É basicamente um tema que podemos fazer todas as coisas diferentes que faríamos em um tema normal da Shopify, mas com algumas limitações aqui. A idéia de uma loja de desenvolvimento é como um parceiro da Shopify, como alguém que desenvolve temas da Shopify ou trabalha com clientes da Shopify, você criaria uma loja, trabalharia nela, desenvolvê-la e, em seguida, passá-la ao cliente mais tarde, e então isso se torna a loja deles, então o cliente ou o vendedor, quem quer que seja que é dono dessa loja, vai pagar por essa loja avançando. É uma maneira de desenvolver lojas sem ter uma conta da Shopify ou um plano da Shopify ainda. Isto é perfeito para os nossos propósitos porque estamos aprendendo a desenvolver temas. Não queremos necessariamente pagar os US$30 a 300 por mês à Shopify para brincar e desenvolver temas. Já tenho uma conta de parceiros da Shopify. Tudo o que preciso fazer é clicar em Login. Eu não vou passar por todo o processo de inscrição, deve ser bem direto agora porque eu sou um afiliado, ele vai para as minhas lojas referidas. Mas se eu clicar no topo aqui em Lojas de Desenvolvimento, você pode ver que temos um botão aqui para criar uma nova loja. Vou clicar nisso e vou dar um nome à loja, a loja de Skillshare do Chris. Vou criar uma senha usando meu gerenciador de senhas. Este vai servir, colocá-lo aqui, e certifique-se de salvar a senha em algum lugar. Vai exigir os detalhes da sua loja, então eu vou colocar alguns detalhes falsos aqui, e eu vou escolher um propósito de loja. Podemos escolher brincar. Vou clicar em Salvar e, assim que clicar em Salvar, precisarei salvar essa senha, é claro. Vou criar um novo documento em qualquer lugar, você pode anotar isso de qualquer maneira, e vou anotar essa senha, Shopify Store, senha. Olha como isso foi rápido. Nós já temos uma loja, e esta loja é gratuita para usar. Não tínhamos que criar um plano ou algo assim. Obviamente, se quiséssemos que esta fosse uma loja legítima, teríamos que pagar por um plano e então provavelmente ter nosso próprio domínio. Mas agora podemos trabalhar com um tema totalmente funcional e aprender tudo o que precisamos saber sobre o desenvolvimento do tema da Shopify nesse ambiente. Neste ponto, se você já tinha uma loja, é assim que ela deve parecer quando você fizer login em sua loja. Deveríamos estar todos na mesma página agora. Para nos familiarizar com a plataforma Shopify, falarei sobre esses itens de menu e o que você pode fazer na Shopify em um vídeo posterior. Mas, por enquanto, o foco está em temas. Podemos encontrar nossos temas clicando na Loja Online e indo para o primeiro item de menu chamado Temas, que é selecionado automaticamente. Se quisermos ver a nossa loja, podemos clicar em Ver a sua loja aqui mesmo. Irá aparecer com os nomes das nossas lojas separados por hyphens.myshopify.com. Como podem ver, temos um tema totalmente funcional imediatamente. O que a Shopify fez foi carregar um tema gratuito para usarmos. Este é o tema de estréia, mas não será necessariamente o caso para você. Isso está sujeito a mudanças, mas realmente não importa com que ponto de partida você começa. Tudo o que aprendemos a partir deste ponto será o mesmo. Atualmente, você pode ver que estamos executando o tema Debut, e aqui temos ações, para que possamos visualizar o tema. Podemos renomear o tema, duplicá-lo, baixar o tema inteiro. Podemos editar o código e editar o arquivo de idioma. Também podemos clicar aqui para personalizar e isso nos dá uma interface de usuário que podemos mudar coisas sobre um site sem cavar em qualquer código. É muito fixe. Dentro do nosso desenvolvimento de temas, mostraremos como criar suas próprias opções de personalização, o que é realmente simples e uma das grandes coisas da Shopify. Nós vamos começar a personalizar em um segundo, e eu vou te mostrar isso. Mas antes de entrarmos nisso, eu queria cobrir rapidamente algo que poderia enganá-lo e que está em suas preferências, você terá a proteção por senha ativada por padrão. Isso significa que, se você quiser compartilhar a loja com qualquer outra pessoa para olhar, eles precisarão dessa senha. Esta será a tela de login que aparece e eles terão que colocar essa senha para vê-la. Se estiver de acordo com as pessoas a verem, pode desativar a protecção por palavra-passe. Para nossos propósitos, eu não acho que realmente precisamos de proteção por senha, mas ela está lá se você quiser, e está habilitada por padrão. Vamos voltar à nossa seção de temas e clicar em Personalizar, e posso mostrar as opções de personalização super poderosas da Shopify. Por padrão, você estará personalizando a página inicial do seu tema, mas você pode clicar nesta lista e ela oferece todos os diferentes modelos que você pode editar dependendo do tema que você está usando ou quantos modelos você configurou dentro do seu tema. Esta lista pode ficar longa, mas para o nosso tema inicial, tema estréia, isso é tudo o que está disponível. Para chamar a sua atenção aqui para a esquerda, com a primeira aba selecionada, temos acesso a todas as seções dentro da nossa página. As seções de cabeçalho e rodapé que estão incluídas com cada página, então se eu entrar, digamos, Páginas de Coleção, você verá cabeçalho e rodapé estão lá também. Isso permanece padrão em todas as páginas, desde que esteja configurado no arquivo de tema. Vamos entrar nisso, a estrutura de código real em um vídeo posterior, mas aqui está a representação visual. Se eu clicar em qualquer uma dessas seções, eu tenho opções personalizáveis. Posso adicionar uma imagem de logotipo em vez do nome da loja. Eu posso personalizar o menu, e isso é tudo definido de dentro do código, você tem acesso a essas opções de personalização, o que é muito legal. Obviamente, o rodapé é a mesma coisa, mas na parte inferior da página e aqui você pode ver o que é chamado de blocos. Vamos aprender a usar blocos em um vídeo posterior, mas essencialmente, podemos adicionar um bloco extra aqui. Não sei se vai actualizar imediatamente. Sim, ligações rápidas estão aqui. Se removermos esse conteúdo, você verá que temos menos colunas aqui. Nós podemos realmente passar por, adicionar e excluir diferentes bits de conteúdo. Podemos excluir o boletim informativo e agora temos dois blocos e eles enchem automaticamente o espaço uniformemente, o que é muito legal. Eu vou recarregar porque eu não quero que essa alteração para salvar, e então vamos falar sobre as seções entre cabeçalho e rodapé. Agora esta parte aqui do nosso personalizador de seções vai ser diferente em páginas diferentes. Se formos para Páginas da Coleção ou Lista de Coleções ou qualquer uma delas, você verá que há uma única seção e não será possível adicionar ou remover essa seção da página. Isso é porque essa seção é codificada na página e veremos isso mais tarde quando olharmos para o código. A diferença entre praticamente todas as outras páginas do seu site da Shopify em comparação com a página inicial é que temos esse conteúdo para a seção de índice. Eu não deveria usar a seção de palavras porque eu vou deixar você confuso. Mas temos essa parte da barra lateral seções que podemos adicionar uma seção através dessas predefinições diferentes. Digamos que queríamos adicionar um mapa. Se esta seção é configurada em nosso código, então podemos adicioná-lo e temos todas essas opções de personalização. Podemos reordenar as seções, para que eu possa colocar o mapa no topo caso eu queira fazer isso proeminente. Eu posso mostrar e esconder a seção e então eu posso removê-la. Basicamente na página inicial, como ela é configurada é você tem seu cabeçalho, você tem seu rodapé, e então você tem uma lista de seções que se empilham em cima da outra que você pode personalizar. Vamos tentar um exemplo mais prático, não há nenhuma página Sobre, mas digamos que você está em uma página Sobre e você queria colocar esse mapa em. Você poderia definitivamente inserir essa seção, mas você faria isso de dentro do código. Vou te mostrar como fazer isso quando descobrirmos nosso código de tema. Estou um pouco preocupado porque este vídeo é provavelmente um pouco longo. Mas para cobrir a outra aba, estas são as suas configurações de tema, e também podemos editar quais configurações aparecem nesta seção, bem como através do nosso código de tema. Mas essas configurações de capa que serão usadas em todo o site, então títulos e links, textos corporais, preço de venda, qual será a cor dos botões. Isto é material de todo o site, então podemos colocar o que quisermos aqui através de nosso próprio desenvolvimento de temas, mas temos algumas opções padrão aqui, e isso afetará todo o lado. Temos a guia Seções, a guia Configurações do tema. Temos este seletor aqui para selecionar páginas diferentes para personalizar. Aqui, podemos ver nosso site em diferentes tamanhos de tela. Se quisermos vê-lo totalmente expandido, podemos clicar neste botão e ele vai expandir toda a largura da tela. O único problema é que você não tem acesso ao seu personalizador. Alternativamente, você pode clicar neste e você pode ver como seu site parece no celular. Você pode ter opções de personalização diferentes para dispositivos móveis ou para desktop, portanto, você pode querer visualizá-las ou ver como seu site está em dispositivos móveis. Muitas lojas online, o tráfego é mais de 50 por cento móvel, isso é muito importante dar uma olhada nessa guia. Depois, quando terminar de personalizar, clique em Salvar. Mais uma coisa que eu não cobri, ações temáticas. Este é o mesmo menu que você comeu. Se voltarmos para onde estávamos antes, este tema ações é o mesmo, ou talvez um pouco menos opções, mas é essencialmente o mesmo que ações aqui. Nós vamos clicar em Ações provavelmente no próximo vídeo, mas eu queria mostrar a você o personalizador. Se clicarmos em Salvar, essas alterações estarão ativas neste tema. Mas eu não quero fazer nenhuma alteração, então eu vou clicar em Recarregar e então nós estamos todos no mesmo ponto de partida. Essencialmente, esta é a interface de usuário que você tem que interagir com o seu tema. Agora o que vamos fazer é cavar o código do seu tema. Em combinação com o que você faz em seu código mais o que você faz em seu personalizador, você tem praticamente controle total sobre todo o seu tema, toda a sua aparência e sensação de sua loja online. Nós revisamos o personalizador nesta lição. Vamos mergulhar no código nos próximos vídeos. 4. Introdução à loja online 2.0: No vídeo anterior, mencionei que é apenas a página inicial que você pode personalizar e reordenar seções. Isso agora não é mais o caso com as atualizações da loja online 2.0 da Shopify. Você pode notar que minha aparição em seu vídeo é bastante diferente da introdução, e isso é porque este vídeo, bem como alguns outros espalhados por toda a classe, foram gravados alguns anos após esta aula ter sido publicada pela primeira vez. Dito isto, esses vídeos devem se encaixar perfeitamente na estrutura da classe e fornecer um bom complemento para os vídeos existentes. Algo que você deve ter notado é que o personalizador de temas, agora chamado de editor de temas na maioria dos vídeos desta classe, vai parecer bastante diferente do seu. Se você estiver assistindo a essa aula em 2021, por exemplo, você notará que blocos aparecem nesta exibição em árvore agora, enquanto que na maioria dos vídeos desta classe, eles aparecerão assim. É importante notar que a Shopify está mudando constantemente interface do usuário do personalizador de temas e não há necessidade de preocupação imediata, pois os fundamentos básicos de seções e blocos permaneceram os mesmos ao longo do tempo. A grande mudança que os desenvolvedores de temas precisam estar cientes é algo chamado de “modelos JSON”. Vamos aprofundar os modelos JSON mais adiante nesta classe, mas por enquanto entender que os modelos podem ser de dois tipos, Liquid ou JSON. Isso está ficando um pouco à frente de nós mesmos aqui, mas é importante notar como se você optar por usar modelos JSON sobre modelos Liquid, você não será capaz de usar o Themekit, que é o que eu vou mostrar a você no próximo vídeo. Em vez disso, você pode usar algo chamado CLI da Shopify, que usarei no vídeo diretamente a seguir. Eu acho que é uma boa idéia saber como usar o Themekit. Se você estiver trabalhando com temas modernos, esses são os temas criados após 29 de junho de 2021, talvez você queira pular o próximo vídeo. 5. Configurando o tema: Neste vídeo, vamos configurar algo chamado Theme Kit para desenvolver e editar nosso código em nosso próprio computador. Se você já fez algum desenvolvimento web no passado, você entende que editar a partir de um navegador online como uma interface como nós temos aqui, não vai ser a melhor prática. Podemos, claro, se quisermos fazer alguma alteração ao nosso tema, entrar aqui, então teremos acesso a cada arquivo de tema dentro do nosso tema e podemos mudar as coisas. Mas é muito mais limpo e um fluxo de trabalho muito melhor geralmente para se desenvolver localmente. É por isso que usaremos o Kit de Temas. Para avisá-lo antecipadamente, Theme Kit não requer um pouco de configuração. Eu sei que a configuração é a minha parte menos favorita do desenvolvimento web. Tenho certeza que vocês também não gostam disso. Mas só para você saber, esta é uma lição aqui de configurar Kit de Temas e, em seguida, estaremos diretamente no desenvolvimento e mudança de nossa loja online. Para saber mais sobre o Theme Kit e o que é, vou digitar o Shopify Theme Kit no Google. O primeiro resultado se você tiver formulado sua consulta corretamente, é este aqui certo. Este vai nos dizer em uma palavra o que o Kit de tema faz. É uma ferramenta de linha de comando para temas da Shopify. Nós apenas baixar o aplicativo e com um pouco de configuração você está fora para as corridas de criação de temas. Só para dar algum contexto e explicar por que precisamos de uma ferramenta como Kit de Tema e o que ele faz. Essencialmente, estamos usando um sistema proprietário de terceiros com a Shopify. Ao desenvolver outros aplicativos e sites, você pode ativar seu próprio servidor no seu próprio computador. Em seguida, você tem seu código em execução nesse servidor e você pode editá-lo diretamente de dentro do seu computador. O local onde o código está sendo servido e o local onde você está editando o código é o mesmo. Com a Shopify, você não pode fazer exatamente isso porque não pode executar uma loja da Shopify em seu próprio computador e, portanto, você não pode executar um tema da Shopify em seu próprio computador. Como funciona é que vamos interagir com o código que acabei de mostrar no nosso tema da Shopify. Para ver todas as alterações que estamos fazendo no código, temos que executar o tema nos servidores Skillshare e visualizá-lo como fizemos de antemão. Com isso em mente, antes de começar a brincar com seu tema e fazer edições em seu código, que pode quebrar seu site, você vai querer fazer isso em um tema diferente do que você está executando no momento. Se você estiver familiarizado com o preparo e o desenvolvimento da Web, é essencialmente assim que você pode encenar suas alterações com o desenvolvimento de temas. O que eu vou fazer é em vez de editar este tema que está atualmente ao vivo no site, eu sei que isso é apenas para a prática e nós estamos usando apenas para a prática e ninguém vai ver este site. Mas digamos, por exemplo, que você queria editar um tema que já estava ao vivo. Você não deseja editar o código que já está sendo executado, o código de tema que já está sendo executado no seu site. Talvez as pessoas já estejam navegando no seu site e fazendo compras. Você deseja criar essas alterações em um tema separado e movê-las quando estiver confiante com elas. A maneira como vamos fazer isso, é tudo que você precisa fazer é clicar em ações e, em seguida, clicar em duplicar. Agora o que vai acontecer é que ele vai criar um tema e ele vai para o padrão para copiar, o nome do tema. Mas como isso está girando, podemos renomeá-lo. Vou chamar este tema de desenvolvimento de Skillshare. Vou renomear isso. Para ver como nosso site ou como seria nossa loja com este tema, clicamos em ações, pré-visualização, em vez de visualizar. Então, quando olharmos para ele, a URL vai ser a mesma, o que é confuso. Mas aqui sabemos que estamos visualizando nosso Tema de Desenvolvedor de Skillshare porque temos esse bar aqui. Então, se você quiser compartilhar esta pré-visualização com alguém, você pode realmente clicar, compartilhar a visualização e obter este link para compartilhar com qualquer pessoa nos próximos 14 dias. Você também pode ocultar a barra, que eu não recomendaria a menos que você precise porque, você não quer se confundir sobre qual tema você está editando atualmente. Ou, você pode clicar em Fechar visualização, e isso o levará de volta à sua loja real que está executando o tema ao vivo. Porque nós apenas duplicamos o tema e nós não fizemos nenhuma mudança, ele vai parecer exatamente o mesmo. Então, voltando para o Kit de Temas, o que vamos fazer é primeiro instalá-lo e, em seguida, vamos configurar o Kit de Temas para que estejamos interagindo com esse tema específico. Então, vamos baixar nosso tema para o nosso computador e então podemos começar a editá-lo. Então, as coisas que vamos precisar para instalá-lo provavelmente é um gerenciador de pacotes. Eu uso Homebrew no macOS. Você pode estar usando o Windows no qual eles recomendam Chocolatey. Eu já tenho o Theme Kit instalado, então eu não vou passar pela instalação sozinho. Esperemos que, passando por estas instruções, você pode descobrir como instalar o Theme Kit, mas deve ser muito simples. Eu só rodei esses comandos e funcionou para mim. Agora tenho o Theme Kit instalado no meu computador. Se entrarmos em comandos, podemos ver o comando configure. Agora mesmo, se abrirmos o nosso Terminal. Então é Terminal no Mac e Prompt de Comando, eu acredito no Windows. Mas, essencialmente, seja qual for a sua ferramenta de linha de comando, meu é na verdade iTerm não Terminal, mas é tudo a mesma coisa. Vou navegar para o diretório que eu quero que meu tema entre. Eu vou fazer o código. Acho que tenho isso em corrente pessoal. Agora estamos neste subdiretório da minha pasta de código onde coloco meus projetos pessoais atuais. O que precisamos fazer a partir daqui é configurar um arquivo chamado config.yml com esses detalhes, a fim de dizer o Theme Kit qual tema nós realmente queremos editar, porque agora nós acabamos de baixá-lo. Ele não sabe para se conectar com este tema ainda. Então é por isso que precisamos configurá-lo. Você verá aqui, precisamos de uma senha, precisamos de um ID de tema, e precisamos do URL da loja. Então, o primeiro, sua senha de API. Pode ser um pouco difícil começar a sua cabeça como um não-desenvolvedor, mas essencialmente uma API significa uma interface de programação de aplicativos. Especialmente com algo como Skillshare, que é um sistema proprietário de terceiros, vamos precisar de acesso à API para alterar qualquer coisa sobre nossa loja. Neste momento, só temos acesso ao que está neste menu para editar a nossa loja. Nós só temos acesso às opções que o Skillshare nos oferece através desta interface de usuário, através deste painel back-end. Mas para fazer quaisquer alterações fora disso, isso tem que ser feito através de um aplicativo. Então, se eu clicar em aplicativos aqui, há alguns tipos diferentes de aplicativos. Um deles é um aplicativo público. Qualquer pessoa pode criar um aplicativo e disponibilizá-lo para compra ou uso na App Store. Você pode ver um par de populares aqui. Eles ganham acesso à API da Shopify e podem fazer alterações na sua loja. Para nós, só queremos mudar o nosso tema. Então precisamos configurar um aplicativo muito básico, que basicamente nos fornece a capacidade de editar nossos arquivos de tema. Se eu descer até aqui e encontrar este link escondido abaixo daqueles, chamado gerenciar aplicativos privados, eu posso entrar nesta interface que nos permite criar nosso próprio aplicativo privado. Você pode pensar neste aplicativo privado apenas como a interface para que possamos interagir com nosso código de tema em nosso próprio computador. Eu vou chamar isso de um nome descritivo, conexão Theme Kit porque isso é realmente tudo o que estamos usando para. Tenho de enviar um e-mail de emergência, mesmo que estejamos a brincar. Ele só não vai me deixar enviar o formulário de outra forma, e precisamos dar acesso a este aplicativo para permitir a edição de modelos de temas e ativos de temas. Caso contrário, este app será inútil para nós se não conseguirmos editar esses modelos de temas. Se eu clicar em Salvar, verei aqui que ele está me avisando que se eu criar essas credenciais de API, qualquer pessoa que tenha esses detalhes pode entrar e ler e escrever código de tema. Isso é fixe. Eu entendo. Crie o aplicativo e agora temos a senha. Os outros detalhes serão seu ID de tema e sua loja. A loja é muito simples. É que quando você clica em ver loja, esse é o nome dele bem ali. O ID do tema pode ser facilmente encontrado indo para o personalizador. Vamos voltar aos temas, temos muitas abas abertas aqui. Lembre-se que queremos editar este tema, não o tema ao vivo agora. Então, queremos entrar aqui e queremos clicar aqui e clicar em personalizar. No personalizador, você pode ver esse número escondido no URL, e esse é o que queremos usar para nosso ID de tema. Como eu disse antes, você pode criar este arquivo config.yml você mesmo ou você pode usar este comando linha de comando para criar automaticamente este arquivo para você, dados os detalhes. Cabe a você como você quer fazer isso. Vou usar o comando em si. Agora que estou no diretório onde quero que meu projeto vá, posso executar esse comando. Só para mostrar, agora temos um diretório vazio. Esse diretório atual está completamente vazio. Uma vez que executamos este comando ele vai criar um novo arquivo para nós. Então eu vou te mostrar isso em um segundo. Vamos executar através, tema configurar, traço senha é igual. Em seguida, vamos para o nosso aplicativo privado, encontrar a senha, podemos apenas clicar em copiar aqui. Cole isso. A próxima variável vai ser store. Pode clicar aqui, pegar o endereço da loja. O último é o ID do tema. Como mostrei no personalizador, podemos simplesmente copiá-lo do URL. Vamos verificar nosso código para ter certeza de que temos tudo configurado corretamente. Sim, parece bom. Agora, vou apertar “Enter”. Em alguns segundos, ele deve voltar sem erros. Se olharmos para o nosso diretório, veremos o arquivo config.yml está lá. Se eu abrir isso com meu editor de código, poderei ver que o arquivo que falamos aqui está bem ali. Agora, se eu executar comandos Theme Kit dentro deste diretório, ele sabe com qual tema eu quero me conectar. O próximo passo é baixar nosso tema. Isso é muito simples. O comando para isso é download de tema. Como isso está correndo, eu vou te mostrar aqui. Na documentação, você pode executar o download do tema e, em seguida, você pode especificar arquivos específicos depois disso, ou apenas executar o download do tema e ele irá baixar o tema inteiro. Aqui você pode ver que ele está baixando agora e está em 28%. Vamos pular em frente até que isso termine. Isso terminou sem erros. Se verificarmos o diretório agora, podemos ver as pastas que vimos. Se eu voltar, em qual deles eu quero clicar? Há tantos links diferentes aqui em cima. Na verdade, não precisamos mais da senha do aplicativo privado, então eu posso usar essa guia. Volte, clique em “Editar código”. Você pode ver que temos a mesma estrutura. Se eu mover isso para o lado, você pode ver que nós temos a pasta de ativos aqui, configuração, localidades, seções, tudo o que estava no código do tema do desenvolvimento do Skillshare agora está aqui em nosso diretório. Uma coisa que o Shopify Theme Kit não faz é colocar tudo em uma nova pasta. Eu vou chamar este tema de skillshare-, e eu vou precisar ir para o meu editor de código aqui e mudar diretórios para esse tema de skillshare. Tudo bem, eu também devo mencionar que há outra opção chamada tema novo. Você pode realmente criar um novo tema. Em vez de colocar em um id de tema, basta colocar em um nome do que você quer que esse tema seja, e ele irá criá-lo para você. Se você fizer isso, ele irá configurar você com um tema inicial que não tem todos os recursos de Debut. Eu recomendaria que você duplicar o tema que ele lhe dá, e, em seguida, editar esse, em vez de iniciar um novo tema do zero. Essa é a minha recomendação. No vídeo posterior, estaremos cobrindo Slate, que é ainda mais complexo do que isso. Se você queria realmente construir seu próprio tema a partir do zero, definitivamente ficar por perto até o final desta classe. Haverá um vídeo bônus no Slate. Se você quiser seguir o processo completo de desenvolvimento de seus próprios temas da Shopify, definitivamente fique por perto para essa lição. Para esta aula de Skillshare, eu queria mostrar-lhe como começar a funcionar o mais rápido possível. Eu não acho que seja necessário redesenhar tudo, reconstruir tudo do zero, é por isso que estamos usando Debut como ponto de partida. Como mostrei antes, temos nosso código de tema aqui em nosso computador local, e podemos editá-los como quisermos. O que eu vou fazer para fazer é executar ponto átomo, mas este comando depende completamente do software que você está executando. Eu uso átomo, então eu posso selecionar ponto átomo. Agora, eu tenho acesso a todo o projeto. Posso entrar, clicar em modelos diferentes e editá-los. Eu posso entrar aqui, fazer as mudanças que eu quiser, mas claro, eu vou querer ver o que isso faz com o meu tema real. A última coisa que eu vou querer fazer é executar o tema assistir, modo que sempre que eu fizer alterações em meus arquivos de tema local, ele vai atualizar meu tema real, e então eu posso olhar para ele no navegador e ver quais alterações foram feitas. Para fazer isso, tudo que eu tenho que fazer é executar um comando simples, relógio tema. Como você verá em apenas um segundo, agora diz, observando alterações de arquivo para o tema, e então ele tem o id lá. Vamos apenas fazer uma simples mudança para mostrar como isso funciona. Eu não espero que você saiba como navegar em torno dos modelos de tema ainda, pois vou mostrar-lhe isso em um vídeo posterior. Mas vamos apenas dizer que queremos nos livrar desses ícones no cabeçalho. Você pode entrar no modelo Header.liquid em seções e procurar essa parte específica do cabeçalho. Parece que está bem aqui. Vou encontrar a tag div de abertura e fechamento e apagar tudo junto. Vou acertar em “Save” nisso. Se formos para o nosso terminal, você verá que ele começou a processar esse cabeçalho, e então ele o atualizou em nosso tema ao vivo. Se você ainda não tiver isso, você precisa entrar no tema com o qual você está trabalhando e clicar em Visualizar. Eu tenho isso aqui, e você pode ver que eu estou definitivamente pré-visualizando este tema SkillShare Dev bem aqui. Se eu atualizar a página, nossos ícones devem ter desaparecido. Lá vai você, não há ícones lá. Obviamente, esta é uma mudança que você provavelmente não gostaria de fazer. We pode voltar e controlar Z para colocá-lo de volta, e então essas mudanças estão indo para atualizar muito rapidamente. Estou impressionado com a rapidez com que a Shopify faz isso. Não retarda muito o desenvolvimento, mas lá vai você, eles estão de volta agora. Agora, você pode ver que nós somos capazes de editar código em nosso computador local, e ele está atualizando em nosso tema. Este é o fluxo de trabalho. Temos o nosso tema de desenvolvimento em execução, que é apenas uma palavra extravagante para um tema que não é o tema atual, porque não queremos editar o tema atual se for uma loja ao vivo. Nós executamos nossa pré-visualização, e então temos o tema assistir em execução, e nós apenas editamos o código e fazemos o que quisermos. Temos o ambiente criado essencialmente. Agora, uma nota final antes de passarmos para o próximo vídeo é que você ainda terá acesso para entrar aqui e editar seu código no site da Shopify. Eu recomendaria contra isso porque isso criaria discrepâncias entre o código que você tem em seu computador e o código em seu tema real. Você pode entrar e alterar isso, mas ele não será atualizado em seus arquivos locais, a menos que você execute o download do tema. Para ser claro, este processo de relógio tema só acontece de uma maneira. É apenas quando você edita seus arquivos localmente, mas se você editá-los em seu site da Shopify, ele não será enviado para o computador local. Eu escolheria onde você quer editar seu código e ficar com ele. Se você vai editá-lo em seu próprio computador, que eu recomendo, não editá-lo aqui. Se você fizer isso, apenas saiba que você terá que atualizá-lo em seu próprio computador. Agora, temos nossa configuração de ambiente e temos todas as ferramentas necessárias para modificar nosso site da Shopify e personalizar nosso próprio tema. No próximo vídeo, vamos fazer uma pausa do código real. Fale sobre a própria plataforma da Shopify porque é bom ter alguma familiaridade com isso e, em seguida, no vídeo depois disso, vamos realmente entrar e explicar todo esse código que acabamos de começar a olhar. Vejo você no próximo vídeo. 6. Novos comandos na Shopify CLI v3: Olá estudantes. Neste vídeo, abordarei rapidamente as mudanças que aconteceram em 2023 O que aconteceu foi que o Shopify CLI atualizado para uma nova versão dois, versão três, o que significa que alguns dos comandos no vídeo a seguir serão um pouco diferentes Falei sobre como migrar e os diferentes tipos de comandos em comparação com a segunda versão no meu canal do YouTube Então você pode conferir esse vídeo. Em geral, é uma boa ideia, se você quiser se manter atualizado com as mudanças do Shopify, porque a plataforma está mudando muito, confira meu canal gratuito no YouTube e você pode ver o que Novo, Shopify. Eu atualizo isso com mais frequência do que estou criando aulas aqui no Skillshare Então, o que você está prestes a ver são alguns dos novos comandos na versão três da CLI Se, por algum motivo, você estiver usando a versão dois da CLI, poderá acompanhar o próximo vídeo normalmente Mas alguns desses comandos serão diferentes na versão três, que no momento da gravação é a versão mais recente. Então, no início do ano, vou falar sobre esses comandos para vocês, para que não tenham problemas no próximo vídeo, ok. Fui informado de uma análise de um de vocês que os comandos estão desatualizados. Então, eu só queria adicionar este vídeo para garantir que vocês percebessem que há uma nova versão e algo comanda. Eu mudei. Então, assista a este primeiro. Se você usa a versão três da CLI, agora que estamos todos na versão três , a próxima etapa é entender os novos comandos Para recuperar uma lista dos comandos do tema. Na versão três, podemos verificar a documentação oficial ou executar o comando Shopify theme de dentro da própria CLI A primeira coisa que você pode notar é que não há mais um comando de serviço. Esse comando era o que usamos para executar nosso código de tema localmente, mas agora foi substituído pelo comando dev, que funciona quase exatamente da mesma maneira A grande diferença aqui é que você não precisa executar um comando separado primeiro para fazer login em uma loja. Em vez disso, você adiciona a bandeira da loja ao comando com o endereço da loja na qual deseja fazer login para pressionar Enter. E assim que você estiver autenticado, na CLI, começaremos a servir esse código de tema Você pode ver essa diferença , bem como algumas outras documentadas aqui no Guia de Migração oficial. E você pode ver a lista completa de comandos aqui nesta página. Eu encorajo todos que estão migrando agora a simplesmente conferir a tabela de mudanças no fluxo de trabalho na documentação E depois de internalizá-los, deve ser fácil se adaptar às novas 7. Shopify CLI para desenvolvimento de temas de loja online 2.0: No vídeo anterior, aprendemos como configurar o Kit de Temas. Mas, infelizmente, Theme Kit não é compatível com o novo sistema de modelos JSON presente em temas modernos. Para verificar se seu tema usa modelos JSON, você pode ir para a seção de temas do seu admin da Shopify e clicar em “Editar código” no tema que deseja inspecionar. Em seguida, basta olhar dentro do diretório templates e ver se seus templates tem.json no final deles ou.liquid. Eles podem ser alguns aqui que tem.liquid sobre eles na seção de clientes e talvez o modelo de cartão presente. Mas se os principais tiverem artigo.json, cart.json, index.json, pageproduct.json, se estes forem todos.json, então você está trabalhando com um tema que usa modelos JSON. Nesse caso, você deve usar a CLI da Shopify em vez do Kit de tema. É assim que fazemos isso. O que eu vou fazer é voltar para a seção de temas aqui, e vou abrir o artigo oficial sobre como usar a CLI da Shopify para temas. Vou digitar isso literalmente no Google Shopify CLI para temas. Você deve encontrar este artigo vem em direção ao topo. Clique nesse no site oficial do desenvolvedor da Shopify. Aqui você pode ler tudo sobre a CLI da Shopify para temas. CLI da Shopify já existe há algum tempo, mas apenas recentemente no momento da gravação também permite o desenvolvimento de temas. Como você pode ver aqui, CLI da Shopify substitui o Kit de temas para a maioria das tarefas de desenvolvimento de temas. Você deve usar a CLI da Shopify se estiver trabalhando em temas da Loja Online 2.0. Isso é essencialmente temas com modelos JSON. Vamos ver como instalamos a CLI da Shopify. Eu só vou abrir isso em uma nova aba para manter esta aberta. Aqui você pode ver o guia para instalá-lo. Não vamos aprofundar a instalação neste vídeo. Aqui estão as instruções, dependendo se você está em um computador Windows, Mac ou Linux, apenas certifique-se de que você tem o Ruby 2.7 ou superior instalado em seu computador. Como verificar que é abrir o terminal. Para a maioria dos usuários, você vai usar o aplicativo Terminal. Mas eu tenho algo chamado Item, que é meu aplicativo terminal. Vou executar o comando ruby-v para descobrir a minha versão. Como você pode ver aqui, estou executando o Ruby 3.0.2, que é maior que 2.7, então estamos bem. Aqui você pode ver as instruções no Mac. Eu tenho o Homebrew instalado, então eu só passei por essas instruções de instalação e foi muito fácil. Dou-lhe um segundo para instalá-lo, se ainda não o fez. Pausar este vídeo e voltar a ele quando terminar de instalar. Para verificar se você instalou, basta digitar a versão da Shopify e recuperar um número de versão se tiver a CLI instalada com êxito. Agora que temos a CLI instalada, feche esta janela e volte ao nosso guia de introdução. Vou rolar para baixo até as referências de comando, como a CLI da Shopify funciona. É um pouco diferente do Shopify Theme Kit no sentido de que o kit Theme, você tem esse arquivo de configuração, o config.yamlfile. Você passa para esse arquivo uma senha, um ID de tema e a loja à qual deseja se conectar e como ele se autentica é por meio de um aplicativo privado, onde você coloca essa senha do aplicativo privado nesse arquivo config.yaml. Você teria visto tudo isso no vídeo anterior, então se você não sabe do que estou falando, volte para aquele. Mas como o Shopify CLI faz isso é autenticar no início. Depois de autenticado, você pode começar a servir temas localmente. Como fazemos isso, vou entrar na referência de comando do núcleo da CLI da Shopify primeiro. Vamos clicar nesse e olhar para login. login autentica você na CLI da Shopify. Este é o primeiro passo para basicamente fazer qualquer coisa na CLI da Shopify. Uma coisa importante a observar aqui é que você não pode usar a CLI com armazenamentos de desenvolvimento se você tiver apenas acesso de membro da equipe do parceiro. O que isso significa é que se eu for ao partners.shopify, que costumo fazer, e entrar na loja através da minha conta de parceiro, então eu vou às lojas e, em seguida, ver aqui, Chris Testing shop. Se eu clicar em fazer login por meio deste link, estarei conectado pela conta do parceiro e provavelmente receberei um erro quando estiver tentando autenticar com a CLI da Shopify. Isso é uma coisa importante de notar. Se você estiver trabalhando com uma loja de desenvolvimento, não poderá usar seu login de parceiro. O que você precisa garantir, em vez disso, se eu voltar à minha loja da Shopify aqui e entrar em minhas configurações, é que eu esteja conectado com a conta de usuário do administrador ou da loja. Clicando no plano aqui, desculpe não planejar, usuários e permissões, você pode ver aqui que o proprietário da loja é Chris Testing admin loja, e essa é a conta que eu estou logado como. Isto deve funcionar. Voltando aos temas da loja online, vamos executar o comando de login da Shopify. Vou voltar ao meu terminal aqui, limpar os comandos anteriores e executar o login da Shopify com o perímetro da loja e, em seguida, copiamos o endereço do meu Shopify da loja. Eu vou entrar aqui, entendido. Carregue em “Enter” e começará a ligar-nos. Agora logado. Normalmente, uma guia separada está aberta, eu acho que porque eu já estou logado na loja. Não veio com essa conta, mas só para te mostrar. Então, se eu sair, logout da Shopify, você pode ver que desconectei a conta com sucesso. Vou limpar novamente e, em seguida, executar esse comando, login da Shopify com o endereço da loja. Aperte isso e você verá que ele abre uma nova aba para eu fazer login. A partir desta lista de contas aqui, eu tenho que escolher aquele que é o dono da loja, que eu acredito ser este e diz agora autenticado com sucesso, você pode agora fechar esta página. Eu só vou olhar no meu terminal e você pode ver aqui que diz que você entrou na loja. Eu deveria estar bem para ir agora. Isso é tudo o que realmente precisamos dos comandos principais, login, logout. Você também pode preencher sua loja com dados. Um monte de pequenas características legais desta ferramenta aqui. Eu encorajo você a verificar a documentação. Mas eu vou voltar para trás e ir para a referência de comando tema agora. O botão logo abaixo da referência do comando central. Vamos entrar aqui e você pode ler tudo sobre os diferentes comandos. O primeiro, o tema Shopify nele essencialmente faz o que diz aqui clona um repositório Git para sua máquina local e também cria uma cópia do tema de exemplo Dawn. Se você quiser iniciar o desenvolvimento do tema a partir do zero, este é um bom pequeno comando para usar. Mas o que eu vou fazer em vez disso é exatamente como faríamos no Theme Kit, eu vou me conectar a um tema existente. A maneira de fazer isso é por meio do serviço de tema da Shopify. Mas precisamos do código desse tema baixado em uma máquina local antes de podermos servi-lo. Se eu voltar aqui, você pode ver, mesmo que esta loja foi criada antes de 29 de junho de 2021, eu instalei o tema Dawn. Este é o novo tema que usa o paradigma da Loja Online 2.0. Como vimos antes, é um desses temas modernos que tem arquivos.json na pasta templates, como você pode ver aqui. É isso que vou usar como tema que vou trabalhar com a CLI da Shopify. O que eu vou fazer é exatamente como fazemos com o Kit de Temas, eu vou encontrar o ID de tema desse tema, que eu posso encontrar indo para o personalizador e pegando essa parte do URL. Tenho isso na minha prancheta agora. O que vou escrever aqui é um dos comandos que você pode ver aqui, que é a atração do tema da Shopify. Para usar esse comando, basta escrever pull do tema da Shopify e, em seguida, colocar esse parâmetro —themeid, seguido pelo ID do tema. O que eu vou fazer é primeiro criar um diretório dentro deste diretório Skillshare. Posso fazer isso através do Comando no Mac, MKDIR. Esse é o comando para criar um diretório. Vou chamá-lo o mesmo que o tema, Dawn-Main. Agora eu tenho que executar o comando CD dawn-main para navegar dentro disso. Daqui posso executar o comando. Vou fazer a extração do tema da Shopify — themeid é igual a seguido pelo ID do tema, que parece ter perdido aqui. Apenas indo para ir rapidamente agarrá-lo novamente e aperte “Enter” sobre isso. Você pode ver que ele está puxando os arquivos de tema desse tema específico. Puxar significa baixar. Em alguns segundos, veremos que isso terminará. Vou avançar e encontramo-nos no final. Terminou o download agora, então eu vou para aquele diretório. Você verá na minha pasta Skillshare aqui, há um diretório chamado dawn-main. Esse é o que eu criei com este mkdir dawn-main comando. Dentro dele, você pode ver que eu tenho todo o meu código de tema. Agora que estamos dentro dessa pasta, podemos começar a executar o comando Shopify theme serve para servir esse código de tema localmente. Mas antes de fazer isso, porque vamos editar algum código, vou parar de usar iTerm e começar a executar comandos dentro do meu aplicativo editor de código. Isso é um pouco diferente, eu acho, dos vídeos originais da turma. Mas agora estou usando uma ferramenta chamada VS Code fornecida pela Microsoft. Vou abrir essa. Vai parecer um pouco diferente dos outros editores de código nesta classe. Mas ainda assim, todos os mesmos princípios se aplicam. Só temos este terminal aqui que podemos rodar dentro do editor de código. Vou limpar este terminal assim como fizemos no iTerm e daqui dentro, o que vou fazer é executar o comando Shopify Theme servir. tema da Shopify serve e enquanto isso está carregando, como você pode ver aqui, vou entrar na documentação e vamos falar sobre o que isso está fazendo. Ele vai carregar o tema atual. Onde quer que seu terminal esteja executando, se houver código de tema lá, ele vai executar isso e vai criar um tema de desenvolvimento. Agora, este é um novo conceito. Tema de desenvolvimento é como um tema fantasma pseudo. Você verá em apenas um segundo que ele cria um ID de tema e podemos visualizá-lo e editar o código. Mas você não vai vê-lo na biblioteca de temas na sua loja Shopify. Verá isso em um segundo. Em vez disso, você receberá um link para o tema de desenvolvimento e link para o editor on-line como eu acabei de mencionar, e um link de pré-visualização. Para todos os efeitos, você obtém todos os mesmos recursos de um tema de visualização normal, como se estivesse usando e trabalhando com temas no Kit de Temas. Mas este é gerado quando você executa o serviço de tema da Shopify e desaparece quando você executa o logout da Shopify como diz aqui. Claro, o código do tema continua a permanecer no seu computador e você também pode enviar e publicar o código assim que estiver pronto para entrar no ar. Mas veremos isso em um segundo. Se eu voltar ao meu editor de código agora, você verá que o processo já foi concluído. Eu só vou abrir um terminal para que você veja mais aqui. Você pode ver que ele está servindo para este endereço local que podemos olhar no navegador. O interessante é que aqui você pode ver que temos um ID de tema. Você pode ver que o link de visualização tem esse ID de tema e o link do editor de temas também tem esse ID. Podemos entrar, podemos personalizar o tema como costumávamos usar o mesmo editor de temas que usaríamos em qualquer tema, e podemos visualizar o tema usando este link e compartilhá-lo com pessoas na Internet. Se compartilharmos este link com eles, eles não poderão vê-lo porque este é um link local. Mas este aqui é um elo público que podemos compartilhar com as pessoas. Como você pode ver aqui, nós temos esse estranho nome de tema, desenvolvimento seguido por um pequeno código. Como eu mencionei antes, se entrarmos em nossa biblioteca de temas aqui, mesmo que atualizemos a página, o tema não aparecerá em nossa biblioteca de temas. É como um tema descartável que tem uma ID, tem um personalizador, mas na verdade não é armazenado em sua loja da Shopify. Se voltarmos para o link do personalizador do tema, podemos, é claro, mover algumas coisas aqui e editar isso. Mas o que é estranho sobre este editor de temas no tema de desenvolvimento é que não parece que essas mudanças sejam armazenadas fora desta sessão que estamos executando. Se eu mudar para o meu link local, você verá que a alteração ocorre. Estou falando sobre as mudanças do editor de temas aqui. Você verá que isso ocorre, mas quando enviarmos nossas alterações de código de tema para a loja mais tarde, você verá que isso não será realmente enviado para a loja. Podemos personalizar e brincar com o editor de temas aqui, mas isso não vai realmente salvar uma vez que empurrar. Tenha muito cuidado com isso com a CLI. Não sei qual é o pensamento da Shopify, mas eu testei e os dados não mudam onde deveriam. Isto é apenas todos os dados descartáveis. Eu vou fechar isso e eu vou fechar este link público para baixo, bem como nós não precisamos mais dele. Só vou atualizar nosso link de desenvolvimento local. Agora, a coisa legal do Shopify CLI em comparação ao Shopify Theme Kit é que o que acontece com Theme Kit é que ele não está realmente executando um servidor. O que está fazendo é editar arquivos diretamente na sua loja da Shopify. Então você precisa, é claro, clicar em Exibir ou Visualizar nesse tema para ver essas alterações e tudo é servido na loja da Shopify. CLI da Shopify muda isso agora porque podemos servir esse tema localmente e o que isso significa é que ele é atualizado muito mais rapidamente. Deixe-me mostrar-lhe o que eu quero dizer com isso, porque isso é um pouco de escolha do desenvolvedor e para aqueles iniciantes lá fora, você pode não entender bem o que eu estou falando aqui. Mas se eu entrar e vamos fazer uma edição. Digamos que editemos este bar aqui em cima. Estamos à procura de anúncio bar__message. Só vou usar o meu editor de código para encontrar esse pedaço de código. Em vez de block.settings.text escape, eu só vou colocar em. Só quero mostrar-te isto lado a lado para que possas ver isto a acontecer. Feche isso, feche isso. Vamos dar uma olhada no que acontece quando eu mudo esse código. Vamos mudar isso para texto da barra de anúncio, algo genérico assim. Vou apertar Salvar agora e ver o que acontece. Verá que sem que eu recarregue a página aqui, ela muda. Está detectando mudanças e atualizando aqui no nosso servidor local. Lembrem-se que este tema não existe na nossa biblioteca de temas aqui. Só existe no nosso computador local. Claro, temos esses links aqui, podemos compartilhar com outras pessoas. Mas nós não estamos realmente afetando o código sobre o tema de um tema que está armazenado em nossa biblioteca de temas aqui. Isto é tudo servido localmente. Estou dizendo isso um monte de vezes só para que ele vai afundar. Mas você verá com experiência se ainda não fizer sentido, o que isso significa se você comparar o trabalho com o Kit de tema em comparação com a CLI da Shopify. Vou fazer outra mudança aqui. Vamos mudar a cor de fundo desta barra de anúncio para algo aleatório como azul. Aperte Save nisso. Você verá que isso também se atualiza. É uma mudança bastante óbvia. Vamos abrir isso em tela cheia novamente. O que vou fazer é enviar essas alterações para nossa loja da Shopify. Vamos voltar para a documentação. Em nossos comandos de tema, você pode ver este comando aqui para Push. Antes de fazermos isso, no entanto, há também este comando aqui que podemos querer executar chamado Theme Check. Só fizemos uma pequena mudança. Mas se fizemos muitas mudanças, talvez queiramos executar este comando que irá verificar o nosso tema para quaisquer erros. Vou fechar o servidor porque estamos prontos para fazer essa mudança ao vivo. Execute a verificação de tema da Shopify. Você verá aqui que há um monte de ofensas. Muito disso não é particularmente crítico. Obviamente, esses erros provavelmente estavam sendo executados antes mesmo de eu ter feito essas alterações. Não sei o que quer fazer com isso, mas essa é uma opção. Se você quiser executar Theme Check, tenho certeza que ele vem com erros críticos. Se você tem algum em seu código, maioria das vezes agora é bastante claro para ver quando esses erros aparecem em seu navegador. Mas o que vou fazer agora é avançar e aqui você pode ver que podemos fazer upload de temas locais para a Shopify, substituindo o tema remoto, se especificado. Podemos colocar um objeto de opções aqui ou simplesmente escrever a Shopify. Acho que vou correr lado a lado outra vez, para que possas ver. Vamos aumentar o tamanho disso. Vou fazer um tema da Shopify, empurre. Aqui, se eu não especificar nenhuma opção, ele vai realmente me perguntar onde eu quero empurrar este código. Eu posso empurrá-lo para qualquer um dos temas já na minha biblioteca de temas, o que é muito legal. Vou apertar Command ou Control C para sair disso e o que vou fazer é empurrar o tema da Shopify — inédito. Acerte isso e agora ele vai criar um novo tema na minha biblioteca de temas para criar uma nova versão deste tema com. Ele enviará o código que criei meu tema local para a biblioteca de temas. Vou chamá-lo de madrugada, vamos chamá-lo assim. Agora, ele vai basicamente implantar esse código um novo tema chamado dawn-two na minha biblioteca de temas na loja à qual estamos conectados. Isso vai levar um pouco de tempo para completar, então eu vou te ver depois que isso terminar. Agora, ele diz que meu tema foi empurrado com sucesso e que agora posso visualizá-lo ou personalizá-lo. Mas eu também posso ir para minha loja, expandindo minhas janelas aqui e me refrescando na loja. Agora você verá que eu tenho um novo tema chamado Dawn-two aqui. Se eu clicar em Pré-visualizar sobre isso, ele tem todas as alterações que fizemos em cima do tema original amanhecer que fizemos anteriormente neste vídeo. Basicamente, acabamos de criar um novo tema de pré-visualização. Última etapa aqui, e isso não é realmente necessário para usar a CLI para, mas também podemos usar a CLI para publicar temas também. Se eu voltar ao meu terminal aqui, executarei o Clear e, em seguida, executarei o tema da Shopify, publicarei sem opções. Ele vai me perguntar qual dos temas que não estão publicados no momento eu quero publicar. Eu vou selecionar o amanhecer dois aqui e ele me perguntou, você tem certeza que você quer fazer o dawn-two seu novo tema ao vivo? Se eu apertar Sim, isso agora vai completar o processo. Se eu voltar para a biblioteca de temas e atualizar a página, você verá que o dawn-two agora é o meu tema ao vivo e o dawn-main foi reduzido para os meus temas de pré-visualização. É assim que usar a CLI da Shopify para desenvolvimento de temas. É um pouco mais complicado que o Kit Temático, eu diria. Mas ele tem recursos mais modernos e é mais amigável para desenvolvedores, então leve algum tempo para se acostumar com isso. Se você tiver alguma dúvida, obviamente, deixe nos comentários. Mas essa é a CLI da Shopify. Nos próximos vídeos, aprenderemos sobre algum administrador básico da Shopify e entraremos em nossa estrutura de temas. Depois de falar sobre a nossa estrutura de tema, então vamos falar mais em profundidade sobre esses novos modelos JSON. Vejo você no próximo vídeo. 8. Organização de produtos, variantes e o personalizador: Antes de mergulharmos neste código e aprender como tudo está configurado, há uma coisa que a loja está faltando e que são os produtos. Uma loja online sem conteúdo não é muito boa, e o conteúdo principal que você teria em uma loja online por sua natureza são os produtos. Aqui você pode ver que, pelo menos, Shopify oferece alguns detentores de lugares, mas se você clicar neles, eles não são produtos reais com os quais você pode interagir. O que vamos precisar é de alguns produtos. Agora, se você estiver desenvolvendo seu próprio tema da Shopify e estiver apenas seguindo este curso para saber mais sobre como personalizar seu tema. Talvez você já tenha alguns produtos. Talvez agora seja um bom momento para adicionar produtos à sua loja. Mas se você está aqui apenas para aprender o desenvolvimento do tema da Shopify e não tiver um arquivo armazenado ou trabalhar agora, precisará de alguns produtos de demonstração. Sorte nossa, Shopify oferece um pequeno conjunto de produtos de demonstração por meio de seu tema de madeira. Se formos procurar pelo tema de madeira da Shopify ou madeira da Shopify no Google, deve ser o primeiro link que aparece. Eu vou clicar sobre isso para dar-lhe um pouco de contexto, madeira é arquivos agora não está mais em uso, mas isso costumava ser o que é agora Slate. Costumava ser esse tema inicial que a Shopify forneceu, agora eles usam o Slate, que eu mencionei anteriormente, mas entraremos em mais detalhes no Slate e no vídeo posterior. A razão pela qual eu estou trazendo você aqui para o timbre repositório Git tema é que eles ainda têm ele para cima e eles têm este arquivo CSV para importar alguns produtos para o seu site. Se baixarmos este arquivo CSV, eu já o baixei bem ali, então não vou baixá-lo novamente, e então voltamos para nossa loja online. Entramos no menu de produtos e clicamos em Importar, logo abaixo dos produtos. Podemos pegar aquele arquivo. Clique em Carregar, basta clicar em Iniciar Importação. Pode levar um pouco de tempo para executar isso, mas quando isso for feito, agora você verá produtos importados, e você tem um monte de produtos de exemplo, todos eles, basicamente sapatos. Se entrarmos em qualquer um desses, podemos clicar em Exibir. Ele abrirá uma nova guia na qual podemos visualizar a página do produto com este produto específico carregado. Nós temos uma página de produto muito agradável já porque estamos usando uma duplicata do tema de estréia, mas você pode editar isso tanto quanto você quiser. Você pode ter o layout diferente. Cabe a você, você tem acesso a todo o código do tema agora. Uma coisa que temos é a entrada quebra com a variância. Nós vamos ter que voltar aqui, e para baixo em variância, nós vamos apenas excluir todas as variações. Como você está gerenciando uma loja online, os produtos são essenciais para sua loja. Este vídeo vai se concentrar principalmente em produtos. Aqui na página de seus produtos no admin da Shopify, você tem a capacidade de duplicar a visualização e a promoção. Você pode alterar o título, a descrição. Aqui é onde você adiciona suas imagens de produto. Bastante simples, bastante auto-explicativo, colocando seus preços, mas as partes de sua página de produto que eu quero entrar e discutir mais sobre nesta lição são variância e organização, então tipo de produto, fornecedor, coleções e tags. Em primeiro lugar, variância. Uma variante é basicamente as diferentes variações do produto. Você vai começar a ver o que eu quero dizer com isso em apenas um segundo. Se eu clicar em Adicionar variante, ela me dará a opção de definir um nome de opção e uma lista de valores possíveis. Um padrão bonito é o tamanho, e é definitivamente relevante para um produto como este, nem todo mundo vai querer o mesmo tamanho de tênis. O que podemos fazer é colocar em valores diferentes separados por uma vírgula, e você verá o que acontece quando eu colocar a vírgula. Se eu pressionar 8, 9, 10, 11, 12, você pode ver que eu tenho esse tamanho de opção e eu tenho cinco valores possíveis. Então estou dizendo que esses sapatos estão disponíveis nesses cinco tamanhos. Se você descer aqui, uma tabela de variação foi criada. Porque eu só tenho uma opção, e eu tenho cinco valores de opção, eu só tenho cinco variações porque você só pode encomendar o sapato em cinco variações possíveis. Mas se eu fosse adicionar outra opção, digamos para a cor. Digamos que eu possa obter todos os tamanhos em vermelho ou preto. Então, de repente, minha lista de variância se expande e duplica. Isso porque precisamos multiplicar o número de valores em um campo de opção com o resto dos campos de opção, que lhe dará a quantidade total de variações possíveis dado que somos capazes de ter vermelho em nove, preto em oito. Todas essas diferentes opções combinadas criam variância diferente. Podemos adicionar um terceiro aqui, diz material por padrão. Não sei de que material os sapatos são feitos. Vamos apenas com um material comum de algodão. Isso não vai aumentar a quantidade de variância que temos aqui porque há apenas um valor possível, derrota todo o propósito de usar variância se for apenas um valor, então temos que colocar mais. Digamos, Lycra, provavelmente não faz sentido para sapatos. Mas estou inventando coisas do topo da minha cabeça. Três opções é o máximo na Shopify. Se eu adicionar mais valores a todos esses, ele pode começar a se multiplicar e ficar fora de controle muito rapidamente e, na verdade Shopify limita a você também 100 possíveis variações em cada produto. Isso obviamente depende se eu tenho todas as combinações possíveis em estoque, e como esse produto disponível, eu tenho algodão tamanho vermelho oito tênis e vermelho-preto 10 tênis. Isso cabe a mim descobrir quais variáveis ou quais variações eu tenho na minha própria loja, e colocá-las dentro Isso é irrelevante, então vou remover isso. Com essas diferentes opções, ele vai criar 10 variantes para nós. O ponto que quero atravessar aqui, e a coisa que me tropeçou é estas são as divergências aqui. Estas são as suas opções. Tudo bem. Estes são variância, estes são. Se eu clicar em Salvar sobre isso, você verá que temos esta pequena tabela agradável aqui e podemos atualizar SKUs aqui ou adicionar imagens variantes para variância específica. Também podemos filtrar seleções clicando em um valor de opção. Entre aqui e confira os que queremos editar e editá-los em massa. Mas para ver como isso se parece no front-end, o que eu vou fazer, nós já apertamos Salvar, então podemos clicar em Exibir, e podemos ver como isso vai parecer para o usuário. Como você pode ver aqui no front-end, o usuário só tem duas opções, e eu quero no tamanho nove, e eu queria que eles pretos. Em seguida, eles vão adicionar ao código. Para nós, a fim de atender às necessidades do cliente que pode ter essas opções, vamos precisar de todos eles em preto e todos estes em vermelho, então eu vou precisar de 10 sapatos diferentes no total. Mas para o usuário, eles só têm mais opções de personalização. Felizmente, isso esclarece a variância e deixa isso bem claro. Há mais uma coisa que podemos fazer para proporcionar uma melhor experiência ao cliente, que é usar imagens variantes. Tenho uma foto aleatória de sapatos pretos na minha área de trabalho. O que eu vou fazer é clicar em Preto, e eu vou atualizar imagens para todos os sapatos pretos. Eu clico em Adicionar Imagem, e eu tenho esses tênis Nike aqui que são de cor preta. Vai carregá-los. Você só vai ter que ignorar o fato de que estes não são exatamente o mesmo sapato. Se eu salvar a página e clicar com o botão direito do mouse em “Exibir” e selecionar “Preto”, você verá que ela muda automaticamente para a imagem do produto que representa essa variante. O tamanho vai parecer praticamente o mesmo, por isso não faz sentido, mas a cor é um exemplo perfeito de quando você altera isso, você quer que suas imagens de produto mudem. Só funciona de uma maneira Esqueci-me de definir isto para Vermelho, por isso funciona ao contrário também, mas tu percebes o ponto, está bem? Na verdade, eu vou entrar lá e fazer isso agora só para ser minucioso, atualizar imagens de todo o vermelho, e definir isso como a imagem variante. A próxima coisa é Organização e os principais aqui são Coleções e Tags. Estas são as mais importantes, de longe, fora de suas opções de organização. Estas são opções adicionais de Organização que você tem para Tipo de Produto e Fornecedor. O fornecedor é um bom lugar para categorizar seu estoque pela marca, então talvez você queira fazer o fornecedor deste, Nike, e Tipo de Produto, você pode querer colocar em sapatos. Na minha experiência, descobri que Coleções e Tags são as principais maneiras de categorizar seu conteúdo. Falando na categoria de palavras, você pode pensar em Coleções como categorias, mas ao contrário de categorias em algum outro tipo de plataformas como WordPress, por exemplo, que eu já trabalhei no passado, você não pode aninhar coleções. Você tem que ser mais estratégico sobre como você aninha seus produtos em diferentes categorias. No topo da estrutura da sua organização deve estar Coleções. Se eu for à minha loja aqui, certificando-se de que estou em pré-visualização e digitando minhas coleções de URL/tudo, você verá que há uma coleção que vem padrão com a plataforma Shopify e essa é a coleção completa. Você não precisa configurá-lo no seu back-end, não o verá no seu back-end, mas se você acessar coleções/todos em qualquer site da Shopify, verá todos os produtos que são públicos nesse site. Você pode passar e verificá-los. Isso, por sinal, está mostrando seu modelo de coleção, então entraremos em que quando entrarmos em código. Mas se você entrar em seus modelos aqui, o código que você definiu aqui, ele está vinculando a uma seção, então deixe-me apenas ir para essa seção, este é o código que é executado toda vez que você acerta uma página de coleção. Agora, obviamente, os produtos e outros recursos podem mudar, mas isso é dinâmico com base no código que você colocou neste arquivo de modelo e seção. Desculpe, pulando um pouco à frente, só queria anotar que sempre que você visualiza uma coleção, você está visualizando dentro de um modelo de coleção. Como acabei de mencionar, esta é uma página de coleção padrão automática que você obtém com todos os temas da Shopify. Mas se quisermos criar nossa própria coleção, podemos fazê-lo entrando no menu Produtos e clicando em “Coleções”. Podemos ir Criar Coleção e vamos chamar este, produtos em destaque. Podemos adicionar uma descrição se quisermos e, em seguida, selecionamos o “Tipo de Coleção”. Você pode adicionar manualmente os produtos um por um, e você pode fazer isso no próprio produto ou aqui, depois de salvarmos, ou você pode torná-lo Automático com base em certas condições. Você pode usar a etiqueta do produto, preço, o fornecedor, o tipo, a comparação a preço, o peso, para criar seu filtro personalizado e, em seguida, colocá-lo em uma coleção. Você poderia usar o preço para talvez mostrar todos os produtos que estão à venda por menos de US $10 e talvez, que é uma coleção que você deseja criar. Mas para os nossos propósitos, eu vou apenas ir com Manual e eu vou clicar em “Salvar” e isso irá atualizar a página para que possamos adicionar em alguns produtos. Você pode usar isso para pesquisar ou você pode clicar em “Procurar”. Eu quero selecionar esses no final, eu definitivamente preciso selecionar “Gnarly Shoes”, meu Deus, Good Old Shoes, oh yeah. Quero os Sapatos Insanes, meu Deus, isso parece ótimo. Temos nossos cinco produtos diferentes em nossa coleção, e parece que isso é salvo automaticamente. Se eu clicar em “Ver” agora nessa coleção, teremos uma página semelhante à que vimos antes, mas agora ela tem o nome da coleção personalizada, e tem os sapatos ou produtos que adicionamos a essa coleção nós mesmos. Agora aqui, você tem ordenar por e que vem bastante padrão com a maioria dos temas, mas podemos filtrar novamente usando tags. Vamos voltar ao nosso tênis e em vez de colocar a Nike, que parece ser a marca, com esta Nike marcada lá, vez de colocar isso no Vendor, que seria um bom lugar para colocar uma marca, digamos que queremos que seja uma tag porque é mais fácil de filtrar e as tags são muito poderosas como você verá em toda a sua jornada da Shopify. Vamos colocar a Nike como uma etiqueta. Vou clicar em “Salvar” nisso. Agora, eu quero que você note o que acontece com esta barra quando atualizamos a página. Agora você verá, podemos filtrar por tag, e isso é incorporado ao nosso tema. Podemos entrar aqui, filtrar de novo, e a outra coisa que quero que perceba é a nossa URL. Lembre-se antes de irmos para coleções/todos, agora estamos em coleções/produtos de recursos, que é o nome da nossa coleção, e depois disso, temos Nike. Podemos realmente colocar o nome da tag na URL. Se eu fosse compartilhar isso com alguém, então eles veriam o mesmo filtro. É uma maneira muito legal de filtrar seus produtos e construir basicamente quase como coleções aninhadas. Embora, este título ainda diz produtos em destaque, ele está filtrando pela Nike aqui, então você pode ver esse feedback lá, mas esta é uma maneira de filtrar de dentro de suas coleções maiores. No final do dia, também poderíamos criar uma nova coleção para a Nike em destaque. Podemos entrar em Coleções, Criar uma Coleção e, digamos, chamamos isso de sapatos ou produtos Nike em destaque. Digamos que, em nossa mente, é uma categoria aninhada dessa outra coleção. Bem, infelizmente, como eu mencionei, as coleções não podem aninhar, mas o que podemos fazer é definir uma condição que a etiqueta do produto deve ser igual à Nike e então podemos configurar outra condição e marcar todos esses produtos em a coleção em destaque com outra tag que diz destaque, digamos. Vamos fazer isso agora. Ainda não tenho isso, por isso vou salvar a Nike. Oh, aqui vamos nós, precisamos remover isso. Isso só vai mostrar todos os produtos que têm Nike neles, e você pode ver aqui é autopopulating, mas vamos apenas dizer que queremos todos esses. Novamente, isso não é super limpo, mas se eu entrei em todos esses produtos e, em seguida, deu-lhes uma etiqueta de destaque. Se, eu só vou apressar através desta parte. Agora que adicionei a etiqueta em destaque a todos os produtos em destaque, posso entrar em produtos Nike em destaque, adicionar outra condição para a etiqueta de produto em destaque. Aperte salvar. Agora podemos ver que tênis incríveis vem através porque é destaque e é Nike. Para voltar atrás e aplicar essa mesma lógica aos nossos produtos em destaque, talvez queiramos tornar isso automático. Felizmente, já definimos manualmente. Teríamos que apagar essa. Vamos criar outra que é chamada Coleção em Destaque. Quando a etiqueta for apresentada, incluiremos todos esses produtos na Coleção em Destaque. Agora podemos ir para a coleção em destaque que tínhamos antes, mas agora é automático com base em tags. E podemos filtrar por Nike. Ou se quiséssemos ter algum conteúdo personalizado, como ter uma descrição ou se quiséssemos que este título mudasse, poderíamos ir para como, eu acho que era, vamos voltar e podemos apenas vê-lo a partir daqui, produtos Nike em destaque. Como você verá, isso é semelhante a isso, mas é apenas configurado de uma maneira ligeiramente diferente. Se tivermos uma coleção, há mais opções disponíveis para mostrar o título que aparece. Também temos acesso ao objeto de coleção, que nos permite pegar todos os produtos dentro dessa coleção. Novamente, isso está ficando um pouco à frente de mim mesmo. Mas você pode ver no topo, coleções é uma maneira de organizar sua loja. Você sempre pode organizar sua loja apenas com etiquetas, como se isso fosse possível. Mas a maioria dos temas, eles têm uma página de coleção e, em seguida, você filtrar por tag, que é a maneira padrão shopify de fazê-lo. Isso é essencialmente como você normalmente organizaria seus produtos. Como eu disse, você também pode organizar por tipo de produto e fornecedor, mas isso não é particularmente importante para nós. Apenas outra maneira que você pode filtrar e outras variáveis que você tem acesso dentro de seu código de tema. Passei muito tempo na página do produto. Há outros itens de menu aqui no painel da shopify, obviamente. Pedidos que não farão muito sentido até que alguém peça um produto. Os clientes são os detalhes das pessoas que fizeram um pedido com você e análises que você pode acessar e ver quem está usando sua loja e quantas vendas você fez, marketing. Tudo isso se relaciona com o dia-a-dia da sua loja. Não necessariamente relacionado ao seu tema. Mas o que eu queria fazer era entrar em produtos porque produtos tipo de, que é como o conteúdo do seu site. Ele se relaciona muito com o desenvolvimento do tema e é por isso que eu queria cavar em produtos e coleções um pouco mais. Voltando para a nossa loja online aqui, você pode ver que também podemos criar outros conteúdos na forma de postagens e páginas de blog. Agora vamos adicionar uma página mais tarde nesta classe e uma postagem de blog se você usou qualquer outro tipo de plataforma que faça blogs. Uma postagem de blog é essencialmente uma página com um carimbo de data/hora e depois é colocada em um feed que mostra o artigo mais recente primeiro. Você está familiarizado com um blog. Tecnicamente, é realmente o mesmo que uma página, mas apenas tem um propósito diferente. Você também pode entrar aqui, e é aqui que você atualiza sua navegação, que em seu código é chamado de lista vinculada. Você pode entrar aqui e adicionar um menu. Não sei se vamos entrar nessa aula em particular. Mas agora você pode ver que estamos rodando, qual menu eu vou estar executando, o menu principal aqui. Então, em nosso personalizador que definimos, é puxar no Menu Principal. Se entrarmos na navegação aqui podemos ver que tem Casa e Catálogo, que é o que temos lá. Isso combina. Domínios, preferências. Preferências que vimos antes quando desativamos a senha do site. Há outras coisas aqui que você pode colocar no código do Google Analytics ou alterar seus dados de SEO. Mas a última coisa que eu queria terminar nesta lição particular e a parte de sua loja que mais se relaciona com o tema, é claro, vai ser o seu personalizador de temas. Nós já revisamos este personalizador brevemente em uma lição anterior. Não quero passar muito tempo a rever os mesmos detalhes. Mas, essencialmente, mencionamos a Página da Coleção antes. Você pode entrar e modificar aqui mesmo que os produtos Nike são padrão. Mas podemos entrar, mudar a grade. Podemos mostrar os fornecedores de produtos e vai mostrar os tets. Não sei o que é tets, mas essa é a alegria dos produtos de demonstração. Você pode mostrar a imagem da coleção, que para esta coleção não temos. Tudo isso é configurado dentro de uma seção chamada Páginas de Coleção ou em nosso back-end, é chamado de Modelo de Coleção. Vou mostrar que todas essas opções vêm através de um esquema que escrevemos aqui. Isso é só para dar uma prévia do que está por vir nesta aula. Acho que essa é uma boa visão geral do back-end da Shopify. Obviamente, os produtos são a principal coisa que o seu site vai ser promovendo e a principal coisa com que você estará interagindo, com o seu código, será a sua personalização de sua loja geralmente vai ser em torno de apresentar seus produtos da melhor maneira com as melhores opções, filtrando de uma forma que faça sentido para o usuário. Em seguida, ter boa navegação, o que é bastante auto-explicativo. Configurando boas páginas para que essa navegação seja vinculada. Se você tem uma página Sobre ou uma página Fale Conosco. Mas sim, isso abrange uma visão geral da experiência da loja online da Shopify da perspectiva do vendedor. Agora, nos próximos vídeos, vamos investigar o código do seu tema. Então, é aqui que entramos desenvolvimento real do tema ou na personalização do tema da Shopify porque não estamos desenvolvendo algo do zero. Mas nós vamos estar indo para o código e como você pode basicamente editar qualquer coisa sobre o seu tema e realmente onde encontrar o código que você deseja ir e editar. Vejo você no próximo vídeo. 9. Código de tema - Ativos, configuração e idiomas: Bem-vindos de volta a todos. Neste vídeo, vamos finalmente mergulhar em nosso código de tema e falar sobre o que está acontecendo. Vamos abrir nosso editor de código, ou se você quiser acompanhar na seção de código de edição do seu tema, qualquer um deles está bem. Como mencionei anteriormente, recomendo que você faça todas as suas alterações aqui. Mas só por olhar para o código, você pode olhar para ele aqui, se você preferir. Eu só vou olhar para ele no editor de código porque é onde nós vamos estar editando, mas você verá aqui que se eu contratar todas essas tabelas pai, nós temos ativos, configuração, layout, localidades, seções, trechos e modelos. Modelos, trechos, seções e layout são as pastas principais do seu tema. são os que você vai editar para editar a aparência do seu site, o que você esperaria de um tema. Mas há outras pastas de suporte importantes aqui: ativos, configuração e localidades. Nesta lição, vamos abordá-los primeiro, e depois vamos para os principais, dividi-los nas duas lições seguintes. Para começar com ativos. Ativos, se você é novo no desenvolvimento da Web, coisas como imagens, folhas de estilo e arquivos JavaScript. Isso é realmente o que temos aqui. Temos imagens que usamos dentro do tema, podemos colocar aqui. Temos arquivos JavaScript. Este é para quando você faz vales-presente. Temos arquivos SCSS e você pode ver que há um líquido no final. O mais importante em seu arquivo de ativos provavelmente seria seu theme.scss.liquid. Algo com o qual você pode não estar familiarizado é uma tecnologia chamada SAS. SAS é basicamente uma linguagem de compilação CSS. Ele basicamente vem antes CSS e nos permite fazer chamadas coisas como funções, e variáveis, e aninhamento. O que ele faz é compilar ou se transforma em CSS regular quando nós escolhemos compilá-lo, ou, e essa é a grande coisa sobre a Shopify, é que o SCSS é compilado para nós. Quando você vê um arquivo SCSS, você pode basicamente colocar em qualquer CSS que você quiser lá. CSS é compatível com SCSS, mas esta é basicamente a sua folha de estilo de todo o seu tema. Agora, a razão pela qual ele tem um líquido no final, é porque nós somos capazes de colocá-lo em variáveis líquidas. Nós vamos entrar em líquido em um vídeo mais tarde, mas eu posso procurar por isso aqui. Você pode ver aqui que estamos carregando em algumas variáveis SAS com variáveis que são definidas em nosso personalizador. Nós também vamos olhar para isso em um segundo em nossa configuração. Mas as configurações aqui, o objeto de configurações globais, é o que nossas configurações de tema são. Se voltarmos para aqui, isso vai fundo demais rápido demais, mas chegaremos lá. Se entrarmos aqui, então vamos para a parte personalizador do que, em seguida, vamos para configurações de tema. Aqui nas configurações de texto de cor, que vai ser em cores, e provavelmente vai ser um desses, provavelmente o corpo do texto. É essencialmente colocar a seleção que você tem aqui em seu personalizador dentro de uma variável SAS. Então, o que você pode fazer em vez de chamar uma cor específica, você pode chamar isso. Você pode procurar por usos dessa variável. Como você pode ver aqui, este é CSS bastante normal além das variáveis SAS. Se você não está familiarizado com o SAS, eu definitivamente recomendo procurá-lo. Não é muito complicado aprender se você já conhece CSS. Se você está sobrecarregado com isso e não esperava aprender SAS, bem como aprender o desenvolvimento da Shopify, não se preocupe, você não precisa usar o SAS. Você pode jogar CSS regular aqui. Se você quiser pensar nisso como seu arquivo CSS principal, você pode ir em frente e fazer isso. Não se preocupe muito com o SAS se você é novo nisso. Mas se você estiver familiarizado com o SAS ou quiser aprender, é ótimo que a Shopify compile o SAS e permita que você faça coisas como mostrei onde, vejamos se consigo encontrá-lo novamente, é muito difícil de encontrar, mas basicamente, onde você pode definir uma variável em suas configurações de tema para uma variável em sua folha de estilos e, em seguida, chamá-la em toda a sua folha de estilos. Muito legal. O outro é o seu theme.js. Agora, isso pode facilmente ser theme.js.liquid, mas com este tema, parece que não há variáveis líquidas que serão inseridas neste arquivo. É apenas theme.js, e isso vale para aqui também. Se você não está inserindo nenhum líquido nele, você não precisa colocar .liquid no final. Isso vai manter todos os seus temas JavaScript. Se você não está muito familiarizado com JavaScript, isso pode ficar um pouco irritado também. Melhor deixar isso a menos que você precise cavar no JavaScript. Aqui você tem algumas outras bibliotecas JavaScript. Lazysizes é algo que muitos temas da Shopify usam para otimizar tamanhos de imagem em telas diferentes. Novamente, você não precisa se preocupar muito com o que está acontecendo aqui. O que você precisa saber é que a pasta de ativos está lá, e é aí que você encontra sua folha de estilo, que provavelmente estará editando, e seu arquivo JavaScript. Seguindo em frente, temos outra pasta aqui chamada config. Config é interessante porque você sabe como falamos sobre como esse texto colorido foi definido em seu personalizador, em settings.colortext. Bem, você pode realmente procurar esse valor em seu setting_data. Se fôssemos fazer isso, descobrir como é chamar texto colorido. Se eu copiar isso e entrar em nossos dados, eu posso realmente encontrar onde isso está definido. Aqui, você pode ver que há treze deles. Vamos dar uma olhada. Corrente. Aqui no atual, que é o que estamos usando agora, você pode ver que o texto colorido está definido para este valor específico. Mas se fôssemos entrar e mudá-lo aqui, ele vai ser atualizado nesse tema settings_data.json. Todos os dados na Shopify são configurados no formato json, então isso é J-S-O-N. Novamente, se você é novo no desenvolvimento web, isso pode ser algo com o qual você não está familiarizado, mas é bem simples, você aninha dentro desses colchetes. Digamos, por exemplo, que você queria chegar ao texto.colorir atual, entrar em texto colorido, e aí você tem. Coisas muito simples. Em settings_schema, essa é a camada que fica fora dos dados que você tem aqui. Você tem o valor do texto colorido aqui, mas no esquema, defina isso como um valor que os usuários podem editar dentro do personalizador. Como você pode ver aqui, configurações, Id, color_text, isso é o que o configura como uma opção de personalizador, e o tipo é uma seleção de cores. Para mostrar a você, se excluíssemos isso completamente, essa opção, você verá que ela nem aparece mais no personalizador. Pressione “Salvar” nisso. Vou ver o relógio temático. A propósito, se cometeu algum erro, deve vir até aqui. Definitivamente fique de olho nisso. Se houver algum erro, ele realmente não será compilado e enviado para a loja. Mas se eu quiser atualizar o editor aqui e ir para as minhas configurações de tema, ir para as cores, você pode ver que a cor desapareceu, e não era realmente o corpo do texto, era o que estava acima dela. Não me lembro como se chamava, mas se trouxermos isso de volta, você pode ver que o rótulo era cabeçalhos e links. Se eu salvar isso, o que eu fiz, ele vai recarregar novamente. Atualize a página, o tema, as configurações, as cores, e lá vai você, essa opção está lá novamente. Esta é uma primeira introdução aos esquemas para nós. Nós basicamente temos um esquema gigante que fica em cima de todo o tema com um monte de configurações diferentes, e isso espelha o que temos em nossas configurações de tema. Isto é como a representação JSON backend do desenvolvedor de todos os dados que temos aqui. Eu poderia até mudá-lo aqui, e ele vai atualizar aqui em nosso tema real. Ou eu posso mudá-lo aqui, e isso irá atualizar em nosso tema aqui. Ambos estão amarrados juntos. Agora, quando eu apaguei isso antes e eu trouxe de volta, você vai notar que ele ainda tem esse valor. Agora, esse provavelmente é o valor padrão que está definido aqui. Mas mesmo que não fosse, mesmo que não houvesse valor padrão, os dados ainda são salvos. Se você entrar em seu esquema e excluir algo como fizemos, ele realmente não exclui os dados também, e talvez você queira excluir isso. Mas geralmente quando você está fazendo desenvolvimento de temas, isso é específico para a loja e você não quer necessariamente editar essas coisas. Eu geralmente deixaria essas coisas em paz. Isso é útil quando você está migrando uma loja e você fez algumas alterações nas configurações, você pode querer copiar as configurações que estão todas listadas aqui quando você faz essas alterações. Se isso foi um pouco esmagador ou foi um pouco acima da cabeça, não se preocupe muito. A principal razão para saber sobre essas coisas é, digamos, por exemplo, se você queria criar sua própria configuração. Se você quisesse criar sua própria configuração, você poderia vir aqui, talvez você queira criar outro tipo de texto colorido. Você poderia simplesmente jogar isso lá, renomear o ID, mudar o rótulo, e então, de repente, você teria isso em sua lista de opções aqui e, em seguida, dentro do seu código, você poderia referenciá-lo exatamente como nós tínhamos em nosso exemplo aqui. Você pode fazer referência à nova variável que você definiu em qualquer lugar do modelo. Esse é o benefício real de ter o esquema aqui para editar. Você pode criar configurações de tema a partir deste arquivo e, em seguida, este apenas armazena seus dados. Você provavelmente não precisa alterar nada aqui, a menos que você queira fazer uma migração e você não queira ter que passar e atualizar todos esses valores diferentes por meio do Personalizador. Final um e, em seguida, vamos passar para o real como arquivos de layout é Locales. Em Locales, são basicamente os seus idiomas. Se voltarmos para a nossa loja online e na seção tema, clicar em ações e editar idiomas, podemos ver uma interface de usuário para alterar todas as opções de idioma. Agora, quais são essas opções de idioma? Bem, se olharmos através do nosso código, então vamos apenas entrar, vamos apenas escolher cabeçalho e podemos ver aqui um monte deles já. Podemos ver {layout. navigation.search} e, em seguida, podemos ver este símbolo de tubo aqui com um ' T.' O 'T' basicamente diz, filtrar por idioma. Por que isso é importante é, em vez de codificar os valores aqui, podemos configurá-los em idiomas e então podemos traduzi-los. Espero que isso faça sentido, eu poderia fornecer um exemplo mais tarde na aula, mas vamos olhar para um mais óbvio, apenas para fins de demonstração. Um comum é a linguagem do carrinho. Se eu clicar em Eu vou fazer isso com o meu cliente, eu poderia muito bem fazê-lo aqui. Se eu entrar aqui e eu ver o seu carrinho no modelo de berço. Deixe-me ir em modelos, carrinho e ele links diretamente para uma seção chamada modelo carrinho. Eu vou para aquela seção. Se eu tentar encontrar seu carrinho, ele não está lá, não consigo encontrá-lo e a razão é porque seu carrinho está definido nas configurações de idioma, então você vê aqui o seu carrinho. Se quiséssemos mudar esse rótulo, poderíamos entrar aqui, descobrir onde as variáveis de linguagem se deparam. Acho que é este carrinho. General. Título}. Vamos entrar e mudar isso. Eu vou me livrar dessa etiqueta líquida e apenas colocar, > este é o carrinho <. Eu vou salvar isso, verificar se tudo está funcionando bem com o kit tema e, em seguida, [inaudível]. Deixe-me clicar nele daqui, certificando-se de que estamos no tema correto. Não é esse, então nós obviamente editamos o errado, mas eu posso realmente encontrar o que é [inaudível] aqui. Este é o arquivo da língua inglesa e estamos executando o inglês no momento, como você pode ver e se eu fosse para encontrar o título. Deixe-me olhar para o carrinho e eles terão o título geral, o seu carrinho. Preciso encontrar o título geral do carrinho. Alguns títulos do produto, desculpe, há alguns usos da palavra título aqui. Parece que estávamos editando o caminho certo, mas nós simplesmente não temos nenhum item em nosso carrinho é por isso que este cabeçalho não está realmente aparecendo. Vamos apenas adicionar algo ao nosso carrinho para demonstrar isso, para que ainda não tenhamos produtos inteiros em uma página inicial, mas podemos ir para a coleção antiga. Vamos apenas adicionar isso ao nosso carrinho. Agora estamos na nossa página do carrinho e como você pode ver, o texto que colocamos, este é o carrinho está mostrando. Nós podemos, obviamente, carregar valores de código em nosso projeto aqui. Só para mostrar este é o carrinho de carrinho para deixar claro, como eu estou editando esta página em particular. Eu estou editando aqui mesmo, nós não queremos fazer isso e a razão é, se nós mudamos para dizer, por exemplo, alemão e nós oferecemos este site em alemão bem e nós queremos ter um determinado idioma que é facilmente traduzido para essa língua para vir através e estar nessa língua, vai vir acima com este é carrinho de carrinho enquanto tudo o resto foi traduzido. É por isso que usamos línguas. Se digamos, por exemplo, e você pode não se importar com outras línguas, pode ser que você está apenas anunciando para o mercado único. Talvez não nos preocupemos com idiomas, mas mesmo assim, é uma prática recomendada usar essas variáveis. Eu vou entrar aqui e em vez de mudar isso no código aqui, eu vou atualizar a variável. Em vez de seu carrinho, coloque, este é carrinho de carrinho. Só estou deixando muito óbvio que estamos mudando isso. Porque ninguém diria que isto é um carrinho, obviamente. Se atualizarmos a página, ele virá acima com este é carrinho de carrinho. Essencialmente o mesmo resultado, mas apenas uma prática melhor para ter todas essas palavras comuns em um arquivo em suas localidades, em seguida, chamar essa variável dentro do seu template. Você vai ver aqui nós usando um monte de linguagem padrão e ele pode tropeçar você um pouco para cima se você não sabe sobre esses arquivos de idioma porque você pode entrar e dizer, bem, eu quero mudar este texto. Vamos atualizá-lo novamente, volta ao seu carrinho. Você sabe, isso pode te perturbar se você quiser continuar, bem, eu quero mudar essa palavra no meu tema da Shopify. Deixe-me procurar o seu carrinho no modelo de carrinho. Que se lixe, não consigo encontrá-lo. Tipo, como vou mudar isso? É por isso que precisamos falar sobre variáveis de linguagem, porque se você quiser mudar algo assim, você vai ter que mudá-lo aqui. Tudo codificado, como eu disse, codificação dura não é a melhor prática. Se você quiser mudar o idioma assim, esse padrão em todo o tema, mude-o aqui e se você, no futuro, quando eu traduzi-lo em um idioma diferente, você tem esses outros arquivos aqui. Você pode ver o título geral do carrinho e isso é o que é em Inglês. Se entrarmos neste que eu acredito ser alemão, você pode ir para o título geral do carrinho e esse valor em um alemão [inaudível] será essa palavra em vez disso, que eu nem vou tentar pronunciar porque parece difícil e eu não falo alemão. Isso é locales, isso é configuração e isso são ativos. Talvez eu tenha apressado um pouco por isso porque há muito para abordar com temas da Shopify, mas, essencialmente, é aqui que você armazena variáveis relacionadas ao idioma. Aqui é onde você armazena dados de esquema ou como dados de Configurações Gerais e é aqui que você define quais opções estão disponíveis em seu esquema, que são traduzidas diretamente para seu Personalizador. Finalmente, para rever os ativos. Ativos é onde você coloca sua folha de estilo, arquivo JavaScript e quaisquer imagens ou outros arquivos que você precisa chamar em ativos Frontend que ajudarão sua loja a executar. Mas novamente, você não deve ter que editar nenhum desses, é apenas tema. SCSS. líquido que é o mais importante porque inevitavelmente você vai querer mudar algum CSS em sua página. Você pode fazer isso usando líquido, você pode fazer isso usando SAS. Mas você também pode simplesmente colocar em CSS antigo simples que vai funcionar para, todas essas opções estão disponíveis para você. No próximo vídeo, estou animado para entrar nas outras partes do seu modelo de tema. Estou ansioso para vê-lo no próximo vídeo. 10. Código de tema - Layout e modelos: Para nos preparar para as próximas duas lições sobre como editar nosso código de tema, fechei um monte de guias e agora só tenho minha loja, minha conta de parceiro e esse diagrama que preparei para quebrar o que está acontecendo com nosso tema. Agora, isso pode parecer nully, mas deve fornecer uma boa visão geral de como tudo funciona. Essencialmente, temos essas caixas coloridas e estas representam as quatro seções principais que vamos estar falando. Se voltarmos ao nosso código, seções, trechos, modelos e layout. No topo, este é o ponto de entrada. Qualquer um que entrar no nosso site, eles vão ter o layout. Então, dentro do layout, você pode ter trechos e é por isso que você tem essa linha acontecendo aqui. Você pode ter seções na verdade, é muito provável que você tenha seções. Dentro do conteúdo para layout, que está no meio do layout, você receberá um modelo. Estas linhas mostram o fluxo da estrutura de modelagem. Na parte inferior você tem seções aqui, em seguida, as seções fluem para este modelo, mas eles também podem fluir para o layout, eles também podem fluir para o conteúdo para o índice. Em seguida, você tem este modelo que flui para o layout. Então o layout fica no topo. Tentando encontrar outra palavra que não seja layout, mas é basicamente a estrutura que fica no topo de cada página. Então você é servido o modelo e, em seguida, seções são realmente legal pedaços dinâmicos de código, seções dinâmicas que podemos colocar em nossa página inicial, jogar em nosso layout, jogar em nosso modelo, e, em seguida, trechos são apenas pedaços de código reutilizáveis que podemos basicamente jogar de qualquer maneira. Agora eu tenho essas nuvens aqui também. Eu fiz uma nuvem porque é um conteúdo dinâmico. Na verdade, não podemos editar um modelo de tema para conteúdo de cabeçalho ou conteúdo de índice. Liga-se a diferentes partes do seu tema com esta linha dupla. A linha dupla é apenas para significar um link dinâmico. Em seu layout, ele está vinculando ao conteúdo do cabeçalho, o que, por ser denotado com uma Nuvem, está se comunicando que não podemos realmente editar isso especificamente, mas é uma camada de saída. O mesmo para conteúdo para índice. Na verdade, esta linha aqui provavelmente não deveria estar aqui. Isso é apenas em um modelo específico, a página inicial. Então eu poderia apagar esse link. Mas como você verá em breve, e algo que eu toquei brevemente é que o conteúdo para índice é a coisa que fica em sua página inicial e você pode adicionar em seções dinamicamente. Este diagrama pode parecer um pouco nully no início, mas depois dessas duas lições espero que a relação entre todas essas partes deve fazer sentido bastante claro. Neste vídeo vamos falar sobre layouts e vamos falar sobre modelos, e então vamos dividi-lo para que na próxima lição falemos sobre seções e trechos. Vamos começar pelo ponto de entrada. Vamos apenas pré-visualizar o nosso tema. Quando o usuário chega à nossa loja, eles são apresentados com isso que é uma mistura de tudo o que temos aqui. Primeiro de tudo, ele vai acertar um arquivo de layout. É por isso que o layout, se voltarmos ao diagrama, fica no topo. Vamos entrar na nossa foto de layout. Normalmente, você só tem um layout e é tema.líquido. Como você verá neste vídeo, podemos criar nossos próprios layouts, mas o layout padrão é theme.liquid. Se você não definiu um layout personalizado, ele vai para theme.liquid. Vamos apenas supor que você não definiu um layout personalizado. Vai ser tema. Líquido. Este é o código que irá gerar o que você vê aqui. Isso vale para não apenas a página inicial, ele vai para praticamente todas as páginas que não têm um layout alternativo. Esta é a capa que será executada em todas as páginas do seu site. Mas como veremos, há alguns bits dinâmicos de conteúdo aqui. Nós temos tags líquidas como você pode ver aqui, que são denotadas pelos dois colchetes que terminam em colchetes. Há outro que você pode ver que tem em vez de dois colchetes, colchetes e um, lá vamos nós. Colchetes, sinal de porcentagem e um traço para eliminar o espaço em branco, vamos entrar em líquido e como ele funciona em um vídeo posterior. Mas eu só queria passar e vamos ver onde esta página tem links para outras partes do nosso tema. Temos alguma lógica líquida aqui. Não se preocupe muito com isso. O que eu estou procurando é este primeiro conteúdo de tag para cabeçalho. Basicamente, colocando conteúdo para cabeçalho aqui pouco antes da tag cabeça de fechamento, o que está dizendo é pegar o que temos e colocá-lo aqui. Novamente, aparentemente não posso editá-lo, pode ser difícil entender o que realmente acontece aqui, e é por isso que escrevi esta caixa aqui. Isso é de acordo com a documentação da Shopify, esse conteúdo para o cabeçalho da variável deve ser colocado entre as tags de abertura e fechamento. Ele insere os scripts necessários da Shopify na cabeça, que inclui scripts para o Google Analytics, análises Shopify para aplicativos da Shopify e preferências mais editáveis. Isso responde à pergunta de onde eu iria para editar isso? Então eu posso entrar, clique em Preferências. Então coisas como o código do Google Analytics. Se eu tivesse algum código do Google Analytics, eu colaria aqui. Isso iria dinamicamente entrar em conteúdo para cabeçalho. Então com essa etiqueta líquida, basicamente controlando onde vai no nosso layout líquido. Mas é algo que você não deveria mexer. Só estou avisando que é aí que se insere. Não faz sentido movê-lo porque precisa estar na etiqueta da cabeça. Descendo a página, podemos ver esta palavra incluir e incluir seguido de uma string aqui. O que isso está fazendo é incluir um trecho. Se eu entrar na pasta Meus Snippets, não vamos cobrir trechos neste vídeo, mas você pode ver se eu procuro a Pesquisa de Ícones acontecendo, há muitos ícones diferentes aqui. Bem ali está. É apenas um arquivo SVG, mas eu posso basicamente incluí-lo em qualquer lugar que eu quiser em todo o meu tema. Voltando ao tema. Líquido. Deixe-me rolar para baixo novamente colocando incluir e, em seguida, o nome do trecho. Voltando ao diagrama, você pode ver que podemos incluir trechos em qualquer lugar em nosso código de tema, layout, modelo ou seções. É por isso que a linha se liga a esses três. Se rolarmos para baixo a página, podemos ver outra palavra-chave aqui, que é a seção. Assim como incluem, podemos trazer na seção de cabeçalho usando a palavra seção. Então Inclua para trazer um trecho, seção para trazer em uma seção. Se entrarmos em nossa pasta de seções, deve haver um arquivo chamado header.liquid. Lembre-se que não precisamos usar o.liquid para chamar um trecho de seção ou modelo, basta colocar a palavra sem o.liquid. Liquid sabe o que você está tentando fazer. Como podem ver, temos outra seção aqui, e no meio, temos essa outra tag líquida dinâmica chamada content for layout. Voltando ao meu diagrama aqui, podemos ler o conteúdo do layout. O conteúdo para variável de layout deve ser colocado entre a tag body de abertura e fechamento. Ele gera conteúdo dinâmico gerado por todos os outros modelos. Index.liquid, produto.liquid e assim por diante. Como você pode ver, eu tenho esta caixa entre layout e modelo. Isso é porque é aqui que o modelo entra. Se entrarmos em nossos modelos aqui, o código nesses modelos será carregado aqui. Você deve estar se perguntando, bem, como sabemos qual página carregar aqui? A resposta é, depende da URL em que você está. Se eu estiver aqui e vou às coleções.all, como fizemos de antemão. Ainda estou no layout do tema. Ainda estou neste arquivo de layout. Mas depois que eu acerto conteúdo para layout, ele vê que eu estou em uma página de coleções. Carregue o modelo de coleção. Estamos no modelo de coleção agora. Como vê, não há nada aqui além de uma seção. Entraremos em mais detalhes ou mais motivos para que isso esteja no próximo vídeo. Mas essencialmente a principal razão pela qual, e se cavarmos brevemente nesta seção, é porque queremos tornar a seção inteira personalizável usando um esquema. Podemos definir um monte de opções aqui, e então podemos usar isso dentro do código. Se você está curioso sobre por que você teria um arquivo de modelo e, de repente, você o tem vinculado a apenas uma seção, por que é esse o caso? É por isso. Porque em nossos templates não temos um esquema para editar nada. Como eu mostrei antes, se entrarmos no personalizador, então eu vou sair das preferências e eu vou clicar em personalizar no nosso tema. Vou para a página da coleção. Você pode ver aqui que nós temos este bloco de seção aqui. Assim, podemos editar configurações dentro desta coleção. Também podemos adicionar em uma seção aleatória, se quisermos, o que faremos em um segundo, ou podemos remover isso completamente e não há conteúdo no arquivo template. Mas só para demonstrar se eu iria me livrar desta seção e apenas talvez colocar uma div aleatória. Talvez eu ainda traga o conteúdo da coleção porque estamos no modelo aqui. Para que eu possa trazer uma coleção. Não vou, só vou digitar “olá”. Só para demonstrar. O relógio temático está funcionando bem. Vou pré-visualizar o tema para que você não precise sair do personalizador. Vá para essa página novamente, coleções.all. Agora você pode ver que temos apenas Olá. Você está bem, isso faz sentido, mas agora se entrarmos em páginas de coleção em nosso personalizador, você verá que ele só tem conteúdo de coleção. Não há nenhuma pequena seção aqui para entrarmos e editarmos as configurações. Esperemos que isso torne um pouco mais claro por que ele apenas vincula diretamente a uma seção. Isso nos dá a capacidade de entrar em uma aba aqui e não apenas ter nosso conteúdo lá, mas também ter opções para editá-lo de dentro daqui também. Isso cobre praticamente o layout. Se voltarmos ao líquido. Você pode lê-lo aqui no próprio código ou você pode dar uma olhada no diagrama, mas as principais tags líquidas que você tem é conteúdo de cabeçalho, conteúdo para layout aqui e quaisquer trechos ou seções que você deseja incluir em seu layout também. Vou demonstrar layouts alternativos em apenas um segundo, mas vamos falar mais sobre modelos. Mostramos um exemplo rápido da página da coleção, mas o que eu quero fazer é criar um modelo para a página Sobre. Vamos entrar em nossos modelos aqui e como você pode ver, temos página, temos senha, produtos, pesquisa. Talvez eu queira criar uma nova página. Deixe-me ir para o meu back-end aqui, clique em páginas, adicione uma página e isso deve parecer bastante familiar. É muito semelhante aos produtos, é apenas título e conteúdo. Eu vou colocar em Sobre Nós e eu vou gerar algum Lorem Ipsum só para preenchê-lo. Vou procurar por um gerador Lorem Ipsum aleatório, pegar um monte de texto falso para colocar lá. Vou clicar em Salvar e o que eu quero que você perceba aqui, porque é uma página, temos o sufixo de modelo de página, que é por padrão. Se formos e clicarmos em Ver página, você pode ver aqui que mais uma vez, ele está carregando nosso layout de tema, que vai acontecer em cada página a menos que especificemos o contrário e seguida, porque é uma página, ele está carregando isso. Então aqui dentro, temos nosso conteúdo dinâmico, que acabamos de configurar em nosso back-end aqui, um título e conteúdo. Você pode ver aqui entre as tags h1 é o título e em nossa div aqui é o conteúdo. Poderíamos mudar isso, poderíamos estruturar como você quiser. Talvez queiramos levar isso aqui e a primeira linha que queremos dizer, esta é a página para Salvar isso e nós voltamos para aqui e você pode ver que esta é a página para Sobre Nós e, em seguida, continua com o conteúdo. Não é muito prático, mas você pode ver aqui, podemos pegar essas duas variáveis e podemos usá-las como quisermos, isso é totalmente personalizável. Mas eu quero mostrar um exemplo mais prático, e que é poder incluir uma seção neste template. Para isso, vou criar meu próprio modelo personalizado. Eu posso fazer isso indo, Novo arquivo, e aqui está como você criaria um modelo de página alternativo. Você faz a página, então você coloca um ponto depois disso, e então você coloca o nome do seu alternativo. O meu vai ser sobre e, em seguida, é claro que você precisa terminar com.líquido. Se uma página sobre, Eu vou copiar exatamente o mesmo conteúdo como página, mas eu vou fazer uma mudança e isto é, Eu quero trazer em uma seção de mapa. Se olharmos em nossas seções aqui, temos esta seção chamada mapa. Como mostrarei em um vídeo posterior, as seções são ótimas porque podemos puxá-las para qualquer área do nosso site através de modelos. Vou adicionar em uma seção como vimos antes, o mapa de seção, pressione Salvar e ver se isso funcionou. Agora, haverá um processo de duas etapas para mudar esta página para o modelo Sobre nós. Isto é o que você esperaria que o comportamento seja. Você esperaria ser capaz de entrar aqui e apenas mudar o seu Sobre. Você tem isso no seu código de tema. Você deve ser capaz de entrar aqui e atualizar esse sufixo de modelo. Bem, o gotcha aqui e algo que você só vai ter que se lembrar de fazer se você alguma vez for pego neste passo, é o modelo alternativo precisa realmente estar no tema ao vivo também. Isso não é um problema, é apenas um passo extra. Se entrarmos em nosso tema atual, clique em ações, clique em editar código. Podemos criar um modelo com o mesmo nome e ele não precisa ter o mesmo conteúdo. Ele só tem que ter o mesmo nome para que possamos selecioná-lo dentro dessa área de administração. Eu sei que isso parece bobagem, mas isso é o que você tem que fazer dentro da Shopify, porque este menu de página aqui, isso é para tudo. Isso não altera as páginas, as postagens do blog que você tem em seu site com base no tema que você tem. Isso responde à pergunta por que ele não está relacionado ao tema que você publicou porque ele vai puxar os modelos do tema publicado. Novamente, acho que deve ter todos os modelos disponíveis em todos os temas, mas não é assim que a Shopify funciona. De qualquer forma, apenas um pouco de um gotcha e a maneira como podemos contornar isso é criar a mesma coisa, mas usamos essa interface de usuário aqui no site da Shopify e o que podemos fazer é escolher a página e o alternativo é chamado e, em seguida, a Shopify vai criá-lo com o nome correto, page.about.liquid. Uma vez feito isso, podemos atualizar a página e podemos vir aqui para sufixo template e temos essa page.about. Vou clicar nisso, clique em Salvar. Agora, quando voltarmos para nossa página Sobre Nós, teremos uma seção de mapa abaixo. Olhe para isso, não é ótimo? Agora, o que teremos também porque queremos ser capazes de personalizar isso. Infelizmente, não podemos personalizar a seção dentro desta página de dentro de nossas páginas porque só podemos editar título e conteúdo, mas o que podemos fazer é encontrar esse modelo em nosso personalizador de temas clicando aqui. Infelizmente não está lá, vamos apenas atualizar a página. Clique lá novamente e, como você pode ver, temos esta nova seção aqui para páginas com Sobre Nós. Agora podemos entrar e ver esta seção aqui, podemos realmente entrar e editar a seção. Store é a loja Skillshare ou o que você quer chamá-lo em Fake St. Toronto, Canadá e você pode adicionar uma imagem lá ou o que você quiser fazer. Esse é um ótimo exemplo de talvez você queira inserir uma seção em uma determinada página. Você não quer que isso aconteça em todas as páginas, então crie um modelo alternativo e, em seguida, você pode chamar esse modelo alternativo em qualquer página. Agora lembre-se, eu disse que eu falaria sobre layouts alternativos também porque qual é o ponto de ter este arquivo de layout aqui em uma pasta se você não é capaz de alterar o layout? A maneira como fazemos isso também está no modelo de página. Temos que usar um pouco de líquido no início do modelo. Vamos usar um pouco de líquido no início do nosso modelo para chamar o layout que queremos usar. Como eu disse, por padrão é tema.liquid, mas podemos escolher outro se assim escolhermos. O que eu vou fazer é que eu posso fazer isso em qualquer ordem. Esta é provavelmente a ordem inversa de fazê-lo, mas o que eu posso fazer é escrever a tag primeiro e, em seguida, criar o layout. Eu vou chamar isso de nu, e a razão por que eu estou indo para remover um monte de coisas do tema padrão.Líquido. Eu vou criar uma duplicata disso e em vez de theme.liquid, eu vou chamá-lo naked.liquid e eu vou remover o cabeçalho e rodapé. Não me pergunte por que estou fazendo isso. Só estou fazendo isso para fins de demonstração. Se eu pressionar Salvar sobre isso, se eu voltar aqui, sem erros e eu atualizar a página porque lembre-se que já estamos usando este modelo. Você verá que o cabeçalho e rodapé desapareceram e isso é porque eu sinalizei este modelo particular para usar o layout de nu. Aqui, definimos um layout alternativo baseado no tema.liquid, que é o layout padrão. Remova o cabeçalho e rodapé disso. Agora podemos atualizar o layout neste modelo específico. Isso é basicamente os principais pontos com modelos de temas e layouts de temas. Terminando no diagrama aqui, espero que este diagrama comece a fazer um pouco mais de sentido agora. Temos o conteúdo do cabeçalho que vem de preferências e outras áreas que entram em nosso layout. Temos o conteúdo para layout, que traz no modelo e, em seguida, podemos furar seções no modelo ou no layout e também podemos colar trechos em qualquer lugar. No próximo vídeo, vamos mais abaixo da cadeia aqui, falar sobre seções e trechos. trechos são bastante simples, mas as seções são realmente excitantes e poderosas. Acho que podemos cobrir os dois no próximo vídeo. Estou animado para mostrar isso e encerrar esta seção sobre o código do tema. Vejo você no próximo vídeo. 11. Código de tema - Seções e snippets: Nesta lição, vamos rever seções e trechos. Obviamente, já tocamos em seções e trechos um pouco nas lições anteriores. Na verdade, haverá alguma sobreposição em toda esta estrutura, mas vamos aprofundar a falar mais especificamente sobre seções e trechos nesta lição. Um dos modelos que eu não mostrei na lição anterior foi o modelo para a página inicial, o que é interessante. Se eu voltar para Adão e você pode ver aqui, coleção usa este modelo de coleção de seleção. Devo ter colocado isso acidentalmente, deixe-me salvar isso. Se você entrar em um monte deles ou eles têm um monte de seu próprio conteúdo personalizado ou eles apenas se vinculam a uma seção como a página da coleção, apenas links para o modelo de coleção, a página do blog apenas vai para o modelo do blog. Como vamos descobrir em breve para que possamos usar os recursos de seções que incluem personalização no personalizador. Nós olhamos para isso um pouco, mas eu quero mostrar primeiro o modelo index.liquid. Este é o modelo que carrega em nossa página inicial e inclui esse conteúdo dinâmico de tag para índice. Se voltarmos para a estrutura do tema Coruja, Eu tinha este modelo ligado ao conteúdo do índice, mas eu excluí no início de duas lições atrás. Isso porque ele não está relacionado a cada modelo, mas ele aparece em um modelo, e esse é o modelo da página inicial. Mas quer saber, eu posso estar errado porque talvez pudéssemos colocar conteúdo para índice em cada modelo. Vamos executar esse experimento agora e honestamente, eu nunca tentei isso antes, então eu não sei se vai funcionar, mas vamos ver se podemos enfiar isso em qualquer um dos nossos modelos. Esse é o modelo de coleção. Se eu entrar no meu personalizador. Seria interessante ver o que acontece com essa tag dinâmica. Algum erro no nosso relógio temático? Não. Vamos para a lista de coleções. Desculpe, essa é a errada. Queremos páginas de colecção. Curiosamente, temos esta seção aqui que foi codificada na coleção. Mas também temos a seleção que tínhamos em nosso conteúdo da página inicial para índice, que nos permite adicionar, remover e ordenar seções dinamicamente . Muito legal. Eu nunca tentei isso antes e eu não sei se isso é muito prático, mas como ele é configurado por padrão. Vou reverter isto a como era antes. Está na página inicial, você tem este conteúdo para índice. Talvez eu precise colocar essa coisa de volta no meu diagrama lá vamos nós. Você tem acesso a esta tag super impressionante chamado conteúdo para índice, que permite que você tenha uma lista dinâmica de seções e se faz sentido para você colocar em qualquer outra página que não seja a página inicial. Sinta-se livre para fazê-lo, mas na página inicial, por padrão, você tem conteúdo para índice. Agora, é claro, você pode entrar e fazer este modelo como qualquer outro modelo. Este modelo está aqui para você usá-lo não tem que ser apenas conteúdo para índice, mas conteúdo para índice é legal porque podemos, como eu mencionei antes, adicionar seções. Agora vamos aprofundar as seções em um vídeo posterior, criando nossa própria seção e então você vai realmente aprender o poder das seções. Mas por enquanto, vamos mergulhar no código de um deles. temos ido um pouco para isso já, mas se entrarmos em modelos e olhar para um modelo para carrinho, tudo está contido dentro de uma seção. Se entrarmos aqui seção para modelo de carrinho, então temos tudo o que aparece em nossa página de carrinho com um esquema para edição. Esta é basicamente a parte que separa seções de qualquer outro dos arquivos no código do tema Owl. O esquema pode parecer um pouco assustador no início, mas é uma maneira incrível de adicionar opções personalizáveis que usamos em todo o nosso código aqui e permitimos que o usuário as edite. Como você pode ver aqui, há um monte de dados de idioma diferentes e isso converte o rótulo ou o nome do esquema com base em seu idioma. Mas você não tem que fazer isso, você pode simplesmente se livrar desse objeto todos juntos. Se você só quer fazer isso em um idioma, você pode ter cortado página. A maioria dos temas em que trabalho são assim. Não há tantas opções diferentes para idiomas. Eu vou apenas me livrar desse objeto e simplificá-lo e você pode ver aqui, nós temos o nível superior do nosso esquema. Temos o nome desta seção, configurações e, em seguida, dentro de nossas configurações, temos todas as configurações diferentes que podemos alterar. Assim como tivemos aqui em nosso settings.schema, podemos criar um esquema para cada seção individual e, em seguida, apenas chamar essas opções quando precisarmos delas. Ele funciona de forma semelhante ao esquema em nosso esquema de configuração, isto é para todo o tema. Se entrarmos em uma seção específica, o que tínhamos antes? Tínhamos modelo de coleção, não era? De qualquer forma, isso realmente não importa. Eles são todos semelhantes em como eles operam. Não foi este, mas vamos dar uma olhada neste também. Temos um nome, páginas de coleção, e aqui estão nossas configurações. Temos diferentes tipos de entrada aqui, e os diferentes tipos de entrada que temos disponíveis para nós podemos passar por cima agora. Só vou entrar na documentação. Basta digitar no Google, tipos de entrada da Shopify, configurar configurações de tema. Deixe-me dar uma olhada e ver se este é o documento que estamos procurando. Configurações de entrada se eu clicar nisso, aqui vamos nós. Agora temos na documentação, as várias configurações de entrada. Você pode criar entradas diferentes com base em se vamos usar textos, se vamos selecionar uma imagem, se ela vai ser uma seleção booleana verdadeira ou falsa como uma ou outra, se vai ser uma seleção caixa, intervalo da caixa de seleção. Podemos ver isso funcionando se entrarmos em nosso personalizador e podemos olhar para a rica gama de diferentes tipos de entrada que temos aqui. Esta vai ser uma imagem. Se eu for até aqui, isso vai ser um seletor de imagens. Volto ao meu personalizador, estes são seleções. Se eu entrar aqui, é uma mensagem. Esta é uma área de texto e, na verdade, é um campo de link ou URL. Deixe-me verificar o nome para ver se é um link ou URL, lista de links. Havia URL. Então, o tipo de entrada para aquele, que principalmente se parece com livros didáticos padrão, mas não é. Se você realmente clicar nele, algumas opções aparecem e podemos definir isso usando o tipo de entrada de URL. Ok? Vamos ver a apresentação de slides, está bem? Porque esse é um bom exemplo. Se eu entrar aqui e encontrar essa seção em nosso código de tema. E olhei para o esquema. Este esquema representará diretamente o que está acontecendo aqui. Então, se eu olhar para as coisas no topo, ele tem que ter um nome e tem que ter configurações. Então o nome dele é slideshow, e é isso que vem aqui. A classe, é para definir classes CSS na seção real. Então não podemos vê-lo aqui, mas está lá dentro. E então entramos em nossas configurações. Ok, este será o nosso primeiro cenário. E é selecionar a altura ideal da apresentação de slides e a etiqueta é a altura do slide. Então, se entrarmos aqui, lá está, altura de deslizamento. E então o que define essas opções aqui? Bem, isso também está no esquema. E podemos ir até esse campo chamado Opções. E então você tem uma lista de opções aqui. Mais uma vez, você tem tanta informação linguística que está deixando tudo confuso. Então eu vou deletar um pouco disso para tornar as coisas mais simples para vocês. Estamos todos a falar inglês. Assim, você ainda será capaz de entender o que está acontecendo aqui sem configurá-lo para tantos idiomas diferentes. Tudo bem, então a primeira opção, o rótulo é adaptar uma primeira imagem e o valor quando eles selecionarem isso, vai ser adaptado. Ok? Adapte-se à primeira imagem. E então ele vai definir esse valor que o usuário não vê. Mas este é o valor que temos para olhar dentro de nossos modelos. Então, se eu procurar adaptar-se agora, eu posso ver que se nós procurarmos, isso não é um bom exemplo. Mas teremos que dar uma olhada onde isso está sendo usado. Vamos apenas procurar a altura da apresentação de slides porque não há nenhum ponto em configurá-la se não for usada no código. Então isso deve estar em outro lugar no código. E você pode ver aqui, podemos chamar essa opção, primeiro chamando de seção objeto, em seguida, indo para as configurações, e, em seguida, procurando a altura da apresentação de slides. E, na verdade, havia um adaptador bem ali. Então está dizendo que se a altura da apresentação de slides está ajustada para se adaptar, essa opção que olhamos antes. Toma, adapta-te. Então queremos fazer tudo isso, certo? Então, estamos usando o valor que definimos em nosso esquema, que o usuário pode editar aqui. E estamos colocando isso diretamente no código. Então, espero que vocês possam começar a ver que isso é realmente poderoso. Você pode criar um monte de personalizações dentro do seu novo código que, uma vez construído, você pode realmente entrar aqui e usar uma interface de usuário para interagir. E isso vai ser bom para se você estiver desenvolvendo um site para, digamos, um cliente. E vai ser bom, mesmo só para você. Você constrói uma vez e então não precisa mais entrar no código. É uma opção para você personalizar. Talvez você queira mudar de volta de vez em quando, essa é uma opção para você fazer. Então eu sei que o esquema pode parecer um pouco confuso e honestamente uma vez que você começa a ficar aninhado em níveis mais profundos, começa a ficar ainda mais difícil de ler. Mas com o tempo, você deve começar a relacionar o que você vê aqui, com o que você vê aqui. E deve ser fácil criar mais opções. Tudo bem? Então, apenas como exemplo, o que é algo que podemos adicionar a esta apresentação de slides como uma personalização? Talvez queiramos mudar o tamanho do texto. Foi ideia minha, mas agora vejo que já foi feito. Sim, qualquer coisa basicamente que você queira mudar sobre todos ou nos dar uma opção de personalização no personalizador, você pode configurar em seu esquema e, em seguida, referenciar em seu código de seção. Tudo bem, então só para recapitular como podemos usar seções. Podemos selecioná-los em conteúdo para índice. Podemos deslizá-los especificamente no código em um modelo, ou podemos deslizar a seção para um laboratório. E, claro, cabeçalho e rodapé, por que eles aparecem em cada página é porque eles são seções incluídas no layout. Esses cabeçalhos e rodapés estarão em todas as páginas a menos, claro, que entramos. E digamos que excluímos cabeçalho seção de theme.liquid. Atualizamos a página. Depois de confirmarmos que a página está atualizada, recarregamos a página. Vamos ver agora que o cabeçalho se foi e ele se foi para cada página que usa esse modelo, que como eu mencionei antes, para theme.liquid é padrão. Assim, mesmo cabeçalho e rodapé que você incluir no layout do tema é uma seção também. Então, voltando ao diagrama, você pode inserir seções dinamicamente em conteúdo para índice, em modelos codificando-os, ou em layouts, bem como codificando-os. E só para recapitular como fazemos isso, é só com esta etiqueta líquida aqui. Os colchetes, a seção de sinal de porcentagem e, em seguida, o nome da seção. Então, espero que você entenda agora que as seções são bastante poderosas e elas meio que sentam no coração do seu tema. Agora, como eu mencionei, nós vamos construir nossa própria seção, e isso vai trazer para casa esta teoria um pouco mais para você. Então você vai ter alguma experiência com esta seção e realmente aprender o poder e como você pode desenvolver suas próprias seções personalizadas. Mas temos mais uma coisa para rever, e são trechos. Então, trechos, você pode pensar em quase como uma seção idiota. Basicamente, apenas um pedaço de código que você deseja reutilizar em diferentes partes do seu site. Então, normalmente não há nada muito extravagante acontecendo aqui. Tudo o que faz é trazer, digamos que são produtos. Como se chama este? Preço do produto. Líquido. Então, se eu quiser ir procurar no meu tema, procurar na pasta por preço do produto, ele vai me mostrar todas as referências e eu posso ver aqui onde esse trecho foi incluído. Então, eu posso ir para a coleção.Líquido. E você pode ver aqui, eu estou incluindo esse trecho. Então, se eu quisesse editar o conteúdo aqui, terei que mergulhar no snippet e editar esse código dentro do snippet. Apenas para mostrar a você basicamente criando nosso próprio snippet com base no conteúdo que já temos. Digamos que queríamos reutilizar uma seção aqui dentro e fazia mais sentido tê-lo como um trecho. Então, vamos apenas dizer que queremos que esta gaveta de busca seja um trecho. Então eu poderia pegar tudo isso, removê-lo. Coloque uma etiqueta líquida. Certo. Incluir gaveta de pesquisa. Então chamarei de gaveta de busca. Guarde isso e certifique-se de que tem o código guardado na sua área de transferência. Ou você pode apenas Ctrl + Z para recuperá-lo. E o que eu vou fazer, é ir em frente e criar esse trecho agora. Então, vou chamá-lo pelo mesmo nome que coloquei ao lado da inclusão. Procure na gaveta.liquid. Não se esqueça do líquido, e eu coloco lá. Então, agora se voltarmos ao nosso site. Eu me pergunto se isso ainda está usando o nu, aquele ainda está usando o layout nu. Mas se voltarmos à nossa página inicial teremos um cabeçalho novamente. E a gaveta de busca é o que aparece quando você clica nisso, eu acredito. Vamos verificar isso. É aqui em cima. A gaveta de busca é uma coisa que aparece no topo. E você pode ver, mesmo que o código não esteja mais lá, nós estamos incluindo-o ainda de outra fonte. Então, como você pode ver, você pode realmente se safar sem trechos, mas é uma prática muito boa usá-los se você planeja reutilizar código ou talvez você só queira limpar esse arquivo e não ter tantos componentes diferentes lá dentro. Talvez isso seja um pouco melhor para você. Então, você vai para o seu tema.líquido, você vê tudo inclui gaveta de pesquisa, em seguida, ele vai para o cabeçalho. Está bem, fixe. Por outro lado, isso significa que você vai ter que ir e encontrar mais arquivos se você usar mais snippets. Então, esse é o negócio lá fora com o uso de trechos. Você pode colocá-los em um lugar pequeno e agradável que você pode reutilizar mais tarde. Mas então você obviamente vai ter que entrar e encontrar aquele trecho, que eu estou tentando fazer agora. E você vai ter que editá-lo lá, legal. Então isso cobre praticamente tudo neste diagrama. Então, falamos sobre layout, falamos sobre essas tags líquidas dinâmicas, cabeçalho e conteúdo para índice. Falamos sobre conteúdo para layout. E falamos sobre como as quatro principais áreas do seu tema, layout, seções de modelo e trechos interagem juntas. E uma vez que você começa a brincar com a Shopify, ele realmente começa a fazer sentido por que ela é criada dessa maneira. E dá-lhe uma boa estrutura para realmente fazer o que quiser com o seu tema. Então é muito legal. A única coisa que pode ter confundido você através de tudo isso é, claro, o líquido. Então, temos visto muito dessa linguagem de modelagem chamada líquido. Aqui está um ótimo exemplo, muito líquido aqui. No próximo vídeo, vamos mergulhar fundo no líquido. Então, não se preocupe, vamos cobrir o que está acontecendo com esse código líquido. Talvez não especificamente neste modelo, mas vamos falar sobre líquido no próximo vídeo. Então, eu estou animado para continuar nesta jornada e eu vou vê-lo no próximo vídeo. 12. Código de tema - Modelos JSON: Neste vídeo, vamos falar sobre modelos JSON. Os modelos JSON são uma alternativa mais recente aos modelos Liquid que fornecem maior flexibilidade no editor de temas, permitindo-nos criar seções reordenáveis no admin não apenas para a página inicial, mas para os outros templates também. Se olharmos para o arquivo de índice no tema padrão anterior da Shopify Debut, você verá o conteúdo da tag para o índice. Esta tag gera dinamicamente nossa página inicial com base em uma lista de seções. Esta lista de seções que podemos editar no admin, bem como dentro do arquivo settings_data.json. Se você verificar o arquivo settings_data.json, você verá aqui a lista de seções na página inicial sob o objeto atual. Se eu rolar para baixo até o conteúdo para índice, você pode ver que esta é a lista de seções que aparece na página inicial deste tema específico. Observe que se voltarmos para o arquivo index.liquid aqui, não há nenhum código líquido neste arquivo além deste conteúdo de tag singular para o índice. E se, em vez desta tag aqui, armazenarmos a lista de seções que encontramos em settings_data.json dentro deste arquivo? Isso é essencialmente o que a Shopify fez em seu novo tema, Dawn. Se eu navegar até o tema Dawn que eu armazenei aqui, clique em Editar código, você verá que o modelo de índice é agora um arquivo JSON. Assim como nosso arquivo settings_data.json em nosso tema Debut, você pode ver que dados semelhantes existem agora no próprio modelo. Aqui está a ordem das seções, assim como tínhamos no conteúdo para matriz de índice sobre o tema anterior que olhamos. O modelo de índice agora é um arquivo JSON que armazena a lista de seções como é o modelo de produto, o modelo de artigo, o modelo de página e assim por diante e assim por diante. Isso é o que permite seções reordenáveis em todos os nossos modelos agora, não apenas no modelo da página inicial. A conseqüência disso é que você precisará de todo o código líquido que possa ter sido armazenado dentro desses templates para ser movido para seções, mesmo que você planeje ter apenas uma seção em seu template. Vamos dar uma olhada mais profunda no código que vai para esses modelos JSON. Aqui, eu tenho o tema do amanhecer dois que eu criei mais cedo nesta aula. É exatamente o mesmo que o tema principal Dawn com uma edição menor, mas parece que é publicado e está bem aqui, vou editar este. Se eu entrar em Editar código e clicar aqui para Adicionar um novo modelo, você verá que agora há uma opção aqui para criar seu modelo como um modelo Liquid ou um modelo JSON. Vamos manter a opção JSON selecionada aqui, e em vez de artigo, eu vou mudar isso para o produto. Nós temos product.json, e eu vou deixá-lo com este nome padrão de alternativo. Vamos criar isso e assim como vimos alguns vídeos atrás sobre modelos, podemos criar modelos alternativos com JSON também. Vou mostrar-lhe como isso aparece no personalizador de temas mais recente em apenas um segundo. Agora, como sempre, o que eu gosto de fazer é abrir a documentação e nós tínhamos isso apenas em nossa tela um segundo atrás. Vamos voltar para ele agora e o que eu vou fazer é colocá-los lado a lado. Coloque isso para a esquerda e então eu vou fechar isso, colocar isso para a direita, e zoom em nosso código. Infelizmente, parece que não consigo me livrar disso, então vou mudar isso, e lá vamos nós. Vamos ler sobre modelos JSON. Como diz aqui, os modelos JSON permitem que você controle a aparência de diferentes páginas da loja online usando seções, e agora são arquivos de dados que armazenam a lista de seções a serem renderizadas em vez de modelos que contêm Código líquido. Eu encorajo você a ler tudo nesta página, mas vamos rolar para baixo até o material importante, a estrutura do modelo. Os modelos JSON devem ser arquivos JSON válidos, a raiz deve ser um objeto com os seguintes atributos, então temos alguns aqui que são necessários e alguns aqui que não são obrigatórios. Obviamente, nós vamos precisar ter os campos obrigatórios preenchidos em nosso objeto aqui. Mas para aqueles que não são obrigatórios, não precisamos necessariamente colocá-los no objeto, mas podemos se quisermos. Como você vê aqui, isso já foi preenchido com um objeto de seção e uma matriz de ordem. O que está faltando é a string de nome aqui, então eu vou adicionar isso agora. Nome, e eu vou chamá-lo de Modelo Alternativo porque eu não posso inventar mais nada agora. Vamos clicar em Salvar nisso, ter certeza de que não temos nenhum problema. Aqui vamos nós. As seções não podem estar em branco e o pedido não pode estar em branco, então ele lhe dará isso quando ele for iniciado. Mas, então, se você tentar economizar nele, ele aparecerá com um erro. Para corrigir esses erros, o que vamos ter que fazer é preencher este objeto e este array. Eu vou abrir este objeto e dentro, o que nós vamos ter que fazer é criar um objeto de seção. O que precisamos fazer antes de fazer isso é decidir em que seção vamos carregar porque precisamos de pelo menos uma seção, e no tema Dawn, temos uma seção chamada produto principal que vai no modelo de produto principal também. Vamos apenas usar esse, e então eu vou chamar aquele principal. Vamos abrir um objeto para esta seção principal e aqui dentro, o que fazemos é rolar para baixo e olhar para os dados da seção. Novamente, temos esta tabela dos diferentes campos que são obrigatórios, e basicamente, tudo o que é necessário dentro desta seção em si, menos que entremos em blocos é o tipo de seção. Como diz aqui, é o nome do arquivo deste arquivo de seção para renderizar sem a extensão. Isso é muito simples. Tudo o que precisamos fazer é colocar o produto principal aqui sem o.liquid. Temos o tipo e, em seguida, o tipo interno, temos o produto principal. Agora, é claro, o outro erro que temos que corrigir é que a ordem não pode estar em branco, então você tem que colocar mesmo que haja apenas uma seção, nós temos que colocar no que está aqui, o nome como nós definimos aqui dentro do objeto de seção, precisamos colocar isso na nossa matriz de ordens. Se eu apertar Salvar nisso, não devemos ter nenhum erro. Estamos todos bem, e agora, se eu for Personalizar tema, abrir isso, vou abrir isso até o máximo, minimizar um pouco e, em seguida, clique aqui para escolher o modelo que estamos editando. Vou entrar em Produtos. Aqui, você poderá ver o modelo alternativo que acabamos de criar, que simplesmente nomeamos alternativo. Se eu clicar nesse, você verá agora que temos esta seção de informações sobre o produto aqui, que é de fato principal. Agora temos nossa seção aqui e podemos começar a adicionar novas seções a ele. É importante notar que todas as alterações que fizermos aqui serão armazenadas dentro do próprio modelo porque este modelo JSON armazena a lista de seções e também armazena as configurações. Agora não temos mais essa necessidade de tantos dados a serem armazenados neste arquivo JSON. Os dados de cada modelo individual e suas personalizações são armazenados no próprio modelo. Mesmo se clicarmos em settings_data.json, você verá que este objeto atual está completamente vazio porque esses dados foram movidos para o modelo de produto específico. O que eu vou fazer aqui é adicionar uma seção extra aqui, e você verá isso refletido no personalizador. Eu só vou copiar este objeto aqui e o que devemos acrescentar? Vamos adicionar uma seção de boletim informativo. Vamos chamar este boletim informativo e, dentro do tipo, lembre-se que temos que usar o nome do arquivo real menos o.liquid. Newsletter.Liquid, remova o Iquid e aí está o nosso tipo. Claro, precisamos adicionar isso ao nosso pedido aqui então eu vou adicionar vírgula e então eu vou colocar boletim informativo. Vou tocar em “Save” nisso. Agora vamos passar para o nosso personalizador e atualizar, certificando-se de que estamos no modelo alternativo, e aqui você pode ver que temos informações sobre o produto e inscrição por e-mail. Agora, lembre-se que eu disse que qualquer mudança que fizermos aqui será refletida em nosso arquivo também. Você acabou de ver que fizemos uma edição aqui para o arquivo em si e essas mudanças foram refletidas no editor de temas. Bem, funciona em ambos os sentidos no sentido de que se alterarmos a ordem destes ou adicionar blocos, ele também será refletido no arquivo. Se eu clicar em Salvar, reordenando a inscrição por e-mail acima das informações do produto. Tudo isso está quebrado de qualquer maneira, mas vamos atualizar aqui, e como você pode ver, agora temos o boletim informativo primeiro e principal segundo em nosso pedido, e também tivemos algumas configurações padrão sendo adicionadas ao nosso objeto aqui. Vou digitar boletim que tínhamos antes. Agora está na parte superior e temos algumas configurações padrão preenchidas neste objeto de configurações. Como eu mencionei, nós temos ligação de dados bidirecional aqui, então se eu fosse mudar isso aqui, iria refletir no personalizador. Se eu subir para inscrição por e-mail, você pode ver todos esses esquemas de cores, plano de fundo um, fundo também. Eu vou supor que o ID do segundo é segundo plano 2, então eu vou mudar isso no próprio arquivo. Pressione Salvar nisso, volte para a atualização do personalizador e você verá que o segundo plano 2 está agora armazenado. Então, novamente, eu posso mudar isso para o segundo plano 1, voltar aqui e você verá que essa configuração está armazenada no arquivo. A mudança de paradigma é esta. JSON armazena dados, onde os arquivos.liquid contêm código líquido. Aqui você pode ver que o novo sistema de modelos está tendo modelos como dados, não Liquid. O que nos permite fazer é torná-los mais dinâmicos e torná-los para que possamos editar nossos dados de seção e ordem de seção no personalizador, permitindo-nos fazer isso em cada template agora porque temos dados de template armazenados no modelo em si. Agora, o que temos são dados armazenados em modelos em vez de Liquid, e o que isso nos permite fazer é ter personalização em cada página, enquanto anteriormente usávamos para hard-code em tags de seção em diferentes partes do código Liquid para dizer Coloque a seção aqui. Agora são apenas dados e são muito mais dinâmicos. Mais uma coisa a observar aqui são os dados do bloco, e eu não recomendo tentar fazer isso manualmente no arquivo. Basta ir direto para o seu personalizador aqui, Adicionar bloco. Digamos que queremos ter um título aqui, subscreva o nosso e-mail. Estas são todas as configurações padrão e colocá-las em forma de e-mail. Vamos pressionar Salvar sobre isso e vamos apenas dar uma olhada em como isso afeta nosso objeto JSON. Atualizando a página aqui, você verá que exatamente como ele diz na documentação com os blocos e etc Deixe-me mover isso mais. Você pode ver que temos um ID de bloco para o bloco. Temos o tipo de bloco que é arbitrário. É apenas o que o seu código responde e, em seguida, temos um objeto de configurações para armazenar as configurações dentro desse bloco. Toda a documentação está aqui, e nossa documentação pode ser difícil de ler para alguns iniciantes, portanto, por que eu estou aqui fornecendo este tutorial. Mas essencialmente os pontos principais a entender aqui é que estamos armazenando dados, não código Liquid em nossos templates quando estamos usando JSON. Esta é a maneira de avançar para que possamos ter a maior flexibilidade para nossos administradores entrarem aqui e editarem o que quiserem e reordenarem seções em diferentes modelos. É uma grande frustração para os usuários da Shopify há muito tempo ter uma página inicial onde eles podem reordenar seções como esse recurso está disponível há muito tempo na página inicial, mas não está disponível em outros modelos até agora, até modelos JSON e esta é a tecnologia que o habilita. Claro, você pode continuar a usar modelos Liquid, se assim o desejar. Mas temos esses modelos JSON agora e você começará a ver que, mais comumente, com o passar do tempo, essa é a maneira moderna de fazê-lo. Por isso, por que eu adicionei esta seção para a classe. Qualquer dúvida, obviamente, deixe-as nos comentários e, no próximo vídeo, mergulharemos um pouco mais no líquido da Shopify. 13. Liquid: “linguagem de programação do Shopify”: Muito bem, pessoal, bem-vindos de volta. Nesta lição vamos falar tudo sobre Liquid. Nas lições anteriores, olhamos para o nosso código de tema e falamos sobre a estrutura, e eu mostrei esse diagrama, mas ao longo do nosso código de tema, se formos para qualquer uma das nossas seções de templates ou trechos, Inevitavelmente vamos ver algum líquido. Olhe para este, por exemplo. O modelo de traço do produto. Temos linhas e linhas de líquido. Você deve estar familiarizado com HTML. Você pode ver aqui, há HTML, mas há muito líquido em torno dele também e também há líquido dentro. Liquid é como a linguagem de modelos do seu tema da Shopify. É como uma linguagem de programação burra para baixo que, como diz aqui, lhe dá alguma lógica de programação que diz a um modelo o que fazer. Tags são embrulhados nesses caracteres, exceto quando estamos apenas produzindo uma variável simples. Em vez de usar o sinal de porcentagem, colocamos um segundo colchete. Se você está se perguntando qual é a diferença entre esses que começam e terminam com dois colchetes e este que começa com um colchete e um sinal de porcentagem, isso é quando estamos realizando lógica, e isto é quando estamos apenas a enviar uma variável para a tela. Este traço aqui também, Eu aprendi recentemente que, que remove espaços em branco. Então, se eu apenas remover isso de ambos os lados, ele vai registrar uma nova linha em seu código e então você vai obter algum espaço em branco. Na verdade, não afeta a lógica, ainda vai funcionar, mas você verá no arquivo de saída, se você não usar esses traços, que você terá muitos espaços em branco e isso pode tornar o carregamento do site mais lento. Apenas como uma nota lateral. Como vamos quebrar esta seção? Obviamente há muito para cobrir com Liquid. Nós vamos falar sobre tags variáveis, tags tema, tags de fluxo de controle e tags de iteração, de uma forma ampla de alto nível, e se você quiser ir mais fundo em qualquer uma dessas, inevitavelmente você vai ter que fazer isso o mais fundo você vai para o desenvolvimento de temas, este é o lugar que você gostaria de olhar. Há também uma referência rápida chamada Sheet Liquid Cheat Sheet da Shopify. Se eu digitar Liquid Cheat Sheet, eu posso pegar isso. Este é o original que eu acredito, mas agora está quebrado, então o que está no site da Shopify, provavelmente será melhor. Agora você pode ver a folha de truques, que basicamente tem todas as opções diferentes e o que eles fazem. Digamos, por exemplo, se eu apenas pressionar Command-f ou Control-F no Windows, agora eu posso pesquisar a página e talvez eu queira encontrar o título de um produto. Eu vou digitar, produtos ponto título, e então eu posso aprender mais sobre o que ele faz. Simplesmente retorna o título do produto. Eu estava pensando, talvez seja um nome de produto, procurar que, que não apareça, título. Essa é a palavra-chave que eu tenho que usar ou talvez eu vá apenas para o produto e veja quais variáveis eu tenho disponíveis no objeto do produto e então, eu vejo, esse é o que eu estou procurando. A folha de batota é muito valiosa. Algumas pessoas recomendam imprimi-lo e tê-lo em sua área de trabalho, mas você tem esse link aqui o tempo todo e pelo menos você pode pesquisar se ele está no seu navegador. Eu sempre gosto de manter a folha de truques à mão, mas felizmente, é apenas uma curta pesquisa no Google de distância. Definitivamente, faça referência a isso como uma referência rápida e, em seguida, você terá sua documentação da Shopify para aprender mais detalhadamente. O que vou fazer é começar de baixo para cima. Vou clicar em tags variáveis primeiro, e vamos aprender sobre nossas tags variáveis. Como você pode ver aqui, há um resumo e podemos ir para cada uma dessas diferentes maneiras de interagir com variáveis. O principal será Atribuir. Se você já fez alguma programação no passado, você deve estar familiarizado com a atribuição. Em Liquid, só precisamos usar a palavra atribuir, e depois um nome de variável, em seguida, o sinal de igual e, em seguida, o valor que queremos atribuir a ele. Como você pode ver aqui, um exemplo muito básico, atribuir maçãs a comida favorita, e então quando usamos a sintaxe de colchetes duplos, podemos apenas produzir o valor disso, e então sua saída vai ser esta. Se entrarmos em nosso código, podemos ver aqui um monte de sinais para o produto, traço, modelo. Atribuições tornam mais fácil para nós dizer, por exemplo, que temos um valor que queremos usar várias vezes na página, talvez seja uma boa idéia atribuí-lo como uma variável na parte superior e então você pode alterá-lo em um lugar ou talvez você tem uma string muito longa como este ponto de produto selecionado sublinhado ou sublinhado primeiro, assim por diante, assim por diante. Você não quer ter que escrever isso toda vez, então você pode colocá-lo em um nome de variável menor que talvez seja mais descritivo. Aqui, temos uma declaração de caso que vamos chegar em um segundo, onde eu estou atribuindo o valor das coisas com base em casos diferentes. Se eu pegar isso, aqui é obviamente onde ele está sendo atribuído e eu procuro por outro código. Isto aqui é obviamente onde ele está sendo emitido. Você pode atribuir variáveis você mesmo, mas é mais provável que você esteja usando variáveis que estão em objetos. Se voltarmos para nossa referência, e entrarmos em nossa folha de truques tema, podemos descer e olhar para os diferentes objetos e quais variáveis estão disponíveis para eles. Então, temos um objeto para cortar, temos um objeto para checkout, objeto para artigo, objeto para endereço. Tantos objetos diferentes. Os mais óbvios, os produtos são objeto aqui. Quando estamos trabalhando com os produtos, queremos poder acessar todas essas variáveis diferentes dentro de um produto. Temos o objeto de página bem aqui. A grande coisa sobre a Shopify é que é bastante lógico no sentido de que, se eu estiver no modelo de página, eu tenho acesso ao objeto de página. Se eu estiver no modelo do produto, terei acesso ao objeto do produto. Apenas mostrando a você como um exemplo, nós demos uma olhada no modelo de página antes. Se eu for para este aqui, você verá que estamos em um modelo de página agora. Temos acesso ao objeto de página, e então podemos chamar uma variável do objeto página aqui mesmo indo título ponto. Você pode ver aqui, eu não atribui um título para a página. Não há nenhuma atribuição no próprio código. O que ele está fazendo é olhar para a página em que estamos atualmente e encontrar o título, como dissemos em nossa área de administração de páginas. Isso é provavelmente mais comum, pelo menos no início, do que atribuir suas próprias variáveis, você vai estar olhando para variáveis que vêm no objeto com o qual você está lidando e você está indo para qualquer saída eles ou fazer outras operações com eles. Isso cobre “tags variáveis”. Obviamente, havia alguns outros lá dentro. Desculpe, vou voltar para ele. Você pode querer olhar para “captura”, “incremento”, “decremento”, mas “atribuir” é o principal. Eu definitivamente recomendo que você volte e leia esta documentação, mas vamos passar por isso nesta lição porque é apenas uma lição para passar por cima da totalidade do Liquid. Tudo bem. Então, entrando em nossa seção de tags “tema”, essas são coisas como “incluir”, “layout” que vimos antes, “seção”, então sempre que incluímos um “snippet”. Se eu for para “theme.liquid” provavelmente vamos ver o melhor exemplo de tudo isso. Então lembre-se que criamos esse “snippet” anteriormente que é considerado uma tag “tema”. E, obviamente, se descermos, temos “seções” e, em seguida, “layout” foi um que usamos em nossa “page.about”. Decidimos usar um “layout” alternativo que definimos em nossa “pasta de layout”, certo? Que outros temos aqui? Também temos “Comentário”. Então, se quisermos fazer um comentário no código, podemos fazê-lo usando a tag “comment” bastante comum em qualquer linguagem de programação. “ Incluir” para “trechos”. Também podemos enviar variáveis para o “snippet”. Se eu incluir esse nome de snippet, ele vai obviamente incluir o conteúdo disso, mas então ele também vai dar a esse “snippet” acesso às variáveis que eu enviei para ele. Ok. Além disso, se você estiver criando um “formulário” em vez de usar uma tag padrão “form” em HTML, você pode usar uma versão mais inteligente no Liquid usando as tags “form” e “endform”. Ok. Nós vamos passar a brisa sobre isso porque nós poderíamos ser apanhados em “formulários” por um bom tempo em si mesmo. Há vários “formulários” diferentes na Shopify. E se usarmos essa sintaxe, podemos aproveitar algumas das lógicas internas da Shopify. Tudo bem. “Layout” que usamos antes. Paginação. Isso é muito legal porque “paginação” pode ser um pé no saco para programar você mesmo, mas em Liquid, é bastante simples. Nós só precisamos “embrulhar” a coisa que queremos “paginar” nessas tags “paginate” e “end paginate”. Tudo bem. Então podemos “paginar” por cinco ou qualquer valor que quisermos. “ Raw” nos permite colocar Líquido em forma bruta. Não sei por que precisaria fazer isso. “ Seção” vimos e podemos usar “estilo” para produzir alguns estilos em um modelo real. A razão pela qual você pode querer fazer isso é porque ele nos permite fazer atualizações de cores ao vivo do editor de temas sem uma atualização de página inteira. Então, se você viu antes quando estávamos trabalhando com nosso “personalizador” e editamos algo e então surgiu “ao vivo”. Como se mudássemos uma cor e ao lado dela na pré-visualização, ela foi atualizada instantaneamente. É porque estamos usando essas etiquetas de “estilo líquido”. Tenho certeza que se você colocar em suas próprias tags de “estilo” que não são Liquid, então se você apenas colocar os HTML padrão que se parecem com este, ele não será atualizado automaticamente, mas ainda vai funcionar. É melhor usar isso porque então você recebe feedback instantâneo. Tags “Tema” são úteis. Eles são usados em todo o seu tema. Eles são os que são mais do “tipo de programação” aqueles que você veria em qualquer linguagem de programação. “ Controlo-fluxo e iteração”. Vamos passar por cima disso agora. “ Fluxo de controle” é basicamente condicionais. Então, se você já fez alguma programação antes, você teria visto uma declaração “se então”. Então aqui, diz “se o título do produto é igual a sapatos incríveis”, em seguida, ele irá produzir isso. Se for esse o caso, você terá isso. Se não, você não vai conseguir nada, a menos que seja o oposto de “se”. É basicamente o mesmo que “se o título do produto não é igual a sapatos incríveis”, então você entende isso. Você também pode adicionar um “else if”. Se ele acertar isso e não acontecer, então vá este, e se ele corresponder a isso, então produza isso. Mas se isso não acontecer, então você pode ir para um “else” e então você termina o “se”. Isso é bastante padrão em qualquer linguagem de programação. Também uma declaração de “caso”. Se você tem uma variável e você quer verificar o valor em que para uma variável diferente. Esta é uma maneira mais agradável de escrever condicional em vez de ter que fazer “se”, “else-if” e sobre e sobre e sobre. Se você quiser ter várias condições, você pode usar as palavras-chave “e” e “ou” o que é bom porque é apenas linguagem padrão. Não é cachimbo ou outro tipo de personagens estranhos. Isto parece muito bem. “ Se line_item.grams for maior que 2 mil e customer_address.city for igual a Ottawa”, ele emitirá este código entre essas tags. Isso lê muito bem. Faz sentido em inglês lê-lo. No outro lado, você pode usar “ou”. Vamos dar uma olhada em alguns exemplos em apenas um segundo. Vamos entrar em tags “Iteração” finalmente. Isto são coisas como loops. O principal que você vai ver uma e outra vez em líquido é “para”. A linguagem para “para” em líquido é bastante auto-explicativa também. Você vai percorrer cada produto em “collections.products” e você vai pegar esse objeto de produto específico usando esta palavra. Esta palavra pode ser qualquer coisa que você quiser. É melhor usar uma palavra descritiva. Para o produto em “collection.products” você tem acesso agora dentro desse ciclo de loop para o produto específico, para esse objeto em particular, e então você pode fazer coisas com isso. Eu sei que isso é vago, mas há um monte de coisas que você pode colocar aqui dentro, mas este é um ótimo exemplo de você vai querer percorrer uma coleção de produtos em algum momento. Isso é bastante padrão em Liquid e qualquer linguagem de programação para esse assunto. Você também pode colocar uma instrução “else” dentro de um “for”. Você pode quebrar o loop se ele coincidir com a condição sônica. Você também pode pular um ciclo do loop se algo corresponder a uma determinada condição e você pode limitar o deslocamento, definir uma gama de coisas diferentes com “for”. Mas geralmente, é tão simples como isso aqui, apenas percorrendo uma lista de objetos e produzindo a mesma coisa para cada um desses objetos nessa coleção de objetos. Como eu disse, provavelmente faz mais sentido vê-lo de verdade. Vamos dar uma olhada em algum código Liquid aleatório agora e ver o que está acontecendo. Na verdade, antes de fazermos isso, há mais uma coisa que precisamos olhar com o Liquid que vai tropeçar você se você não sabe, e que é “filtros”. Rapidamente, vamos dar uma olhada em “filtros” antes de mergulharmos no código. “ Filtros” é uma coisa única para Liquid. Se você estiver familiarizado com outras linguagens de programação, normalmente você usaria funções ou métodos para obter o mesmo resultado que um “filtro” faz em líquido. Uma vez que você se acostumar com “Filtros líquidos” você vai descobrir que eles são realmente bastante simples e é muito fácil ser capaz de “filtrar” conteúdo que realmente faz sentido. Vejamos um exemplo aqui. Temos o título do produto que só queremos exibir na tela. Mas agora temos um “filtro” que diz “maiúsculas”. O que isso faz, é pegar o que estiver aqui e torná-lo maiúsculo. Sua saída vai ser, se o título do produto foi “sapatos impressionantes” que está aqui, ele vai criar uma versão maiúscula do que e, em seguida, a saída para a tela. Há, é claro, muitos “filtros” diferentes. Um deles é “remover”. Este filtro irá remover “incrível” do “product.title” para que você apenas obtenha sapatos. Você também pode “encadear” vários filtros juntos. Você tem “título do produto” “maiúsculo” e “remover”. Vamos “maiúscula” o “product.title” e depois disso vamos remover “incrível” dele. Então você só tem “sapatos” em maiúsculas. Vamos dar uma olhada em alguns outros. Obviamente, não vamos conseguir passar por todos eles. Sim, na verdade, há demasiados para olhar. Deixe-me dar uma olhada em alguns que podemos ver com frequência. etiqueta “Imagem” é boa. Podemos apenas colocar o nome da imagem e podemos pegar o “URL do ativo” disso. Nós também podemos “embrulhar” isso em uma tag “imagem” e assim você vai conseguir isso, o que é muito legal. Esse é um exemplo em que as tags são realmente úteis, em vez de tentar encontrar o endereço desta imagem e depois ter que colocar tags em torno dela, você pode literalmente definir o nome da imagem em seus ativos e, em seguida, encontrar o “URL do ativo” envolvê-lo em torno disso e, em seguida, encontrar a tag “imagem”, envolvê-lo em torno da saída daqueles e você tem isso. Você pode “encadear” um monte deles. Às vezes você quer colocar dois pontos e algumas opções. Outras vezes você simplesmente coloca o “filtro” por si só, mas sem ir fundo em todos os diferentes “filtros” que é essencialmente o que está acontecendo quando você vê um “tubo”. Você verá um pedaço de “conteúdo”, em seguida, verá um “pipe” e, em seguida, um nome de “filtro”. Se você não sabe o que está acontecendo, tudo que você precisa fazer é procurá-lo. Se eu procurar isso em nossa folha de truques. Eu posso entrar aqui e vê-lo retorna o URL de um arquivo na pasta de ativos de um tema. Muito descritivo, e nos mostra um bom exemplo aqui. Então, essa é a última coisa. Temos nossas tags, e falamos sobre objetos e filtros também é importante, mas os filtros vão bem fundo. Vamos mergulhar no código agora e ver alguns exemplos, porque eu acho que é onde ele vai fazer mais sentido e bater em casa mais. Certo, então aqui temos um modelo muito básico. Eu gosto de mostrar o modelo de página, porque é bastante básico, mas estamos inevitavelmente indo para obter os são um pouco mais complicados. Se eu entrar no modelo de traço do produto em seções. Você verá aqui que temos um monte de variáveis que estamos atribuindo. Então temos uma declaração caso, e a instrução caso é descobrir o que vamos atribuir a essas variáveis com base no tamanho da imagem definido em nossas configurações de seção. Agora lembre-se, quando vemos as configurações de ponto Seção, que é definido no esquema abaixo. Muito bem, vamos mergulhar mais fundo nas secções da próxima lição. Então nós vamos ter um pouco mais de exposição às seções, então você vai aprender mais um pouco sobre o que está acontecendo aqui e como usá-lo. Aqui podemos ver um loop for. E isso para loop, como provavelmente podemos dizer por apenas lê-lo, ele tira a imagem das imagens do produto. Para cada um deles, ele faz um monte de coisas entre apenas exibir a imagem. Se você está se perguntando o que tudo isso é, é assim que ele faz imagens responsivas. Em vez de apenas fazer imagem SRC, isso é como uma coisa HTML New Age onde podemos produzir um monte de imagens diferentes com base no tamanho da tela e resolução. Apenas uma nota lateral para aqueles que não estão familiarizados com imagens responsivas, ok? Podemos ver em todo o nosso modelo, estamos recebendo apenas variáveis que queremos produzir em várias seções de HTML, e podemos ver que o loop está terminando aqui. Agora podemos ver um “if” aqui. Então, se produtos, tamanhos de imagem de ponto, tamanho de ponto. Isso é basicamente se o comprimento das imagens do produto ou quantas imagens de produtos existem, se isso é maior que um, então nós fazemos tudo isso, e se for maior que três, então nós queremos habilitar miniaturas. Então, muita lógica aqui. Você não vai ser capaz de colocar sua cabeça em torno disso imediatamente em algo tão complexo como este. Mas, em breve veremos quando trabalhamos com blocos em uma seção na próxima lição, você começará a ver que for-loops, declarações de caso, se declarações são muito comuns e, em seguida, não tão assustador. É só que neste, estamos vendo um monte de tudo combinado. Aqui você pode ver um filtro. Aqui está um exemplo de um filtro que você vai ver em todo o seu projeto, é o de tradução. Este é um especial porque ele procura essa variável em nosso arquivo de idiomas, e ele emite o texto com base em qual idioma estamos. Um filtro mais comum, vamos dar uma olhada, escapar. Usando o que te mostrei antes, se quiséssemos descobrir o que esse filtro está fazendo. Obviamente estamos produzindo um valor, mas queremos ver o que a fuga faz. Vamos para a nossa folha de truques e digite escape. Aqui vamos nós, filtros de cordas. Escapar. Escapa uma corda. Esse é um mau exemplo porque basicamente o que estamos fazendo é, estamos pegando a string e queremos realmente produzir as tags HTML. Vamos procurar outro. Outro filtro. Aqui vamos nós, Pipe Json. Tudo bem, então vamos dar uma olhada aqui. Podemos ver filtros gerais. Então, o que o filtro JSON faz? Ele converte uma string em formato json. Novamente, não é o melhor exemplo porque é um pouco complicado, mas estamos pegando um pedaço de corda aqui, convertendo-o para json e você verá aqui que temos esta versão json do objeto. Vamos tentar encontrar um filtro mais simples, porque eu não quero sobrecarregá-lo com esses filtros malucos e você acha que eles são muito difíceis ou muito complicados. Podemos ver a URL da imagem aqui. Estamos pegando o logotipo que definimos em nossas configurações de seção. Estamos rodando através de um filtro de URL de imagem, com o argumento de um por um. Vamos procurar aquele na folha de batota. URL da imagem. Clique neste, retorna o URL de uma imagem, aceita o tamanho da imagem como parâmetro. Então, se colocarmos um por um, ele vai colocar uma imagem um por um. Você deve estar se perguntando por que estamos colocando um por um. Bem, estamos rodando através de substituição novamente com uma largura dinâmica. Provavelmente outro exemplo complicado, mas vamos tentar usar alguns filtros mais simples em um vídeo posterior. Aqui está um que é um pouco mais simples, anexar. Se procurarmos por append, ele apenas acrescenta um caractere a uma string. Então, vendas acrescentar JPEG, ele apenas o adiciona à string. Então, essa é simples. Estamos apenas pegando isso e estamos adicionando um X no final. Isso é muito simples, vamos terminar com isso. Voltando à nossa documentação, se você precisa rever mais sobre líquido, eu definitivamente recomendo que você entre e leia mais. Provavelmente a maneira como você vai aprender melhor, é indo para o código e apenas tentando descobrir. Comece com os modelos menos complicados primeiro, e se você vir um filtro que você não reconhece, que será praticamente todos eles se você é novo nisso. Na verdade, vá lá, procure na folha de truques, ou na documentação. Às vezes você pode precisar de mais informações. A folha de truques é boa, porque se você clicar em saber mais, ele vai levá-lo para essa parte da documentação. Mas as folhas de fraude uma boa referência, porque você tem tudo em uma página e você pode apenas procurá-lo. Obviamente, há muito nesta página e há muito na documentação, nós não temos para sempre para rever todas as opções em líquido. Mas eu acho que é uma boa idéia fazer o máximo que você pode quando você está desenvolvendo seu tema. E sempre que você encontrar algo, olhar para a folha de truques, olhar para a documentação, e espero que você possa começar a entender qual tag líquida você precisa ou quais tags líquidas que já estão em seu projeto estão fazendo. Então, isso é líquido. Na próxima seção, vamos trazer nosso conhecimento da estrutura do nosso código de modelo e o que acabamos de aprender com líquido para construir nossa própria seção personalizada, e então vamos incluí-lo em um modelo. Então, estou animado para amarrar e o que já aprendemos e mostrar o poder emocionante das seções no próximo vídeo. Então, vemo-nos lá. 14. Como criar uma seção personalizada: Para esta lição, fechei nossa documentação líquida e nossa folha de truques, e trouxe de volta nossa loja online porque nesta lição, vamos aprender como desenvolver nossa própria seção especial da Shopify para nosso tema personalizado aqui. Eu sinto que seções são o melhor lugar para nós entrarmos e fazer algum desenvolvimento personalizado porque seções são realmente o centro de todo o seu tema. É o lugar onde você pode realmente colocar em esquemas para que você possa ter essas opções de personalização dentro de suas páginas e seus modelos. Então, como um bom pequeno projeto para esta classe em particular, o que eu quero fazer é realmente criar uma seção de membros da equipe em nossa página sobre. Ok. Então, se voltarmos para aqui, clique em personalizar. Vou abri-la em uma nova guia. Vamos para a página Sobre Nós que criamos anteriormente. Lembre-se que codificamos em uma seção para mapa. Quero substituir isso por nossa própria seção para membros da equipe porque em nossa página Sobre, podemos querer ter uma seção sobre os diferentes membros da equipe trabalhando em, digamos que somos uma empresa ou algum negócio ou alguma loja, obviamente sendo um Loja Shopify. Talvez queiramos destacar alguns dos principais membros da equipe ou as pessoas que trabalham para a nossa empresa. Primeiro de tudo, eu vou me livrar dessa tag de layout porque eu não acho que faz sentido não ter um cabeçalho e um rodapé. Eu vou para a página dot sobre, remover esta tag de layout, salvar isso. Eu também vou me livrar do mapa de seção e eu vou levá-lo de volta para basicamente, exatamente a mesma coisa que a página normal. Ok. Atualize a página em nosso personalizador. Você pode ver aqui temos um modelo de página padrão e entre cabeçalho e rodapé, temos apenas o conteúdo da página. O conteúdo da nossa página, é claro, somos capazes de mudar em nosso item de menu páginas aqui. Em seguida, clique na página. É aqui que editamos esse conteúdo. Ok. Então o que eu vou fazer é entrar no editor de código novamente. Em seções, vou criar uma seção com o nome da seção que queremos. Vou chamá-lo de membros da equipe Dot Liquid. Você poderia chamá-lo de “staff dot liquid “, o que você acha que é um bom nome. Ok. Agora, a fim de construir esta seção de membros da equipe, eu vou fazer referência a outras áreas do nosso código e nós podemos copiar alguma estrutura que já existe. Para começarmos, o que vamos precisar é de algum tipo de div onde vamos colocar em nosso código. Então vamos precisar de um esquema. Agora lembre-se o que é o esquema, são as opções em nosso personalizador. Para isso, ainda não temos uma seção dinâmica aqui, mas você viu em outras páginas, como a página do produto, temos uma seção personalizável aqui. Isso é tudo definido pelo esquema. Espero que já tenha sido martelado para casa. Voltando para a página Sobre Nós, vamos colocar em nosso próprio esquema aqui, como tal. Então precisamos de uma tag de esquema final. Dentro dessas tags de esquema de abertura e fechamento, o que queremos colocar é um objeto JSON. Ok. Agora você pode não estar familiarizado com JSON, mas como eu disse nas lições anteriores, é bem simples. Começa com colchetes, e agora temos que definir alguns atributos do nosso esquema. Eu vou realmente referenciar a documentação nesta lição porque às vezes é bom atualizar a memória e eu esqueço o tempo todo quais atributos precisamos para o nosso esquema. Deixe-me apenas procurar por temas, esquema e Shopify. Seções temáticas. Vamos saltar para aqui, esquema na parte seções tema. Ok. As seções devem ter um nome. Então coloque um nome e vamos chamá-lo de membros da equipe. O que mais precisa? Podemos colocar em uma classe, e essa é a classe CSS que vai para a div. Vamos dar-lhe uma classe de seção de membros da equipe. Esta é a classe que podemos referenciar em nosso CSS. Então, é claro, configurações. Agora, nós podemos escrever as configurações provavelmente antes mesmo de escrever qualquer um do código HTML real. Para definir nossas configurações que serão uma matriz, precisamos abrir e fechar colchetes, e então podemos adicionar mais alguns objetos JSON. Para cada uma das configurações, precisamos de um ID, um tipo e um rótulo. Há outras coisas que podemos colocar em como um valor padrão, mas vamos precisar de um ID, tipo e rótulo para cada configuração de seção. O tipo é o tipo de entrada que passamos em uma lição anterior apenas brevemente. O rótulo é o que aparece no personalizador e o ID é a variável que usaremos dentro do nosso código para referenciar o que o usuário colocou neste campo ou o padrão no caso de não haver nada colocado lá. Você verá tudo isso acontecendo enquanto construímos. A primeira coisa que vamos precisar, ID e a primeira configuração que eu quero para a nossa seção de membros da equipe é um título de seção. Vou chamar-lhe título. Para o tipo, ele vai ser texto e rótulo vai ser título da seção. Você pode configurar isso como quiser, só tem que fazer sentido. O tipo definitivamente tem que ser texto porque esse vai ser o tipo de entrada que aparece no personalizador. Tudo o resto você pode definir para o que quiser. Esta variável pode ser chamada de outra coisa. O que quer que apareça para o usuário no front-end, isso pode ser o que você quiser também. Apenas anote isso. Hora de adicionar em outro objeto. É aí que eu defino os blocos. O que eu quero fazer é, nós realmente não olhamos muito para blocos neste curso já. Na verdade, dificilmente tocamos nele. O que blocos nos permitem fazer, e eu mostrei na seção de slideshow, é nos permite basicamente adicionar conteúdo em blocos. Eu não sei mais como dizer isso, mas ele nos permite basicamente adicionar blocos de conteúdo que podemos remover ou adicionar vários. O limite de quantos blocos podemos adicionar é definido por nós. Eu acho que blocos faz sentido na seção de um membro da equipe porque número um, nós vamos ter mais de um membro da equipe muito provavelmente. Número dois, talvez precisemos adicionar ou remover membros da equipe no futuro. Acho que faz todo sentido usar um bloco. Voltando para Sobre Nós. Não sei porque continuo a clicar nisto porque ainda não temos uma secção importada. Vamos fazer isso agora mesmo. Isso ainda não está totalmente formado, mas eu vou pular um pouco em frente e jogar essa seção aqui porque quando estiver pronto para ir, ele estará bem dentro deste modelo, pronto para personalizar. Esta seção será chamada de membros da equipe. Essa palavra se relaciona com o que rotulamos nossa seção em nosso arquivo de seções, obviamente sem o ponto líquido. Eu vou realmente criar um padrão para isso para que assim que executar a página, nós vamos obter um valor sem nós ter que escrever nada. Eu só vou dizer, é conhecer nossa equipe, equipe nas capitais. Esse será o valor padrão. Vamos fazer uma pausa aqui por um segundo com o esquema. Feche isso com apenas uma configuração e realmente usar essa configuração agora para que possamos realmente vê-lo chegar através do personalizador. O que eu vou fazer para isso é, eu vou roubar a estrutura de outra seção em nossa seção de seções. Muitas seções. Permitam-me encontrar aqui um bom exemplo. Talvez, coleção em destaque, colunas de recurso. Você pode ver aqui que se o título da seção não estiver em branco, queremos colocá-lo para fora na tela e queremos usar esta estrutura HTML porque há CSS já associado a isso, nós vamos obter alguns estilos automáticos para fora O portão. Vamos fazer isso. Na verdade, vamos usar este recipiente de largura de página também. Isso vai garantir que o conteúdo que temos esteja de acordo com a largura da página. Já temos a etiqueta div de fechamento para isso. Eu basicamente adicionei a largura da página da classe. Então, dentro eu tenho se seção configurações ponto título não está em branco, em seguida, colocá-lo em e nós escapamos qualquer HTML que é colocado lá. Como rotulamos nosso título como o ID do título, isso é realmente tudo o que precisamos fazer. Não precisamos alterar o nome da variável. Se eu salvar isso, verifique novamente não cometemos nenhum erro com o relógio do tema, estamos todos bem, e eu atualizo esta página no personalizador, o que você verá agora é uma seção de membro da equipe disponível para nós personalizar entre o cabeçalho e rodapé. Se eu clicar sobre isso, você pode ver nossa única opção que definimos para o título da seção. Em vez de “Meet the Team “, talvez eu possa dizer “nossa equipe”. Isso se atualiza dinamicamente bem na frente de nossos olhos. Quão legal é isso? Estou feliz com o Meet the Team. Agora, eu quero definir alguns blocos. Vamos dar uma olhada aqui e procurar por blocos. Renderizando blocos de seção. Não é isso que estamos atrás. Blocos. Aqui vamos nós. As seções podem definir blocos em seus esquemas e em seus contêineres de configurações e conteúdo que podem ser adicionados, removidos e reordenados em uma seção. Essa é uma boa explicação de uma frase do que eu estava tentando explicar antes. Um bloco precisa ter um nome e um tipo, e então você dá algumas configurações, exatamente como você faria, normalmente, da mesma maneira que fizemos para nossas configurações de seção. Depois de nossas configurações aqui, depois deste pequeno colchete, o que vamos querer fazer é colocar em blocos. Funciona de forma semelhante às configurações. Temos que colocar em um array e então vamos usar blocos quadrados novamente. A propósito, eu só expandi e contratei isso só para facilitar para nós, mas vou expandi-lo de novo. Dentro dos quarteirões, temos um objeto. Nesse objeto, como diz, precisamos de um nome e um tipo. Nome vai ser membro da equipe porque é um único membro da equipe. Na verdade, podemos escrever em inglês legível. Então vamos precisar definir o tipo e o tipo é o que quisermos que seja, porque este é um bloco. Cabe a nós definir nossos próprios tipos. Vou chamar-lhe perfil de pessoal. Agora definimos as configurações. Assim como fizemos aqui com as configurações, vamos colocar as configurações para cada bloco. Vamos abrir um colchete e vamos precisar do tipo de ID e do rótulo novamente. A primeira configuração será o nome do membro da equipe. Vou chamar-lhe o nome da equipa. O tipo de que vai ser apenas um campo de texto. O rótulo será o nome. Porque todo mundo, o nome de todo mundo vai ser diferente, não há nenhum ponto de ter um padrão. Então, a próxima opção, vou colocar como o título da equipe. Este é o papel deles na empresa. Digite-o digitar como texto também. O rótulo vai ser o cargo. Role para baixo para nos dar mais espaço. Vamos dar-lhe mais uma configuração e isso será bio. Vamos chamá-lo de bio-pessoal. Desta vez, vamos usar a área de texto em vez de texto e a razão pela qual estamos usando a área de texto, é o mesmo pensamento que em HTML normal, vai ser uma biografia multi-linha, muito provavelmente. Nós realmente não queremos ter texto porque isso só vai nos dar uma entrada de uma linha. Queremos um pouco de uma área para escrevermos a biografia. Agora que temos esses atributos, o que vamos querer fazer é colocá-lo em HTML aqui em cima. O que eu vou fazer é usar o loop for que vimos antes. O que vamos ter que fazer é percorrer os blocos nesta seção e depois colocá-los todos para fora. Eu vou fazer para o bloco em section.blocks, eu acredito, e então eu vou terminar meu loop. Este objeto aqui no esquema, se você está acompanhando, é a seção em si e, em seguida, aqui as coisas que podemos referenciar. O nome do ponto da seção, a classe do ponto da seção, as configurações da seção, os blocos de seção. Na verdade, uma coisa que vou mudar é dar um nome mais descritivo. Vou chamá-lo de pessoal na seção. Blocos. Porque só temos um tipo de bloco e é um perfil de equipe e sabemos que todos esses blocos vão representar um membro da equipe. Só estou chamando isso de pessoal. Na verdade, a equipe pode ser plural, então talvez eu diga apenas membro. Novamente, você pode nomear isso o que quiser, apenas o que torna mais sentido para você e mais legível. O que eu vou fazer é colocar em uma div para cada membro da equipe e dentro dessa div, eu vou produzir essas três variáveis que nós definimos aqui. O que eu vou fazer para isso é um h3 para o nome do membro da equipe. Eu vou fazer uma extensão para o título dos membros da equipe e, em seguida, eu vou colocar em uma tag de parágrafo para sua biografia. Aqui, é aqui que colocamos nossas tags líquidas e queremos apenas produzir o que estiver nas configurações do bloco. Então eu vou pegar o objeto de membro, que é o que temos aqui em cima, passar por suas configurações e selecionar o nome da equipe. Eu vou copiar isso porque a única coisa que precisamos mudar é a parte final e em vez de nome da equipe, eu vou colocar no título da equipe provavelmente não precisa colocar na equipe no início dela. Na verdade, eu poderia entrar e mudar isso agora. Provavelmente não faz sentido ter. Só vou entrar e nos livrar do pessoal porque não precisamos dele. Podemos apenas fazer nome, título e biografia. Agora devemos ter o suficiente para duas funções. Nós vamos precisar fazer mais algumas mudanças, mas pelo menos para obtê-lo sair na tela, vamos dar uma olhada depois de salvar. Não há erros no nosso relógio temático. Devemos ser doces e se formos para a nossa página nos customizes, atualize a página. Agora, se eu entrar em Membros da Equipe, você verá que podemos adicionar um bloco. Vou adicionar um membro da equipe. Vou dar o nome do membro da equipe, vamos dar o meu nome. Desenvolvedor Web. Como você pode ver, ele está saindo imediatamente. Eu vou adicionar um pouco de Lorem ipsum, basta copiá-lo de cima aqui como o comprador e lá vai você. Temos algum conteúdo inserido na página. Se eu adicionar outro membro da equipe, digamos que é Christopher Dodd de novo. Eu não inventei outros nomes de membros da equipe em preparação, então você só vai ter que lidar com ver meu nome duas vezes. Mas como você pode ver, está adicionando outra div com todo o conteúdo que definimos aqui. Ele percorre os blocos e, em seguida, adiciona neste conteúdo. Muito legal. Vou clicar em “Salvar” mesmo que pareça uma porcaria. Vamos fazer um pouco de estilo. Podemos aproveitar o sistema de grade em nosso tema. Essa é uma pequena coisa que acontece em praticamente todos os temas que usam luz para ser construído ou os temas gratuitos da Shopify estarão usando a grade leve. O que posso fazer é embrulhar isto numa grelha. Vou colocar um div em torno disso, chamá-lo de grade. Para esta div, eu vou dar-lhe uma classe de item de grade, e eu também vou adicionar uma classe para definir colunas. Há alguns tamanhos de tela desenvolvidos no sistema de grade. Se quiser aprender sobre a grade de ardósia, deixe-me ver se há informação disponível. Grade ardósias. Pode haver algumas informações disponíveis no Google. Aqui estilos com líquido. Não. Deixe-me sair da pequena documentação. Clique em “Exemplos CSS”. Aqui vamos nós. Aqui temos nossos pontos de interrupção CSS, médio, grande, widescreen, calha é o espaço entre elementos de grade. Se eu rolar para baixo aqui, você pode ver alguns exemplos do sistema de grade. Por exemplo, se quiséssemos que a coluna ocupasse metade da página em tamanhos de tela que são médios e superiores. Esta é a aula que usaríamos. Na verdade, essa é a aula exata que quero usar para nossa seção de membros da equipe. Vou colocar isso aí. Como você pode ver, é semelhante ao que eles definiram aqui, eles têm uma grade e, em seguida, eles têm itens de grade, e então eles têm a especificação de coluna. Você pode empilhar estes com um pequeno terço, um sexto. Você pode fazer com que ele altere a largura da coluna com base no tamanho da tela. Mas para nós, meio para cima, metade deve estar bem. Indo para o meu tema, veja tudo o que é doce. Vou voltar aqui, atualizar a página. Agora você verá que nossa seção de membros da equipe está nesta grade de duas colunas. Se eu fosse adicionar um terceiro membro da equipe, diga que é meu nome novamente. Você pode ver. Que temos outra seção aqui. Obviamente há problemas de espaçamento aqui. Uma maneira fácil de corrigir isso é apenas dando alguma margem superior a todos esses elementos da grade. Novamente, nós provavelmente deveríamos estar fazendo isso em CSS, mas apenas no interesse do tempo, eu vou colocar isso aqui na linha. Vou dar-lhe uma margem superior de 15 pixels. Guarde isso. Relógio tema é feliz, atualizar a página e agora temos um pouco mais de uma margem. Podemos aumentar essa margem pelo que pusermos aqui. Talvez a queiramos aos 30, não é grande coisa. Cabe a você o que você quer fazer com seu estilo. Voltando para nossa seção sobre nós, há mais uma coisa que eu sinto que nossos perfis de membros da equipe precisam, e isso é uma imagem. Agora deixei a imagem perdida porque é um pouco mais complicado do que adicionar um campo de texto. Olhando para nossas opções de entrada. Não tenho certeza se há opções de entrada aqui, deixe-me dar uma olhada. Tipos de entrada. Acho que estamos na página errada para tipos de entrada. Se eu procurar a documentação, é esta? Tipos básicos de configuração de entrada? Aqui vamos nós. Aqui você pode ver que podemos usar um seletor de imagens para uploads de imagem. Há duas partes nisso, obviamente, eu tenho que adicionar a opção em nosso bloco e então eu tenho que adicioná-lo em nosso HTML real. Eu vou colocá-lo realmente acima do nome. Eu vou criar um novo objeto aqui e dentro, eu vou ter o ID da foto, tipo vai ser o que eu mostrei antes do seletor de imagem, e rótulo é foto. Podemos dizer o que quisermos. Eu guardo isso e agora temos essa opção em nossas configurações. O próximo passo será colocá-lo em nosso conteúdo real. Vou colocar uma tag de imagem aqui em cima e a maneira que vou fazer isso é usando um filtro que vimos anteriormente. Eu vou abrir uma abertura fechando colchetes, e eu vou pegar configurações de membros. Era imagem ou foto que lhe chamávamos? Foto. Foto das configurações do membro. Então eu vou executá-lo através do filtro URL da imagem para obter o URL dessa foto. Em seguida, eu vou executá-lo através tag imagem para obter a tag para saída na tela. Se eu salvar isso, verifique se eu cometi algum erro, parece tão bom. Na exibição do tema, atualize a página. Verá aqui que temos um monte de Sem Imagem. O que devemos fazer é primeiro verificar se há uma imagem. Caso contrário, vamos ter aquele “Sem Imagem” feio. Este é um passo opcional, mas vai torná-lo mais agradável. Vamos colocar em um condicional aqui, membro, configurações, foto. Vamos colocá-lo e se não, nada vai aparecer. Guarde isso. Veja se temos algum erro líquido, não, estamos todos bem. Atualize a página. Agora você pode ver nenhuma imagem aparecer, até que nós mesmos as adicionemos. Se eu entrar nesta seção, vou para um bloco. Agora você pode ver que eu tenho essa entrada de foto. Eu realmente posso explorar imagens gratuitas através do banco de dados da Shopify, ou posso selecionar minha própria imagem. O que vou fazer é encontrar uma imagem minha e fazer upload dela. Aqui vamos nós. Uma vez que está dentro, ele vai para o conteúdo. Se eu sair aqui e adicionar imagens para as outras seções. Vamos apenas adicionar o mesmo. Você verá que ele vem aqui no quarteirão real também, o que é muito legal. Você pode identificar os diferentes membros da equipe mais facilmente. Agora você verá que eu tenho a foto, o nome, o título e um comprador. Agora, é claro, queremos corrigir este preenchimento e espaçamento. Podemos fazer isso em CSS, mas esse não é o objetivo desta lição. O ponto é mostrar esses blocos, e como podemos construir nossas próprias configurações no personalizador através do nosso código. Agora há mais um problema que temos com isso, e que o tamanho da imagem é muito pequeno. Isso porque se você usar URL de imagem sem parâmetros, ele vai aparecer com uma imagem que eu acredito ser um 100 por 100, muito pequena. O que vamos fazer para terminar, é adicionar um parâmetro aqui, que vai dizer ao Liquid o tamanho que queremos a imagem. Eu vou dizer 500x. Isso fará uma imagem com 500 por 500. Salve isso, atualize a página, e agora você pode ver que temos uma imagem de 500 por 500 em cada um dos membros da nossa equipe. Isso é realmente um pouco grande demais, então eu vou reduzir isso para 300, e eu vou adicionar em outro membro da equipe, que será apenas eu novamente, apenas para mostrar a extensão da grade. Christopher Dodd, Título do trabalho: Desenvolvedor Web, Bio, vamos apenas copiar dos outros. Lá vai você. Guarde isso, e agora você pode ver que temos essa grade de duas colunas com os membros da nossa equipe. Podemos entrar, podemos excluir blocos, podemos reordená-los, ou podemos adicionar novos membros da equipe e tudo isso sem usar código. Como você pode ver, nós o configuramos uma vez no código. Nós configuramos nossas opções. Nós configuramos onde queremos que esses valores que definimos apareçam em nosso código, e desenvolvemos nossa própria seção. Agora, há mais uma coisa que eu quero mostrar a vocês, e que é adicionar uma predefinição, que possamos usar esta seção em nosso conteúdo para tag de índice. Vamos voltar à nossa documentação aqui, e talvez a encontremos neste lugar, predefinições. Não, então vamos ter que voltar para a página que estávamos antes. Configurando as configurações do tema, foi isso? Seções temáticas. Aqui vamos nós. Predefinições. Aqui vamos nós. Se clicarmos em “Predefinições”, podemos ver esta seção, que podemos definir um nome e uma categoria para que possamos usar em nosso conteúdo para seção de índice. Se entrarmos em nossa página inicial onde o conteúdo para índice está sendo executado, e clicarmos em “Adicionar seção”, vamos ver. Há conteúdo personalizado. Não é isso que procuramos. Textos ricos, Mapa, Newsletter. Veja, nós realmente não temos nossa seção de membros da equipe aqui. Se quisermos adicioná-lo como uma de nossas seções em conteúdo para índice, só precisamos adicionar uma predefinição. Vou pegar isso como um exemplo só para economizar tempo. Entra aqui. Feche blocos para torná-lo um pouco mais fácil de ler e colocar em predefinições. Agora, nós não precisamos de blocos porque isso só vai definir uma predefinição em nossos blocos, que podemos fazer se quisermos, mas não é necessário. Tudo o que eu quero fazer é dar-lhe um nome e categoria, que possamos usá-lo em nosso conteúdo para índice. Essa categoria deve corresponder a uma dessas aqui. Eu acho que o mais apropriado talvez armazenar informações. Vamos continuar com isso. Vou chamá-lo de Informação da Loja, e como está em maiúsculas, não sei exatamente se devo colocar as minhas maiúsculas ou não. Eu só vou ver como eles fazem isso com o modelo de mapa. Descendo para o mapa e rolando para baixo para ver a predefinição, podemos ver o nome é Mapa e a categoria é Informações da loja. Assim como nós escrevemos. Categoria, armazenar informações e o nome será Membros da Equipe. Pressione “Salvar” nisso. Conseguimos os erros? Não, não temos. Na verdade, temos. Temos um JSON inválido. Isso é porque nós não fechamos isso, e nós realmente não fechamos o colchete também. Como inicializamos isso? Espero que não tenhamos nenhum erro JSON agora. Atualizado. Agora, se eu atualizar nossa página inicial no personalizador, clique em “Adicionar seção”. Agora, na Informação da Loja, não sei por que está chegando duas vezes, mas pelo menos temos aqui. Podemos adicionar nossa seção “Conheça a equipe”. No fundo, podemos adicionar membros da equipe como fizemos antes, e ele aparecerá em uma grade pequena. À medida que atualizamos o conteúdo, ele aparecerá automaticamente, e podemos reordenar essa seção, dentro de todas as nossas outras seções. Lá vai você. Quão bom é isso? Na verdade, não vou guardar isso porque não quero conhecer esta seção de Equipe na minha página inicial. Mas isso praticamente conclui inicializar sua própria seção da Shopify. Agora, como eu disse antes, você vai querer um estilo um pouco diferente. Você vai querer adicionar alguns estilos embutidos ou entrar em seu theme.scss.liquid, e adicionar alguns estilos usando classes para direcionar o que você colocou nesta nova seção. Talvez colocar em classe de membro da equipe, sublinhado, nome de sublinhado, e depois fazer o mesmo para o seu título e biografia. Esta seria uma boa maneira de colocar para fora o seu CSS usando BEM, Block Element Modifier é o que isso significa. Se você quiser saber mais sobre por que estamos usando sublinhado, sublinhado aqui e por que ele é usado em todo o FEM, BEM é o que você precisa pesquisar. Mas isso está fora do escopo desta classe, infelizmente. O que acabei de fazer aqui é colocar em algumas aulas que podemos ir e segmentar em theme.scss.liquid. Esta não é especificamente uma classe CSS, então eu não vou entrar nisso. Mas sim, é isso. Essa é a sua seção personalizada construída. Espero que isso mostre o poder das seções. Eu trabalhei com outras plataformas no passado, e eu não vi nada como isso onde você pode simplesmente definir um monte de opções em um bloco JSON, e então de repente você é capaz de usá-lo diretamente acima dele e ter uma interface de usuário tão agradável para personalização. Se voltarmos para a página Sobre Nós, onde codificamos essa seção lá dentro. Nós somos capazes de usar esta interface de usuário adorável que atualiza o que temos aqui na pré-visualização ao vivo. Isso é muito legal. Espero que tenham gostado de aprender a fazer isto. Nos próximos vídeos, vamos encerrar este lado, mostrar-lhe como enviá-lo para um cliente ou para uma loja adequada onde você vai realmente pagar por um plano se assim o desejar. Fique por perto para isso. Vejo você no próximo vídeo. 15. Como aprender ainda mais: Então, neste curso, aprendemos como criar rapidamente uma loja de desenvolvimento da Shopify, como editar o código do tema de estréia que veio com a loja e, no processo, aprendemos como funcionam os temas e as opções disponíveis para personalizar praticamente qualquer coisa a ver com o nosso amigo loja online. Agora, esse conhecimento sozinho pode ser suficiente para satisfazer suas necessidades básicas da Shopify. Mas, inevitavelmente, você precisará fazer mudanças além do escopo deste curso. Agora, na próxima lição bônus, vou apresentar a vocês uma maneira muito mais complexa de desenvolver temas da Shopify, começando quase do zero. Mas antes disso, eu vou assumir que o tema de estréia ou qualquer outro tema que leva a sua fantasia, fornece uma boa base para como você quer que seu site funcione. E isso é definitivamente o que eu recomendo a todos que estão desenvolvendo temas da Shopify. Há um monte de grandes temas lá fora e especialmente quando eu estou trabalhando com clientes, eu costumo usar um tema existente como ponto de partida. Nem sempre faz sentido reinventar a roda a menos que você realmente precisa de algo personalizado. E é por isso que vamos falar sobre ardósia na lição bônus. Nós também vamos falar, depois desta lição sobre, como levar seu site ao vivo. Eu já coloquei essa lição antes, aquela, porque uma vez que você realmente transfere a propriedade de sua loja, você pode perder o acesso a ela. A menos que a pessoa ou a conta para a qual você transferiu a propriedade comece em um plano de pagamento. Portanto, se você estiver pronto para entrar em um plano de pagamento, você pode definitivamente aprender sobre como mover seu site para seu plano real da Shopify no próximo vídeo. Mas, por enquanto, eu queria falar brevemente sobre como você daria o próximo passo para aprender o que deseja fazer com seu tema da Shopify em seguida. Então vamos apenas mergulhar em nosso tema e falar um pouco sobre talvez algumas personalizações que gostaríamos de fazer. Agora, a primeira personalização que você pode querer fazer é uma mudança de estilo. E isso é muito normal e isso provavelmente vai acontecer em algum momento com o seu tema. Você pode querer mudar digamos a margem entre este título e este aqui. Então você vai para a sua seção e você procura essa opção no seu personalizador e você não tem uma opção no seu personalizador para alterar a margem aqui. Então você tem duas opções. Você pode entrar e apenas criar a alteração, ou você pode criar uma opção em seu código de seção para permitir que você mesmo faça isso em seu personalizador. Então, se é uma mudança de estilo e você só quer aplicá-lo ao lado sem torná-lo uma opção personalizável, o que você pode fazer é simplesmente jogá-lo em seu theme.scss.liquid. Então vamos usar esse exemplo de que acabei de falar. Vamos descobrir o que é isso. Então, estamos na imagem com seção de sobreposição de texto, e infelizmente não podemos procurá-lo pelo nome do modelo. Vamos ter que procurar a pasta e encontrar a imagem com sobreposição de texto. Então imagem com sobreposição de texto e, em seguida, aqui podemos ver onde isso aparece e esse nome aparece no esquema desta seção aqui, herói dot liquid. Então esta é a seção que estamos olhando atualmente. Se olharmos bem aqui, talvez não esteja claro qual dessas divs realmente se relacionam com o que vemos na página. Então podemos querer inspecionar e isso é algo que eu faço muitas vezes. Usando nossas ferramentas de desenvolvimento, podemos ver o que é isso. E como você pode ver aqui, é esta div com uma classe de R-T-E traço definição mega legenda, mega traço subtítulo, traço, traço, grande. Então, olhando para o meu código aqui, eu posso procurar por mega legendas. Já consigo ver, mas só para esclarecer. Então nós temos mega legendas, e mega título. Aqui vamos nós. Nós o temos em alguns lugares diferentes, mas este é o que estamos procurando. Então, se quiséssemos torná-lo uma opção no personalizador, o que poderíamos fazer é adicionar um estilo embutido e definir margem superior e defini-lo talvez como, então vamos para as configurações de ponto de seção e talvez nós chamamos de margem superior. Agora também gostaríamos de verificar se realmente definimos a margem superior primeiro. Então gostaríamos de colocar uma declaração de “se” em torno disso. Mas vamos apenas dizer que queremos alterar a margem máxima em todo o site. Então nós íamos para o nosso tema ponto S-C-S-S ponto líquido, rolar todo o caminho para baixo. Este é um arquivo muito grande e vamos criar uma regra para mega traço legenda. E aqui, vamos definir a margem superior para algo ridículo, só para vermos que está funcionando. Então, vou pressionar “Save” nisso. Verifique se não cometemos erros. Sim, está atualizado agora e se eu atualizar esta página, você pode ver agora que nós temos esta margem ridícula top que está afetando qualquer elemento com uma classe de mega traço legenda, que espero que só deve ser essa seção dentro desta seção ou daquele pedaço de texto dentro dessa seção. Então eu acabei de remover isso. Atualizou nosso código. Se eu atualizar a página novamente, voltamos ao normal. Então esse é um cenário. Talvez queira atualizar o estilo. Então você pode fazer isso com CSS. Talvez você queira atualizar algo que acontece com JavaScript. Então eu não tenho certeza de quanto Ajax nós temos aqui. Se eu colocar isso até três, parece que o tema de estréia não é pesado no JavaScript. Tenho que clicar em atualizar aqui quando a quantidade for atualizada. Mas isso pode ser uma opção de personalização. Em vez de ter que clicar em Atualizar, talvez queiramos que isso seja atualizado sempre que clicarmos nisso. E como esta é uma mudança de página ao vivo, gostaríamos de fazer isso com JavaScript. Então você iria pesquisar como fazer isso e então você iria, e provavelmente você colocá-lo em seu tema dot js. Então digamos que queremos fazer isso, como falaríamos esse problema? Abra uma nova guia e pesquise no Google, faça o preço de atualização de quantidade automaticamente e, claro, precisamos colocar em qual plataforma estamos usando; Shopify. Ok. Então, há um monte de artigos diferentes aqui. Eu realmente não procurei isso antes, mas este é o processo que eu iria para encontrar a resposta. Então este não é o melhor fio. Você nem sempre vai encontrar a resposta perfeita na sua primeira pesquisa. Aqui vamos nós. Aqui está algo que parece certo. Então, a julgar pelo meu conhecimento de JavaScript já, e claro, este não é um curso de JavaScript, então se você quiser se aprofundar em JavaScript, eu tenho um curso sobre JavaScript aqui no skillshare.com também. Mas você vai querer configurar um ouvinte de eventos aqui para verificar quando isso muda e então nós vamos ter que atualizar essas partes aqui, vez de tê-lo atualizado quando você clicar no botão de atualização, que você pode ver aqui é recarregando a página inteira. Então essa é uma personalização que você pode querer fazer. Claro, antes de personalizar qualquer coisa com código, você deve verificar se você pode realmente apenas personalizá-lo usando as entradas que você já tem em seu personalizador de temas. Quero dizer, é por isso que eles estão lá para você usar sem ter que cavar no seu código. E como nota lateral, se você está cavando em seu código e você está criando algo que você pode querer mudar mais tarde, torná-lo uma opção em seu esquema e dessa forma você pode editá-lo aqui e girá-lo ao redor sem nunca tocou no código. Essa é uma das razões pelas quais usar esse esquema. Então poderia ser uma mudança de estilo, poderia ser uma mudança que você poderia facilmente corrigir com seu esquema, poderia ser alguma coisa dinâmica JavaScript. Mas é provável que você vá se deparar algo que você já não sabe como fazer. Mais uma vez, como mencionei neste curso, só temos tempo suficiente para fazer uma visão geral. Então, seus melhores lugares para encontrar algumas respostas, se você concordar com a leitura da documentação, vamos para a documentação da Shopify novamente e ir para os temas. Aqui é onde você poderá pesquisar todas as informações que a Shopify disponibiliza para você desenvolver temas. Então, se quisermos aprender sobre seções, procure por seções na documentação. Clique em seções Tema. E então você pode aprender sobre o esquema. Você pode aprender sobre como incluir folhas de estilo JavaScript, renderização de blocos de seção, todos os tipos de coisas. Então a documentação do tema deve ser a sua Bíblia, deve ser o seu livro sobre essas coisas. E também a folha de truques da Shopify, que analisamos anteriormente. Então, se você clicar no primeiro link, isso é como uma versão resumida da documentação, e foram capazes de usar o comando F ou Control F em um Windows para procurar quais são as diferentes variáveis em um determinado objeto como produto. Então esses são os dois lugares principais que você pode querer procurar. Obviamente, há dois outros cursos na Shopify, nesta plataforma, skillshare.com. Eles são um pouco desatualizados e um é bastante básico, e o outro apenas vai muito avançado muito rapidamente. Então eu acho que escolher sua direção com isso. Mas, caso contrário, eu estava pensando em criar um curso da Shopify do início ao fim. Se houver interesse suficiente, se você quiser saber isso, definitivamente me avise na caixa de discussão abaixo e se você tiver algum problema ou personalizações que deseja fazer na Shopify que você está lutando para descobrir, definitivamente deixá-lo como um comentário na caixa de discussão abaixo e eu vou fazer o meu melhor para apontá-lo na direção certa. Então, como eu mencionei no próximo vídeo, vamos falar sobre levar seu site ao vivo e, em seguida, no vídeo depois disso, vamos fazer um bônus no Slate. Então Slate é se você quer levar realmente a sério sobre desenvolvimento do tema e começar basicamente do zero, é aí que você quer olhar. Então, mais duas lições e depois vamos terminar. Espero que estejam gostando do curso. Vejo você no próximo vídeo. 16. Como colocar o seu site online: Tudo bem, então para esta lição, mais uma vez fechei as abas e trouxe-nos de volta para a nossa loja. Também temos a guia para nossa conta de parceiros da Shopify ainda aberta. O que vou fazer nesta lição é mostrar-lhe como essencialmente levar o seu site ao vivo ou migrá-lo. Ou prepare-o para se tornar um tema ao vivo na internet. Para que os usuários entrem, use o tema em uma loja real. Então, há uma série de maneiras diferentes de fazermos isso. Então o primeiro cenário, digamos, é que esta é uma loja existente. Então a loja de habilidades do Chris é uma loja que está funcionando. Há encomendas chegando, já há produtos aqui, clientes. Esta é uma loja ao vivo. Tudo bem, então fizemos nosso desenvolvimento em um tema separado, que não é ao vivo, que é a maneira que devemos fazer. Se estivermos prontos para que esse tema seja lançado, tudo o que precisamos fazer é clicar em Ações e depois clicar em Publicar. Agora, se você está trabalhando em uma loja existente, você quer ter cuidado com as coisas que você edita, que não são o tema em si. Então, se você estiver redesenvolvendo um site e adicionando páginas, essas páginas estarão disponíveis no site no momento em que você as criar. Mas não é tão grande coisa, a menos que você realmente precisa que essas páginas sejam privadas, porque você não vai estar vinculando essas páginas muito provavelmente. A outra coisa, navegação. Então você pode ter que criar alguns menus novos. No seu tema, você vai vincular a esses menus. Esses menus estarão lá com os menus existentes que estão na loja ao vivo todos no mesmo lugar. Assim, coisas como blogs, páginas, navegação e produtos estão em sua própria loja. Tudo bem, eles não estão especificamente relacionados com o tema, então precisamos ter cuidado com isso também. Então cenário número dois, você está trabalhando com uma loja cliente, mas você está desenvolvendo seu tema em uma loja de desenvolvimento. Agora você pode querer fazer isso por esta razão particular que eu acabei de mencionar, porque eles têm seus próprios produtos, páginas de postagem de blog e navegação já configurados e você quer criar algo que é completamente separado. Então o que você vai querer fazer é talvez embalado este tema. Então faça o download e, em seguida, carregue para a outra loja e, em seguida, migre as outras coisas que você deseja encontrar, bem como produtos, postagens de blog, páginas e navegação. Essa seria a maneira mais demorada e manual de fazer isso. Então normalmente você tentaria evitar isso. Então, uma boa mistura entre esses dois cenários é desenvolver em uma loja real. Mas tenha cuidado com o que você cria nos produtos, postagens de blog e páginas, e, sempre que possível, talvez escondê-los ou obscure-los ou não tê-los vinculados a qualquer lugar do seu site atual. Se eles ainda estão em desenvolvimento e não estão prontos para entrar ao vivo, você quer ter certeza de que eles são quase invisíveis para o público. Mas se esta loja era sua e você ainda não entrou ao vivo, você desenvolveu seu tema. Você acabou de clicar em Publicar. Tão simples quanto isso. Então vamos dizer cenário três, você só tem a conta do seu parceiro e você acabou desenvolver esta loja como uma loja de desenvolvimento e agora você quer que ela seja uma loja real onde você pode aceitar pedidos e basicamente se tornar um loja legítima de seu próprio domínio. Ou talvez queira transferir esta loja para alguém que faça isso. Então, talvez você tenha desenvolvido isso para um cliente e você possa transferir esta loja para a conta dele para que ele possa começar a pagar pela Shopify. Agora eles têm uma duplicata da loja que acabamos de criar por conta própria. Então é para isso que os temas de desenvolvimento são construídos. Eles são construídos para que possamos desenvolver um tema, prepará-lo para o cliente. Se é outra pessoa ou pode ser só nós. Prepare o tema e, em seguida, ele passa para um plano pago da Shopify. Então, um aviso antes de demonstrarmos isso, assim que você fizer isso, ele será transferido. Há uma provável chance de você perder o acesso. Na verdade, eu tenho certeza que uma vez que você transferir esta loja de desenvolvimento da sua lista de lojas de desenvolvimento para o plano de um cliente, então pelo tempo que eles levam para parar de pagar por esse plano, nenhum de vocês terá acesso a esse site. Portanto, aviso: não migre nem transfira propriedade de um site até que alguém esteja pronto para pagar pela Shopify. Então, se [inaudível] fora do caminho, vamos passar pelo processo. Então eu vou fechar a loja e vou para a contagem de sócios. Apenas atualize isso porque os links realmente expiram. Portanto, queremos ter certeza de que temos a página mais recente. Como podem ver aqui, temos a loja de habilidades do Chris em lojas de desenvolvimento. Agora, para fazer disto uma loja real, queremos transferir a propriedade para alguém. Então aqui nos avisa o que vai acontecer e este ponto aqui é o aviso que dei antes. A loja não pode ser acessada até que o novo proprietário selecione um plano. Tudo bem, então nós vamos entrar aqui. No momento, não podemos selecionar nenhum novo proprietário porque o que temos que fazer é adicionar uma conta de equipe. Então eu vou clicar em “Adicionar uma conta de equipe” e ele vai nos levar de volta para nossa loja. Então eu vou me criar como uma conta de equipe, Freelancer.com. Esta conta de equipe terá permissões completas. Então, vou clicar em Enviar Convite. Na verdade, já fiz isso. Então vamos ver se consigo encontrar outro e-mail para fazer isso. Tenho alguns e-mails diferentes, felizmente. Agora eu enviei o convite. Então você pode ver aqui o proprietário da conta é o administrador da loja de compartilhamento de habilidades do Chris, que é a nossa conta de parceiro, mas agora temos essa conta de coisas. Então, se eu entrar na minha caixa de entrada, posso aceitar esse convite. Então deixe-me fazer isso agora. Aqui vamos nós em frente, demorou um pouco. Mas agora está aqui e está me pedindo para criar uma conta pessoal. Então eu vou criar uma conta de equipe. Vou ter que colocar um número de telefone e uma senha. Deixe-me gerar uma nova senha com meu aplicativo de gerenciamento de senhas. Vou usar este mesmo que usamos para a loja. Em seguida, vou clicar em Criar conta. Agora estou logado na loja. Mas como podem ver aqui, meu nome é Christopher Dodd e não a loja de habilidades do Chris. Então mesma loja, usuário diferente logado. Agora tenho permissões completas para acessar a loja. Posso fazer o que quiser. Mas o problema é que ainda estou numa loja de desenvolvimento. Então, se eu quiser levar esta loja ao vivo, vou ter que voltar para a conta do parceiro. Então, sair dessas lojas e eu vou atualizar a página que executamos antes. Agora eu deveria ter essa opção de transferência. Então, se eu entrar na caixa de seleção agora, eu posso ver Christopher Dodd, ok? Então eu posso clicar em Christopher Dodd, transferir a loja e aqui é onde eu vou perder acesso a toda a loja. Tudo bem, então você pode ver aqui que a loja de habilidades do Chris compartilha. Se eu voltar para lojas de desenvolvimento, não estará mais lá. Na verdade, ele vai passar por cima para gerenciar lojas. Na verdade, está bem aqui. Na verdade, fiz um teste antes. Como pode ver, está inativo. Mas se eu clicar em Login, parece que ainda posso acessá-lo. Não, então não posso acessá-lo agora. O que vai acontecer? Como disse, no aviso anterior, terei que esperar que a conta para a qual a transferi comece a pagar por um plano. Tudo bem? Então, se eu atualizar a página agora na conta, eu estava logado como Christopher Dodd. Vamos tentar fazer login novamente na loja. Felizmente, não me deixa. Isto é conveniente. Mas deixe-me apenas voltar e digitar este nome de loja explicitamente [inaudível]. Tudo bem, então nós temos isso. Volto logo. Vou clicar em Entrar. Talvez seja porque estou logado em duas contas diferentes. Então, vou abrir uma janela privada. loja de habilidades do Chris. Era a loja de habilidades do Chris? Sim. Clique em Entrar aqui. Esperemos que nos permita entrar. Sim. Agora podemos entrar com essa conta de parceiro que criamos e espero que minha senha ainda esteja salva na área de transferência. Não, não é. Eu só vou pegar isso na minha edição de texto. Eu tenho isso agora. Agora está me conectando. O que você vai ver chegando nesse ponto é escolher seu plano. Então é por isso que eu avisei você sobre fazer isso até que você esteja pronto para realmente começar a pagar por um plano, porque não há outras opções uma vez que você entrar na conta da equipe, do que começar a pagar por um plano. Então você escolheria e passaria pelas moções e configuraria seu faturamento e tudo mais. Então, da perspectiva do parceiro, então eu estou logado na conta do parceiro aqui. É uma loja gerenciada que eu realmente não posso fazer login ou acessar até que essa conta de equipe, a pessoa ou a conta que realmente vai levar a loja e entrar em contato com ela, escolher um plano e começar a pagar pela Shopify. É isso que essa caixa é. Mas vamos supor que o cliente ou você mesmo ou quem quer que esta conta esteja associada, escolhe um plano e começa a pagar por ele. Bem, agora você poderá acessar a loja em sua conta de parceiro ainda clicando em login. Então ele vai de como já fez, de lojas de desenvolvimento para gerenciar lojas. Então você pode começar a gerenciá-lo como um parceiro da Shopify. Então, isso faz total sentido se você estiver desenvolvendo uma loja para um cliente, você a transferiu para ele, você disse a ele, comece a pagar pela Shopify. Seu site está prestes a entrar no ar. Eles fazem isso. Então, como você é o desenvolvedor ou o parceiro que trabalha com eles, você ainda pode fazer login e colaborar e trabalhar em seu site também. Então é assim que funciona com lojas de desenvolvimento. Novamente, como eu mencionei, e não teremos mais acesso à loja. Nós estamos? Sim, então estamos totalmente trancados agora. Mas como mencionei antes, infelizmente, não posso mostrar porque estou desconectado na loja. Mas como eu mostrei antes, poderíamos baixar o arquivo do tema em si e carregá-lo para outro lado. Se não quiséssemos passar por toda essa transferência de propriedade parte de todo o processo. Portanto, há algumas maneiras de fazê-lo, mas esta é essencialmente a forma como você levaria seu site ao vivo. primeiro passo é que você precisa realmente transformar esse tema ao vivo. Então você precisa começar a pagar por um plano se você ainda não está. Então você tem uma loja da Shopify totalmente funcional. Então, isso praticamente conclui todo o processo de girar uma loja da Shopify com um tema padrão, entrar, explorar o código, criar uma seção personalizada, personalizá-la tanto quanto você quiser e, finalmente, transferi-lo quando estiver pronto para outra conta para começar a pagar pela Shopify e começar a administrar sua loja. Então esse é todo o processo. No próximo vídeo, vamos realmente mostrar um processo diferente, começando com Slate. Então, se você está interessado nisso, fique por perto, caso contrário, eu te vejo na conclusão. Muito obrigado por vigiar os rapazes. Estou ansioso para vê-lo no próximo vídeo. 17. Bônus: Slate, parte 1: No próximo vídeo, falaremos mais detalhadamente sobre uma ferramenta de desenvolvimento antiga para a qual a Shopify terminou o suporte em janeiro de 2020. Estou falando de algo chamado Slate. Desde janeiro de 2020, ficou claro que a Shopify está se afastando do Slate, e agora com o anúncio de que a CLI da Shopify foi estendida para permitir o desenvolvimento do tema também, vejo pouca ou nenhuma razão pela qual alguém deve começar um novo projeto da Shopify usando o Slate. Dito isto, deixei o próximo vídeo como um tutorial para qualquer um que tenha forçado a usá-lo. Alguns temas mais antigos ainda podem estar usando Slate, e, portanto, esse conhecimento não é completamente obsoleto. No entanto, se você tiver alguma escolha no assunto, eu definitivamente recomendo usar a ferramenta mais recente para o trabalho, e essa ferramenta é atualmente a CLI da Shopify. 18. Bônus: Slate, parte 2: Bem-vindos de volta, rapazes. Nesta lição, eu fechei todas as outras abas, fechei meu editor de código, e fechei meu terminal que estava executando o relógio tema, porque nós vamos aprender sobre o Slate nesta lição, ok? Então, se você já usou Theme Kit antes neste curso, e kit Theme é ótimo porque ele nos permite editar temas em tempo real, e Slate faz algo semelhante, mas também tem outro elemento para isso, e isto é, ele cria um novo tema para nós. Na verdade, podemos fazer a mesma coisa no Kit Temático. Eu provavelmente mencionei tema, novo como um dos comandos para Theme Kit. Ele cria um tema que é, uma espécie de tema Stata. Então você não pode fazer algo semelhante dentro do Kit de Temas. Mas se você é muito sério sobre o desenvolvimento de um tema personalizado da Shopify, você vai querer usar o Slate e o Slate é um pouco mais complicado. A estrutura da pasta vai ser um pouco diferente e é preciso um pouco mais de esforço para configurar. Mas é por isso que é uma lição bônus neste curso da Shopify. Eu não pensei que eu poderia fazer um curso de desenvolvimento de temas da Shopify sem pelo menos falar sobre o Slate. Então, vamos falar um pouco sobre o Slate, instalá-lo no seu computador e se você quiser saber mais sobre ele, você pode me avisar na caixa de discussão abaixo, certo? Então vamos procurar Slate agora. Então, se eu for comprar/ardósia, já passamos pela documentação e olhamos, a grade. Há dois links aqui. Deixe-me dar uma olhada. Este é o repositório do GitHub. Mas o que eu quero procurar é o site real, para Slate, que é bem aqui. A informação aqui não é a melhor, especialmente com a introdução, então eu realmente recomendo que você siga ao longo desta classe em vez de seguir as instruções aqui, porque eu realmente aprendi como começar com Consulte um vídeo, no canal do YouTube da Shopify. Então, se eu digitar o vídeo do YouTube da Shopify Slate, talvez apareça, sim. Então aqui você pode ver um vídeo da conta do YouTube do parceiro da Shopify, e foi assim que aprendi as etapas de instalação do Slate. Então você também pode fazer referência a isso ou você pode apenas me ouvir nesta lição bem aqui, ok? Então, em primeiro lugar, há realmente um slide neste vídeo, que fala sobre a história do Slate, e ele realmente vem de Timber, então lembre-se que eu mencionei Timber antes, e eles têm um slide em aqui para dizer por que é agora Slate. A estrutura de madeira era muito opinativa e isso é como uma palavra de programação, o que significa que, ele decidiu muitas coisas para os desenvolvedores antecipadamente, então eles despojaram ainda mais e eles criaram, Slate, ok? Então, o Timber agora é Slate, e o ardósia é realmente o ponto de partida que a própria Shopify usa para todos os temas da Shopify que desenvolvem. Também é o ponto de partida para muitos temas que você encontrará na loja de temas e, de fato, trabalhei com temas antes que ele desenvolveu a partir dos desenvolvedores do partido, não necessariamente Shopify, que ainda usam o Slate responsivo grade. É bom conhecer um pouco do Slate mesmo se você quiser sair e se desenvolver de uma maneira diferente, provavelmente você usará o Slate se quiser desenvolver temas personalizados, porque isso é basicamente o que a Shopify recomenda e o que eles usam a si mesmos. Como eu disse, você tem a documentação aqui, e é claro que vai ser uma boa referência, mas em termos de instalação do Slate, eu recomendo que você siga essas etapas, que eu achei mais fácil do que o Diz aqui. Então, o primeiro passo é que você precisa do gerenciador de pacotes Node para aqueles que não sabem, Node é um ambiente de desenvolvimento JavaScript, então procuramos um Node. É tecnicamente um tempo de execução JavaScript, ok? Você não precisa saber o que é isso. Tudo que você precisa saber é que você precisa Node e você precisa Node Package Manager, a fim de começar a usar o Slate ou instalar o Slate. Então baixar e instalar Node, então você quer, baixar e instalar Node Package Manager, que é apenas npm para abreviar, e eu não estou realmente indo para passar e mostrar-lhe como instalar Node e npm porque eu já o tenho no meu computador. Você deve ser capaz de encontrar instruções bastante detalhadas sobre como fazer isso em ambos para seus sites, e muitos artigos, on-line sobre isso também. Então, uma vez que você instalou Node e Npm, você vai procurar o pacote para o Slate CLI então eu vou, clique na primeira opção aqui. Você pode ver este que não é o certo, eu não sei o que é. Eu acho que precisamos, ser um pouco mais específicos e dizer Shopify Slate, e como você pode ver aqui, estamos procurando aquele que tem @Shopify na frente dele, então talvez eu apenas, digite como eu sei, Shopify, Slate, lá nós são, correspondência exata. Não sei por que isso não apareceu na caixa de busca. Aqui você tem o Slate CLI e se você não tem certeza se você está no caminho certo, você precisa estar no que diz @Shopify /slate, ok? Então é isso, este é o que você precisa instalar e você tem instruções de instalação bem aqui. Então você está usando um comando npm para instalar o Shopify Slate e é por isso que você precisa do npm, porque você precisa do npm instalado para instalar este pacote aqui. Agora, como eu mencionei anteriormente, eu já tenho Slate instalado, então eu não preciso fazer isso, mas vamos apenas dizer que você executa esse comando e agora você tem Slate instalado. A próxima coisa que você vai querer fazer é exatamente como fizemos com o kit de temas, navegar para o diretório no qual você deseja iniciar seu novo projeto Slate e, em seguida, executar um comando específico. Então eu vou, abrir meu terminal novamente, e eu vou navegar para onde eu quero que isso seja. Então eu estou indo para icd, code/pessoal/atual, e agora que eu estou em corrente, o comando que eu vou executar vai estar em uma documentação Slate então, ele deve ser um item de menu aqui para comandos que existem, e o que queremos fazer é criar um novo projeto com o Slate. Então, eu realmente não o tenho aqui, e é por isso. Sinto que a documentação não é tão boa. Talvez esteja aqui. Tema de ardósia, não. Está bem. Bem, esse Comando que você está procurando é Slate, tema. Em seguida, o nome do tema que você deseja criar. Vou chamá-lo de Clean Slate, inventei esse nome sozinho, e ele vai baixar o tema da ardósia e configurar tudo para você usar. Isso pode demorar um pouco, então eu vou te pegar no final da instalação. Agora ele terminou de baixar ardósia, e a razão pela qual levou tanto tempo para configurar é porque ele está baixando um monte de dependências também. Se entrarmos em nossa pasta atual agora, eu tenho o tema Skillshare aqui, e agora você pode ver no diretório também eu tenho ficha limpa. Eu vou clicar sobre isso, e abrir isso na minha janela do Finder aqui, mas o que eu vou fazer é também mudar para esse diretório por aqui. Agora que estou nesse diretório, posso executar o Atom Dot porque estou executando o Atom, e posso abrir esse diretório, esse projeto no meu editor de código. Certo, então vamos contratar algumas dessas pastas aqui, e você pode ver que a estrutura de pastas no nível superior é bem diferente. Temos esse arquivo config.ylm que precisamos configurar também, mas como você pode ver, temos uma pasta no topo com módulos de nó. Esta é uma longa lista de dependências e é por isso que levou muito tempo para baixar, eu acho que para mim levou talvez um minuto, o que é bastante tempo. Então você tem esta pasta src, que dentro de você deve reconhecer algumas das pastas. Você tem ativos, configuração, ícones, layout, localidades, scripts, seções. Há alguns outros como estilos, scripts e ícones que foram no tema que você desenvolveu antes, mas isso é basicamente na pasta src, que é basicamente o seu tema onde você realmente faz suas mudanças. A grande diferença com ardósia é que nós realmente não fazer upload disso para o seu site, o que ele faz é, compila tudo isso e vamos criar uma versão diferente deste e, em seguida, que irá para o seu tema. Veremos como isso funciona em apenas um segundo. O que vamos precisar agora, no entanto, é de uma loja real para executar este tema, e infelizmente, já transferimos essa loja de desenvolvimento, então eu vou ter que criar uma nova loja. Não é biggy embora, eu vou usar a mesma senha e eu vou chamar isso, o tema Slate Skillshare, se esse nome estiver disponível. Sim, e vou usar a mesma senha de antes. Coloque em um endereço aleatório e , em seguida, podemos dizer que é para testar um aplicativo ou um tema, clique em Salvar. Isso deve ser muito familiar, já fizemos isso antes, é criar uma loja. Agora precisamos passar por um processo semelhante ao que fizemos antes. Agora, porque vamos criar um novo tema e vamos enviá-lo para a loja, não precisamos de um ID de tema, o que precisamos é o nome da loja, que podemos encontrar aqui, e também a senha da API. Como fizemos anteriormente na aula, precisamos entrar em Aplicativos, Gerenciar Aplicativos Privados, Criar Novo Aplicativo Privado. Desculpe, estou indo um pouco mais rápido desta vez porque já fizemos isso antes. Vou chamar-lhe Slate Connection. Obviamente, ele tem que colocar em um e-mail de desenvolvimento de emergência, e precisamos dar a ele o mesmo acesso de leitura, gravação que fizemos anteriormente para os modelos de tema e ativos de tema. Além disso, somos bons para salvar, Eu entendo, Criar o aplicativo. Agora temos dois dos ingredientes que precisamos realmente configurar ardósia. A razão pela qual eu preciso de uma senha de API para a loja e o nome da loja é porque nós estamos indo para executar um comando semelhante, um relógio kit tema, que é relógio de ardósia. Estamos fazendo isso antes do tempo, mas não precisamos dele ainda, o que precisamos fazer é realmente construir nosso tema e depois enviá-lo para a loja. Vou clicar com o botão direito do mouse aqui, então ainda temos acesso à nossa senha para referência mais tarde, e em nossos comandos aqui, você pode ver o comando para compilação, e ele irá construir uma versão pronta para produção do compilando os arquivos na pasta dist. Isso é coisa que acontece nos bastidores com kit de tema, mas para ardósia, está acontecendo bem na frente de seus olhos e o que eu quero dizer com isso é que você logo verá que temos nossos ativos, nossos estilos, divididos em vários arquivos. Você pode ver estados em branco, formulários, a grade, lembre-se com o nosso tema anterior, tínhamos apenas um arquivo css ou arquivo scss que mantinha tudo. Bem, o ardósia é um pouco mais modular, é um pouco mais complexo, é mais uma maneira escalável de fazer temas shopify porque você está separando o que seria um grande arquivo CSS, que é o que você quer quando você executá-lo em seu site real, mas em termos de desenvolvimento, é melhor ter diferentes pastas e arquivos diferentes, mas o que você quer é tudo o que compilado em CSS JavaScript em um único arquivo, ok? Então você pode ver aqui muitos scripts diferentes e em nossos estilos, muitos estilos diferentes. Então, uma das coisas que vai acontecer quando executarmos a compilação do slate vai compilar tudo isso em como uma folha de estilo ou um arquivo JavaScript, e veremos isso acontecendo uma vez que executamos o comando build, então novamente, é apenas ferramentas de ardósia construir, acho que realmente podemos usar a palavra ardósia sem ferramentas, lá vamos nós, que aconteceu muito rápido. Se entrarmos em nosso editor de código agora você pode ver uma pasta chamada dist, e no dist podemos ver ativos e agora podemos ver theme.scss.liquid e theme.js, que é o que estamos acostumados. Então ele pegou todos os estilos de todas essas folhas de estilo diferentes e os colocou juntos nisso, e pegou todos os nossos roteiros e colocou juntos nisso, certo? Então isso é parte do que ele está fazendo quando está compilando. Então é aqui que queremos desenvolver, mas é aqui que queremos fazer upload para a loja. Então nós podemos realmente compactar este arquivo, torná-lo em um zip e, em seguida, enviá-lo para a loja, mas nós realmente temos um comando dentro do ardósia onde podemos fazer isso automaticamente. Então eu vou chamar Slate Zip, e agora nós temos uma pasta de upload com slate.zip limpo, ok? Como mercadoria isso? Tudo bem, então vamos voltar para a nossa loja e como você vê, é protegido por senha, então podemos querer desativar a senha, mas o que eu vou fazer é clicar, Enviar tema. Vou ter que clicar, escolher arquivo, ir para o meu diretório onde eu tenho esse arquivo zip, Upload pasta, clique em limpar slate.zip ou o que você chamou de seu, fazer upload desse arquivo. Ele vai começar a girar, e então eu vou clicar em “Ações”, “Pré-visualização”, para ver como é o nosso tema. Agora este é um tema de ardósia. É super bare-bones, praticamente nenhum estilo qualquer, mas é um tema totalmente funcional. Então, se eu quisesse colocar alguns produtos na minha loja, eu poderia realmente selecioná-los, adicioná-lo a um carrinho e comprá-los, acredite ou não, nesta loja de aparência terrível, ok? Agora, esse é o ponto completo sobre o Slate e a razão pela qual eu recomendo que você comece a partir de um tema existente, a menos que você queira desenvolver seus próprios temas personalizados que você possa vender na plataforma Shopify, ou você tem talvez um cliente ou precisa que um muito particular, você provavelmente não quer começar a partir deste ponto de partida. Mas, para isso, tens aqui o Slate para usares, está bem? Então agora você tem seu tema Slate em sua loja online, mas assim como fizemos com o Kit de Temas, nós vamos querer ser capazes de editar esse tema através de nosso próprio computador, como nós temos com nossos arquivos de código aqui, ok? Não queremos editá-lo aqui por razões que mencionamos anteriormente, certo? Assim como o Theme Kit, podemos atualizar o arquivo config.yml, então podemos entrar aqui e colocar os detalhes lá, ou podemos executar o comando configure que é bastante semelhante ao nosso Kit de Temas ou configuração de tema. Então, novamente eu não posso ver nenhuma documentação sobre configurar, então vamos apenas fazê-lo de outra maneira. Vamos apenas colocá-lo em nosso arquivo de configuração real. Então vamos descobrir o nome da nossa loja, que está bem aqui. Escolha isso, coloque isso aqui. ID do tema, na verdade vamos fazer a senha a seguir. Coloque a senha lá, e depois lembre-se de como encontramos o ID do tema. Basta entrar em nosso personalizador e, em seguida, em nosso personalizador, podemos pegá-lo fora do URL. Está bem. Então agora temos o nosso projeto realmente apontando para este tema que nós carregamos. Então agora eles estão essencialmente configurados para se conectarem uns aos outros, certo? E como você pode ver, nós ainda podemos personalizar até mesmo este tema bare-bones usando nossa seção de personalização de temas aqui, ok? Em configurações de tema, deve ser bastante nua, o que é, porque não há muitas regras CSS configuradas, mas isso é para nós decidir o que queremos colocar nessas configurações de tema, ok? Agora, se quisermos, podemos executar implantação de ardósia, e quaisquer alterações que fazemos localmente para o nosso tema, porque nós configuramos com config.yml para apontar para este tema específico nesta loja particular vai carregar todos e implantá-los em nosso site. Mas como acabamos de ver, tudo o que fizemos foi zip o tema original e já fizemos upload, então agora ambas as versões do nosso tema, a que temos no nosso próprio computador e a da loja online real devem ser Exatamente o mesmo. Então, o que podemos fazer para detectar alterações locais é executar “Slate Watch”. Então eu vou fazer isso agora mesmo, “Slate Watch”, e se o nosso arquivo config.yml estiver configurado corretamente, isso deve começar a observar as alterações. Agora a diferença entre Slate e Theme Kit é que ele realmente cria um endereço local para nós para olhar para o tema também. E, na verdade, há algumas etapas aqui na documentação para criar um certificado SSL autoassinado, mas isso pode ser meio complicado e irritante de fazer, então uma maneira de contornar esse erro de privacidade é apenas dizer que você aceitá-lo e você vai prosseguir para o host local. Tudo bem. Então vamos fechar agora e podemos entrar usando a senha. Então nós realmente não desativamos a proteção por senha, então, em vez de desativá-la, eu vou apenas descobrir qual é a senha em nossas preferências. Ele lhe dá uma senha realmente básica por padrão. Vou colocar isso aqui para acessar nosso tema, e aqui está. Você tem o tema, assim como você faria, entrando em seus temas aqui, e clicando em “Preview”, nós temos a mesma coisa, mas em um endereço local, que é meio enganoso porque ainda estamos rodando através a plataforma Shopify, que não é realmente local, mas cria esse pequeno ambiente aqui para nós, então pelo menos sabemos que estamos trabalhando com o Slate no tema de desenvolvimento. Então, apenas para concluir seu trabalho e que ele está realmente olhando para mudanças, vamos realmente editar algo. Então lembre-se que vamos para o diretório SRC para editar nosso tema, e vamos fazer uma mudança básica. Então, estou fazendo qualquer coisa para demonstrar. Vamos inspecionar este elemento e ver o que é, é o logotipo do site. Então vamos apenas remover isso. Isso provavelmente vai estar na seção de cabeçalho, então eu vou entrar aqui, procurar por um logotipo do site, aqui está ele, e vamos apenas excluir este todo, uma tag. Acho que vou apertar “Salvar” nisso. Vamos dar uma olhada no que está acontecendo em nosso terminal. Você pode ver aqui, há algumas coisas acontecendo, recarregando navegadores, mudança de arquivo é bem-sucedida, sincronizar para armazenar e agora se atualizarmos isso, devemos ver que o logotipo do site, que era apenas texto, está agora desaparecido, e se nós trazê-lo de volta, pressione “Salvar”, ele deve registrar que as alterações de arquivo sincronizadas com sucesso para armazenar. Desculpe, isso é um tornado de língua. E atualize a página. Está de volta outra vez, está bem? Então eu não vou passar por como você está indo para configurar este tema para realmente torná-lo apresentável porque isso seria um curso em si mesmo, mas isso deve fornecer-lhe um bom ponto de partida para talvez tomar o seu Shopify conhecimento para o próximo nível. Então, aprendendo como realmente personalizar isso e transformar isso em um tema totalmente funcional. Enquanto ele está funcionando totalmente, mas quero dizer, é apenas uma experiência terrível do usuário. Só parece terrível. Se você pudesse transformar isso em uma loja muito legal, então você realmente conhecerá a plataforma da Shopify. E talvez seja algo que queiras fazer. Talvez você queira criar uma loja personalizada inteira. Cabe a você. É por isso que eu coloquei nesta pequena seção sobre Slate no final. Se você tiver alguma dúvida, deixe-as na caixa de discussão abaixo. Muito obrigado por vigiar os rapazes. Vejo-te na conclusão. 19. Conclusão: Isso praticamente conclui esta aula sobre o desenvolvimento do tema da Shopify. Para o seu projeto de classe, quero que você crie sua própria loja e compartilhe com o resto dos alunos na seção de projetos da classe abaixo. Claro, não se preocupe se sua loja é apenas para praticar, pois estamos todos aqui para aprender habilidades. Apenas certifique-se de compartilhar a senha ou remover totalmente a proteção por senha, para que outros alunos possam visualizá-la. Em termos de aprendizado adicional, há muitas informações sobre os vários aspectos dos temas líquidos e da Shopify no site oficial da Shopify. Além disso, você pode acessar a Academia de Parceiros por meio sua conta de parceiro clicando no link Educação. Dito isto, se você precisar de alguma dica ou orientação, certifique-se de deixar um comentário na caixa de discussão, e eu farei o meu melhor para apontar a direção certa. Enfim, pessoal, obrigado por assistir e espero vê-los novamente em alguns dos meus outros cursos.