Conceitos básicos sobre Shopify para desenvolvedores da Web: da configuração da loja a temas personalizados

1. Introdução: Olá, sou Kurt Elster, dono de agência na Ethercycle, e especialista em tempo integral na Shopify. últimos dois anos, tudo o que fiz foi trabalhar, comer, dormir, respirar, falar sobre, escrever e ganhar a vida em tempo integral trabalhando na plataforma Shopify como especialista da Shopify. Você é provavelmente, ou você é um Web designer ou desenvolvedor Web, você é um freelancer nesse espaço digital e talvez você tenha habilidades de desenvolvimento front-end. HTML, CSS, talvez JavaScript, mas você não precisa necessariamente dele. Se você tem essas duas habilidades , a única coisa que o impede de ter uma carreira de sucesso na Shopify é conhecer a plataforma. É isso que vamos tentar passar com este curso. Vou ajudá-lo a saltar e chegar ao caminho mais rápido para os lucros diários no programa de especialistas da Shopify. Ao longo do caminho, vou apimentar você com algumas práticas recomendadas que aprendi por configurar um ótimo armazenamento de conversão que o ajudará. Assim que tivermos isso para baixo, vamos mergulhar em temas porque, como especialista da Shopify, você pode ser designer, desenvolvedor, fotógrafo, qualquer coisa. Mas o pedido mais comum que os proprietários da loja têm é, posso mudar x sobre o meu tema? Então, se você puder aprender isso, é uma ótima fonte de receita. Então, é por aí que vamos começar. Para fazer isso, aprenderemos os ossos do tema ou o que entra em um tema da Shopify, essas peças. Então, como resultado, seremos capazes de fazer nossas próprias modificações no tema. Essa é a nossa tarefa final, esse é o trampolim para depois projetar e desenvolver seus próprios temas. 2. Primeiros passos no comércio eletrônico: A Shopify começou sua vida como apenas um carrinho online. Ele se transformou rapidamente em, não apenas uma plataforma completa para e-commerce, essa solução de ponta a ponta, mas também em uma comunidade. Ter essa comunidade tendo esse marketing de crescimento é o que realmente impulsionou muito o crescimento da Shopify como uma ótima plataforma. Mas também faz parte de uma tendência maior. Então, há algumas coisas que impulsionaram o crescimento explosivo do comércio eletrônico em geral. Eu acho que em primeiro lugar é móvel. Se olharmos para estatísticas para nossas lojas online, eu ficaria surpreso se alguma loja ainda existe que tenha menos de pelo menos 50% de seu tráfego é móvel, e especialmente com lojas que têm um público mais jovem, é vai inclinar ainda mais para celular. Isso é porque temos esses dispositivos conosco o tempo todo. Estes estão sempre ligados, sempre ligados, sempre com estes dispositivos, telemóveis, tablets e até mesmo smartwatches. Se pensar bem, as últimas compras que fiz foram no meu iPhone deitado na cama. Mas qual é a coisa que fazemos mais com nossos smartphones? Deve ser checado no Facebook. É um hábito terrível e provavelmente todos nós fazemos isso. Quando você verifica o Facebook, é aí que muitas marcas chegam até nós. Mas uma marca que me diz para comprar algo nunca terá um décimo do mesmo valor que um amigo. Isso é o que é maravilhoso nas redes sociais. Se alguém compra um produto, ele adora, se orgulha dele, e compartilha no Facebook, eu tenho muito mais probabilidade de clicar em um site móvel e comprá-lo quando um amigo faz isso. Mídias sociais, combinadas com dispositivos móveis, tornou-se incrível motor de descoberta de produtos sociais. Na Shopify, todos os temas funcionam em dispositivos móveis. Eles são totalmente responsivos e eles também se integram incrivelmente bem com Facebook, Twitter, Pinterest. Eles têm essas integrações sociais embutidas neles. Então, eu acho que agora mais do que nunca, é um momento incrivelmente emocionante para se envolver no espaço de comércio eletrônico. Tire um momento e pergunte a si mesmo, “Por que está aqui?” Você pode dizer que é para aprender a Shopify, para ser um designer da Shopify. Mas acho que está aqui porque isso é um meio para chegar a um fim. Acho que está aqui para ganhar mais dinheiro, e isso é ótimo. Shopify, é uma ótima maneira de ganhar uma renda como designer. Há várias maneiras de fazermos isso. A primeira é a maneira direta muito literal, e é vender designs na Shopify. Você pode criar sua própria loja da Shopify e vender designs de camisetas. Tem havido pessoas muito bem sucedidas que fizeram isso. ugmonk.com, por exemplo, é um bom exemplo disso. Ou você poderia vender ebooks. Um Livro Apart é um grande exemplo disso. Depois de ter essa experiência fazendo isso, talvez você possa mudar para vender um tema da Shopify. Se você criar um tema da Shopify, você poderia muito realisticamente obter cinco mil por mês de renda impulsiva com essas vendas de temas. Esses temas de vendas, naturalmente, essas pessoas poderiam chegar a você e se tornar clientes quando eles pedem modificações de temas ou personalizações ou suporte em geral. A razão pela qual um é muito lucrativo é porque também é difícil. A Shopify é muito rigorosa sobre a qualidade dos temas. Então você não pode simplesmente bater em alguma coisa. Tem que ser um tema geralmente bom, e isso é uma coisa boa. Isso significa que haverá menos temas lá para você competir, e se você tiver que escolher um tema para um cliente, um tema fora de prateleira, você sempre pode ter certeza de que ele vai ser de grande qualidade. Há o terceiro caminho, o modelo tradicional e o que fazemos, que é apenas o trabalho do cliente. No trabalho do cliente, você cobra o que quiser. Você constrói por hora ou preço fixo, corrigir escopo. Mas então, a Shopify nos dá uma maneira de sobrecarregar essa renda. Se você é o único que migra o cliente para a Shopify e gira a loja para ele, ele lhe dará uma participação de 20% de afiliados de tudo o que o cliente paga à Shopify. Então, o que quer que paguem, no final do mês você recebe uma participação de 20% na receita, PayPal direto para você. Isso continua para sempre. Então, você configura uma loja uma vez, constrói um portfólio de lojas da Shopify, clientes da Shopify e rapidamente descobre que está ganhando centenas ou mesmo milhares de dólares por mês com essa renda passiva da Shopify além da sua participação na receita. Então, ele nos deu todos os tipos de maneiras para os designers escolherem a coisa com a qual nos sentimos confortáveis e ganharmos dinheiro fazendo o que amamos, que é um ótimo design. Já lhe disse por que você deve abraçar a Shopify como designer. Mas se você é um designer, você pode estar cético em relação à Shopify como plataforma de hospedagem, porque você quer mais liberdade. Eu sempre preferia ter meu próprio servidor, um FTP, carregar todos os meus arquivos, fazer o que eu quiser. Então, preciso que saibas de uma coisa. Não há limitações na Shopify e o que você pode fazer com HTML, CSS, JavaScript. Divertido e sábio, ele realmente vai ser tão flexível como se você tivesse seu próprio servidor, mas sem algumas das dores de cabeça. Então, quando você está mudando para a Shopify como uma plataforma de hospedagem, você não está mais se preocupando em girar servidores. Você não precisa configurar um servidor, se preocupar com o servidor ser hackeado. Todas essas coisas vão embora. Você não precisa mais desempenhar esse papel de TI porque a Shopify cuidará disso para você. A outra coisa que assusta os designers sobre a Shopify é que eles podem ter que aprender uma nova linguagem de programação, ou talvez você já conheça uma linguagem de programação e não queira aprender outra. Isso é o que é ótimo sobre a Shopify. Usa Liquid. Líquido é incrivelmente fácil de usar. É um pouco menos poderoso do que uma linguagem de programação tradicional, mas significativamente mais fácil. Então, está escrito em linguagem natural, é muito claro e conciso e o melhor de tudo, é realmente bem documentado. Então, qualquer pergunta que você tenha, você pode rapidamente pesquisar. Você encontrará a documentação da Shopify nela, é isso que eu faço. Vamos percorrer alguns desses recursos. Mas se você é astuto, você pode perceber, oh não! Estou desistindo dessa receita de hospedagem na web. O que você está desistindo é da dor de cabeça de hospedagem na web e você está ganhando a renda de ações de afiliados. Então, como mencionei antes, se gerarmos nossa conta de parceiro da Shopify, Shopify nos pagará 20% de participação de afiliados de qualquer receita de clientes migrados para a plataforma da Shopify. É o que vamos fazer a seguir. Em alguns minutos, vamos começar nossa própria conta de parceiro da Shopify e vou orientá-lo sobre isso. Para fazer isso, vou compartilhar minha tela com vocês no próximo vídeo. 3. Introdução à sua conta de parceiros: Então, o primeiro passo quando você quer se tornar um parceiro da Shopify: o primeiro passo como designer se envolver com a Shopify, desenvolvedor se envolve com a Shopify. Seja lá o que estiver fazendo, se estiver se envolvendo com a Shopify, você quer começar com o Programa de parceiros da Shopify. O Google Shopify Partner Program ou é shopify.com/partners, não poderia ser mais simples. Quando você entra no programa de parceiros, isso não é uma coisa verificada, basta se inscrever, não há nenhum processo de qualificação real aqui. Isso virá mais tarde se você optar por fazer o Programa de Especialistas. Isto é um trampolim para isso. Então, aqui, nós temos isso... isso é legal, o fundo do vídeo, quão legal é isso? Mas aqui, eles têm essa manchete. Ajudamos freelancers e agências a crescer. Ei, somos nós. Então, estamos no lugar certo. Além da participação de receita, o acesso para ser capaz de girar lojas de desenvolvimento facilmente e ter todas essas coisas em um só lugar, eles também dar-lhe alguns recursos gratuitos agradáveis para marketing. Eles vão te dar logotipos que você pode usar, materiais de marketing. Há um ótimo boletim que eles enviam. Eu pego material disso o tempo todo. Muitas vezes, eu vou usar isso como mídia social FOTA, me economiza algum tempo. Sua documentação mora aqui. Eles vão lhe dar webinars, workshops que acontecem; e eles entraram em contato, nós organizamos alguns deles. É divertido. E há um fórum privado que a Shopify executa, e há outros ótimos não oficiais que você descobrirá ao longo do caminho. Então, e então, é claro, ganhamos renda mensal contínua, que é o que queremos. Você recebe essa participação de 20% na receita, o que é legal de qualquer cliente que você traga, apenas para fazer as pessoas se inscreverem. Isso é fantástico, e é para sempre. E, como discutimos antes, você também pode vender temas, onde eles lhe darão 70%; e, em seguida, há também a App Store. Uma receita média de aplicativos é de 2000 por mês. E dependendo de onde está o seu conjunto de habilidades, se você é um designer, você provavelmente quer manter os temas e se você é um desenvolvedor, você provavelmente ficará mais confortável com aplicativos. Seja lá o que for confortável e talvez seja um unicórnio, você poderia fazer as duas coisas. Nisto, há muitas pessoas. É ótimo. Então, tudo bem. Vamos voltar para cima. Aqui estamos nós. Basta clicar em participar agora para participar do programa de parceiros e abriremos nossa conta gratuita de parceiro. Muito simples. Temos o nome da nossa empresa. Aqui está seu link de indicação e seu link de indicação é ótimo se você falar sobre a Shopify em qualquer lugar, incluir seu link de indicação e se você tiver sorte que alguém se inscreva. Isso será adicionado à sua conta de parceiro e você receberá essa participação de 20% de receita novamente. Poderíamos expressar nossas áreas de interesse. Temos informações de login, informações básicas de contato e coisas importantes, nossa conta do PayPal para que eles pudessem nos pagar. Nós concordamos com isso, rapidamente nos tornamos um parceiro da Shopify. Não poderia ser mais simples. Então, vamos olhar para um. Então, aqui está minha loja ou meu painel de parceiros da Shopify. Então, podemos ver - eu sei - nos serviços ao cliente, eu não tenho nenhum aplicativo lá fora, eu não tenho nenhum tema. Eu tenho lojas afiliadas. Então, você pode ver que estou recebendo esses pagamentos regulares de centenas de dólares. Há meses em que... e você tem por cento como, eu acredito que você tem porcentagens da receita total. Então, há um mês em que vou receber um pagamento de 500 dólares. Nossos próximos pagamentos, $362. É ótimo, realmente porque é passivo. Não tenho de fazer nada para conseguir esta renda, só aparece. Então, se você clicar em afiliados, você pode ver seu histórico de afiliados, mostrará quais lojas você tem, onde eles estão, o que está acontecendo com eles. É legal, e você pode procurá-la para encontrar uma loja específica, ver qual plano eles estão, saber o que aconteceu com eles. É legal. Então, o importante, lojas de desenvolvimento. Então, lojas de desenvolvimento são as lojas gratuitas que você pode criar para um cliente ou você mesmo para testar coisas. Descobri que essa é a maneira mais fácil de integrar clientes na Shopify. Eu não envio o link de referência para eles e espero que eles se inscrevam para ele, eu vou um passo adiante, eu crio uma nova loja de desenvolvimento para eles e digo, 'Ei, eu fiz uma conta gratuita para você. Aqui está sua senha de login.” E eles podem mudá-lo, ou eu adicioná-los como um membro da equipe e, em seguida, torná-los um proprietário de loja, mas nós vamos cobrir isso também. Então, é claro, se você tiver algum aplicativo na App Store ou temas, você pode ter acesso a eles aqui. Aqui, temos alguns aplicativos privados que estavam brincando. Temas, você poderia criar um tema, colocá-lo aqui. Configurações, isso basicamente apenas as coisas que você configurou em sua coisa de parceiro. Você poderia mudá-lo aqui. E então, o que temos aqui? Recursos de parceiros. Recursos para parceiros é bom. Tem documentação, tutoriais (aquele centro de aprendizagem), a folha de fraude líquida. Definitivamente, se você está fazendo alguma programação, eu amo essa coisa. Tenho isto impresso. Eu mantenho na minha mesa, muito útil. Boletim informativo, e para clientes. Se você está começando, você quer fazer um pouco de marketing, tem algumas coisas ótimas aqui, como o kit de entrega mercante. Eu amo isso. Isso realmente faz você parecer profissional, fantasma mais longe. É um PDF, então temos o guia de referência rápida da Shopify. É PDF. E então, aqui, você pode ir em frente e editá-lo. Então, poderíamos dizer: “Sinceramente, Kurt.” E assim é personalizado, parece que é de você, e então você tem que passar e colocar lá URLs. Está bem. Vamos voltar para os parceiros da Shopify. Assim que criarmos nossa conta de parceiro da Shopify e analisarmos todos os nossos recursos de marketing, a primeira coisa que queremos fazer e o que nos preocupa, para os fins do curso Skillshare, é configurar uma loja. Criando uma nova loja de desenvolvimento, trabalhando com um tema, editando um tema. Então, você gostaria de criar uma loja de desenvolvimento. Muito simples. Vamos chamá-lo de nossa demonstração do Skillshare. É uma loja online. Você também pode fazer loja de varejo on-line, que por padrão, ele vai ter o sistema de ponto de venda habilitado, bem como a loja on-line ou você pode fazer apenas ponto de venda puro. Neste caso, vamos ficar apenas com a loja online, mas se você pode dominar a loja online, o complemento do ponto de venda é muito simples, muito auto-explicativo. Então, vamos adicionar nossa senha aqui, e eu sinto falta de digitá-la, para criar uma loja de desenvolvimento, trabalhando; e boom, está feito. Isso já está girado, não poderia ser mais simples. Então, compare isso para tentar criar um ambiente de produção de armazenamento de teste, ambiente de desenvolvimento, servidor de teste, esse tipo de coisa. Isso é uma grande dor. Isto é muito mais fácil. E agora que fizemos isso, vamos às nossas lojas de desenvolvimento, aqui está e clicamos. Haha. Digite as coisas, set lembrar de mim, logar e boom. Então, se você passar por isso, foi como 90 segundos? Você pode ir do nada para um parceiro da Shopify com uma loja de demonstração em execução. Muito simples, ou uma loja de demonstração para você ou para um cliente. É útil, eu gosto. Então, e nós vamos dizer não, pare com isso. Lá vamos nós. 4. Passo a passo do desenvolvimento: Então, nós temos uma loja nova, nada foi montado, e vai começar a nos guiar por ela. Ele está nos pedindo para configurar nossos pagamentos, nossas configurações de envio, impostos, adicionar produtos, personalizar a loja, esse tipo de coisa. Mas uma vez que essas coisas desaparecem, eles colocam um monte de conteúdo útil aqui. Então, do lado da visão, poderíamos ver como nossa loja está indo, ver uma atividade recente sobre qual usuário fez o que, e então, eles têm algumas coisas sugeridas aqui, como conteúdo útil. Como, aqui estão alguns ótimos exemplos de e-mails abandonados de carrinho, ou aqui está uma chance de exibir seus produtos. Então, a primeira coisa que queremos são ordens. Ordens significa que estamos sendo pagos. Você poderia criar um pedido manualmente se você pegou um por telefone, que é um novo recurso, é bom. Seu primeiro pedido aparecerá aqui. Ele também nos mostrará checkouts abandonados que é legal. Mas vamos dar uma olhada em uma loja de exemplo. Então, nós temos, este é um cliente meu, bandas Everest, relojoaria Everest. Então, aqui eu procurei meu nome. Você pode ver que uma vez que você tem um monte de pedidos, você pode classificá-los por ordens não pagas, não cumpridas, abertas, todas as ordens. Procurei por mim mesmo aqui, e este foi um pedido de teste. Vimos que está marcado, reembolsado e não cumprido, o que faz sentido. Então, se abrirmos, aqui temos aqui e ele vai nos mostrar para que serve o pedido, uma visão geral do cliente, meu endereço, esse é o endereço do meu escritório, deixe-me em paz. Em seguida, você pode adicionar uma nota ao cliente, se o cliente deixou uma nota no cartão, ela aparecerá lá, e então você pode marcá-la. Então, se você tem um monte de pedidos e quer maneiras fáceis de pesquisá-los, você pode marcá-los com coisas. O exemplo que lhe dei é por atacado, o que é muito útil para poder diferenciar as suas encomendas de atacado das suas encomendas regulares. Vamos voltar para a nossa loja de demonstração. Em seguida, temos produtos, e produtos são mais do que produtos. Temos que adicionar nossos produtos aqui, podemos importá-los, adicioná-los, exportá-los rapidamente se você usar a Shopify para acompanhar o inventário, que é uma opção que entraremos, aqui, você pode ver todo o seu inventário aqui. E o mais importante, temos coleções. Coleções é o que a Shopify chama de categorias e é uma das distinções entre a Shopify e outras plataformas de comércio eletrônico. Todos os outros chamam de categorias, e eles permitem que você fique um pouco louco em categorias de ninho. Uma coisa que surpreende as pessoas, é que na Shopify não há categorias ou coleções aninhadas. Você apenas cria coleções e, em seguida, existem várias maneiras de organizar sua navegação. Algumas pessoas inicialmente sentem que isso é uma limitação, eu prometo que não é, ele vai fazer para melhores histórias em geral, mas algo para ter em mente. Então, vamos olhar para um exemplo na loja ao vivo, cabeça em produtos e com certeza, ele nos mostra todos os nossos produtos. Aqui não rastreamos o inventário, mas se o fizesses, mostrar-te-ia. Nós temos tipo de fornecedor, mantém as coisas muito organizadas, muito agradáveis, e então podemos exportar, importar produtos, e para atualizá-los, podemos filtrá-los. É ótimo. Vamos para os clientes. Os clientes são ótimos, você pode importar seus clientes antigos se você estiver mudando de outra coisa, ou quando os clientes comprarem, eles aparecerão aqui, ou você pode adicionar um cliente. Então, o que há de bom nisso, é que você pode filtrar por, quando as pessoas verificarem, ele perguntará : “Ei, você quer aceitar marketing de nós?” Eu recomendo que, por padrão, “sim, eles querem aceitar marketing de você”, e então você pode exportar todos os que aceitam marketing em uma planilha. Faça o que quiser com ele, faça o upload para o Facebook, adicione-o ao Mail Chimp usando uma integração de Mail Chimp, todos os tipos de coisas divertidas que você poderia fazer aqui. Mas estamos começando a ver, é uma solução completa e feita. É tudo o que você precisa para vender online. Então temos relatórios. Os relatórios são um recurso. Não está no plano básico, não está no plano mais barato, ele aparece no próximo plano superior, e dependendo do cliente, pode ser útil. Se você vende um produto ou não vende muito, talvez você não precise de relatórios. Mas ao longo do tempo, à medida que as pessoas crescem, descobrimos que muitas vezes querem e precisam desses relatórios. Meu relatório favorito, vendas brutas por título de produto. Posso usá-lo para ver rapidamente qual é o produto mais lucrativo? Qual é o produto mais vendido? Então, isso vai informar publicidade, vendas, esse tipo de coisa. Você também pode usá-lo para obter relatório de seus impostos sobre vendas. Se você está vendendo on-line, bens físicos você tem um imposto sobre vendas arquivo, isso torna muito mais fácil. Então, temos descontos. O motor de desconto. Se você está vendendo on-line, em algum momento você vai acabar oferecendo vendas. Então, vamos tentar adicionar um código de desconto. Nós podemos inventar um, SHOPIFYRLES, ou eu meio que gosto disso para que eles pareçam únicos, gerar um, e você pode apenas fazer códigos de desconto aleatórios o dia todo. Ele vai deixar você limitá-los, todos os tipos de configurações divertidas. É bastante poderoso e há mais de um, você pode fazer desconto um valor fixo, desconto uma porcentagem, oferecer frete grátis. E então nós também podemos fazer isso para tudo, pedidos acima de uma certa quantidade. Se você diz, gastar US $50, obter frete grátis, fazê-lo em uma coleção de mercadorias ou um produto específico, ou você pode fazê-lo para um cliente. Você poderia dizer, hey, nós o identificamos como um cliente VIP, então estamos lhe dando um desconto especial, ou como uma forma de oferecer atacado, é uma boa maneira de fazê-lo. Temos a nossa loja online. Loja online é onde vivem coisas específicas para a sua loja online. Isso confunde um pouco as pessoas, é porque há mais de um canal de vendas acontecendo. Considero que é uma indicação clara de que poderão existir novos canais de venda no futuro. Neste momento, os dois principais são Loja Online e Ponto de Venda. É aí que as coisas realmente específicas do site vão viver. Aqui, temos nossa visão geral. Em uma loja ao vivo, a visão geral teria taxa de conversão de visitantes, esses números divertidos. Mas aqui, podemos fazer com nossos posts ao vivo, poderíamos fazer vários blogs, vamos falar sobre isso, páginas, e aqui é realmente onde fica claro que este é um sistema de gerenciamento de conteúdo completo. Podemos adicionar páginas, e se abrirmos, podemos ver este editor wysiwyg, temos opções de SEO aqui, poderíamos definir uma data específica de publicação que é legal, você pode escrever um pedaço de conteúdo Agora, publique-o no futuro, coloque as coisas no piloto automático, o que é muito bom. E então podemos até ter modelos de página diferentes, e vamos mergulhar nisso mais tarde também. Navegação. Isso é ótimo, navegação. Navegação na Shopify se refere a, vamos abrir uma loja de exemplo. Nós temos esses caras. Aqui está nossa lista de links principal, é isso, e então esses drop-down também são listas de links, e então, se vamos para o rodapé, esta é uma lista de links. É apenas uma maneira muito fácil de pensar sobre navegação. Aqui, você pode editar essa lista de links, aqui está nossa lista de links de rodapé, adicionar outro, e olhar para isso. Como nós escolhemos o produto de coleção, torna muito fácil. Vamos dizer, eu quero enviá-lo para o meu blog, eo blog de notícias vai chamá-lo blog, salvar. Atualizar a navegação nunca foi tão fácil. Então temos domínios. Então, esta é uma das poucas limitações na loja de desenvolvimento. Você não pode adicionar um domínio à loja até que esteja em um plano pago, você precisa atualizá-lo. E está tudo bem. Não é uma limitação terrível, realmente não pára nenhum tipo de teste. Mas vamos olhar para ele com bandas Everest rapidamente, como seria em uma loja ao vivo. Você pode comprar um novo domínio através da Shopify, que o torna extraordinariamente fácil e tem um preço certo, US$13 por ano, muito bom, ou, você pode adicionar um nome de domínio que você já possui, caso em que isso é tão simples quanto, você clica, adicionar um domínio existente, digite-o aqui. Vou fazer isso em uma loja ao vivo. Então são apenas dois registros que você tem que mudar em seu DNS, um para nome A, um para nome C, não é grande coisa. Então poderíamos escolher nosso nome de domínio principal se quisermos fazer redirecionamentos, ter tudo para lá, podemos ativar ou desativar isso, e então ele também verifica esse cara de status. Diz: “Ei, você configurou o DNS certo?” e isso é bom e conveniente, ele configura isso aqui. O que mais temos? Então, eu disse que eles fazem vários canais de vendas, e com certeza, olha para isso, nós temos Pinterest, Facebook aqui, aqui também é onde nosso ponto de venda apareceria. Ele só quebra tudo. É conveniente e agradável. Seção de aplicativos. Boom, ele nos mostra todos os aplicativos instalados. Podemos ver que esta loja em particular tem vários aplicativos instalados. Muito comum para lojas fazer aplicativos, e eles podem ser coisas simples. Klaviyo, tudo isso faz é mover clientes que aceitam marketing para uma lista de e-mail em Klaviyo. É ótimo, é simples, economiza uma tonelada de tempo, ou algo é chique, Shipwire, que faz atendimento de pedidos, gerenciamento de pedidos para eles. Então, é claro, há o bad boy, Settings. Há toneladas de configurações diferentes que você pode jogar com ele, configurar a loja como quiser. Não vou passar por todos eles. Chegaremos a eles mais tarde. Mas eles são dispostos de uma maneira simples. Eles fazem sentido, e nós temos todos os seus detalhes de contato aqui. Vamos mergulhar nesse cara. Sim, vamos fechar a sua demonstração. Boom. Pagamentos, onde escolhemos nossas opções de pagamento, nossas configurações de check-out que são legais, talvez você queira oferecer contas em sua loja, talvez você não. Você pode escolher o quão rigoroso você é quando as pessoas estão saindo. O plano atualizado ainda abandonou e-mails de notificação de check-out embutidos, o que é muito bom. Aqui, podemos escolher se as pessoas concordam com o email marketing. Eu gosto de configurá-lo por padrão, mas a opção não-maléfica é configurá-lo para não concordar por padrão. Se você está fazendo o rastreamento da taxa de conversão na página de agradecimento, este pequeno trecho nos dá um lugar para deixar isso. É ótimo. Então aqui para nossa página de checkout, nós temos um reembolso termos de privacidade de políticas de serviço, e se você não quiser pensar bem sobre eles, olhe para isso, eles geram amostras. No entanto, eu não sou um advogado e estes não são conselhos legais e, ao usá-los, você concorda com uma isenção de responsabilidade da Shopify. Mas eles são um grande começo. Definitivamente lê-las, reescrevê-las, considere tê-las analisadas. Mas ajuda muito ter isso lá. Envio. Poderíamos escolher nossas configurações de envio aqui, o que é fenomenal, e até mesmo fazer transporte de transportadora em tempo real. Eu adoro isso. Então vamos mergulhar na Loja Online. Loja Online, acabamos de deixar cair o nosso Google Analytics aqui. Como temos uma loja de demonstração, podemos protegê-la por senha; título da página inicial, meta descrição da página inicial, todos os tipos de coisas ótimas aqui. Tudo bem. Essa é uma boa demonstração do nosso back-end, da nossa loja de administração, das diferentes coisas lá dentro. Eu passei por ele um pouco rápido porque nós vamos mergulhar nele mais em sessões posteriores, mas agora, o primeiro passo da nossa loja sempre deve ser, escolher um tema. Temos nossa loja online, temas. Por padrão, eles instalaram um aplicativo chamado Launchpad-Star. É gratuito, é perfeitamente bom, no entanto, há mais de 100 temas gratuitos e premium se visitarmos a loja temática, e um deles pode ser seu. Você pode criar temas personalizados, você pode escolher um desses temas e modificá-lo. Você poderia usar um tema gratuito, tema premium, o que você quer fazer, você tem um monte de opções. E não há uma má escolha aqui para temas. Eles são todos muito bons apenas rolando através disso. Você pode ver que eles parecem muito bonitos, e é aqui que os clientes precisam de sua ajuda. Eles podem ficar sobrecarregados, eles não sabem o que é um bom tema, o que eu escolho, o que se encaixa na minha marca e, em seguida, como configurá-lo? Há muitas opções. As configurações do tema podem ficar muito confusas. Isso é importante escolher. Um tema popular muito comum, é paralaxe, então vamos procurar isso. Aqui estão os resultados para paralaxe, e tudo vem com, isso confunde as pessoas, ele vem com vários estilos. Parallax vem em quatro estilos. Não é óbvio à primeira vista, se você comprar um dos estilos, você realmente recebe todos os quatro, então você tem alguma variedade lá dentro. Os temas são muito flexíveis em termos de cores, fontes, layout, conteúdo. Eles não vão olhar cortador de biscoitos. Como especialista da Shopify, posso ver e reconhecer temas com bastante frequência, mas na maioria das vezes, quando você coloca sua própria marca nele, eles não ficarão idênticos. Próximo passo será, escolher um tema. 5. Produtos e variantes: Ok. Vamos começar adicionando um produto e aprendendo algumas coisas técnicas que nos ajudarão a entender a Shopify. Então, vamos adicionar um produto. Estou em meus produtos de painel de administração de demonstração, adicionar um produto e ele nos dá este incrível editor WYSIWYG. Então eu só vou digitar camiseta de manga curta e minha descrição é, é super macia. Neste momento eu não vou fazer upload de uma imagem só para nos poupar algum incômodo. Vamos definir um preço, 19,90. É um produto físico, então cobraremos impostos sobre ele. Digamos que imprimimos isso sob demanda para não rastrearmos o inventário. Mas se quiséssemos, poderíamos e poderíamos dizer que temos 10 e até mesmo escolher se queremos que as pessoas possam voltar a encomendá-las ou não. Mas, por enquanto, vamos dizer que não vamos rastrear o inventário. Se você quiser, você pode adicionar peso, se você quiser fazer o envio com base no peso. É um produto físico, por isso requer transporte e podemos fazer camisetas tipo. Isso vai nos ajudar a resolver isso mais tarde e nosso fornecedor vai ser Nike. Que sorte temos por ter a Nike. Aqui em baixo temos etiquetas. As tags podem ser exibidas para o cliente, mas na maioria das vezes você as usa para classificar coleções e vamos falar sobre isso um pouco. Então, vamos dizer verão de algodão vintage. Lá vamos nós. Salvar produto. Poderíamos adicionar outro produto ou visualizá-lo em nossa loja online. Vamos vê-lo em nossa loja online e se rolarmos para baixo, temos nosso tema padrão, e com certeza camiseta manga curta suficiente, 20 dólares, adicionar ao carrinho. É super macio. Assim como magia, este material que eu entrei no CMS como um produto apareceu aqui. A maioria das pessoas vai ficar feliz com isso. Mas vamos dar uma olhada rápida em como essa magia aconteceu. Então nós vamos mergulhar no tema e nós vamos escolher - nós estamos indo direto técnico. Na nossa página de temas, temos duas opções: personalizá-lo, visualizá-lo ou editar HTML/CSS. É o que estamos fazendo. Nós estamos indo em grande agora. Vamos entrar em uma nota rápida sobre temas. Tema. Líquido. Este é o seu arquivo mestre pensar neles como em vez de fazer - se você já usou inclui com PHP, em vez de fazer como um rodapé de cabeçalho include, você faz tudo em theme.liquid e, em seguida, solte seu conteúdo nele. Vamos ver se conseguimos descobrir onde isso acontece. Bem aqui. Comece o conteúdo, e há nosso conteúdo de comando líquido para layout. Vamos falar sobre o que está acontecendo aqui. Quando a Shopify renderiza esta página, a página da SkillShareDemo ou esta camiseta ShirtSleeve, o que ela faz é executar primeiro theme.liquid, que contém nosso cabeçalho e rodapé. E, em seguida, com base no tipo de página, ele vai cair no conteúdo para layout. Neste caso, aqui agora podemos ver modelos, ir até produto.liquid. Boom! Aqui, é muito simples. É apenas incluir produto. Então, o que isso significa? Inclui nossos trechos. Se você está familiarizado com PHP ou realmente qualquer linguagem de programação, você já viu inclusões. Então, vamos abrir nossa pasta de trechos, ir para baixo e há product.liquid. Trechos aninhados podem ficar confusos, mas a vantagem é que você está usando uma metodologia seca, ser seco não se repita. Então, se há algo que você tem que usar mais de uma vez em vez de tê-lo em todo o lugar. Basta colocá-lo em um trecho ou usá-lo e, em seguida, você só tem um lugar onde você tem que mantê-lo e atualizá-lo. Torna a vida mais fácil. Então, aqui temos, este é o HTML que é deixado cair em nossa página de produto e eu disse antes, não há limitações em HTML/CSS que você poderia fazer o que quiser. Mas vamos descobrir o quão dinamicamente isso está acontecendo. Sabemos que está juntando esses trechos. Vamos isso é um exemplo. Temos uma camiseta de manga curta. Bem, como isso foi parar lá? Temos que encontrar uma coisa bem simples: produto. e o que você pode ver aqui é que você pode usar TextMe e GitHub e configurar fluxos de trabalho extravagantes. Mas, na verdade, o padrão, o editor de texto incluído na Shopify é bastante fantástico. Com certeza, olhe para isso, produto forte e ousado.title. Então, o que você percebe sobre isso? Temos essas chaves em ambos os lados que nos dizem que isso é líquido, que esta é uma seção de linguagem programática que a Shopify precisa executar no lado do servidor antes de colocá-lo para o cliente, para o navegador da web. Então, o que está acontecendo aqui é que esses são chamados de objetos canônicos. O produto é um objeto canônico na Shopify. Ele se refere à página em que estamos e, em seguida, é adicionado título ponto. O título do ponto é uma variável lá. Uma maneira divertida de pensar em objetos canônicos ou objetos em líquido, na Shopify, eles são como supervariáveis. Essas coisas são variáveis em esteróides, e faz sentido. Tem linguagem natural, produto. Sabemos o que é isso, título de ponto. Se eu não tivesse te explicado, você poderia ter adivinhado exatamente o que isso faz e ele só cospe o título do nosso produto, camiseta de manga curta. Simples o suficiente. Para provar isso como uma demonstração, vamos apenas dizer que vamos adicionar idioma aqui, title: save. Tudo bem, e vamos reverter isso. Esta é uma boa maneira de testá-lo. Olha, isso realmente está na migalha de pão, é o que eu estava olhando. Camiseta de manga camisa de título. Na verdade, essa é uma maneira muito rápida que eu costumava testar as coisas. Basta digitar algum idioma lá e procurar onde ele muda. Você sabe o que? Devia ter percebido isso, porque olha para isto. Eles foram úteis comentou, começar pão ralado e pão ralado. Vamos salvar isso e certificar-se de que fazer quaisquer alterações lá. Refresque e aqui ele solta. Então isso é outra coisa legal. Se você estiver editando ao vivo assim e suas alterações acontecerem muito rapidamente. O que acontece se eu estragar essa mudança? Confira isso. Versões mais antigas, atuais, hoje. Olhe para isso. O que eles estão fazendo, há realmente versões embutidas bem aqui. Eu disse-te que esta coisa é amigável ao designer. Temos um editor de texto online com versões embutidas nele. Isso é fantástico. Olhe para isso. Há apenas grandes referências de variáveis líquidas. Então, eu tenho certeza, como você deve ter suspeitado, há mais opções em produtos do que o que eu mostrei a você e para realmente obter um bom exemplo disso, nós temos um par de fotos que é fácil. Podemos arrastá-los e soltá-los e puxá-los de URL ou vamos adicioná-los à moda antiga. Nos meus downloads, tenho duas imagens que tirei de uma camiseta preta e uma camiseta. Nós vamos fazer o upload deles e bum! Aqui eles aparecem. Podemos editá-los, adicionar todo o texto a ele. Ótimo para o pessoal do SEL e altere a ordem e qualquer que seja a primeira imagem torna-se sua imagem padrão. Quanto ao redimensionamento, qualquer tema configurado corretamente vai redimensionar essas imagens em tempo real para você. Então vamos ver o que temos aqui. Aqui em baixo há variantes. Variantes são como opções de produtos. No caso de uma camiseta, eu gostaria de escolher o tamanho e a cor. Então, vamos tentar adicionar variantes. O primeiro que temos tamanho, o padrão, ótimo e temos que adicionar nossas opções. Vou dizer pequeno. Eles são separados por vírgula. Assim que sua vírgula apenas adicioná-lo médio, vírgula L para grande, vírgula. Temos pequeno, médio, grande. Então outra opção, cor. No nosso caso temos preto e vermelho, e lá temos nossas opções. Você pode alterar o preço por opção. Verifique se você tem códigos SKUs ou barras diferentes se tiver algum tipo de sistema de inventário configurado, mas esses são campos obrigatórios. No nosso caso, eles vão ser o mesmo preço e o mesmo todo o caminho. Então vamos guardar isso e ver o que acontece. Ele cria tabela realmente agradável para nós eo que eu gosto sobre, ele torna mais fácil de atualizar. Então, digamos que eu queria mudar os preços em apenas as camisetas pequenas talvez custem mais para fazer. Então, selecionamos S e olhamos para isso. Ele mostra pequenas camisetas e até mesmo ter ações em massa. Legal. Eu poderia mudar os preços para que eu ganhasse aqueles 18 dólares. Eles custam mais para fazer. Os 21 dólares agora. Boom! Olhe para isso. Mas há algumas precauções com variantes. Aqui temos pequeno, médio, grande, preto e vermelho que resultou em 1, 2, 3, 4, 5, 6 opções. Você não pode ter mais de 100 opções. Cem é o boné e depois vomita. Isso vai parar você. Ele não vai deixar você criar mais. Total de combinações de coisas pode ter mais de 100. Então, essa é uma limitação. Agora existem aplicativos e várias travessuras de programação que você pode fazer para contorná-lo , mas sobre a caixa, essa é a limitação. Então, uma coisa a ter em mente. Além disso, também estamos limitados a quatro opções. Então, se eu quiser adicionar outra opção, eu poderia fazer material, eu quero dizer algodão salvar e vamos editar opções. É isso. Desculpe, eu disse que eram quatro. São três opções. Você só poderia fazer com três opções. Isso é bom. Então temos o nosso material aqui. Vejamos isso como você vê isso na loja online. Veja, divide-se em caixas de seleção diferentes e nem todos os temas fazem isso. Podias mostrá-los de maneiras diferentes, dizer-lhes o que quer que seja. Mas quando mudamos de preto para vermelho, mudamos as mudanças de tamanho ou preço. Legal. Quando mudamos de preto para vermelho, não muda aqui. Há uma maneira de fazer isso. Chama-se imagens variantes. Então, vamos selecionar, nosso preto é padrão aqui, vamos selecionar vermelho, Ação em massa, Atualizar imagem, clique neste cara, salvar. Agora veja o que acontece aqui. Vamos atualizar nossa página. Temos boa cor preta, vermelha. Oh, certo. Isso é fantástico. Ele muda e, em seguida, é claro que nós gostaríamos de fazer isso para preto também. Então, o mesmo negócio. Clique lá, selecione preto, atualize imagens. Boom! Então poderíamos ver essas imagens são muito novas e vamos testar. Preto, vermelho, preto. É legal. A vantagem aqui é que o cliente sabe exatamente, isso confirma para eles que eles estão comprando a coisa certa. Especialmente se fazemos coisas extravagantes, a imagem ou o produto pode ser incluído no e-mail, pode ser incluído na página do carrinho e isso só vai tranquilizá-los que sim, eu estou recebendo o produto certo. Escolhi preto, vou comprar uma camisa preta. É uma boa adição para incluir lá. 6. Coleções: Então, uma vez que adicionamos produtos à nossa loja, precisamos de uma maneira de classificar esses produtos. Aqui está Dodocase. Dodocase tem toneladas de produtos. Se visualizarmos todos os seus produtos de uma só vez obtemos essa coisa inútil sem fim, 88 páginas de produtos. Então, temos que colocá-los em algo. Você provavelmente está pensando bem, podemos colocá-los em categorias ou a versão das categorias da Shopify é mais inteligente. Chamam-se colecções e há um ponto-chave. Se você já usou outras plataformas de comércio eletrônico quando pensa em coleções, você acha que pode aninhá-las para organizá-las. A Shopify reinventou isso e chamam-lhes coleções. E você não aninha coleções, é apenas um agrupamento lógico de produtos. Então, é um pouco diferente e você ouve que eles têm - no manual da Shopify, falamos sobre coleções. Eles dão alguns exemplos de como você pode fazer isso, mas algumas notas. Uma coleção pode ser classificada manualmente onde você acabou de colocar produtos em que é como você esperaria categorias semelhantes à forma como categorias e outras coisas funcionam, eles podem ser inteligentes. Então, há todos os tipos de maneiras de organizá-lo, o que é divertido e nós vamos entrar nisso. Os produtos podem aparecer em diferentes coleções, funciona bem. Então, vamos dar uma olhada no Dodocase e ver como eles fizeram isso. Aqui, Dodocase vende estojos para iPhones e iPads e eles os agrupa pelo dispositivo que é inteligente. Mas então, se formos até o rodapé, podemos ver que eles também os agruparam, aqui temos que repetir novamente. Se andarmos por aí, eles os agruparam por materiais. Então aqui está couro, lona de cera, um guia de presentes, um guia de volta à escola. Essas são provavelmente páginas de destino ou esforços de SEO. Mas todas as maneiras inteligentes de agrupar logicamente esses produtos dependendo de como as pessoas fazem compras. Então, vamos dar uma olhada em onde eles vivem em nosso administrador. Se nos dirigirmos ao nosso admin da Shopify e descermos aos produtos. E aqui eu importei 10 produtos de amostra se você quiser usá-los em testes você pode pegar o CSV da madeira GitHub. Então, vamos procurar isso rapidamente para que você saiba do que estamos falando e você possa seguir em frente. Madeira é uma estrutura, é um tema de demonstração que você usaria se você estivesse construindo temas personalizados. É muito bom. E se descermos, eles têm produtos de demonstração aqui. Então, armazena demo para um conjunto de produtos de demonstração para usar durante o desenvolvimento, baixe o arquivo CSV e importe-o. E foi isso que eu fiz aqui. Então, se você quiser seguir e fazer o mesmo, você baixar esse arquivo clique em importar aqui e você pode adicionar o arquivo e ele aparecerá um minuto depois. Mas tudo bem. Uma vez que estamos em produtos, vá para as coleções e, em seguida, aqui é onde as coleções vivem. Então, agora que vimos e explicamos o que as coleções fazem e para que servem, vamos tentar fazer alguns exemplos práticos disso. Aqui você pode vê-lo meu inventário Eu adicionei alguns produtos de exemplo para que nós temos coisas para classificar. Temos uma coleção de sapatos, eles têm títulos diferentes e, em seguida, sob o tipo, todos nós os rotulamos de “chutes” nós vamos chamar nossos sapatos de “chutes” e então assim se começarmos a vender meias, nós os chamaríamos de meias tipo ou camisas tipo camisetas. E, em seguida, sob o fornecedor, eles são todos Shopify, exceto o primeiro é tetes. Agora vamos sob duas coleções. Então, aqui temos a primeira página página é uma coleção padrão. Ele é usado para que você possa adicionar produtos em destaque à primeira página da sua loja e se clicarmos nele, deve ser uma coleção manual. Tudo bem, então, você só sabe que manual é muito tradicional, muito típico. Você pode adicionar produtos manualmente. Os únicos produtos que aparecem nele são os que foram selecionados manualmente desde que são apresentados. E então você poderia escolher como eles classificam. Então, mais vendido é muito legal porque auto otimiza assim como um produto vende melhor ele é movido para o topo da lista e ele vai continuar vendendo bem. Alfabeticamente ascendente decrescente do preço do curso e data todos ascendentes descendentes ou manualmente. Quando selecionamos manualmente, obtemos esta pequena alça agradável e, em seguida, podemos escolhê-lo assim, que torna mais fácil e, em seguida, também podemos adicionar você sabe que temos nosso título e nossa descrição e nossa imagem. Então, vamos salvar isso e vamos adicionar nossa própria coleção. Vamos adicionar coleção de menus. O mesmo acordo que vamos dizer os sapatos favoritos do Kurt. Tudo bem. Eu poderia fazer manualmente selecionar produtos e também não vai dizer nada até que eu salvar. Agora posso adicionar meus produtos. Assim que você clicar nele, você obtém esta dica de ferramenta agradável que mostra seus produtos ou você pode filtrar. Se eu só quiser ver os sapatos rotulados “legal “aparecerem lá em cima. Então vamos adicionar esses sapatos e outros dois, lá vamos nós. Então, você pode ver que é Ajax, é dinâmico, é rápido, é muito fácil super fácil para os clientes usarem super fácil para você usar. Descrição, isso torna muito fácil para fazer páginas de destino. Você pode adicionar seu título, adicionar sua descrição. Então você poderia dizer, “Ei, guia de presente para sapatos masculinos guia de presente para 2015”, adicione seu título, sua descrição, uma boa imagem se o tema o apoiar. Coloque seus produtos lá e você tem uma página de destino. Em seguida, novamente defina-o para best-seller e nós temos uma página de destino auto-otimizada. Então você sabe que é muito tradicional, muito típico como você esperaria que as coleções funcionassem aqui. Mas há uma maneira melhor de fazer isso. Então, vamos adicionar outra coleção. Para isso, diremos: “Sapatos abaixo de US$200.” Então aqui vamos dizer nossos tênis favoritos abaixo de US $200. Tudo bem. Na verdade, vamos dizer que os nossos chutes favoritos estão abaixo de 200 dólares. Condições automaticamente como padrão. Então temos produtos devem corresponder a todas as condições, qualquer condição. Desde que dissemos que é para sapatos com menos de 200. Temos algumas variáveis diferentes que podemos escolher aqui. Título, tipo, fornecedor, preço, etiqueta, etiquetas são uma boa maneira de realmente ser capaz de classificar produtos em coleções ou para os clientes verem se você exibi-lo na coleção. Mas, na maior parte, eu os uso apenas para conseguir uma classificação mais fácil. Vamos mergulhar em outro uso para etiquetas com preço comparado de filtragem, preço de comparação é MSRP, peso, estoque de estoque, título de variação. Então, vamos fazer neste caso, nós dissemos que é menos de US $200, então vamos dizer que o preço é menor do que - nós temos todos esses grandes operadores de barras abaixo de 200. Se clicarmos em salvar coleção lá vamos nós, é todos os nossos sapatos que estão abaixo de US $200. Então podemos ver que funciona se você quiser testá-lo digamos que é maior do que 200 save aha! Então, todos eles desaparecem. Então, vamos voltar para é menor do que e vamos descobrir a diferença entre todas ou qualquer condição. Então vamos adicionar que temos o título do produto. Vamos mudar para contém e vamos dizer incrível, Salvar. Então, o que está acontecendo aqui é que ele só vai mostrar os sapatos que são intitulados incrível e são menos de US $200 versus se nós trocá-lo para qualquer condição e bater salvar. Ele vai listar todos os nossos sapatos porque todos estão abaixo de 200 e um diz incrível. Então, é a diferença aí. Você pode fazer isso. Você pode se enlouquecer. Mas você pode torná-los bastante complicados e granulares. Mas a vantagem aqui novamente é que é automático. Portanto, você não precisa adicionar produtos manualmente a cada coleção. Isso é útil à medida que você começa a classificar as coisas de maneiras diferentes dependendo de como as pessoas fazem compras. Então, você poderia fazer se você estivesse vendendo camisas, você poderia querer agrupar por sexo masculino versus feminino. Mas, em seguida, também fazê-lo por coleções. Pode-se dizer o tipo de camisa, manga curta versus manga comprida. O mesmo produto apareceria em várias categorias e você não quer ter que ser - toda vez que você atualizar o inventário, tentando lembrar de adicionar isso a várias coleções e coleções, coleções automáticas faz tudo o que possível. Então, claro, poderíamos classificar aqui, mas dar uma olhada em como isso parece em nosso site ao vivo mostra há o título da coleção, a descrição das coleções, os produtos aparecem e, em seguida, este tema é bom. Ele suporta mostrar os filtros de classificação que eles nem todos fazem isso, mas é padrão para o que mostramos aqui. Ok, então, aqui estamos de volta em nossos sapatos sob a coleção de US $200 e se você é astuto você deve ter notado esta nova barra lateral aqui nesta loja por aqui. Então, eu estou dentro de uma coleção e eu poderia escolher comprar por cor ou material. Então, aqui vou escolher preto e ainda estou na minha coleção, mas só mostra sapatos pretos. Isto é fantástico. É uma ótima maneira de ser capaz de classificar os produtos, facilitar a vida. Mas você sabe uma das coisas que eu mencionei anteriormente que às vezes incomoda as pessoas é coleções não são como categorias especificamente que você não pode aninhar coleções, que inicialmente cria problemas para as pessoas porque elas estão acostumadas essas coleções aninhadas. Mas temos uma opção muito melhor e isso é filtrar por tag. E aqui eu mudei para fornecer tema, é um tema gratuito na loja de temas e vamos falar sobre isso mais tarde também. Mas ele tem isso tem um recurso embutido nele. Este filtro por tag coisa. Então, vamos ver como configuramos isso. Eu tenho meus produtos aqui e você tem que vir para cima com uma taxonomia consistente que você vai usar e você não pode simplesmente adicionar tags aleatoriamente para as coisas porque este tema é automático. Ele irá cuspir todas as etiquetas em um produto. Então, você precisa ser consistente. Então, vamos escolher este par de sapatos chutes legais e aqui está o sapato. Uma taxonomia bastante típica que eu gosto de usar é material de cor quando você está lidando com roupas que é muito fácil. Estes sapatos são pretos. Então, eu já os marquei de preto e eles também têm talvez eles têm cinza neles. Você pode fazer várias tags para que possamos dizer cinza e uma das coisas que ajuda a manter essa taxonomia consistente é que a Shopify sugere automaticamente coisas que você já usou. Então, aqui eu posso ver que os sapatos são de couro. Vou começar a escrever o meu material. Olha, o couro aparece como uma sugestão. Clique nele e agora eu posso você se eu selecionar filtro por couro, ele vai aparecer. Então, vamos salvar e eu voltar vamos atualizar esta página e vamos escolher sapatos de couro aha! Há como chutes legais couro preto e vermelho que é realmente bom. É muito útil. A qualquer momento, podemos tornar mais fácil para os clientes detalhar para encontrar o que eles querem tornar mais fácil para o proprietário da loja para que esses produtos sejam classificados e apareçam como ótimos. Há outra coisa que podemos fazer com etiquetas também. Vamos ver as coleções. Então, digamos que eu queria fazer uma coleção chamada sapatos de couro sapatos de couro vamos chamá-lo sapatos de couro e vamos dizer tênis feitos com couro genuíno. Agora vamos dizer automaticamente selecionar produtos com base nas condições porque é uma coleção inteligente. Os produtos devem corresponder todas as condições, embora já que estamos escolhendo apenas um, isso não importa agora. E podemos revisar isso mais tarde. Etiqueta de produto é igual a couro, até mesmo auto completa para mim. Então, clicamos em salvar e agora sem realmente muito esforço da minha parte, eu deveria ter uma coleção de sapatos de couro que atualiza automaticamente com todos os meus sapatos de couro. Então, vamos dar uma olhada. Lá vamos nós. Três sapatos, todos com couro, funciona. Muito legal e você também pode classificar na navegação dessa forma em pesquisas e coleções. E mesmo para... não tem necessariamente que ser para o cliente. Se eu filtrar produtos em minha própria loja, eu poderia fazê-lo com tag com. Então, eu poderia usar alguma taxonomia interna para isso. Torna a vida mais fácil. Mas, novamente, a chave aqui é apenas para ser consistente, criar um sistema que você usará para seus produtos. Isso vai mudar dependendo da loja. 7. Páginas e blogs: Tudo bem. Então, uma coisa comum que cada site precisa são páginas, isso é o que a internet é baseada, páginas. Eu mencionei que a Shopify é, por direito próprio, um sistema de gerenciamento , mas não apenas para produtos conteúdo, mas não apenas para produtos, conteúdo, conteúdo. Então aqui, temos uma página Sobre Nós. Cada loja tem, pode levar a página Sobre Nós, FAQ, políticas de envio, políticas de devolução, uma página de contato. São páginas de conteúdo. Então, se entrarmos em nosso administrador, e clicarmos em loja online, páginas, aqui estão elas. Então, já editamos nossa página Sobre nós, e veja isso, título Sobre nós. Nossa grande página Sobre Nós nos ajuda a construir confiança, de fato faz. Então, vamos atualizá-lo, vamos chamá-lo About Us Demo, e então vamos adicionar ou substituir esta linha, e vamos dizer chamar-nos com qualquer, se eu puder soletrar, ligue-nos com qualquer dúvida, salve. É fácil, quero dizer, editá-lo, é muito simples. Podemos ver que é o mesmo editor da WYSIWYG. Podemos adicionar imagens a ele, inserir imagens. Ele vai pegar imagens do produto ou pode fazer upload de novas imagens, como imagem do produto. Ele também redimensiona imagens em tempo real, o que é muito conveniente. Então, eu quero adicionar uma imagem média, inseri-la, e então o que é legal também, se eu clicar duas vezes nela, eu tenho muito um editor CMS e WYSIWIG apropriado. Podemos adicionar nosso texto ALT para SEO. Vamos definir nosso conteúdo em torno dele. Olhe para isso, flutua para a esquerda. É muito bom, então guarde. Vamos dar uma olhada no que acontece lá. Exatamente o que esperaria, como esperaria que funcionasse. Então, temos a descrição do nosso motor de busca. Todas as nossas páginas aqui, vamos fazer isso. Nós poderíamos selecionar, produtos fazer isso, post blog fazer isso, e nós temos, você pode escolher um título de página separado para SEO ou meta descrição. Caso contrário, ele só vai preencher automaticamente isso dinamicamente com base no seu conteúdo. Em seguida, você pode até definir o identificador de URL. Vamos falar sobre lidar URL mais tarde, quando falamos sobre alguns itens de tema. Então, nós também podemos definir, isso é muito legal, visível versus oculto. Então, eu poderia configurá-lo para oculto, digamos que isso era uma venda e eu poderia dizer data específica de publicação, e eu poderia escolher uma data e hora no futuro, e então, naquele momento, ele será publicado automaticamente, o que é muito bom. Não é algo que você usa terrivelmente com frequência, mas quando você faz isso, é bom ter. Então, vamos ter certeza que ainda está lá, muito bom. Vejamos adicionar uma página. Se eu clicar em Adicionar página na tela de páginas, exatamente como você acha que funcionaria, FAQ. Vamos colocar alguns em algum conteúdo de amostra. Aceita devoluções? Não, eu não sei. Você também pode, se você está se sentindo froggie, você pode fazer HTML direto lá. Você pode ver que faz apenas limpo agradável HTML semântico. É muito bom, tanto quanto editores WYSIWYG ir. Então, vamos salvar essa página e visualizá-la. Com certeza, como mágica, parece. É muito bom, muito fácil, incrivelmente fácil, e rápido para fazê-lo. Agora, a única advertência com páginas, e isso é menor, é que páginas e blogs são diferentes. Isso às vezes pode confundir as pessoas. Então, uma página é realmente qualquer pedaço de conteúdo estático que não é um produto e não uma coleção. Um blog é diferente. Então, nós temos, novamente, funciona exatamente como você pensa. São apenas os nossos posts com datas. Realmente, a diferença fundamental aqui é apenas que ele nos dá esta página de índice, onde ele cria esses trechos de posts. Porque uma vez que você visualiza uma publicação completa, ela é muito semelhante a uma página padrão. Uma coisa legal aqui, você editá-lo em postagens de blog, e é exatamente o mesmo. Adicionar um post de blog, a diferença aqui, poderíamos especificar o nosso trecho. Então, esta parte aqui é o trecho. Se você não fizer isso, ele vai apenas truncá-lo para você, fazê-lo automaticamente, assim como você acha que uma plataforma de blogs adequada deve funcionar. Em seguida, você também pode escolher o autor e essas são pessoas que são outros usuários na loja, outros membros da equipe. Em seguida, também podemos usar páginas online, podemos adicionar tags, e então isso pode ser usado para filtrar rapidamente através dele ou em muitos temas, ele será exibido na barra lateral, que apareceria pelos artigos recentes deste tema. Você pode realmente criar vários tipos de blogs. Então, aqui, temos novidades. Eu poderia criar outro chamado vendas, assim poderíamos separar um blog, que um é anúncios de produtos e o outro poderia ser apenas vendas. Então, escolha isso, poderíamos fazer comentários são desativados, comentários são permitidos, aguardando moderação, e comentários são permitidos, e são publicados automaticamente se você realmente quer viver perigosamente. Então, diremos que os comentários são permitidos, aguardando moderação. Diga post no blog. Então, agora, temos blogs gerenciados, temos notícias e vendas. Então aqui, temos dois blogs diferentes que podemos executar na loja. Provavelmente muito poucas lojas vão usar vários blogs, mas é bom saber que essa opção está lá. Então, temos páginas. Então, este é o lugar onde nosso conteúdo estático, onde a maior parte do nosso conteúdo e quando criamos inicialmente a loja vai viver, e depois atualiza ao longo do tempo sobre novos produtos, anúncios, essas coisas, provavelmente continuaremos vivendo em blogs. Tudo bem. Vamos falar sobre duas partes simples, fáceis, mas incrivelmente importantes da nossa loja de comércio eletrônico e isso é o carrinho e checkout. Então, aqui estamos olhando para uma loja maravilhosa chamada Tattly que vende tatuagens temporárias de designer chiques. Algumas dessas empresas que eu acho na Shopify são fenomenalmente legais e essa é uma delas. Então, aqui temos a nossa página do produto, I Add to Cart, agora, vamos ver o que acontece. Nós adicionamos ao carrinho e ele nos leva direto para o carrinho, que é um comportamento padrão agradável em muitos temas. Tanto quanto eu posso dizer, ele não melhora checkout. Então, funciona exatamente como você esperaria. muito convencional, e isso é bom, convenção em e-commerce é bom. Então, temos algumas coisas aqui. Temos uma lista de nossos itens. Então aqui, nós temos o um e nós temos uma pequena pré-visualização, o tema da variante padrão, nosso preço, nossa quantidade, nós podemos removê-lo e nosso total. Aqui, eles fizeram uma personalização, eles adicionaram essa nota. Fazemos o nosso melhor para processá-lo, apenas muito bom. Em seguida, eles também têm papel de embrulho, que é uma modificação e a opção de confetes, então vamos adicionar, clique em embrulho para presente e ver como isso funciona. Então, há uma modificação comum que eles fizeram aqui. Eles acrescentaram, ele só adiciona outro produto a ele. Vamos desligá-lo. Olha só, funciona muito bem. Então, além disso, este é um checkout padrão do carrinho. Temos o nosso carrinho aqui, mostra a nossa quantidade, nossos botões de verificação de atualização, total, e o campo de notas, quaisquer pedidos especiais para o seu pedido. Se alguém preencher isso, ele aparecerá como uma nota na ordem, e todos os temas terão isso aí por padrão. Então, tudo bem. Vamos ver o que acontece quando clicamos na finalização da compra. Leve-nos a esta página. Há uma nota importante aqui. Se você notar o que aconteceu, o nome de domínio mudou, agora estamos na Shopify, checkout.shopify.com. Ele gera uma URL única e isso é bom. O URL exclusivo salva o checkout da pessoa como uma sessão. É seguro, é SSL e é por isso que ele faz isso, por que você muda o nome de domínio. Se desejar, você pode usar uma Loja Shopify Plus e o Shopify Plus usará um nome de domínio normal. Mas para todo o resto, para a maioria das lojas, ele vai para checkout.shopify.com. Uma das coisas boas da Shopify é que o processo de finalização da compra é baseado em dados, estudos e design excelente de todas essas lojas diferentes. Então você sabe que ele se converte bem e é um processo de checkout muito simples. Em seguida, você apenas modificá-lo, para que a marca corresponda à sua loja. Você pode adicionar, eles adicionaram uma imagem de banner, o logotipo, e então você pode definir as cores e as fontes. Então assim você sabe que mata essa dissonância cognitiva, quando acabamos no checkout.shopify.com. Mesmo que o nome de domínio seja alterado, eu ainda sei que esta é claramente a mesma marca, a mesma loja. Temos cartões de presente ou códigos de desconto aqui, o que é bom, funciona perfeitamente. Então, vamos digitar algumas informações e ver o que acontece. Vamos colocar algumas coisas aqui, Kurt Elster, endereço. Se quiser enviar um e-mail, este é o meu endereço de trabalho real. Se quiser me enviar um presente, sinta-se à vontade. Então, este é o primeiro passo do carrinho. Continue para o método de envio e aqui está o passo dois do carrinho. Então, nós temos nossos métodos de envio aqui e isso é inteligente. Recomendo que as pessoas façam isso como uma prática recomendada. Eles colocaram o tempo estimado da nave lá dentro. É uma coisa comum. Todo mundo quer saber o quão rápido eu vou pegar minhas coisas, eu estou animado. É assim que as pessoas fazem o julgamento se devem atualizar. Se eu realmente não posso esperar três a seis dias para fazer minhas tatuagens temporárias, eu vou pagar os 7,50 extras e vou com a prioridade USPS. Em seguida, clique em continuar para o método de pagamento. Então, aqui, eu poderia colocar as informações do meu cartão de crédito. Existem vários processos de pagamento que você pode usar ou pagamentos da Shopify processarão cartões de crédito para você e, em seguida, eles também têm o PayPal integrado aqui. Claro, o mesmo que o envio, mesmo que faturamento, subscreva a nossa newsletter. Então, se eu preencher isso e clicar em ordem completa, ele me levaria para uma página de confirmação e que seria isso, mas é um checkout unificado padrão que cria convenção, tradição e, finalmente, aumentar conversões, mas funciona muito bem, gostei muito. Agora, nesta página, você realmente tem muito pouco controle, menos, é claro, que você esteja no plano Shopify Plus. Você pode escolher se deseja modificar, para editar esta página. Você realmente não pode fazer isso além de cores, fontes, esse tipo de coisa contra o carrinho. Isto é parte do tema, você pode realmente, se você quiser, você poderia modificar esta edição de qualquer maneira que você viu ajuste, HTML ou CSS suportando. Mas assim que você clicar em finalizar compra e terminar nesta página, checkout.shopify.com, você não tem, novamente, a menos que esteja no Shopify Plus, você não tem acesso ao modelo líquido para isso. Tudo bem. Em seguida, onde eu fiz o pedido para eles, eles receberiam notificações, e então ele aparecerá em pedidos aqui. Então, é assim que a compra de coisas funciona e a solução SSL hospedada que eles estão usando. 8. O que são temas e o Liquid: Tudo bem. Vamos falar sobre o que pode ser provavelmente a parte mais importante da loja para designers, para o cliente, para todos, os Temas. E a Shopify foi criada para nós, o Timber. E Timber, digamos que você pode pensar nisso como bootstrap do Twitter para Shopify. É uma estrutura, um recurso de melhores práticas para usar ao desenvolver um tema para trabalhar com ele. Você pode obtê-lo, é livre de Shopify.github.io/Timber que está no GitHub, então eles estão atualizando regularmente é um recurso útil. Então, eu já fui em frente e instalei em nossa loja de temas, e há duas maneiras de adicionar temas a uma loja de temas. Você pode visitar a Loja de Temas, a Loja de Temas oficial, escolher um tema aqui e clicar em Instalar Tema, e a Shopify fará isso para você automaticamente ou, se você tiver um arquivo zip, você pode simplesmente compactar seu tema para cima, tema de upload rápido e carregá-lo. Isso é bom se você tiver um tema personalizado, estiver modificando um tema ou se tiver exportado o tema como backup e estiver importando-o novamente. Existem várias razões pelas quais você pode enviar o tema diretamente para sua loja. Então aqui, eu tenho Timber e eu queria te mostrar o que está em um tema. Então, a partir do usuário final, a perspectiva do cliente, é como ele vai fazer a loja olhar. Então, nós poderíamos ver que aqui está a pré-visualização, aqui a frente ao vivo e renderizar essa coisa, e o painel de configurações do tema. Painel de configurações de tema são opções, eles são como alguém pode facilmente escolher seu logotipo, no cabeçalho, por exemplo, e até mesmo editar as cores e coisas que aparecem no processo de finalização de compra. Isso é o que vai para o tema, se você é o usuário final. Como um desenvolvedor designer, se clicarmos neste cara, este botão de reticências e escolher Editar HTML/CS, vamos ver o interior do tema. E ele divide essas pastas, e nós não temos controle sobre as pastas, e tudo bem, porque significa que cada tema quando você entrar em uma loja, será o mesmo. Vamos apenas ir de cima para baixo com ele. O primeiro é Layout, há tema.liquid. E theme.liquid é o nosso ponto de partida, todos os nossos outros arquivos serão renderizados dentro deste arquivo, este geralmente será o nosso rodapé de cabeçalho e, em seguida, o modelo ou conteúdo renderiza dentro dele. E eu nunca vi um tema que tem mais de um layout aqui, é sempre apenas theme.liquid.. Iquid é a nossa extensão, que significa que estes são arquivos que vão ser executados lado do servidor antes que eles são passados para o usuário final. Então, .liquid é equivalente to.php. E então temos modelos. Modelos referem-se ao conteúdo, a página que vai ser processada dentro do nosso arquivo theme.liquid dependendo do que é. E vamos rolar para baixo em tema.liquid se pudéssemos encontrá-lo, procurar a linha de conteúdo 296, conteúdo para layout. Então, quando você renderiza, uma página é solicitada da Shopify, ela pega theme.liquid e insere o modelo apropriado nesse conteúdo de espaço para layout. Temos modelos diferentes dependendo do que estamos fazendo. E eles são bastante claros, bastante óbvios o que eles são, como 404 obviamente, é para arquivo não encontrado, artigo para artigos, fórum para blog, lista de coleção de carrinho, vamos ver, você pode ver tudo para mostrar coleções/todos. Então, se você permitiu a criação de conta, você tem conta de clientes, criando seus endereços de conta, clientes registrando pedidos etc., página de cartão presente e nós temos index.liquid, essa é a nossa página inicial, lista coleções que é uma lista de coleções, e aqui temos coleções e produtos, este é opcional. Não necessariamente todos os modelos que estão aqui são necessários. Página e página.contact, vamos entrar no que é, product.liquid, é claro a nossa página do produto, e página de pesquisa ou pesquisa. Aqui você skim e ver que temos page.liquid que é uma página, ea page.contact. O que é, é um modelo alternativo, eles têm páginas ou página padrão. E então, se olharmos para página.contact, é uma página exigida pela Shopify para ter uma página de contato. Mas esta é apenas uma variação em uma página com um formulário de contato preso nela. E para blog, para página de artigo de blog, produto, coleção, você pode ter vários modelos para essas páginas, então, você não está limitado a apenas uma coisa, e você escolhe isso na página específica ou, você pode definir qual que ele usa manualmente. Em seguida, movemos para baixo para Snippets. Snippets são legais, eles são inclusos. Se você tem o pedaço de lógica, pedaço de conteúdo, HTML qualquer coisa, você colocaria isso dentro de um Snippet, e então você pode chamar isso repetidamente em páginas. Exibindo um grupo de produtos, você pode fazer isso em produtos de recurso na página inicial, definitivamente em uma página de coleção, possivelmente em um carrinho vazio ou página 404. Você gostaria de colocar a lógica para isso em um Snippet aqui, e então você poderia simplesmente chamar isso de inclusão repetidamente. E então dessa forma, se você tiver que atualizá-lo, em vez de atualizá-lo em cinco lugares diferentes, você atualizá-lo uma vez e então ele é atualizado em todos os lugares. Muito conveniente. E isso é parte do uso de um método seco, ser seco, não se repita. Depois passamos para Ativos. Ativos é muito simples, são as imagens, JavaScript, CSS arquivos individuais que o tema vai usar. Se você tem lógica lá que precisa ser renderizada, estes podem ser arquivos líquidos, mas eles não precisam ser. Aqui, nós só temos modernizr, nós apenas temos um minuto de fibra para o modernizr aqui, e isso só será servido como é intocado. Mas então, nossos arquivos de ativos regulares, temos alguns gráficos vetoriais aqui, mesmo em um arquivo HTML, e parece que estamos usando uma fonte de ícone. Muito legal. Aqui temos um timber.scss, então, a Shopify compilará, renderizará com Sass, que é conveniente, então você pode usar isso. Sass é compilado no servidor da Shopify, você não precisa mexer com ele e ele faz algumas coisas legais. Se você quiser tornar sua vida mais fácil, você quer usar variáveis auxiliares, você pode usar essas configurações de tema, é conveniente. Certo, vamos fechar a pasta de ativos. Ficando mais simples aqui configuração, dados de configurações e, em seguida, definindo esquema. Então, se olharmos para esse cara, esta é a página personalizada que eu mostrei a vocês, aqui personalizar o tema. Isto é o que vai ser renderizado aqui para o usuário final usar, e é também onde vamos armazenar essas coisas. Agora aqui está uma predefinição presa aqui. Então temos uma predefinição chamada padrão, e ele fica armazenado lá. Então, por fim, temos locales, locales é como você lida com a internacionalização. Então, como você adivinhou, este tema vem em alemão, inglês, francês, e eu acredito em português, mas definitivamente é isso aqui, olhando para ele é seu próprio ambiente, que torna a vida mais fácil. Você poderia construir o trabalho sobre o tema do usuário inteiramente aqui. Tudo bem, até agora, as coisas têm sido divertidas e jogos, clicando ao redor e interface fácil de usar. O sistema CMS simples, um bom editor WYSIWYG na seleção de temas. Conversamos um pouco sobre o que está em um tema, e agora é hora de se sujar com o Liquid. Liquid é uma linguagem, baseada em Ruby, que a Shopify escreveu, está lá fora , está em outras coisas agora, e na verdade não é assustador no mínimo. Então vamos olhar para, aqui temos nossa página de produto do nosso tema aqui. Ele renderiza, mas como aconteceu? Então, se olharmos em nosso tema, temos product.liquid, isso não é complicado e sabemos que product.liquid é nosso arquivo de produto. Sempre que chamamos de página do produto, Shopify procura produtos.liquid. Dentro desse arquivo, se olharmos ao redor e olharmos para ele, é apenas HTML, não há nada louco que não tenhamos visto antes, apenas HTML. Mas então, nós nos perguntamos, “Ei, a descrição chegou aqui?” Então aqui olhe, linha 116, nós temos esse cara, Product.description, e eu tenho certeza que você pode adivinhar o que isso faz. É a variável que coloca no produto, mas para o inferno, vamos comentar, salvar e atualizar a página do produto. E com certeza, e isso é legal. Este é apenas o editor de texto normal construído dentro da Shopify, funciona muito bem. Funciona imediatamente, é ótimo e, em seguida, se descomentar product.description e salvá-lo, nossa descrição volta. Então, aqui, você pode ver que temos product.description e está embrulhado nessas duas chaves. Isso nos diz, “Ei, isso é uma variável Liquid”, e geralmente qualquer coisa que esteja com as chaves duplas significa que é um pedaço de conteúdo. Ele vai produzir o título, descrição, preço, esse tipo de coisa, enquanto isso, se você estiver observando com cuidado, nós também temos esses caras, onde são 100% chaves. Esses geralmente significam que é lógica ou é algo que tem que estar perto de como um comentário, mas se então declarações usarão isso, loops usarão isso. Mas ajuda-te a ver o que está a fazer e é bom. Mesmo aqui, a lógica se então, é muito simples. Se a coleta e, em seguida, terminar se, é exatamente o que você esperaria disso, não há nada de louco aqui. Sabe que não há sintaxe estranha, é fácil de usar. Aqui temos você sabe product.liquid, mas é apenas este modelo. Mencionamos isso anteriormente, o que acontece é que toda vez que uma página é carregada, Shopify percorre theme.liquid, então vamos até lá e novamente apenas a cabeça normal. Já vimos isso antes, sabemos HTML, não é difícil. Mas quando nós rolamos para baixo, através do arquivo, através do nosso arquivo theme.liquid, encontramos esse cara, conteúdo para layout, e conteúdo para layout que vai ser qualquer que este modelo correto é, vai ser descartado em Aqui. Então, quando carregamos nossa página de produto, ele pega theme.liquid e corre através dele, e quando ele chega ao conteúdo para layout, ele insere product.liquid lá, e continua em seu caminho através do resto deste arquivo, o que é conveniente. É ótimo. Então é isso. Quero dizer, realmente não há nada, há nada particularmente mais difícil de alcançar isso. Então não há razão para ter medo do Liquid, e vamos entrar em nossos filtros e quais são essas outras opções. Então, se olharmos para cima aqui, como você sabe aqui título da página, isso é apenas conteúdo, ele cai em versus, nós temos uma declaração if deixa-lo lá dentro. Se rolarmos para baixo, e tivermos todo o tipo de coisas boas aqui. Deixe-me encontrar um bom exemplo de um If, então aqui vamos nós. Se você sabe que o cliente significa que isso é, o cliente foi habilitado aqui, exibirá o cliente conectado e se, é ótimo. Muito simples. A outra coisa a saber sobre o Liquid é que não há URLs, então aqui você pode ver que temos modernizer.min.js, tag script, asset_url. Nós não temos que nos preocupar com arquivos perdidos 404s, ele os solta, e até mesmo faz isso com o HTML correto, então é uma tag de script versus aqui em nosso CSS, stylesheet_tag, asset_url, timber.CSS e, claro, refere-se a asset_url ou refere-se a um ativo. Deslocaremos para baixo até nossa pasta de ativos. Lá está ela de madeira.scss.liquid, e então eu vou deixar cair lá dentro. Funciona, sem mais 404s, sem mais se preocupar com essas coisas quando as URLs mudam, Shopify cuida disso para nós através do Liquid, que uma vez que você tem essa sintaxe desativada, torna a vida muito fácil. Aqui está um bom exemplo, super fácil de entender, nosso favicon. Então, se settings.favicon_enable, de modo que se refere ao nosso arquivo de configurações de tema, e é isso. Se estiver ligado, então vai funcionar. Ele só vai exibir este pedaço de HTML intocado, mas, em seguida, para o nosso, href lá, nos referimos a favicon.png e asset_url. É isso, super simples, super fácil. Não é, é tudo o que você já viu antes. É muito fácil intuir, mas, ao mesmo tempo, também me manteria à mão e faço com a documentação do Liquid e a folha de truques do Shopify Liquid. Aqui nós temos, bem aqui ele mostra, referência variável líquida. Então vamos abrir esse cara, e aqui, de relance, você poderia procurar por ele, encontrar suas coisas. É muito fácil. Certo, essa é a nossa introdução, vou me mudar, ficar um pouco mais complicado na próxima. 9. Layouts, modelos: Está bem. Vamos falar sobre Layout. Nós vimos em nosso tema, é apenas usando HTML regular, nada de louco sobre isso. Mas, o layout pode não ser o que estamos acostumados. Nós temos essa estrutura de arquivos bastante diferente onde nós nem estamos usando URLs. O que acontece é que usamos esta pasta Layout, e nisso, temos theme.liquid. Noventa e nove por cento do tempo, você só terá um arquivo de layout, theme.liquid. Cada página é renderizada usando theme.liquid, e é isso, é o que você esperaria ver. Ele abre com o nosso arquivo HTML, doctype. Ele tem uma cabeça, e se percorrermos todo o caminho até o fundo, certeza ele fecha. Tem um rodapé. Então, isso se torna nossa página universal, nosso formato universal. Isso nos poupa de um monte de trabalho de ter que usar rodapé de cabeçalho inclui, embora você poderia se você quisesse. Isso nos poupa de ter que escrever essas coisas em cada página, é conveniente. São fáceis de usar. Então, nós temos theme.liquid aqui, e ele tem tudo aqui, todas as nossas necessidades básicas de página. Parece muito familiar, mas há algumas coisas que tem que ter. Além disso, esta é a sua única página-mestre ou layout mestre, e tudo é renderizado neste, e, em seguida, com base na coisa que estamos renderizando, com base na URL realmente. Ele insere um desses modelos no conteúdo para arquivo de página ou conteúdo para variável de página. Aí está, conteúdo para layout, 296. Ele deixa cair aquela coisa lá dentro. O conteúdo da página vai dentro deste arquivo de layout. É a nossa coisa número um que temos de ter lá dentro. Há um outro menor, mas o importante que temos de ter aqui, vamos encontrá-lo. Lá está ele. Chama-se conteúdo para cabeçalho lá em cima na 34. O conteúdo do cabeçalho é para que a Shopify possa inserir itens lá. Então, poderia ser predominantemente plugins. Se você instalar aplicativos e o aplicativo tiver que adicionar JavaScript ao site, ele fará isso por lá. Torna a vida mais fácil. Se você estiver removendo o aplicativo, você não tem isso deixado para trás. Se você tem o aplicativo, você não tem que mexer com HTML necessariamente, desde que ele pode ser deixado cair lá, o que é conveniente. Muito agradável. A outra coisa que vamos notar, nós não tê-lo neste arquivo, mas são uma espécie de incluir snippets. Então, aqui temos alguns trechos. Se quiséssemos, poderíamos fazê-lo incluindo theme.liquid e às vezes eu faço isso apenas para limpá-lo para que não pareça tão confuso. Aqui, vamos encontrar um bom exemplo. Temos que começar a navegação móvel e se descermos, lá vamos nós. Aí está o fim da navegação móvel. Então, vamos cortar. Apanhámos aquele tipo. Então eu vou deixar isso lá para que nos lembremos para onde vai, e vamos adicionar um trecho. Vamos criar um novo Snippet chamado mobilenav. Aparece, e vamos colar nosso conteúdo lá. Então aqui está o conteúdo de navegação móvel dessa página. Chama-se mobile-nav.liquid. Salve isso. Volte para o tema. Liquid e vamos escrever isso aí. Inclua mobilenav e vamos fechar essa cinta encaracolada. Salvar. Vamos refrescá-lo. A página deve parecer boa, mas vamos encontrar o equipamento móvel aqui e ali. Boom. Comece a navegação móvel. Aqui está, e há todas as nossas coisas de navegação móvel, ainda lá dentro fechado. Mas o que acontece se matarmos esta linha? Então, bem, aqui, vamos deletar completamente. Salve esse cara, e vamos atualizar nossa fonte. Agora todas essas linhas se foram. Então, uma vez que este arquivo de modelo, por isso é quase sempre você teria apenas o único tema.liquid arquivo, e ele aparece em todas as páginas. Não há realmente uma grande razão para usar inclui dentro theme.liquid além de talvez ele limpa-lo, ou você está pretendendo usar vários arquivos de layout. Mas, inclui fazer sentido dentro de modelos. Então, geralmente, do jeito que eu faço, você faria isso é temático.líquido. Então seu arquivo de layout primeiro, depois seu arquivo de modelo, por exemplo product.liquid e, dentro disso, você faria sua inclusão. Então, em product.liquid, pode ser botões de compartilhamento social e você tem um incluir para isso. Isso faria sentido. Isso abrange nossos arquivos de layout, nossos modelos e nossos snippets. Agora, vamos falar sobre uma parte específica do líquido que você tem que usar em toda a sua coisa, mas muito fácil de usar, e isso são variáveis. Variáveis líquidas, também na documentação da Shopify, referidas como objetos líquidos. Então, objetos são variáveis. Variáveis foram arraigadas em mim. Então, isso é provavelmente o que eu vou continuar chamando, mas eles são intercambiáveis. Então, eles são esses caras, as coisas da chave dupla nos dizem que é um pouco de conteúdo, um pouco de informação. É uma variável, e ela produz. Ele produz nossas informações como vimos na demonstração anterior como product.description. Dentro dos objetos, há dois tipos. Há objetos globais que podem ser usados em todo o site em qualquer lugar. Se entrarmos na documentação da Shopify, serão coisas como o carrinho. O carrinho tem que aparecer em todos os lugares. Ou página atual, retorna o número do pager em. Bem, se você está em conteúdo paginado, então na verdade isso não funciona em todos os lugares necessariamente. Se a pessoa estiver conectada como um cliente, para que você possa fazer lógica como login, logout. Então, se você percorrer essa documentação líquida, temos nossos diferentes objetos para global, como títulos de página são um bom exemplo que aparece em todos os lugares, e temos o título da página. Então, vamos fazer uma demonstração rápida. Aqui, eu vou copiar o título da página, e então vamos voltar para o nosso produto.liquid. Então, aqui temos a descrição do produto e abaixo disso, vamos adicionar uma nova informação. Vou escrever uma etiqueta de parágrafo e dizer: “Esta é a página de título da página.” Vamos colocar isso. Salve isso. Agora, vamos carregar o nosso produto. Lá vai ele, tudo bem. Muito produto, role para baixo, e olhe para isso. Então, temos nossa descrição como esperávamos, e logo abaixo, esta é a página do Hip Shoes. Então, é apenas carregado até o título da página. Agora, isso é um global. Objeto global, variável global que vai funcionar em todas as páginas. Mas e as coisas que são específicas para uma página? Então, neste caso, um grande exemplo é que product.description. A descrição de um produto só pode aparecer nessa página específica em referência a esse produto específico ou ao preço. Mas você se enlouquece se está tentando descobrir o que cada um é. Então, é aí que a folha de truques da Shopify vem a calhar. É de Mark Duncan Lee que é um designer na Shopify, e tem tudo quebrado assim, o que é ótimo. Então, aqui se formos sob variáveis de modelo, e sim, ele as chama de variáveis não objetos. Então, aqui temos um blogue líquido. Aqui, ele tem uma lista de todas as coisas específicas que podemos usar em uma página de blog. Novamente, não é como em um relance, é muito óbvio o que eles são, blog esse título, é o título do blog. Mas quando você está tentando pensar no que é, é mais difícil. Então, é muito bom ter esta folha de batota na sua frente. Se você clicar nele, ele lhe dará toda a descrição, e ele também irá vincular diretamente à documentação, o que é muito bom. Então, estamos na nossa página do produto, e aqui, temos todas essas coisas para o nosso produto, o que é ótimo. Sim, e nós temos, vamos ver modelos, produto de líquido, então vamos levar esse cara de volta. Nós não queremos isso. Então, este era o subtítulo da página. Isso aparecerá em todas as páginas. Então, em vez de fazer isso, vamos encontrar algo específico para um produto que possamos produzir. Vamos passar por produtos que líquidos e encontrar um, um que esteja certo. Então, aqui, nosso produto não exibe seu tipo. Então, temos product.type. Então, vamos fazer um exemplo melhor. Digamos que podemos acrescentar isso aqui. Então, vou escrever, vou colocar em negrito. Eu vou escrever tipo, e então nós vamos mudar isso para product.type e ver o que acontece. Product.Type, salve, volta lá, e eles estão lá, atualizar. Olhe para isso, tipo, página de chutes, lá vamos nós. Onde é que eu e a minha página estivemos lá dentro. Salve, tudo bem, vamos reverter isso. Digite chutes, e isso é porque o tipo neste produto pelo menos foi definido como chutes. É uma modificação comum. Você pode querer dizer às pessoas, “Ei, que tipo é esse?” É assim que você faria. Vamos falar sobre modelos, certo Então, temos dentro ou tema, temos este conceito de micro modelos. Eles não são uma página completa. Eles são apenas o conteúdo para essa página, e é isso que vai na pasta templates. Além disso, vamos ver primeiro como eles são escolhidos, porque quando entrei na Shopify, isso inicialmente me confunde também. É feito com base na URL. Então, vamos dar uma olhada neles. Vamos pegar, vamos à nossa loja, e vamos carregar esse cara. Tudo bem, lá está restaurado. Então, certo, este é fácil. Execute a página inicial, então barra, que carregaria nosso index.liquid, e vamos descer. Há Index aquele líquido, e aqui, então, carregando isso em cima de primeira coisa lá. Vemos cada duas seções homepage título. Vamos fazer sentido. Bonita, bem direta. Lá vamos nós. Há nossa coleção de homepage, e só para provar, só para mostrar que, é isso que é, vamos acrescentar. Vamos adicionar algum texto aqui. Como você economiza? Vamos atualizar esta página, e olhar para isso, ela aparece. Então, isso é bonito. Isso é fácil, isso é direto sobre como esse conteúdo está funcionando. Mas, novamente, qual coleção você escolhe é baseada no URL. Então, vamos clicar em About Us, e About Us vive em uma página. Sabemos disso, se você olhar para o URL, /pages. Então, então, se nos dirigirmos, esperaríamos que para carregar a página.liquid. Aqui, temos o título da página H1. Mesmo negócio, vamos adicionar a página de texto lá, salvar, atualizar About Us Demo Page. É assim que está fazendo. Vamos percorrer todos os modelos que estão aqui. Não são terrivelmente muitos, e discutiremos rapidamente o que cada um faz. Quatrocentos e quatro, que é o artigo da página Arquivo Não Encontrado. Este é o conteúdo de um blog. Então, artigo do blog não deve ser confundido com página.liquid. Blog, esse é o índice de artigos em um blog. Carrinho, é a página do seu carrinho, não a página do carrinho de compra. Coleção, o insider, apenas padrão uma página de coleção de categoria. Coleção. List, este é um pouco diferente. Deixa-me mostrar-te essa. Isso é uma lista de coleções. Então, se você vai para /collections, ele carrega esta lista de todas as coleções, que na verdade é diferente de coleção/tudo, que é uma listagem de todos os produtos em uma loja. Então, se descermos, modo que são as coleções sempre coleções.list, e então temos todas essas páginas de clientes. Então, há alguns aqui, eles só são usados se você tiver contas de cliente habilitadas na loja e, na maior parte, quando o cliente estiver conectado. Ativar conta é verificar a verificação de e-mail. Endereços é onde eles gerenciam seus endereços salvos. Página de login, o login é claro. Ordem, eles podem ver seus pedidos anteriores, a página de registro, redefinição de senha. Bonito, os nomes são simples. Vamos ver o que temos aqui. Cartão presente, este é tudo diferente. Quando alguém compra um vale-presente, recebe um link para o vale-presente por e-mail. Isto é o que é renderizado quando eles clicam nesse link. Então, se eu comprar o vale-presente, essa é a página que aparece. Você pode fazer cartões de presente extravagantes ou adicionar instruções, esse tipo de coisa. Index.liquid que aprendemos é a página inicial, list-coleções. Então, este é /collections e /products. É opcional. Vocês vêem, alguns destes opcionais apenas se referem ao enviar um tema para a Loja de Temas. O que é necessário e o que não é. Temos página bem aqui, esta é apenas uma página como aprendemos. Page.contact, este é um modelo alternativo, e eu não vou falar sobre isso ainda. Mas vamos entrar nisso. Produto.Liquid, nós brincamos muito com esse cara. Então, a página do produto e a pesquisa são os resultados da pesquisa. Então, aqui em cima temos coleção.list. Este é um modelo alternativo. Sim, colecionação/tudo? lista de exibição. Então, novamente, este não é necessário. Mas é útil ter aqui dentro. É parte da razão pela qual gosto de começar. Se eu estivesse fazendo um tema personalizado, é bom começar com este trabalho de moldura de madeira. Vamos mergulhar em mais coisas líquidas a seguir. 10. Filtros e loops: Eu quero mergulhar e falar sobre uma das minhas características favoritas da Sintaxe Liquid e que são filtros. Vamos ler a definição da Shopify. Filtros são métodos simples que modificam a saída de números, strings, variáveis e objetos. Eles são colocados dentro de uma tag de saída e são separados com um caractere de pipe. Então, como nos lembramos antes, uma tag de saída, que é um objeto, objeto Liquid ou variável Liquid e é indicada por essas chaves duplas. Isso é tipicamente para coisas como título, descrição, preço, aquelas coisas que são apenas variáveis dinâmicas que você quer cuspir. Então, eles nos dão um exemplo como maiúsculas como um tubo. Então, vamos entrar em nosso bom e velho amigo, o modelo do produto. Obteve produto. Liquid aqui e aqui olhar h1; product.title. Vamos adicionar um filtro. Um filtro é indicado por pipe, então pipe sendo um caractere não como uma referência Mario, e então vamos adicionar maiúsculas lá. Então, lá vamos nós, temos “product.title | maiúsculas”. Então, nós provavelmente poderíamos adivinhar o que isso vai fazer. Salve-o e agora, vamos atualizar esta página. Olhe para isso, mudou isso para sapatos Gnarly, elemento inspecionador. Então, se olharmos para ele, temos “itemprop é igual ao nome de sapato torto”. Ele alterou a saída para nós e isso é útil. Você pode fazer isso para fazer coisas globalmente, para alterar configurações temáticas como em sua navegação. Talvez a sua navegação você quer que seja sempre maiúscula, minúscula, você poderia fazer isso aqui. Então, vamos tirar isso, mas há todos os tipos de filtros que fazem muitas coisas diferentes, e um dos melhores recursos para descobrir isso é a folha de truques da Shopify novamente de Mark Dunkley. Se eu olhar aqui em cima, ele tem filtros de líquido, aquela coisa de saída, então isso é legal. Aqui está uma tira HTML. Então, isso é bom como digamos, você deseja adicionar sua descrição incorporada a um documento. Então, aqui está o exemplo deles. O que eles fizeram foi pegar o conteúdo do artigo e, em seguida, tira o HTML dele, porque obviamente HTML em sua descrição incorporada iria quebrá-lo, e então aqui eles adicionaram outro pipe, truncate:20. Então, eu me pergunto o que truncate faz. Vamos descer aqui. Usando palavras truncadas, podemos reduzi-lo a x palavras ou truncar caracteres. Legal, então vamos rolar para baixo. Temos aqui outros filtros. Nós temos algum? Então, aqui está em maiúsculas. Capitalizado é bom, poderíamos usar isso para higienizar nosso conteúdo. No caso de, digamos que alguém que é preguiçoso e todos os seus outros títulos de produto eram minúsculas. Você poderia usar isso para torná-los bonitos, para garantir que eles sempre parecem ótimos, o que é conveniente. Mas como você pode ver aqui, é para mais do que apenas alterar essas saídas. Há muitos outros úteis diferentes. Então aqui, temos dinheiro com moeda, dinheiro sem moeda, e dinheiro. Você vai ver isso muito porque você quer ser capaz de internacionalizar seus temas. Então, talvez alguém venda em várias moedas ou esteja em países diferentes. Então, você pode exibir hey, dinheiro com moeda em vez de apenas exibir o cifrão como fazemos agora. Aqui, está adicionando dinheiro canadense sem moeda. É apenas o preço sem o sinal do dólar, e o dinheiro é cobrado com o símbolo da moeda. Mas é útil para coisas mais do que apenas isso. Temos preço, isso foi legal. Mexer com os preços é conveniente, sendo capaz de alterar a saída de texto em minúsculas para maiúsculas. Mas e a abreviação? Tornando nossas vidas mais fáceis. Então, vamos até um cara que olhamos mais cedo e esse é o link CSS. Então, CSS, temos referências ao arquivo. Então aqui, esse cara em aspas simples se refere ao nosso ativo. Lá está ele de madeira, e se voltarmos aqui, então temos dois canos, então temos dois filtros aqui. O primeiro é asset_url. Então, asset_url, nós provavelmente poderíamos adivinhar que ele vai puxar o URL neste e, em seguida, tag stylesheet. Então, vamos dar uma olhada na fonte. Vamos ver a fonte do nosso arquivo e encontrar o link CSS, lá está, CSS link href, blah, blah, legal. Então, temos tudo isso acontecendo fora daqui. Mas o que acontece se matarmos stylesheet_tag? Tiramos um desses tubos, guardamos e atualizamos. Olhe para isso. Então, aqui, como esperamos, ele está produzindo apenas a URL. Há situações em que você quer fazer isso. Se você quisesse adicionar atributos extras a um link, você gostaria de ser capaz de fazer isso. Então, é muito conveniente. Então, vamos usar filtros mais e algumas outras coisas, mas definitivamente apenas pegá-lo. Esta é uma referência usando folha de truques Mark Dunkley, muito conveniente para seus filtros, mas permite que você faça todos os tipos de coisas programáticas divertidas que os designers não poderiam usar, bem não necessariamente poderia, mas designers estavam com medo de usar ou difícil de usar antes com JavaScript, PHP, esse tipo de coisa. Aqui, é incrivelmente fácil. Você só tem que saber qual você está procurando e é para isso que a folha de truques serve. Agora, vamos falar sobre um assunto, vai ficar um pouco assustador. Não te quero assustar. Vamos discutir “for-loops”. Então, se você está familiarizado com navegar seu CSS HTML, não é um monte de lógica de programação lá. Então, algo como um for-loop pode parecer intimidante. Jeffrey os chama de tags de iteração, for-loop é um tipo de tag de iteração. Tudo o que você faz é repetir um bloco de código. Então, vamos dar uma olhada em alguns exemplos em que podemos querer usar for-loops, e então, veremos como eles funcionam, e que eles não são assustadores em tudo. Então, aqui temos em nossa coleção, em nosso tema. O que não sabemos quando carregamos uma coleção, temos um modelo de coleção que coloca dinamicamente os produtos lá. Não sabemos quantos produtos estarão lá em cada tema, em cada coleção diferente. Então, temos que ter uma maneira de fazer isso de forma programática e fácil, sem repetir todo esse código. Aqui, esta nuvem de tags à esquerda, aquela barra lateral, que é um loop e até mesmo algo tão simples como ou navegação no topo. Não sabemos quantos itens vão estar lá dentro. Isso é apenas uma lista repetida repetidamente. Novamente, é apenas um loop for-loop e, em seguida, outro comum, é claro, miniaturas de produtos, produtos podem ter diferentes números de miniaturas. Então, temos que usar for-loops e usá-los um pouco justo ao longo de um tema. Então, vamos ver como isso funciona. Então aqui, eu carrego coleção. Liquid e em Collection.Liquid e eu simplifiquei isso um pouco, mas se chegarmos aqui, veremos a linha 53. Tenho esse cara, e diz, para o produto em coleção.produtos incluem item de grade de produto e endfor. Então, assim que vemos a porcentagem da chave, sabemos que isso é um pedaço de lógica e temos que fechá-la. Então, temos para e fim. Muito simples. Agora, se olharmos para a linguagem, também é simples. Então, para o produto em coleção.produtos. Usando esse grande líquido.Syntax, poderíamos dizer que é apenas dizendo, para cada produto em uma coleção, entanto, muitos produtos estão em sua, loop through e incluem este snippet. Ok, e vamos ver esse trecho. Temos item de grade de produtos e aqui vamos nós, este snippet é usado para mostrar cada produto durante o loop, para produtos em coleção.products e collection.liquid. Muito bom. Então, todo esse código aqui, normalmente, se quiséssemos fazer isso sem o loop, teríamos que fazê-lo estaticamente e continuar repetindo isso várias vezes, não funcionaria. O loop torna muito mais fácil. Então, vamos voltar a esse loop. Tudo bem, então nós temos para o produto em coleção.produtos incluem item de grade de produto. Tudo bem. Só para demonstrar, vamos matar esse snippet e depois vamos atualizar e ver o que acontece. Todos os nossos produtos desaparecem. Então, sabemos que está funcionando. Então, coloque-o de volta, salve-o, atualize-o e nossos produtos voltarão. Agora, com um loop, na maioria das vezes é fácil como isso apenas, “para qualquer coisa em fim.” Mas os loops são mais poderosos do que isso. Nós podemos realmente incluir outros bits de lógica lá. Então, poderíamos fazer outra coisa. Vamos tentar outra coisa. Senão é um pouco de lógica. Então, vamos dizer outra coisa e então, eu vou colar isso aqui. Eu já tinha escrito, mas as etiquetas de parágrafo dizem: “Oops, a coleção está vazia.” Então, vamos salvá-lo. Então, agora, nós temos um pouco de lógica aqui, e o que isso está dizendo para o produto. Então, se houver produtos na coleção, na coleção, vamos executar este snippet, mas se ele estiver vazio, vamos exibir uma mensagem diferente. Então, vamos criar para verificar nossas coleções. O que temos? Produtos, coleções. Eu já criei uma coleção vazia e vamos vê-la. Olhe para isso. Então, diz: “Opa, a coleção está vazia.” Está usando aquela outra lógica que colocamos lá. Só para mostrar que é isso que está fazendo, vamos voltar e editar nosso tema novamente. Colecção. Líquido. Quando tirarmos o outro, vamos ver o que acontece, se não incluíssemos aquele pouco de lógica lá. Então, ele corre através do loop, mas não há produto zero e nada acontece. Ele só pára e começa. Então, muito mais simples do que você imagina, provavelmente mais simples do que outra linguagem de programação se você mexeu com eles, mas ainda há mais que você poderia fazer com isso do que isso. Então, se voltarmos à folha de truques de Mark Dunkley, temos aqui para encontrar o for-loop, mas há mais que você poderia fazer com ele. Então, se você descer, onde está? Lá vamos nós, Ajudantes de Loop. Então, Helpers Loop, agora, podemos definir as coisas. Então, queremos correr para todo o comprimento do loop? Queremos saber onde estamos no circuito? Índice da iteração atual, o que mais temos? Esses dois são bons, primeiro e último. Então, se você diria, se isso é como para paginação, se esta é a última coisa no loop, nós podemos adicionar uma seta a ele ou se é a primeira coisa, vamos adicionar a outra seta a ele. Há muita flexibilidade aqui com loops, mas na maior parte, não é particularmente complicado. Estou aqui neste exemplo, apenas cospe produtos. Então, para o produto na coleção de produtos, título de produtos. Vamos fazer isso como nossa última demonstração rápida de como o loop funciona. Aqui vamos nós, então vamos trocar nosso snippet por apenas título do produto, possamos vê-lo executado. Aí está, atualize, sim, e aqui é só que cada um dos títulos de produtos cuspir para fora. Então, sim, for-loops não complicados, não assustadores em Liquid. Se você sabe linguagem de programação básica, se então, você pode descobrir isso. Não é difícil, mas é parte integrante de uma pá lutando. 11. Produto: Então, recapitulando, nós aprendemos muito. Aprendemos sobre a plataforma, aprendemos sintaxe Liquid, o que podemos fazer com o Liquid, como é fácil, a estrutura de um tema ou interface da Shopify. Aprendemos muito. Agora eu quero começar a andar, e juntar essas coisas. Nós vamos fazer isso apenas caminhando e tentando falar sobre como os modelos em nosso tema Framework Timber são definidos, e isso vai nos dar uma boa compreensão. Vamos começar com o modelo do produto. Modelo de produto é provavelmente o modelo mais complicado em qualquer tema, com a exceção de talvez alguns temas home pages. Mas para a maior parte, modelo de produto é louco como ele fica. Então, se pudermos dominá-lo, se pudermos entender isso, então sabemos que devemos ser bons em tudo o resto. Enquanto estivermos olhando para esse modelo de produto, vamos querer ter duas referências abertas. Primeiro de tudo, vamos pegar a Documentação Líquida para Objetos, específica para uma página de produto. Se você se lembra, temos algumas variáveis que podemos produzir globalmente, que funcionam em todos os lugares, e então temos lotes que podemos produzir apenas específicos para um produto. Aqui, temos esses atributos de produto à nossa frente. Se quisermos, também podemos manter a folha de truques do Sr. Dunklee na nossa frente. Bem aqui à direita, temos variáveis de modelo com product.liquid. Este é bom para uma referência muito rápida. Podemos ver todos eles de relance, e se você abri-lo como oh o que é product.title fazer, retorna o título do produto. Qualquer um com o qual se sinta confortável. Eu muitas vezes, vamos ter ambos ou apenas Google, ver o que aparece. Aqui temos uma página do produto. Só complicado como vai ficar. Queremos começar a olhar para o nosso modelo. Tudo bem. Você sabe HTML regular, nós abrimos nossa classe div, e imediatamente nós temos h1 tag. Aqui está nosso primeiro produto variável.title da Shopify. Naturalmente sabemos que esse cara está se referindo a Awesome Sneakers product.title. Não vou demostrar esse, vou continuar passando. Tudo bem, aqui podemos ver que estamos fazendo algumas coisas com marcação Schema, é incluir dados ricos de snippet. Acho que a maioria ou todos os temas fazem isso agora. Você não precisa necessariamente fazer isso por si mesmo, mas é uma coisa boa de ter, se você é um grande crente na teia semântica como eu sou. Mas também nos dá acesso a algumas coisas boas de relance como moeda do preço do item, conteúdo é igual a shop.currency. Não sabemos exatamente qual é essa saída, mas sabemos que é em referência à loja, é uma variável global, e é moeda. Então, vamos ver se conseguimos procurar isso. Claro, shop.currency está aqui. Retorna uma string com o nome da moeda geralmente três letras representação, por exemplo, USD. Nossa loja deve ser montada em dólares americanos. Então, isso irá produzir USD, mas vamos olhar no código, ver o que ele faz. Então, se eu estiver certo, e se eu procurar controle encontrar USD. Com certeza, aí está. Na verdade, é realmente dentro, se você olhar, lá está. Preço conteúdo moeda é igual a USD, Sneakers impressionantes. Estamos indo bem até agora, não temos nada muito louco. Vamos usar outro - disponibilidade. Realmente isso é para o Google. O Google vai querer saber essas coisas. É bom para um SEO. Então, aqui temos, esta é uma corda inteligente que alguém escreveu aqui. Então, nos referimos a schema.org. Agora temos o nosso primeiro exemplo de lógica. Podemos trabalhar o nosso caminho através disto. Podemos intuir. Se product.available, então, se o produto estiver disponível, esse é um operador booleano sim, não. Se o produto estiver disponível, verdadeiro, ele vai escrever nas palavras “em estoque”, senão. Então, sabemos que se não estiver disponível, está fora de estoque. “Mais” fora de estoque. Endif. Nós já temos alguma lógica inteligente aqui para fazer esses dados ricos de snippet estão funcionando. Aqui temos um comentário aqui, vem em código. Então, é bom fazer comentários como este, embrulhando seus comentários em tags Liquid, pois eles só estarão disponíveis no editor de temas. Eles não serão renderizados com ele. Isso nunca aparecerá no front-end para o usuário final. Então, se olharmos, podemos ver que não há nenhum comentário aqui, o que é bom. Isso só torna a página um pouco menor, um pouco mais limpa, e então você não precisa se preocupar se você tem um comentário sensível lá, que você faria, mas você não precisa se preocupar com isso sendo exposto. Então, temos nosso formulário de ação basta postar no carrinho. É muito simples, Method, Post. Então, estamos postando no carrinho/ad id addTocutForm. Então, há um seletor para um carrinho Ajax plug in. Isso provavelmente está um pouco além de nós agora. Não vamos nos preocupar com isso. Rolando para baixo, veja o que mais temos aqui, para variantes em produtos. Isto fica interessante. Temos variantes. Verifica isso. Então, tamanho, aqui temos apenas dois, mas estas são suas variantes, suas opções de produto. É a isso que se refere. Aqui está fazendo referência à opção selection.js, algumas coisas malucas de javascript. Não quero que se preocupe com isso ainda. Mas ainda podemos descobrir o que está acontecendo. Então, opção. Portanto, é um campo de formulário, se variante é igual ao produto selecionado ou primeira variante disponível. Então, o que significa a escolha padrão, a primeira que está lá em cima ou o que o usuário selecionou e, em seguida, ele exibe selecionado igual selecionado. É uma opção, então endif. Aqui nós temos que quer escrever na inclinação para o produto, para que possamos escrever assimetrias únicas, variant.skew, obviamente poderíamos dizer obter a cinta dupla encaracolada, e ele vai cuspir fora inclinação, e ele só mantém indo, variante ID, título, preço et cetera. É assim que estamos exibindo as opções para esse produto. Opção desativada. Aqui você pode ver a variante title-products.product.vendido para fora. Esta é interessante. Se virem este tipo, o T. Isto é para internacionalização, para tradução. Se você quiser, o usuário final pode editar o idioma e, em seguida, em qualquer lugar que a palavra “esgotado” apareça. Esse é o padrão. Vai reescrever isso para eles. Vamos continuar seguindo em frente. Aqui vamos nós. Aqui está uma boa. Variante atual.preço, dinheiro da tubulação. Sabemos que o preço obviamente está se referindo ao preço do produto, current_variant. Vai ser quatro, porque nós temos novamente, talvez isso venha em tamanhos diferentes ou veio em cores diferentes, e isso mudaria o preço. Como sabemos o que fazer lá? Como sabemos a qual estamos nos referindo? Bem, é disso que vai cuidar aqui. Current_variant.price, ele vai exibir o preço para a variante atual. Então, você rapidamente começa a idéia aqui de que nós poderíamos apenas intuir, porque é linguagem natural, nós poderíamos descobrir o que essa coisa está falando muito facilmente. Ainda nem precisámos de verificar a folha de batota. Então voltamos, nossos velhos amigos, o filtro. Assim que vemos um tubo, sabemos que é um filtro que está sendo aplicado a isso, e que ele diz “dinheiro”. Há algumas maneiras diferentes de produzir preços. Então, vamos verificar. Vamos ver se conseguimos encontrar o que o filtro de dinheiro faz. Aqui está, filtra dinheiro. Ele adiciona o símbolo de moeda. Então, o bom aqui, nós poderíamos se soubéssemos que era sempre uma loja dos EUA, você poderia adicionar o símbolo de moeda lá dentro. Mas se estamos fazendo um tema para o público em geral, não sabemos qual moeda eles estão usando. A vantagem de fazer isso, Shopify smart quando o comprador escolhe sua moeda, ele irá adicionar automaticamente o símbolo correto. Torna nossa vida muito fácil. Em seguida, movendo-se ao longo, chegamos a produtos, product.compare_at. Então, aqui está o preço de comparação. Novamente, comparar no preço referem-se geralmente é MSRP, significa que se ele está à venda, e então aqui vemos, há alguma lógica aqui, se e se. Então, aqui eles fizeram algo legal. Se product.compare no preço máximo for maior do que o preço do produto, ele exibirá a seção. Então, o que está acontecendo aqui. É se isso é lógico incluído para descobrir se o produto está à venda ou não. Então, se o meu produto tem apenas um preço, e não há comparação a preço, sabemos que não está à venda. Se ele tem uma comparação ao preço, e isso é maior do que o nosso preço atual, então nós vamos exibir essas informações para exibir que o produto está à venda. Mudando para cá de novo. Aqui nós temos o filtro novamente para o dinheiro, então nós sabemos que ele está incluindo o cifrão para nós. Etiqueta para quantidade, product.product.quantity. Novamente, isso é apenas você sabe para uma linguagem diferente. Nós poderíamos escrever quantidade lá, mas é mais fácil, e especialmente se vamos vender tema ou ter um tema em uma loja temática. Temos de ter isto aqui para a internacionalização, podermos fazer línguas diferentes. Novamente, o texto add_to_cart também cai sob isso, e aqui voltamos para o nosso velho amigo, desde o início do nosso curso, product.description. Temos esse cara. Não é apenas uma linha, não está embrulhado em html. Não há filtros nisso, porque sua descrição fica escrita nisso, editor WYSIWYG. O que quer que esteja lá dentro, vai cair exatamente o que está no editor da WYSIWYG aqui. Mas se quiséssemos, há filtros onde poderíamos tirar essas coisas. Aqui temos mais lógica. Se coleção, e endif. Eu me pergunto o que está acontecendo aqui. Então, a Shopify tem para migalhas de pão, para fazer migalhas de pão são baseadas em URLs. Então, se eu fosse a um produto diretamente de uma pesquisa do Google, essa seção desapareceria. Mas se eu estivesse navegando na loja, e eu fosse de coleção para produto, que é como a maioria das pessoas faria isso. Essa lógica vai dar um pontapé, e isso vai adicionar. Então, se coleção, e então nós temos outro conjunto de lógica é, se a coleção, podemos aninhar se declarações. Se coleção.produto anterior ou coleção próximo produto, então você pode exibir esses caras. O que está acontecendo aqui? Temos links anteriores, próximos que funcionam no tema. Eu nem os vi aqui. Há configuração de tema que estão ativados, e ainda assim nós. Espere, vamos ver se estou certo. Sim, parece que é um cenário de tema, mas não está aqui. Mas nós ainda sem ter visto, eu ainda sei o que ele vai fazer porque a lógica é muito clara. É muito fácil de seguir. Então, não estamos aqui, temos essa coisa de javascript ficando um pouco mais assustadora. Provavelmente não precisamos nos preocupar com isso, a menos que estejamos entrando em personalização avançada de temas. Eu não deixaria isso te assustar. Mas ainda há algumas coisas que podemos ver. Novamente, aqui temos, então digamos que temos um javascript que todos nós carregamos aqui. Estamos chamando, opção selection.js e, em seguida, estamos adicionando dois filtros a ele, que devemos lembrar antes, URL de ativo da Shopify e tag de script. Olhando para ele, sabemos o que vai fazer. Podemos trabalhar ao contrário. Ele vai escrever uma tag de script, que é na verdade quando você tem vários filtros, lê-los ao contrário. Temos uma tag de script aqui e, em seguida, vamos exibir uma URL para o ativo para a opção selection.js. Vá em frente e encontre isso aqui. Desloque-se para o fundo, sabemos que está lá em baixo. Sim, aí está, seleção de opções. Este é o nosso cara 44, e como pensamos, tag script, URL e URLs para a opção selection.js. Mas aqui podemos ver que ou temos dinheiro aqui, provavelmente para algum tipo de, eles chamam, ação CDN. Você tem que ter certeza que estamos carregando provavelmente a versão atual. Mas normalmente essas coisas com as quais teríamos que nos preocupar, essa é a vantagem aqui é que podemos simplesmente inserir a tag de script e a URL do ativo da Shopify. Está cuidada de nós. Não precisamos nos preocupar com isso. No próximo, vamos fazer a mesma coisa, e vai ficar mais fácil. Poderíamos descobrir esse cara, Produto Líquido, esse é o mais complicado. Esta é a minha primeira vez que atravessa aquele produto Timber, mas eu ainda era capaz de intuir para descobrir o que está acontecendo lá por causa da linguagem natural. Não faz mal que coloquem comentários aqui. Eu recomendo deixar alguns comentários para si mesmo se você se perder nesses temas. 12. Coleção: Vamos olhar para o modelo de coleção. Da mesma forma que o produto, vamos passar por ele e tentar decifrar o que está acontecendo aqui, aplicar o que aprendemos e vai ser mais fácil. A coleção é mais simples do que o produto e, em seguida, o modelo que vamos olhar depois disso são ainda mais fáceis. Então, estamos indo mais fácil à medida que vamos. Se o produto foi um pouco confuso para você, não se preocupe coleções deve ser mais fácil. Se as coleções são confusas quando olhamos para a próxima, isso deve ser claro como o dia. Aqui temos colecção. Líquido. É o nosso arquivo template que se refere a uma coleção de produtos semelhantes a uma categoria e, se entrarmos em documentação líquida, queremos ter disponível para referência ao olhar para essas coisas. Nossos objetos ou variáveis líquidas para coleta. Novamente, é uma sintaxe de pontos. Então, sabemos que vai ser o ponto de coleta. E também temos a folha de truques da Shopify de Mark Dunklee. Obrigado Mark Dunklee. Neste momento, todos devemos enviar-lhe uma nota de agradecimento. Mas vamos encontrar a colecção. Lá está ela, coleção.líquido e já podemos dizer que isso é mais fácil do que o produto. Temos muito menos coleções aqui e algumas delas são óbvias como título da coleção, retorna o título da coleção ou descrição, ou termos a descrição desta coleção, coisas simples. Mas como o Id coleção, transforma o Id desta coleção. Ok, e então nós temos o controle. Retorna o identificador de coleções que é por padrão em minúsculas. Tudo bem. Falaremos sobre alças. Ainda não discutimos alças uma vez. Vamos carregar nossa coleção. Ops, deixe-me dizer isso primeiro. Então, produtos, coleções. Temos sapatos de couro. Vamos clicar nesse cara. Tínhamos feito isso antes. É uma coleção automática. Então aqui temos, então se olharmos para URL é coleções/sapatos de couro. Então, vamos começar por isso. URL e identificador. Um identificador faz parte da URL. Neste caso, são coleções/sapatos de couro. Se estivéssemos falando de uma alça de produto, seria /product/o nome da alça, como sapatos de quadril. Podíamos ver em uma alça que o torna amigável. Faz um caso mais baixo. Ele substitui espaços por traços. Ele se livra de qualquer personagem especial que não poderíamos usar. É muito conveniente porque além de ser a nossa URL, o fim dessa URL, um identificador também é como, em líquido, nos referimos a várias coleções e objetos programaticamente, então vamos manter isso em mente e nós vamos encontrá-lo. Então, eu discordo. Vamos voltar ao nosso tema. Editar HTML. Novamente, estamos trabalhando no tema da madeira, a estrutura da Shopify semelhante ao Twitter Bootstrap. Vamos carregar a colecção. Líquido e aqui está este tipo. Aqui está a nossa coleção de exemplos, os sapatos favoritos do Kurt e passando por aqui. Vamos começar como antes. Então a primeira coisa que encontramos é algo que não encontramos antes, paginar. Mesmo que não o tenhamos encontrado, provavelmente poderíamos descobrir o que isso significa. Paginar coleção.products por 12 o que significa que vamos adicionar, vamos exibir. Digamos que tivéssemos 48 produtos lá, não queremos exibir todos os 48 produtos de uma só vez, mesmo que pudéssemos. Queremos quebrá-lo por 12. Se tivéssemos tantos, eu poderia demonstrar. Por enquanto, não vamos fazer isso. Vamos voltar e olhar para ele. No próximo passo aqui temos a migalha de pão. Snippets. Primeiro de tudo, temos uma inclusão. Uma inclusão é exatamente o que parece. Inclui um trecho. Um trecho é onde sempre que queremos incluir um pedaço de código que não queremos reescrever. Não queremos nos repetir. Queremos adoptar uma abordagem seca a este respeito. Não se repita. Então, vamos descer trechos breadcrumb.liquid e o que ele vai fazer como discutimos antes, quando ele renderizar esta página, ele vai pegar breadcrumbs.liquid, este snippet. A razão pela qual estamos fazendo isso é que isso aparece em várias páginas. Vai aparecer na coleção. Vai aparecer na página do produto. Então, só queremos um lugar para mudar isso. Novamente, podemos ver que faz isso. Se o modelo contém produto ou se o modelo contém coleção. É simples. Olhe para isso, se modelo contém coleção e identificador de coleção. Então há aquela referência para lidar que vimos de novo e podemos até olhar aqui em baixo. Olhe para isso, capture url/coleções e há collections.handle. Então é exatamente como vimos antes. Vamos voltar a colecção. Líquido. Desviámo-nos um pouco, mas aqui vamos nós outra vez. Temos um bom comentário, marcação diferente se existir uma descrição de coleção. Ok, nós estamos mudando como nosso HTML é colocado para fora dependendo se nós temos uma descrição de coleção. Neste caso, neste tema, nós não adicionamos uma descrição, nós apenas temos o nosso título e então nós temos - então aqui vamos nós. Se collection.description não estiver em branco, então esse cara, esse ponto de isolamento não é igual a, está em branco. Então nós temos, nós tivemos um cabeçalho, nós exibimos o título da coleção como vimos, e então nós exibimos a descrição da nossa coleção. vez este cara, a descrição da coleção é feito em um editor WYSIWYG adiciona seu próprio HTML, então não precisamos nos preocupar em embrulhar isso ou mexer com isso aqui. Se quiséssemos, poderíamos adicionar um filtro a um HTML distribuído, mas não vamos fazer isso. Então temos aqui mesmo incluir coleções de classificação. Como usamos essas boas aulas, podemos ver que à direita está nossa seleção de coleção. Então vamos dar uma olhada, e com certeza aqui nós temos este módulo, classificar por e este cara e nós somos inteligentes o suficiente para manter esse trecho e incluir. Então é como para baixo. Olhe para isso. Triagem de colecções. Abra esse cara. Aqui nós temos essa lógica aqui para fazer nossa seleção de coleção. Ele é descartado automaticamente. Então, se quiséssemos, em algumas lojas esta é uma modificação comum do tema. Eu tenho, onde alguém diz bem que eu quero que as pessoas sejam capazes de classificar por mais vendido e por ordem alfabética e preço, mas eu não quero que eles sejam classificados por data. Não quero que as pessoas se preocupem que algumas coisas são antigas ou desatualizadas. Então, se quisermos, já que estamos aqui, vamos em frente e podemos matar isso e vamos ver o que acontece. Então, agora, não está mais aqui. Legal. Então, eu estou indo junto, nós temos este comentário. Opa! Ainda estou na triagem de colecções. Vamos voltar para a coleção.líquido. Lá vamos nós. Outra coisa, o editor da Shopify que está embutido diretamente no tema, é ótimo. Novamente, você pode usar textmate se quiser, use o seu próprio e sincronize-o. Mas, não, vamos deixar isso para desenvolvedores mais avançados como Gavin Ballard, que vai falar sobre isso em um curso diferente de Skillshare. Está bem. O que é que temos? Onde eu estava? Então, nós cobrimos essa lógica se houver uma descrição versus não uma descrição. Estamos fazendo uma inclusão para a classificação de coleções. E aqui vemos por que não incluímos. Porque temos que repeti-lo devido a essa lógica. Eu não quero ter esse código lá duas vezes, especialmente quando estou fazendo alterações nele como vimos. Então, é por isso que fazemos o trecho e colocamos lá duas vezes. E muitas vezes, snippets são legais apenas quando você está trabalhando em um tema muito. Mantém o código limpo. É mais fácil de ver. Mais fácil de ler de relance. Tudo bem. E depois acabamos com o nosso endíf. Então, aqui temos um comentário. Use uniforme de grade de classe para ter colunas de tamanho uniforme limpar umas às outras corretamente em cada ponto de interrupção. Então, sabemos que adicionamos algo aqui para nossos pontos de interrupção responsivos. Então, temos um uniforme de grade. Eu não sei necessariamente que isso precisava de um comentário. Eu acho que nem todo mundo é super responsivo. Está bem. Temos um comentário. E novamente, a razão pela qual esses comentários não são apenas embrulhados em tags de comentário HTML, eles são envoltos em tags líquidas é porque eles não serão renderizados e não chegarão ao usuário final. Então, eles não vão vê-los se eles estão se sentindo snoopy. Então você pode colocar o que quiser lá. Ele também vai apenas fazer o tamanho da página um pouco menor. Então, falamos sobre loops antes. Aprendemos para não ter medo de loops. E aqui temos um loop. Então, para o produto e coleção de produtos-assim cada produto que está nesta coleção de produtos, vamos incluir item de grade do produto. Este é um lugar perfeito para colocar um trecho, claro. O item da grade do produto refere-se a um produto. Esta unidade. Eles têm uma bela convenção de nomes aqui, é por isso que você quer dar aos seus snippets bons nomes que você sabe o que eles são em um piscar de olhos. Imagine se todos esses trechos fossem rotulados como A1, A2 e widget. Não vai ajudar. Então, definitivamente, manter uma boa convenção de nomes que descreve o que está acontecendo. E, ao mesmo tempo, o usuário final não verá isso se estiver cutucando seu código. Então sinta-se livre para usar nomes longos, expressivos e descritivos. Então, ok para incluir produto e, em seguida, temos um outro. Então, poderíamos dizer aqui que é para o produto em coleção.products. Senão, o que significa que se não houver mais nada, ele vai pegar - então, se collection.handle é igual a todos, e as tags atuais são nenhuma, adicione produtos padrão para ajudar com a integração somente para coleção/tudo. Muito bem, muito inteligente. Até faz algo louco. Ele carrega diferentes CSS. Olhe para a tag de folha de estilo de URL de ativo global. Provavelmente não teria isso em seu próprio tema em um tema padrão. Mas isto é inteligente. Incluir coleção vazia de integração. Está bem. Então, sabemos que fizemos. Só acontece em/tudo. Só acontece se estiver vazio. Então, vamos atender ao primeiro requisito. Então, é uma coleção de alças. Nós temos... vamos acertar o punho para todos. Então é o que ele faz, tudo é uma coleção padrão que existe na Shopify que exibe todos os seus produtos de uma só vez assim. E se estivesse vazio, então, nós só encontramos metade da lógica porque nós fizemos se e tags atuais são iguais a que ele faria outra coisa. E, em seguida, se a coleção existe, mas está vazia, exibir mensagem. Temos coleção de parágrafo geral sem correspondência. Vimos isso mais cedo quando fizemos a demonstração for-loop. Podemos ter uma coleção que não tem nada nela. Então, colocamos essa outra lógica e ela cai nesse cara. Mais uma vez, isso é da tradução do idioma. Mas você poderia reescrever isso se quisesse. Você não poderia fazer isso em um tema enviado para a loja de temas. Mas no seu próprio, você poderia fazê-lo. Então, vamos apenas dizer, “Oops, nada lá, chefe, endif, fim.” Então, isso conclui nossa lógica e conclui nosso loop. Agora, vamos falar com esse cara interessante. Temos paginação. Então, se houver várias páginas, se paginate.page for maior do que uma, então se tivermos mais de uma página, isso vai disparar essa lógica, que é nossa paginação. Então, fazemos uma regra horizontal para que pudéssemos vê-lo, paginação de classe div. Aqui está o nosso paginado. Olhe para todos esses filtros. Esta coisa é fabulosa com filtros. Tudo bem. Paginate, paginação padrão como um identificador. Interessante. Será que podemos encontrar isso na folha de batota? Lá está, paginação padrão como um filtro, usado em conjunto com a tag paginate liquid. Bem, isso não é particularmente útil. Vamos ver. Tudo bem, vamos encontrá-lo. Então, aqui está um problema agora. Há um limite de 50 produtos quando você faz paginação. Geralmente, então, eles se dividem uniformemente eu faço 48. Bem, vamos em frente e encontrar o nosso paginado. Lá está, paginate objeto paginate padrão. Então, aqui vamos nós. Você também pode usar- paginates tag, é construído usando atributos do objeto paginate. Ou, você pode usar a paginação padrão como uma alternativa rápida. Então, isso é muito inteligente. Você pode escrever sua própria paginação se quiser ficar chique, ou porque temos nossas diferentes opções aqui, podemos fazer qualquer paginação que quisermos, ou podemos carregar a paginação padrão. Então, em qualquer lugar que quisermos usar a paginação, assim podemos entrar lá. Podemos pensar nisso como se fosse um snippet inevitável. Então, nós escrevemos entrada paginate saída de paginação padrão, e lá vai ela. Isso é um exemplo. Então, vamos tentar. Podemos forçar esta coisa a correr. Vamos subir e vamos deixar nossa coleção para paginar por três. Então vamos carregar. Tudo bem. Então, aqui devemos ter o suficiente. Deve paginar para nós. Olhe para isso. Ele faz. Então, há sua paginação padrão, um, dois, três. Vamos ver a do meio. Temos estas setas esquerdas direita. Porque podíamos ver isso acontecendo aqui. Substitua aspas anteriores à esquerda por uma seta para a esquerda. Então, temos nossas entidades HTML. Vamos verificar isso. Vamos retirá-lo e eu mostro-te o que está a fazer lá. Porque este é um ótimo exemplo de filtro. Filtros podem usar isso. Quero dizer, de muitas maneiras, isso é semelhante a uma expressão regular. Veja isto. Então, lá. Então, esses foram os comportamentos padrão que anteriormente - fomos capazes de usar filtros para editar o snippet padrão, mesmo que de outra forma não teríamos acesso a ele, o que é inteligente. Na verdade, prefiro isso. Acho que é um melhor exemplo de paginação. Mas o outro lado é muito limpo, muito limpo. E nesse cara, eu sei. Podemos separá-lo. Gosto dessas flechas, mas não gosto de me livrar da palavra a seguir. Então, vamos tentar... Vamos fazer isso. Se deixarmos a palavra a seguir, mas substituímos isso. Salvar. Boom. Olhe para isso. Muito legal. Então, vamos procurar... apenas pegue as informações desse filtro. Então, aqui você tem substituir e substituir. Você também pode substituir primeiro, o que é legal. Então, ele só vai fazer o primeiro que é útil para loops como uma coleção. Essa é a descrição que temos aqui. Em seguida, apenas substituir regular, substitui todas as ocorrências de uma string por outra. Normalmente, fazer coisas assim em outras linguagens, PHP, seja lá o que for, envolveria expressões regulares, seria muito louco. Aqui, é muito simples. Você apenas escreve. Não é diferente de encontrar substituto em um aplicativo de texto. Substitua o que você deseja substituir pelo que você está substituindo. Está bem. Então, é assim que a coleção funciona. Estamos aplicando essa lógica novamente. Então também aprendemos um pouco sobre... Aprendemos alças, paginação, e aquele filtro puro substituto. Então, apenas ressalte lá, tenha em mente que quando você está fazendo - em uma coleção onde você está exibindo produtos, há um máximo de 50 que você pode executar. Normalmente, você quer dividir por algo legal. Então, normalmente vamos fazer um máximo de 48. Está bem. A seguir, vamos olhar para ... Não precisa se preocupar se este foi complicado. Vamos olhar para page.liquid, que é o mais simples de todos os nossos modelos. 13. Página: Está bem. Nós cobrimos e aplicamos o que aprendemos a produtos, coleções e, em seguida, um ficou um pouco louco com paginação. Mas prometo que estamos na mais fácil de todas, páginas. Então, nós temos, aqui está sobre nós página e felizmente, não é muita coisa acontecendo aqui. Assim, assim como antes, um monte de nossa referência, nossos objetos para página e eles são tão poucos. O que é bom sobre eles, tudo isso de relance você pode descobrir o que eles fazem. Autor da página, conteúdo, é como descrição do produto. É apenas o conteúdo da página. O cabo de que falamos, é esse cara aqui em cima. Sobre nós, e sabemos o URL. Também é como podemos referenciá-lo através da loja. ID, conceito semelhante para lidar. Páginas publicadas em, é apenas o nosso filtro de data ou nosso carimbo de data/hora e, em seguida, podemos usar o filtro de data para formatar isso de uma maneira específica. Então, é claro que também temos a nossa folha de truques. Nossa maravilhosamente marcada na folha de truques limpa. Então, o mesmo negócio só nos dá acesso rápido a ele. Mas páginas não são tão complicadas. Então, aqui temos o nosso sobre nós e neste ponto, você provavelmente poderia escrever este sozinho, mas, no entanto, vamos dar uma olhada em modelos. Vamos mergulhar em temas, editar HTML. HTML, como se pronuncia HTML? Então, na minha cabeça eu realmente digo hitimal, mas isso não pode estar certo, ou que tal metal quente? Eu não sei. Ok, eu discordo, modelos, página.líquido. Você pode notar esse cara, page.contact.liquid, vamos falar sobre o que está acontecendo lá. Mas vamos apenas olhar para a página.líquido. Abençoe-nos, esta coisa tem 17 linhas. Este é o mais fácil e simples que já vimos e garanto que neste momento você deve ser capaz de olhar para ele e saber o que está acontecendo. Não é difícil. Temos apenas o nosso layout padrão, nossas coisas HTML aqui. Em seguida, o título das páginas envolto em tags de cabeçalho, maravilhoso! Comentário, conteúdo regular da página vai aqui. Bem, é claro. Em seguida, o conteúdo da página é isso. Não, há sobre nós página. Isso é tudo o que há para ele. Mas enquanto tivermos isto aberto, vamos tentar mexer com outras coisas. Então, nós temos, olhar para que nós temos página publicada em e o filtro de data e nós temos autor. Ok, então, vamos mexer com os dois. Certo, então, temos esse cara, bem aqui embaixo. Vou em frente colocar um parágrafo lá com meu autor de página, page.author. Tudo bem. Vamos colocar lá, postado por página.author e, em seguida, há um livro de contabilidade nele. Eu vou ser um menino mau. Vamos embrulhar isso em algumas tags de enfatizar, salvar, atualizar. Veja isso, postado pela Shopify. Porque este é apenas um tema padrão que está aqui que foi adicionado na loja, então ele é publicado pela Shopify. Caso contrário, indicaria o nome do agente que o fez. Então, já que estamos nisso e estamos mexendo com isso, vamos mexer com esse cara, página publicada em. Então, poderíamos dizer e vamos embrulhar um líquido, salvar, atualizar. Está bem. Então, ele exibe exatamente quando foi publicado em, mas não é de uma maneira útil e útil, a menos que você esteja realmente em terminais Unix. Então, temos que usar o filtro de data é o que eles sugerem. Então, vamos clicar nesse link. Aqui, podemos formatar o carimbo de data/hora em outro formato de data, em como queremos fazê-lo, sua preferência talvez a preferência do país, mas eles nos dão este exemplo, poderíamos dizer terça-feira 22 de abril, 14. Tudo bem. Não gosto desse T-U-E, é abreviado. Quero o nome completo do dia da semana. Então é sensível a maiúsculas e minúsculas. Devíamos fazer um “A “maiúsculo, desculpe. Vamos copiar o exemplo deles e voltar para cá. Tudo bem. Então, é um filtro, então nós adicionamos um pipe e, em seguida, colamos em nossa data de filtros e, em seguida, estes são os atributos do filtro. Vamos salvá-lo. Olhe para isso, já está muito melhor. Mas eu não gosto de todas essas abreviaturas. Então, vamos em frente e mudar. Se trocarmos a minúscula a que é a data abreviada para A maiúscula, deve dar-nos o dia inteiro. Lá vamos nós, postado segunda-feira. Vamos ver que outros temos aqui. Então, aqui temos sábado, terça, janeiro. Eu quero o dia do mês zero acolchoado. Isso é o que eu gosto. Então, aqui nós vamos apenas torná-lo mais limpo. Dia do mês. É isso mesmo? Desculpe, dia do mês, quis dizer a data do mês. Dia do mês, vamos formatar a data. Vou ver isto aqui. Este filtro irá até simplificar bastante a coisa toda. Então, podemos fazer dessa forma ou se fizermos isso. Opa! Largue isso, salve, recarregue. Lá vamos nós. É uma maneira super limpa de fazer isso, parece bom e temos nosso primeiro encontro por lá, então funciona. Páginas são muito simples. Aqui em baixo temos page.contact e temos duas páginas diferentes. Vou parar aqui e é nisso que vamos mergulhar a seguir. Vamos descobrir o que está acontecendo aqui 14. Modelos e snippets alternativos: SkillShareDemo, temos uma loja em cima, temos a nossa Demonstração Sobre Nós nesta página, seu modelo de página normal, e é disso que temos estado a falar. Temos andado a percorrer os nossos modelos. Aqui nós temos, nós podemos ver aqui dentro há page.liquid e page.contact.liquid. Eu queria falar sobre o que está acontecendo lá, qual é o acordo. Então, nós temos isso. Vejamos nossa página de contato. Então temos esta página, é Fale conosco, Fale com Kurt. Se olharmos para cima aqui em nossa URL, vemos que vai para páginas de corte. Ok, então sabemos que é uma página, mas tem uma forma chique, layout diferente deste, que também sabemos que é uma página. Então, como eles fazem isso? Se olharmos aqui temos, page.liquid, page.contact.liquid. Na Shopify, você não está limitado a apenas esses modelos, você pode adicionar, podemos criar várias versões de modelos. Não sei qual é o limite, mas certamente nunca o atingi. Então, temos page.liquid e depois há page.contact.liquid. Então, quando você nomeou que, isso se torna página é apenas o modelo padrão, e então agora existe um modelo de página alternativo chamado Contato. Então, da mesma forma que antes, há html aqui e você pode adicionar o que quiser. Neste exemplo, cada tema é necessário para ter um modelo de página Fale conosco com este formulário aqui. Mesmo o formulário faz parte da Shopify, faz parte do líquido. Então, você não precisa se preocupar em mexer com formulários e tem anti-spam nele, muito bom. Então, vamos verificar, como aplicamos isso? Como é que isso funciona? Se abrirmos nossas páginas e descermos para Contactar-nos, role para baixo, página de modelo e página.contact. Então, se meu arquivo tem vários modelos, esse cara vem aqui com page.contact e page, legal. Você pode fazer isso para quase tudo, você faz isso para produtos, você pode fazê-lo para coleções, é extremamente útil. Por exemplo, nós fizemos, digamos que você tenha um cliente ou queira iniciar um produto e colocá-lo no Kickstarter e você o tenha na loja Shopify. Mas você não pode vender seus produtos enquanto o Kickstarter estiver em execução, então os produtos Kickstarter, você pode criar um modelo alternativo chamado product.kickstarter.liquid e depois trocar seu botão Adicionar ao carrinho por um que diz Back nos on Kickstarter e Goes to Kickstarter, que seria um exemplo perfeito de onde usar um modelo de produto diferente. Então, vamos tomar um, nós definimos page.contact e você poderia ver se eu mudei para a página e pressione Salvar e atualizar, olhar para isso, Entre em contato conosco, Fale com Kurt. Aqui, é aquele outro modelo de página que fizemos completo com autor e data. Vamos definir esse cara de volta para page.contact e apertar Salvar, atualizar, agora ele está de volta para isso. Então, vamos olhar para página.contact.liquid. Então, se nós descermos, vamos ver contato formulário, é tão simples de adicionar um formulário, muito, muito simples coisas e endform. É isso, e esse cara é a nossa forma. Os formulários são muito simples na Shopify, mas isso é uma coisa separada que falaremos. Na verdade, acho que não vamos chegar a isso neste. Ok, então vamos fazer, eu falei sobre o produto. Líquido, então vamos tentar isso. Vejamos como fazemos um, como fazemos um desses modelos alternativos? Então, eu tenho product.liquid aqui, clique em Adicionar um novo modelo e criar um novo modelo para e vamos dizer produto chamado Alternativo. Vamos usar esse exemplo, vamos chamá-lo de Kickstarter. Boom, agora eu tenho product.kickstarter.liquid aqui, e eu não quero mexer muito com ele. Mas, vamos mudar algo sobre isso. Vamos encontrar algo para mudar. Vamos ver a descrição. Então, aqui em baixo vamos dizer, basta adicionar em breve para Kickstarter, salvar, e vamos mergulhar em produtos. Produtos, temos nossos chutes legais, e olha o que apareceu aqui. Agora, nós temos modelo de produto e product.kickstarter, salvar, visualizá-lo, e agora, há uma linha que adicionamos, Em breve para Kickstarter versus se eu for, vamos voltar para, olhar para qualquer outro, ele não Não tenho essa linha. Então, torna-se muito fácil adicionar esses modelos, que levou alguns segundos, que levou alguns segundos, e é útil para clientes que dizem, “Bem, eu quero que alguns produtos se pareçam com esse layout e outros produtos tenham esse layout, e eu quer ser capaz de escolher manualmente.” Ok, então você apenas faz um modelo alternativo para eles e então é tão fácil como pegá-lo aqui. Então, é muito bom, muito fácil para todos os envolvidos. Eu gosto muito. É uma ótima característica. Usamos isso com frequência. Quero falar sobre trechos. Já vimos trechos. Nós mexemos com eles um pouco, mas nós não fizemos um. Nós realmente não cavamos nele. Então, temos nossa pasta de trechos e nela estão exatamente esses trechos de código. Há duas razões para você querer usar um trecho. A primeira é, para que pudéssemos tomar uma abordagem seca. Ser seco não se repita. Nós não, se um pedaço de código aparecer várias vezes, podemos colocá-lo em um snippet, incluí-lo em qualquer lugar que precisamos, em vários modelos, e então podemos apenas, se tivermos que atualizá-lo, podemos atualizá-lo no snippet e ele é atualizado em todos os lugares em todo o site automaticamente, o que o torna muito conveniente. A outra coisa, que podemos querer usá-lo é apenas para manter o código limpo, e isso é realmente para nós, como humanos, tentando classificar através dele e ver as coisas de relance. Então, agora é isso que eu quero fazer como exemplo. Então, muitas vezes, digamos que um cliente tenha ou você tenha um tema mais antigo e, por qualquer motivo que você queira mantê-lo, você queira atualizar para um novo tema, mas você deseja adicionar um novo recurso como tags de gráfico aberto. Tags de gráficos abertos são descrever coisas, descrever o conteúdo de uma página para motores de busca, para redes sociais, e então você obtém aquele belo e rico snippet. Desculpe, bem, sim, um snippet rico, mas dados ricos quando as pessoas o compartilham. Então, aqui eu tenho da Shopify, do Github, eu tenho todo esse código, e eu vou copiá-lo e todo esse código nos permite criar, manipula logicamente nossas tags de gráfico aberto. Então, se eu voltar para minha página inicial, sob ajudantes eu vou colá-lo lá. Olhe para isso, é enorme. Ele ocupa uma tonelada de espaço, não parece bom, um pouco de dor se eu tiver que trabalhar no tema se eu estiver trabalhando nele. Não parece limpo como antes, então em vez de fazer isso, vamos criar um trecho e colocar esse cara para cima, ele nos pede para criar um novo trecho. Então, vejamos o que a Shopify chamou, tags de traço meta de traço social. Então, queremos ter certeza de que estamos usando um nome descritivo para que pudéssemos ver de relance, e se alguém mais tiver que trabalhar nesse tema, eles poderiam ver de relance o que estamos fazendo. Então, vamos fazer tags meta traço social. Não adicionamos esse líquido a ele, porque quando criamos snippet, Shopify faz isso por nós. Tudo bem, agora eu entendi, mas eu só tenho um arquivo vazio, então eu vou colar meu grande bloco de código bagunçado lá dentro e salvar. Ok, então eu tenho este código, agora eu posso fazer referência a isso em qualquer modelo usando o comando Include. Então, vamos voltar ao tema.liquid e nesta seção auxiliar, vamos adicioná-lo. Então, digamos, é muito fácil, fazemos colchetes, fazemos colchetes, por cento incluem o comando faz sentido, e aspas simples, meta tags sociais e, em seguida, fechá-lo, fácil, salvar. Então, aqui nós atualizamos nossa página e para nós ela não muda nada, então nós temos que olhar para a fonte. Desça até onde chegamos, ajudantes e aqui está, temos um, dois, três, e aqui é onde começa. Infelizmente, adicionou um comentário lá para que possamos ver isso em um relance. Mas lá, é inteligente, escolha se então ele é criado nossas tags de gráfico aberto para nós. Então, vamos voltar, e tudo o que é com esta linha, o single include e se voltarmos para as nossas meta tags sociais, poderíamos ver esta primeira linha aqui, é esta linha aqui, então ela é mantida limpa, é facilitada, mas Vamos tentar outra coisa. Então, eu tenho o tema. Líquido, tenho o meu incluir, o que acontece se eu soletrar errado? Então, ou eu erroneamente somo líquido a ele. Ok, vamos salvá-lo e vamos ver o que acontece. Recebemos um pequeno código de erro agradável, ele é legível para que assim pudéssemos depurar esse recurso fácil e agradável na Shopify. Eles estão cuidando de nós. Então, temos erro de líquido, não foi possível encontrar ativo, e é porque ele adiciona ponto líquido para nós. Então, isso é fácil de consertar. Torna a vida simples. 15. Checkout: Vamos percorrer nossa página de carrinho de compras. É uma página importante e é surpreendentemente simples de trabalhar. Na verdade, a maneira como a Shopify configurou para nós, é muito simples. Então vamos descobrir o quão fácil isso é. Para fazer isso, vamos olhar para o nosso modelo carrinho.liquid e, assim como com a caminhada através de outros modelos, vamos aplicar o que aprendemos aqui e passar pelo carrinho. Então, se vamos fazer isso, devemos ter nossa referência aberta, objetos de carrinho. Há realmente muito poucos objetos que o carrinho usa aqui, e, em seguida, enquanto estamos nele, nós também podemos olhar para o modelo carrinho.liquid que nos dá algumas referências de como as coisas devem funcionar. Então, no carrinho. Liquid, primeiro, temos essa lógica se porque e se nada estiver no carrinho? Uma grande modificação para o tema pode ser fazer - então aqui, temos se cartão.item count for maior que zero, se houver itens no carrinho, mas se não houver, poderíamos modificá-lo para dizer: “Aqui estão alguns itens em destaque. O que pode ser uma maneira inteligente de alterá-lo. Então aqui, temos um item no carrinho e esperamos que sim. Esperamos que as pessoas estejam comprando de nós. Normalmente, na maioria dos temas, será apenas uma tabela. É assim que eles lidam com isso. Temos o nosso título, apenas o título geral do carrinho, este tipo, isto está aqui novamente para a internacionalização. O carrinho é apenas um formulário. É um formulário e ele posta e é isso, mas isso torna sua vida muito simples usando isso, especialmente se você tem apenas habilidades HTML/CSS, você não precisa se preocupar em mexer com Javascript para fazer este formulário funcionar. Então aqui, nós pudemos ver, nós já abrimos nossa mesa. É uma forma muito comum de o fazer. As etiquetas para o carrinho, novamente, nós temos esses rótulos de internacionalização, e nós vamos para baixo, e a primeira coisa que encontramos é nosso bom velho amigo, o for- loop. Os itens no carrinho não são referidos, são produtos, não são referidos como produtos, são chamados de itens. Então, para o item no carrinho.items, ele vai loop through. Então, cada item no carrinho, neste caso, é uma linha nessa tabela à medida que passamos por ela. Aqui, fizemos uma coisa boa. Temos a imagem aqui. Colocar a imagem no carrinho é um ótimo impulso conversões porque ajuda a pessoa a entender : “Sim, este é o item que estou comprando, eu vou obter o que está na foto.” Então aqui, nós adicionamos o URL a ele, para eles possam clicar de volta, o que não é uma má idéia, se alguém quiser verificar alguma coisa. E você está aqui, então pegamos a fonte da imagem e até jogamos a velha etiqueta lá, com o título. Então, se passarmos por cima dele, deve mostrar a velha etiqueta? Vamos inspecionar o elemento. Lá está ele, alt bom e velho sapato, então ele faz relatar o título do produto lá dentro. Ei, vamos voltar, continuar olhando através disso. Então, o mesmo negócio para o- queremos exibir o título do produto. Então é item.product.title e aqui em cima, fazemos os URLs, vinculamos de volta a ele, a menos que seja uma variante. Então, se é uma variante, o que estamos fazendo aqui? A menos que o título contenha padrão e então temos, ah, então temos uma pequena tag com o título da variante, muito inteligente. Então, se o sapato veio em várias opções ou assim, digamos, tamanhos diferentes e eu escolher o tamanho, ele apareceria aqui. Muito inteligente. Assim as pessoas sabem : “Estou a apanhar a coisa certa.” Se eu visse o sapato sem o tamanho ou a cor, isso pode confundir-me, preocupar-me, matar conversões. Aqui, temos um cenário temático. Então, se em minhas configurações, habilitei carrinhos ou fornecedores. Ele vai mostrar quem o fabricante, item. fornecedor. Então vamos rolar por aqui. Ok, então aqui, ele está falando sobre propriedades do item. Propriedades do item é uma modificação interessante tema e você pode querer ter, digamos, você vende camisas monogrammed. Você sabe que isso é como personalização de personalização no produto. Você pode usar as propriedades do item de linha para armazenar variáveis individuais partes de informações sobre o produto. vez, isto é uma modificação do tema. Não é padrão, dependendo da loja, você pode ou não precisar. A maioria não vai, mas há definitivamente aqueles lá fora que fazem e , em seguida, você pode escrever em vários itens de linha. Então aqui, podemos ver p. para, p em propriedades do item. P.first, o arquivo de verificação e upload foi associado. Então ele até carregava arquivos com ele. Então, digamos, estavam imprimindo algo. Aqui, podemos fazer isso. Então vamos em frente, e aqui, podemos ver que eles adicionaram o comentário. É opcional e eles têm o link para a documentação sobre como fazê-lo, como faço para coletar informações adicionais. Isto é, neste caso, nós estamos fazendo isso no carrinho e, em seguida, vamos postar um e-mail ou uma confirmação, o e-mail do pedido e você tem que modificar isso também para fazê-lo funcionar. Ok, daqui para frente nós temos esse cara, carrinho de mudança de linha forloop.index. Podemos pensar que este botão de remoção é algo complicado, mas se olharmos para ele, realmente não é. É que eles só usam, você sabe, nós estamos apenas postando em um formulário. Nós temos um link aqui, então a mudança de carrinho, nós temos esta linha de cadeia de trimestre e forloop.index. Então, se você se lembrar de nossa aventura anterior com loops, forloop.index apenas produz o que iteração no loop que somos. Então aqui temos, esta é a linha um. Então forloop.index apenas emite um e se eu adicionar dois itens, ele se tornaria dois, e, em seguida, usando essa string de consulta, ele então define a quantidade para zero que funcionalmente remove. Então, quando você remove um item, você apenas define a quantidade igual a zero como uma força do núcleo. Certo, então exibimos o preço novamente usando filtros. Queremos que a Shopify renderize a moeda para nós. Então usamos o filtro de dinheiro que formata bem e adiciona a moeda a ele. Indo para baixo, talvez queiramos mudar a quantidade. Então aqui, muito simples, é uma entrada, e então temos bem aqui. Então atualize item.id. item.id é um número exclusivo em vez da alça para o produto para identificá-lo e, em seguida, o valor torna-se apenas qualquer que seja a quantidade do item. Etiqueta total do carrinho, mesmo negócio. Então ele vai agarrar, nós temos item.line_price, e então novamente, um filtro para configurá-lo como para formá-lo como moeda. Agora, a razão pela qual temos... em vez de, temos preço aqui em cima e preço de linha aqui em baixo. Este é o preço da quantidade de vezes, então o preço da linha é o preço vezes a quantidade desse item e, novamente, você não precisa fazer nada, Shopify está calculando isso para você. Vamos descer, então temos “se”. Aqui está outra configuração de tema sobre a qual ainda não falamos, mas falaremos. Temos uma configuração de tema para notas de carrinho habilitada. Se as notas do carrinho estiverem ativadas, ele criará um campo de formulário para adicionar uma nota, e uma nota sobre notas, você só poderá ter uma no seu carrinho. Você não pode fazer vários, mas então há trabalho em torno de, há outras maneiras de escrever informações adicionais. Mas para apenas uma nota de carrinho normal, essas instruções especiais, você poderia colocá-lo lá, e isso é provavelmente, cada tema suporta isso. Então isso é muitas vezes o que as pessoas usam como um trabalho ao redor, em vez de ter que mexer com como forrar propriedades. Você poderia apenas dizer, tudo bem, anote o que quer que seja o que eles precisam. É a saída mais fácil. Tudo bem e depois, coisas normais. Quando voltarmos, aqui em cima, terminamos o ciclo. Uma vez que estamos fora do circuito, as coisas ficam ainda mais simples. Realmente, nós só queríamos exibir o subtotal e nosso botão de checkout, mas como é que esse botão de checkout funciona? Certo, o que temos? Entrada check-out, carrinho.generalcheckout. Para que pudéssemos ver que é incrivelmente simples. É apenas uma entrada e vamos ver a documentação para esta coisa. Considerações de modelo, prosseguindo para a finalização da compra. Tudo o que está fazendo, porque o carrinho é um formulário, é apenas postar o formulário na Shopify e você só precisa da entrada, é isso. Quero dizer, é realmente tão simples quanto parece. É tudo o que há para ele. Então, tudo bem, temos que verificar que tipo de modificações podemos fazer isso? Podemos fazer propriedades de item de linha que há guias de documentação disponíveis para fazer isso. Também podemos fazer mais algumas coisas. Temos o nosso subtotal, 110 dólares. Digamos que oferecemos frete grátis. Poderíamos adicionar lógica aqui que exibe, poderíamos usar se então mais. Então poderíamos dizer, subtotal é mais de 100 dólares, ele exibe uma mensagem de frete grátis. Então vamos tentar isso. Aqui vamos nós. Vamos ver encontrar o meu preço. Então temos carrinho.Totalprice. Vamos copiar esse cara. Nós vamos incluí-lo, vamos apenas colocá-lo direito nesta tag de parágrafo. Então, vamos ver. Por cento, se carrinho.preço total é maior que 100, é isso, você se qualifica, eu digo, mais frete grátis. Ok. Vamos encerrar nossa declaração. Percentual. Endif. Legal. Tudo bem. Salve isso. Vamos ver o que acontece. Ainda assim, temos isso, além de frete grátis. Ok. Agora, eu fiz essa coisa engraçada aqui onde eu tenho esse número. Por que eu fiz isso dessa maneira? Ok. Então, vamos derrubar para 100 e ver o que acontece. Na verdade, aqui. Faremos do outro jeito, igual a 100. Salvar. Ainda funciona. Ok. Mas o nosso preço é 110. Então, adicione zeros duplos lá, salve, atualize, ainda exibe. Vamos adicionar outro ali. Agora não aparece. Então, o que está acontecendo aqui? Por que está fazendo isso conosco? O motivo é, o preço, se você não tiver esse filtro aplicado a ele, Shopify o expressa como em centavos, em centavos. Então, você tem que multiplicar, se você está fazendo matemática como esta, você tem que multiplicar vezes 100. É tudo o que há, o que está acontecendo lá. Mas isso é uma modificação de taxa muito agradável, muito boa e simples que qualquer um pode fazer. Isso também aumenta a taxa de conversão. Muitas vezes fazemos isso para os clientes, se eles oferecem frete grátis. Tudo bem. Então isso vai nos levar ao “Checkout”. Então, quando eu estou no carrinho e eu clicar em “Checkout”, sabemos que ele publica um formulário, url. A Shopify cuida disso para nós, e nos manda para cá. Aqui, temos, esta é a versão mais recente do checkout da Shopify. É bonito, é responsivo, mas se você não configurá-lo, é muito simples. Pode não corresponder necessariamente à sua loja. Se temos, temos este botão “continuar o método de envio”. Não temos um logótipo aqui em cima. Se voltarmos atrás, eu tenho essas grandes e ousadas fontes Helvetica e tudo está em cinza. Talvez não seja o melhor para a conversão, mas certamente é bonito. Então, como fazemos isso? O que podemos fazer com este cheque? Se entrarmos em personalizar o tema, as configurações regulares do tema, Shopify adicionará automaticamente esse painel, esse painel “Finalizar compra”. Se clicarmos nesse cara, temos algumas opções aqui. Então, o primeiro é fundo personalizado. Então, não temos antecedentes aqui. Então, vamos olhar para a loja demo, uma loja real, Tattly, loja Shopify muito bem sucedida, vende tatuagens temporárias. Se eu clicar em check-out, bem, olhe para isso. Ali está a nossa bandeira. Eles até têm suas correspondências de logotipo. Bem, aqui, sua imagem de logotipo, e mesmo que você já tenha carregado uma imagem para sua loja, basta selecionar “Loja” e pronto. Sua imagem é adicionada. É assim tão simples. Em seguida, dependendo da sua loja, se o seu logotipo estiver à esquerda, no centro ou na direita, você pode fazer essa correspondência. Então, ele transporta. Então, seu mastro, que é o que as pessoas vêem primeiro eles lêem padrão suficiente, eles verão isso primeiro e eles saberão que este é o site certo. Isso parece o mesmo, isso parece certo para mim. Podemos enlouquecer, obtemos a “Área de conteúdo principal”, poderíamos definir um fundo personalizado. Na verdade, nunca fiz isso. Quero mantê-lo limpo, bonito. O “Resumo do pedido”, podemos defini-lo. Então, aqui, vamos voltar. O lado esquerdo é que a área de conteúdo principal, lado direito é a área de resumo de conteúdo. É a isso que se referem quando falam sobre esses antecedentes. Você também pode definir a cor de fundo. Então, cor de fundo, aqui vamos nós. Vamos torná-lo um pouco rosa, dar toda a tonalidade lá, salvar as alterações e ver o que isso faz. Então, nós realmente fizemos isso se destacar. Talvez você perceba algo legal que acontece aqui. Eu não tenho certeza de como eles fazem essa magia, mas a fonte, a cor para isso parece que ele está definido automaticamente para nós dependendo da cor de fundo que escolhemos. Podemos ver, se tivéssemos escolhido um logotipo, ele teria aparecido lá. Então, vamos voltar. Vamos nos livrar daquele cara, nosso logotipo. Vamos definir de volta para nenhum, e temos algumas outras opções aqui. Então, “Tipografia”, não podemos escolher nenhuma fonte voluntariamente, mas temos acesso a algumas fontes do sistema que poderíamos escolher. Nós também temos uma boa seleção, uma seleção bastante ampla de fontes do Google que carregam. Muitos temas usam o Google Fonts. Então, essas são escolhas muito comuns. Também podemos escolher temas que se encaixam com o nosso, mesmo que não seja exatamente, você pode obter um que esteja próximo. A maioria das pessoas não são designers, eles não vão pegá-lo. Então, vamos ver. Para “cabeçalhos”, gosto de “Oswald”. Dê um bom rótulo, e então para o nosso “corpo”, vamos fazer, o que é uma boa combinação para isso? Na verdade, quer saber? Aqui, é um dos meus favoritos. Tudo bem. Temos “Sotaque”, “Botões” e “Setas”. Eu definitivamente quero, meu botão “Adicionar ao carrinho” é para conversão de qualquer maneira. Quero que meu botão “Adicionar ao carrinho”, meu botão “Checkout” e meu botão “Prosseguir para finalizar a compra”, meu botão “Comprar” sejam da mesma cor. No nosso tema, já os temos cinzentos. Então, vamos em frente e definir isso, definir esses acentos para cinza, definir meu botão para cinza, e setas, vamos deixar vermelho. Vermelho parece uma boa cor para flechas. Certo, vamos refrescar esse cara. Olhe para isso. Já, mesmo que não tenhamos controle total sobre isso, acesso total a esse modelo, menos que você esteja usando o Shopify plus, podemos modificá-lo o suficiente onde claramente, esse checkout parece diferente e com a marca esse outro checkout da Shopify. Parece diferente disso. Aqui, estamos em uma etapa posterior no processo. Então, aqui, você pode ver isso parece diferente desse cara, que definitivamente parece diferente do original, o modelo padrão. Portanto, certifique-se de que você está sempre, seja seus clientes da loja, sempre configurando essas configurações de tema para corresponder ao branding da sua loja da Shopify o mais próximo possível. Isso vai reduzir a dissonância cognitiva e vai ajudar as pessoas a comprarem. 16. Configurações de tema: Agora que aprendemos todas essas habilidades da Shopify e conhecemos estrutura do Liquid e dos temas em nossa interface, quero aplicar tudo isso de uma forma que nos dê algo útil, algo que muitas lojas podem se beneficiar. Então, uma modificação muito comum que fazemos é a barra de informações. Então, se olharmos para o Tattly, eles têm esta notícia no topo, inscrevem-se para um jornal semanal de Tattly Tuesday. Se olharmos para everestbands.com, eles têm navios em todo o mundo, frete grátis. Isso é muito comum. É um ótimo lugar para declarar frete grátis, para anunciar vendas ou coisas oportunas. Aqui, nós temos Bandon Dunes Golf Shop, eles também estão oferecendo frete grátis. Mas queremos torná-lo para que o cliente possa editá-lo. Então, o que queremos é uma configuração de tema em um tema onde o cliente pode facilmente atualizar o texto nesta barra de informações. Ok. Bem, vamos aprender a fazer isso. Então, aqui está a nossa coisa de Skillshare e nós, muito deprimente, não temos uma barra de informações. Então, vamos aprender a adicionar um. Se entrarmos em nosso tema. Líquido, queremos colocar isso no corpo. Podíamos colar isto aqui, mas somos mais espertos que isso. Então, vamos fazer uma inclusão. Então, primeiro vamos criar um snippet e vamos criar um snippet chamado barra de informações. Faz sentido? Mais uma vez, queremos nomes descritivos. Criamos nosso infobar.liquid. Agora, eu vou ser um menino mau. Eu sei, eu não deveria fazer estilos inline, mas para que pudéssemos ver tudo e já que estamos usando um snippet, vamos fazê-lo. Eu já escrevi meus estilos CSS aqui, vamos chamá-lo de banner promocional. Eu gostaria daquele estilo Tattly, eu quero o texto branco sobre preto. Dica rápida aqui, nunca use todo o caminho preto ou branco. Se fizermos fora de preto, fora de branco, nenhuma diferença notável, mas o anti-aliasing OSS funcionará melhor. Tudo bem. Precisamos colocar em nosso HTML, nosso conteúdo. Então, aqui e vamos formatá-lo bem. Primeiro, vamos vê-lo com frete grátis, e vamos salvar nossa barra de informações, e vamos voltar para theme.liquid. Vamos colocá-lo lá dentro. Inclua 'infobar' e vamos fechá-la. Então, agora, o conteúdo que escrevemos em nosso trecho, ele vai cair bem ali e vamos ver onde ele acaba. Lá vamos nós, linda. Temos uma barra de frete grátis, muito bonita. Mas se soubermos que o conteúdo nunca vai mudar, podemos parar agora. Mas queremos que o cliente seja capaz de editar facilmente e não devemos esperar que eles estejam rodando através de modelos de temas editando HTML. Algumas pessoas fazem, outras não podem fazer isso. Mas mesmo que você esteja fazendo isso por si mesmo, torne sua vida mais fácil, torne-a um cenário temático e é isso que aprendemos agora. Então, aqui, deixe-me pegar as configurações. Então, configurações, você pode fazer suas próprias variáveis aqui, suas próprias. Então, configurações é um objeto e, em seguida, o ponto qualquer. Nesse caso, texto. Promo. Pode dar o nome que quiser sozinho. Mas novamente, faça algo descritivo. Então, aqui, continuando com este tema, vamos chamá-lo de texto promocional. Pela primeira vez, vamos descobrir no arquivo de configurações em Configurações. Então, vamos abrir Personalizar tema. Então, há esses caras, essas configurações. Isso é parte do tema, você controla isso. Ao editar o tema, você pode editar o que quiser lá. Agora, vamos ver como isso funciona. Vamos até Config, essa é a pasta Config. Então, dentro da pasta Config, os dados de configurações são as configurações atuais e o esquema de configurações define como elas funcionam. Uma palavra de cautela aqui, e eu posso ou não estragar isso sozinho, é que valores separados por vírgulas são muito importantes. Se você perder uma vírgula, essa coisa vai quebrar. Então, se você mexer com isso, para de funcionar direito. A primeira coisa a procurar são vírgulas perturbadas. Você podia ver como eles funcionam. Então, temos chave aberta, cabeçalho de nome. Personalize tema, cabeçalho e, em seguida, você sabe o que esperar. O primeiro vai ser logo aqui. Vamos olhar para baixo. Digite cabeçalho, logotipo do conteúdo. Olhe para isso. Então, queremos adicionar o nosso aqui, está bem? Eu já escrevi, vamos pegá-lo. Aqui, nós temos, lá estamos nós. Então, primeiro, queremos ser capazes de definir nosso texto. Então vamos pegar aquele cara e colar aqui. Tudo bem. Vamos fazer disso a primeira coisa, por isso é fácil para nós encontrarmos. Escavar os arquivos das configurações é uma dor. Então, certifique-se de classificar as coisas logicamente e rotulá-las bem. Mas novamente, então vamos dizer, configurações, tipo é texto, ID é texto promocional. Então, este é o tipo de campo que é, ID é a variável, muito simples, e rótulo é texto de banner promocional. Isto é incrivelmente fácil. Com três linhas, acabamos de adicionar uma configuração de tema, isso é ótimo. Então, aqui, vamos atualizá-lo. Esse cara ainda trabalha. Então, vamos atualizar nossas configurações de tema, ver o que temos acontecendo aqui. Cabeçalho, texto do banner promocional Tudo bem. Então, vamos dizer, para que pudéssemos ver uma diferença, frete grátis acima de $100, salvar nossas alterações, e vamos voltar para a infobar. Então, temos settings.promotext. Vamos salvar aquele cara. É refrescante. Veja isso, frete grátis acima de 100 dólares. Bem, vamos tentar aqui. Então, digamos que eles mudem. Torna-se mais de 120. Salve isso. Refresque. Olhe para isso. Então, atualiza. Demoramos alguns minutos para ser capaz de adicionar esta configuração de tema muito fácil de usar que qualquer pessoa pode então usar para atualizar seu tema. Mas digamos que você nem sempre queira essa barra de informações. Então, temos uma solução para isso também. Tudo bem. Temos que adicionar uma nova configuração de tema e isso vai ser chamado de caixa de seleção. Então, vamos para o esquema de configurações. Acima do nosso texto promocional, eu quero adicionar um novo, vamos adicionar esse cara. Então, nós temos tipo caixa de seleção, nos diz que a entrada, é o tipo de entrada, que vai ser, como você adivinhou a caixa de seleção, em vez de texto. Nosso ID é banner promocional, então esse é o nosso nome de variável em que vamos armazenar isso, e nossa etiqueta é habilitar banner promocional e é isso que ele diz nas configurações do tema. Então, salve. Se atualizarmos isso. Então aqui temos nossas configurações de banner promocional, mas ele não faz nada ainda. Temos que adicionar um pouco de lógica aqui. Então, deixa-me ir em frente e copiá-lo, tornar a minha vida mais fácil, e falaremos sobre isso. Muito bem, infobar.liquid. Então, temos esse cara aqui, nosso snippet, e vamos adicionar uma declaração If. Se settings.promobanner. Então, é mais inteligente saber que esta é uma condição booleana. Então, se a caixa de seleção estiver desmarcada, isso não aparecerá. Então temos que fechá-la, Endif. Fácil. Salvar. Então, agora temos que verificar aqui. Então, se atualizarmos, ele ainda deve estar aqui, e está. Agora, digamos que não estamos oferecendo frete grátis de repente, vamos desmarcá-lo, salvar, atualizar e ele se foi. Perfeito e maravilhoso. É muito fácil adicionar configurações de tema, modo que você pode modificar o tema rapidamente, você pode ter um membro da equipe, você pode fazer isso para um cliente. É fenomenalmente fácil, eu gosto. Percorrendo rapidamente por aqui, você pode anexar arquivos em suas configurações de tema para coisas diferentes. Então, é assim que mudamos o logotipo da loja, é claro, ícones favoritos. Também podemos usar essas mesmas variáveis e essas configurações de tema. Nós também podemos usar aqueles dentro do nosso arquivo CSS. Nosso arquivo CSS também é um arquivo.liquid. Então, isso se torna muito útil, não apenas para o trabalho do cliente, mas também para modificar rapidamente sua própria loja. 17. Obtendo lucro com a Shopify: Então, se você é como eu, você quer ganhar dinheiro e não há nada errado com isso e você pode usar as habilidades que aprendemos aqui para fazer isso. Este é apenas um passo no caminho para fazer isso. Nosso primeiro passo foi criar o programa de parceiros da Shopify e conseguir a porta dos parceiros da Shopify. Bem, depois de ter provado a experiência da Shopify, cinco lojas nessa conta de parceiro, você pode se inscrever no programa de especialistas da Shopify e quero mostrar isso a você. Aqui está minha lista de especialistas na Shopify. Você sabe que eles te examinam para provar, uma vez que você tem cinco lojas, isso prova que você conhece Shopify. Você sabe o que está fazendo. Ele pode levá-lo para o programa de especialistas que é realmente uma ferramenta fenomenal de geração de leads. Então você pode colocar em sua experiência. Existem diferentes categorias: design, desenvolvimento, marketing, fotografia, configuração. Coloque uma descrição, links para o seu site e, em seguida, você pode ter seus clientes felizes adicionar depoimentos para você. Então, alguém está procurando ajuda, eles podem escolher uma categoria, clique em contato com especialista. Ele abre este formulário e imediatamente, você recebe um e-mail sobre ele. Então, uma vez que você passa de parceiro da Shopify para especialista, agora você faz parte não apenas de uma plataforma útil e de uma comunidade útil, mas também tem essa incrível ferramenta de negócios para gerar leads. Mas há outras coisas que você pode fazer também, é claro. Você pode fazer um tema, um tema personalizado enviado para a loja e aqueles fazem muito bem. Shopify lida com toda a entrega para você e você apenas recebe o dinheiro PayPaled para você, que é ótimo ou, se você estiver sentindo que suas habilidades de código estão prontos para snuff, você pode enviar aplicativos e as pessoas precisam e usar aplicativos o tempo todo. A vantagem de fazer aplicativos é que é receita recorrente. A maioria dos aplicativos são assinaturas. Você paga uma taxa mensal e então você recebe aquela renda passiva que receita recorrente que é ótimo. Vamos ver. Vamos dar uma olhada em algumas dessas coisas. Temos especialistas em instalação. Especialistas em configuração é muito simples. Tudo o que você tem a fazer é ajudar as pessoas a montar sua loja. Esta é provavelmente a barreira mais fácil para a entrada e é bom porque com um especialista em configuração, você vai estar muitas vezes girando novas lojas e, em seguida, você obtém uma participação de 20% na receita através do programa de parceiros do o que quer que o cliente pague à Shopify. Você então recebe 20 por cento PayPaled para você, o que é muito bom. Ao mesmo tempo, você provavelmente também gostaria de se inscrever como designer. Designers, as pessoas que você iria olhar para ajustar um modelo como fizemos com a barra de informações que era muito conveniente e, em seguida, ficando um pouco mais difícil além do que discutimos seria desenvolvimento, onde você pode adicionar e aplicativos privados para lojas. Claro, há espaço para comerciantes e até fotógrafos, o que é ótimo. Então, você não tem que escolher um. Você pode aplicar a vários. Então, uma vez que você entrar nesse ecossistema, continue crescendo, continue indo. É apenas uma comunidade fenomenal. Como uma história de sucesso, vivemos em tempo integral confortavelmente e com muito pouco estresse da Shopify porque eles nos fornecem muito suporte, muitos recursos, até mesmo criando essa série de vídeos. Eles reconheceram e me contataram e nós conversamos e configuramos isso e eles são muito úteis. Eles são realmente pessoas úteis e eu sou muito grato por eles. Então, considere.