Shopify sem código: como criar modelos personalizados com aplicativos de criação de páginas + o editor de temas

1. Introdução: Então, você quer criar designs personalizados no seu site da Shopify Mas você não quer se aprofundar no código do tema, pois talvez você não seja um desenvolvedor ou talvez ainda não tenha construído esse conjunto de habilidades. Então, quais são suas opções? Bem, nesta aula de compartilhamento de habilidades, abordaremos exatamente isso Se você nunca viu meu rosto antes, eu sou Christopher Dodd. Sou um excelente professor aqui no Skillshare.com e, o mais importante, um especialista da Shopify com algumas das aulas mais assistidas do Skillshare Skillshare.com e, o mais importante, um especialista da Shopify com algumas das aulas mais assistidas do Skillshare sobre desenvolvimento da Shopify. Nessas aulas, assim como no meu próprio canal no Youtube. Eu me aprofundo no lado do desenvolvimento quando se trata do Shape Fi, mas nesta aula vamos sair do editor de código e ver o que pode ser feito no Shape Fi sem qualquer codificação Sei que muitos de vocês são donos de lojas ou criativos que não querem necessariamente ser desenvolvedores como eu Então, eu criei essa aula só para você. Obviamente, vamos começar com a abordagem puramente nativa usando o editor de temas do próprio Hope Fi Mas depois daremos uma olhada em alguns dos aplicativos de criação de páginas que são mais ilimitados em termos de opções de personalização O objetivo principal dessa classe não é apenas examinar vários recursos do Page Builder, mas ajudar você a entender onde essas opções sem código se encaixam em sua loja. Entendendo os limites desses aplicativos e o que realmente está acontecendo nos bastidores. Então, se tudo o que você quiser, se você estiver pronto para aprender a personalizar sua loja Shopify sem codificar, clique no próximo vídeo e nos vemos 2. Prefácio: Aqui, você pode ver uma das minhas lojas da Shopify. É o que chamamos de loja de desenvolvimento, o que significa que tem quase todos os recursos de uma loja normal da Shopify Mas, na verdade, não posso vender nada sobre isso, é apenas para fins de teste e desenvolvimento. Idealmente, você tem sua própria esperança de trabalhar. Mas se não, você sempre pode criar uma loja de desenvolvimento gratuita como eu. Não vou passar por todo o processo nesta aula, pois já abordei isso várias vezes em outros cursos e aulas. Mas se você quiser ver um tutorial sobre como fazer isso, você pode encontrar um em menos de três aqui na minha aula anterior chamada Configuração da Shopify Store Na verdade, se você é novo na Shopify e precisa de uma introdução sobre como tudo funciona, eu recomendaria assistir a aula inteira antes desta, especialmente a quarta aula dessa aula, aquela sobre arquitetura de lojas da precisa de uma introdução sobre como tudo funciona, eu recomendaria assistir a aula inteira antes desta, especialmente a quarta aula dessa aula, aquela sobre arquitetura de lojas da Shopify. Vou fazer uma pausa aqui por um segundo para lhe dar um breve momento para considerar se você deseja fazer isso Se sim, pause este vídeo e volte para esta aula depois de terminar de assistir à outra aula Ok, pronto para continuar andando? Vamos começar focando nossa atenção no canal de vendas da loja virtual. No canal de vendas da loja virtual, temos nossos temas, nossas postagens no blog, nossas páginas personalizadas, nossas listas de links, também conhecidas como menus, que ficam aqui na seção de navegação. E então algumas configurações aqui relacionadas especificamente a esse canal de vendas. Se abordarmos os temas, espero que você esteja familiarizado com os temas conceituais. Basicamente, pegue o conteúdo que você coloca em sua loja e exiba-o no front-end. Por exemplo, se olharmos para a página de um produto, o título e o preço aqui vêm do que você definiu preço e título no administrador desse produto específico. Dito isso, a estrutura que envolve essas informações é determinada pelo tema que você está analisando atualmente Se não houver uma barra de visualização na parte inferior da tela informando em qual tema você está atualmente, provável que você esteja usando o tema atualmente ativo da sua loja, que pode ser visto aqui na parte superior da página de temas. Agora, se você sabe como escrever código de desenvolvimento web de front-end, os temas são super flexíveis porque são todos baseados em código. No exemplo anterior, se dermos uma olhada no título e no preço do produto dentro do tema, você poderá ver o código ao redor. Esta parte aqui é chamada de código Chop Fi Liquid e diz à loja Fi que insira o título aqui e o preço aqui. É importante observar que, independentemente de você querer mexer no código ou não, o resultado final é sempre código. O que quero dizer com isso é que qualquer uma das opções que usamos para evitar o código simplesmente criará código para nós. Talvez não precisemos aprender a programar, mas simplesmente entender que o código é sempre criado. Você pode ver a prova disso consultando qualquer página na web, no site da shopify ou Tudo o que você precisa fazer é clicar em Exibir código-fonte da página. E, como você pode ver, o resultado é sempre código. Talvez você ainda não entenda isso, mas o tema é a melhor forma personalizar o front-end da sua loja. O único problema é que o editor de temas, que discutiremos em breve, ainda é muito limitado para muitos usuários. O editor de temas, apenas para lhe dar uma visão geral, é a interface do usuário que aparece quando você clica aqui para personalizar seu tema. Se examinarmos o código do tema, as opções disponíveis em seu editor de temas foram, na verdade, codificadas no próprio tema E o valor do que o usuário define em um desses campos é simplesmente inserido no código. De forma semelhante à que vimos antes com o título e o preço do produto. Dado que as únicas opções em seu editor de temas são aquelas que o desenvolvedor do tema forneceu especificamente para você. Muitas vezes, você pode achar que a opção personalizar uma determinada parte do seu tema não está disponível. E é isso que quero dizer com essa solução sendo meio limitada. É por isso que os desenvolvedores de aplicativos criaram aplicativos chamados de construtores de páginas Esses aplicativos foram desenvolvidos por terceiros e fornecem sua própria interface de usuário para criar designs e layouts de páginas no Schobifi Quando você cria um design e clica em Publicar em um desses aplicativos, código é criado para você e injetado em algum lugar no final ou no tema da sua loja de habi fi Eu sei que isso pode parecer um pouco teórico ou complicado demais para uma primeira aula da classe sobre no code shopify Mas eu trago esses conceitos para ajudá-lo a entender o que realmente está acontecendo. Antes de passar horas investindo em aprender e criar aplicativos sem entender como eles realmente afetam sua loja, deixe-me tentar simplificar isso para você com uma tabela simples mostrando suas opções. A primeira opção é lidar com o código do tema. Essa é a única opção na qual você terá controle total sobre o front-end da sua loja. Embora eu o recomende, ele tem a curva de aprendizado mais íngreme E como esta é uma aula no code shopifi, vou riscar completamente essa opção para esta A segunda opção é usar as opções disponíveis no editor de temas. Esse é o cenário ideal, mas depende totalmente das opções do seu tema. Um tema pode ter centenas e centenas de opções ou zero. Tudo depende do desenvolvedor do tema. E no momento da gravação desta aula, os editores de temas e os recursos de arrastar e soltar são muito limitados Você pode reorganizar seções e reorganizar blocos aninhados em E isso é tudo. Entraremos em mais detalhes sobre isso no próximo vídeo. Por fim, a opção três é instalar um aplicativo Page Builder. Essa é a maneira menos robusta e nativa de personalizar sua vitrine Mas esses aplicativos são muito populares como soluções sem código, pois são criados especificamente para usuários sem código. Inicialmente, esses aplicativos podem parecer incríveis, mas à medida que você se aprofunda neles, pode descobrir que se afastar da maneira nativa do Shopify de fazer as coisas pode, na verdade, causar alguns de seus Agora, no próximo vídeo, falaremos sobre a segunda opção, o editor de temas shop fi. 3. O editor de temas nativo da Shopify: O editor de temas nativo da Shopify é o que eu recomendo todos os meus clientes e alunos usem para personalizar seu front-end Podemos personalizar qualquer tema simplesmente clicando no botão personalizado desse tema. Antes de começarmos a brincar com esta versão do editor de temas, é muito importante observar aqui que o Hopefi está constantemente mudando e melhorando a experiência do usuário do editor de temas O que você está vendo hoje pode ser muito diferente do que estou lhe mostrando agora. Mas também quero observar que, à medida que o sistema nativo de edição de temas melhora no Shape Fi, a necessidade de aplicativos de criação de páginas diminui lentamente Shabifai tem algumas atualizações interessantes para o editor de temas a caminho, mas o cronograma de quando essas atualizações serão lançadas nunca é definitivo Então, infelizmente, nossa única opção é permanecer paciente e aguardar a atualização. No próximo vídeo, abordarei um grande anúncio para o editor de temas que acabou de ser anunciado, mas ainda não foi lançado. Mas como isso ainda não aconteceu, vamos voltar às opções no momento. Então, primeiro de tudo, o Shobifi usa um sistema de modelagem para que você não precise criar looks e layouts separados para cada página de produto, página coleção, postagem de blog, etc Por padrão, cada página do produto será executada pelo modelo de produto padrão. Atualmente, estamos no modelo de página inicial, que, como há apenas uma página inicial para um site, só se aplica a uma página. Mas se clicarmos nesse botão, você verá a lista de modelos que podemos modificar. Vamos clicar em Produto e depois clicar em Produto padrão. Podemos ver que esse modelo está atribuído a 12 produtos em nossa loja. E que não há outros modelos de produtos para seleção aqui. Portanto, podemos supor que esse modelo se aplicará basicamente a todos os nossos produtos. Podemos criar um modelo de produto alternativo aqui, mas chegaremos a isso em apenas um segundo, pois esse é o único modelo de produto em uso nesse tema. Todas as alterações que fizermos aqui serão aplicadas a todas as páginas do produto ao lado do menu suspenso. Para escolher qual modelo editar, temos uma lista suspensa para Mercados, que é um recurso novo que nos permite fazer edições que se aplicam apenas a um determinado Por exemplo, se mudarmos isso para a Austrália, você verá a mudança de texto para adicionar seção e adicionar bloco Agora, elas se tornarão uma seção adicional à Austrália. Adicione um bloco à Austrália, como você pode ver aqui, receberemos um aviso com um link para saber mais. E como esse é um conceito mais avançado que não se aplica à maioria de vocês, vou ignorá-lo para esta aula, mas você sempre pode consultar este documento para saber como o seletor de mercado funciona em seu editor de temas Voltando ao contexto padrão, vamos falar sobre o que mais está nessa barra superior. Da esquerda para a direita, temos o botão para sair do nosso editor de temas, seguido pelo nome do tema atual, seguido pelo emblema aqui para dizer se ele está ativo ou não E então esses três pontos para expandir mais informações e opções Os principais são o link direto para editar o código do tema ou para visualizar o tema como ele está atualmente no front-end Obviamente, você tem alguns outros botões aqui, mas o botão de visualização e o botão edição de código são os mais úteis. Dito isso, como esta é uma aula sem casaco, é basicamente apenas o botão de visualização aqui que é interessante. Se agora voltarmos nossa atenção para a direita dessa barra de ferramentas, esse botão desativará o inspetor, que tudo o que faz é ativar e desativar essa função, onde você pode passar o mouse visualmente em cada seção para ver o nome da seção e clicar entre elas para adicionar novas seções entre elas Ou clique na própria seção para abrir as configurações dessa seção no painel esquerdo. Em termos de funcionalidade totalmente visual do Dragon Drop Editor, isso é quase o máximo possível, atualmente com o editor de temas Shove Fi, mas há planos para melhorar isso consideravelmente Fique ligado no próximo vídeo desta aula para saber mais sobre isso Por enquanto, vamos desligar isso e usar o painel lateral esquerdo para criar, atualizar e mover seções. Mas antes de fazermos isso, há apenas mais alguns botões para abordar aqui. Primeiro, você tem essa opção aqui para visualizar a página no desktop, no celular ou em tela cheia, celular ou em tela cheia, que simplesmente oculta a barra lateral para que você possa ver o design espalhado por toda a largura da janela Depois, você tem o botão desfazer, o botão vermelho e o botão salvar Eles são bastante autoexplicativos. Para ativá-los, basta fazer uma alteração nosso modelo e depois salvá-lo ou desfazê-lo Se desfizermos isso, também poderemos clicar facilmente para refazer essa alteração Ok, então com a barra superior fora do caminho, agora podemos discutir esse painel esquerdo , que é onde faremos todas as nossas edições Primeiro, você verá neste tema que temos um grupo de cabeçalhos, um grupo de rodapé e, em seguida, temos o conteúdo do modelo Grupos de seções são um recurso muito novo na Shopify, então talvez você não os veja em seu tema A capacidade de adicionar uma seção e organizar as seções aqui, a menos que esse recurso tenha sido adicionado ao tema. Independentemente disso, é importante observar que as seções fora desse grupo de modelos aqui se aplicam a algo chamado layout. Normalmente, os temas têm apenas um layout, então podemos simplesmente dizer aqui que essas seções permanecerão as mesmas, independentemente do modelo que estamos examinando. Essas seções, por outro lado, são específicas desse modelo. Portanto, qualquer alteração que fizermos aqui afetará apenas o modelo atual em que estamos. Portanto, mostrar como as seções funcionam nas seções Shapefi são os principais blocos de construção dos temas do Chapifi Essencialmente, cada página no habifi é apenas uma lista de seções empilhadas umas sobre Por exemplo, se eu trouxer de volta o inspetor por um tempo, podemos ver essas seções no grupo de cabeçalhos, na da barra de anúncios, seguida pela seção de cabeçalho E então podemos ver as seções pertencentes ao modelo. Temos informações sobre o produto seguidas por produtos relacionados. E, finalmente, temos a seção Potter, que pertence ao layout dentro do grupo de fotos Uma coisa que eu não mencionei com esse inspetor é que podemos clicar em elementos aninhados dentro da seção chamada blocos Como você vê aqui, ao passar o mouse sobre esses elementos, o bloco correspondente é destacado abaixo Deixe-me desativar o inspetor mais uma vez. E agora podemos ver aqui que podemos reorganizar as seções em um modelo, bem como os blocos dentro uma seção, clicando e arrastando, clicando na seção de anúncios Podemos adicionar qualquer uma dessas 17 seções ao nosso tema. Ou, se tivermos um aplicativo específico instalado que usa extensões de aplicativos temáticos, também podemos incluir uma seção de um aplicativo específico. Este aqui é um aplicativo personalizado que eu criei para outro tutorial. Da mesma forma, podemos adicionar blocos adicionais à nossa seção até que a Shopify publique a atualização que abordarei no próximo vídeo A lista de opções de bloqueio aqui será limitada à lista de opções de bloqueio definidas na própria seção. Portanto, você pode ver aqui que , como esta seção permite apenas um bloco de botões e um bloco de cabeçalho por seção, nossa única opção aqui é adicionar um bloco de texto aqui, que podemos organizar ao lado dos outros blocos. Tanto as seções quanto os blocos podem ou não ter suas próprias configurações. Então você pode ver aqui para o banner de imagem, eu posso definir quais imagens eu gostaria de usar, definir uma opacidade específica para a sobreposição, alterar a altura do banner, etc Então, se eu mergulhar em alguns dos blocos aqui, você pode ver que eles também têm configurações. Eu poderia alterar o texto do botão, atualizar o endereço de onde esse botão deveria estar vinculado. E para salvar qualquer uma dessas alterações, eu só precisaria clicar em Salvar no canto superior direito. E minhas alterações serão então aplicadas ao tema. Finalmente, em qualquer seção ou bloco, podemos clicar no ícone da lixeira para excluí-lo ou no ícone para manter nossas configurações em vigor, mas simplesmente ocultá-las do usuário final Neste ponto, é um bom momento para mencionar que essas seções e blocos se aplicam a esse tema específico, que é a versão 12.0 0.0 do tema Dawn da Sobi Fi É importante observar que cada tema é diferente e as configurações em qualquer uma dessas seções e blocos vêm de esquemas que foram escritos no próprio tema Não vou entrar no código desta classe, pois essa é uma classe do shopify sem código Mas só para observar aqui que, se você conhece algum código, pode modificar esses esquemas para habilitar novas opções em um tema existente De volta ao editor aqui, tenha paciência comigo, pois há apenas algumas outras áreas a serem abordadas. Aqui no painel esquerdo, você notará que há duas outras guias aqui. Na segunda guia estão as configurações do tema. Essas configurações não estão vinculadas a nenhuma seção ou bloco, mas se aplicam a qualquer lugar dentro do seu tema. Por exemplo, podemos entrar e editar cores específicas que são armazenadas no esquema de cores do tema. Todos eles são agrupados em acordeões separados para que possamos navegar entre eles Finalmente, a última guia aqui é onde podemos ativar e desativar determinadas incorporações de aplicativos em um único tema Provavelmente, esse é um painel que você não precisará tocar, a menos que seja orientado pelos desenvolvedores de um dos aplicativos que você está usando em sua loja. Antes de concluirmos este vídeo, uma coisa sobre a qual prometi falar foram os modelos alternativos. Então, se você se lembra de quando clicamos aqui e analisamos os produtos, você pode ver que há apenas um modelo de produto padrão Mas eu posso criar esse botão para criar um modelo. Vamos chamar isso de layout de produto alternativo. Está bem? E então podemos escolher em que queremos que ele se baseie. E como há apenas um modelo que temos atualmente em nosso tema, só temos uma opção, que é o modelo de produto padrão. Então, vamos criar, oh, na verdade, não vai. Deixe-me fazer layouts. Então, deixe-me fazer um layout alternativo. A parte do produto pode ser assumida. Ok, vou clicar em Criar modelo. O que isso fará é criar um modelo de produto alternativo em nosso tema. Eu só quero te mostrar isso rapidamente. Eu sei que essa é uma classe sem código, mas só para mostrar o que ela está fazendo nos bastidores, porque você também pode fazer exatamente o que acabei de fazer no código. Está criando aqui mesmo. Se entrarmos em onde os produtos estão, esses produtos são o modelo de produto padrão. Mas esse aqui, aquele que chamamos de layout alternativo. Este é o nosso modelo de produto alternativo. Ok, vou te mostrar como atribuir isso em apenas um segundo, mas vamos voltar aqui. Nós o criamos usando o editor de temas. Não precisávamos mexer em nenhum código, mas só para você saber, como mencionei ao longo desta aula, código é sempre criado. Então é isso que está acontecendo no back-end. Ok, agora o que podemos fazer é criar um layout completamente diferente com isso. Não sei o que faríamos. Um exemplo mais prático seria não vou deixar que eu exclua esta seção. Mas podemos adicionar, digamos, por exemplo, que atribuímos isso a um produto muito específico. Então, atribuímos isso a apenas um produto. E podemos falar mais sobre esse produto específico. Podemos dizer mais sobre isso. No momento, estamos analisando os airpods Podemos falar mais sobre os airpods e depois entrar aqui. Os Airpods são incríveis. Na verdade, não sou um bom redator. Podemos fazer com que o Shopify gere texto para nós, descrição ou pontos de venda dos airpods da Apple Get para gerá-lo para Veja essa experiência, a conectividade perfeita e o som cristalino dos airpods da Apple. Quão bom é isso? Ok, e então dê esse rótulo ao botão, na verdade, vamos apenas deletar o botão. Você pode ter uma página de produto com esse detalhe específico. E tudo o que precisamos fazer é atribuí-lo a este produto Air Pods Vou clicar em Salvar e , na verdade, saio do editor de temas. E vou examinar os produtos, encontrar esse produto Air Pods no administrador da nossa loja E aqui embaixo é onde eu posso mudar o modelo do tema. E, em vez do produto padrão, posso mudar para o que acabamos de criar chamado Layout alternativo, agora. E eu clico em Salvar e clico para visualizar esse produto. Analisando nosso tema atual, Dawn versão 12, você pode ver, uma vez que rolamos, a seção Informações do Produto e os produtos relacionados Você pode ver mais sobre a experiência dos airpods, a conectividade perfeita e o som cristalino É assim que podemos afetar o layout de um produto específico enquanto mantemos o mesmo modelo de layout dos outros produtos. Como você pode ver, todos eles estão usando o modelo padrão. Eles não terão essa seção extra, mas nesse produto específico ao mas nesse produto específico qual atribuímos o modelo alternativo, a seção que inserimos nesse modelo está presente na página do produto. Ok, então, se quisermos editar isso no futuro, não o faremos a partir daqui, da lista real do produto. Em nosso administrador, precisamos voltar ao nosso editor de temas. Navegue até o modelo de produto atribuído a esse produto. Agora você pode ver que ela está atribuída a um produto. Estamos pré-visualizando os air pods, que é o produto ao qual estão atribuídos Agora, se eu quiser editar o modelo desse produto específico, posso fazer isso por meio desse modelo. Se eu voltar ao modelo padrão, você pode ver aqui que essa seção não está no modelo de produto padrão. Então aí está. O editor de temas da Shopify Uma das perguntas que a equipe da Skillshare me fez ao revisar meu plano para esta aula foi a razão por trás da declaração que fiz no início desta Que o editor de temas nativo da Shopify é o que eu recomendo que todos os meus clientes e alunos usem para personalizar seu front-end É uma declaração difícil de explicar sem entrar em detalhes técnicos. Então, em vez disso, deixe-me usar uma analogia. Talvez você já tenha ouvido falar em fuga da prisão. É a prática de modificar seu telefone para que você possa desfrutar de acesso irrestrito a todo o sistema de arquivos Esse acesso permite alterações que não são suportadas pelo telefone em seu estado padrão. Bem, usar um construtor de páginas no Chobifi é algo um pouco semelhante É uma solução de hack que pode ir contra o sistema de design temático que a Chobe Fi criou sem entrar em muitos detalhes. Você pode descobrir que, por experiência própria, se afastar sistema padronizado da Chobe Fi pode causar alguns problemas inesperados Alguns dos quais podemos ver aparecerem na classe quando começarmos a instalar alguns desses construtores de páginas em sua loja 4. Atualizações anunciadas para o editor de temas nativo: Duas vezes por ano. anúncios como parte de algo Shobifi faz vários anúncios como parte de algo chamado edições Shapefi. Na edição de inverno de 2024 da Shabifi, Shobifi anunciou algumas atualizações interessantes de Em breve, os blocos serão tão modulares quanto as seções. E talvez o mais interessante os blocos também poderão ser aninhados em outros blocos, em vez de apenas em seções Duas coisas importantes a serem observadas antes de analisarmos mais profundamente esse recurso são: não há uma data específica definida para que esse recurso seja lançado ao público. E número dois, mesmo quando for lançado, seu tema precisará ser capaz de suportá-lo. O que isso significa é que os novos temas criados após a entrada em vigor dessa mudança provavelmente aproveitarão essa nova funcionalidade. Mas muitos temas antigos permanecerão no sistema antigo. Portanto, tenha isso em mente por enquanto. Esse recurso está disponível apenas na versão prévia para desenvolvedores, o que significa que somente parceiros como eu podem brincar com ele. Dito isso, deixe-me dar uma pequena prévia de como ele deve funcionar quando for lançado. Tudo bem, pessoal, antes de me aprofundar e mostrar esse novo recurso interessante, eu só queria fornecer um pouco de contexto aqui. No momento, estou em uma loja de desenvolvimento que tem a prévia para desenvolvedores ativada para esse novo recurso. Portanto, esta loja, como diz aqui, está em desenvolvimento. Na verdade, não diz isso, mas esta não é uma loja ao vivo, como se eu não pudesse realmente vender produtos e usá-los para um negócio. Isso é apenas para fins de teste e desenvolvimento e para pré-visualizar esse novo recurso. Consegui fazer isso porque tenho uma conta de parceiro da Hope Fi. E a partir daí, você pode criar uma loja de desenvolvimento. Não vou entrar no processo neste vídeo só porque não exijo que você realmente faça isso. Você pode simplesmente assistir a este vídeo para ver quais mudanças estão chegando e decidir por si mesmo se deseja esperar até que elas entrem em vigor e começar a usá-las em seu fluxo de trabalho sem código, chop fi. Mas se você quiser pré-visualizar isso antecedência e estiver muito interessado em conferir, pode encontrar no meu canal do Youtube, que mencionarei mais na conclusão desta aula, que você pode encontrar um vídeo sobre o você pode encontrar um vídeo sobre Shopper Fire Winter Editions 2024, que foi quando esse Nesse vídeo, mostro como eu configurei a loja de pré-visualização para desenvolvedores. Ok, então, caso você queira acompanhar, é assim que você faz. E a outra coisa que eu só queria mencionar aqui é que, como eu disse, para aproveitar esse novo recurso, você não só precisa estar em uma loja de desenvolvimento com o Developer Preview ativado, mas também precisa estar executando um tipo específico de tema. E como você pode ver aqui, esse tema é chamado de tema de referência principal. Este é um tema criado pela Hub Fi para mostrar como ele vai funcionar quando for lançado. Então você precisa do tema e da loja. É um pouco trabalhoso de configurar, então decidi pular isso para este vídeo Mas se você quiser saber como instalar o tema de desenvolvimento em uma loja de desenvolvimento, confira esse vídeo no Youtube. Mas sem fevereiro. Então, vamos entrar no personalizador aqui e você notará que é um pouco diferente do que estamos acostumados Então, aqui você pode ver que temos esse banner de imagem aqui, que é, em primeiro lugar, o tema se parece muito com o amanhecer. Acho que é baseado no amanhecer. Mas está aproveitando esses novos blocos reutilizáveis temáticos. Então, como você pode ver, há uma seção de banner de imagem aqui que também está presente ao amanhecer. Mas se olharmos abaixo do banner de imagem aqui, podemos ver que há um grupo aninhado chamado grupo E dentro desse grupo temos blocos aninhados. Agora, não posso adicionar outro bloco aqui embaixo. Parece que eu posso abotoar o botão secundário. Lá vamos nós. Agora adicionamos um bloco dentro desse grupo de blocos, certo? E então eu posso reorganizar esses blocos dentro desse grupo de blocos E o que esse grupo está me dando é um recipiente com fundo branco. Mas eu posso mudar a posição do conteúdo, posso mudar alguns aspectos do layout aqui. Parece que alterá-lo para horizontal pode ser um pouco problemático porque está no Developer Mas o que devemos observar aqui é que anteriormente teríamos uma seção e depois poderíamos aninhar uma lista de blocos em uma seção. Agora podemos colocar uma lista de blocos dentro de um bloco dentro de uma seção. Vamos dar uma olhada em outro exemplo. Vamos até a seção personalizada. Este é provavelmente um exemplo melhor porque temos uma seção personalizada aqui. E se olharmos para dentro, temos esse bloco para o título e, em seguida, temos esse grupo. E então, dentro desse grupo, temos dois grupos e, na verdade, temos algo no meio. Ah, então temos basicamente três colunas. Então, temos esse grupo, que é basicamente como um layout de três colunas. E então, neste terceiro nível, temos o grupo de imagens de grupo. Isso é basicamente como nossas colunas. E então, dentro desse primeiro, podemos empilhar dois blocos para formar uma coluna Eu poderia mover este para o outro lado. E isso me dá um controle mais flexível sobre meu layout. Ok, então sim, como você pode ver, nesta seção personalizada, nesta seção personalizada é aqui que ela se torna muito mais personalizável Podemos aninhar grupos dentro de grupos, dentro de grupos. E isso nos permite criar layouts personalizados que nunca foram possíveis antes, apenas com um único nível de blocos aninhados em uma seção Ok, então isso é uma coisa muito interessante. Essa será uma grande mudança de paradigma no editor de temas e acho que será suficiente para muitas pessoas não precisem usar construtores de páginas porque pretendo fazer algo como ter esse título Não estou dizendo que isso seja um exemplo prático, mas ter algo como um cabeçalho acima do ícone de uma dessas colunas, mas não de todas, seria quase impossível de fazer. Você teria que marcar uma caixa de seleção. Não seria intuitivo, pois você precisaria criar várias opções em seu tema para conseguir isso. Mas agora, com o fato de que os blocos são reutilizáveis e podem ser aninhados uns nos outros, isso realmente muda E espero que você esteja começando a entender o que quero dizer aqui, com tudo isso em pequenos blocos diferentes nos eu possa clicar mais profundamente. Então, como aqui, temos esta seção, depois temos um bloco e, dentro desse bloco, temos esses outros três blocos. E cada um desses blocos e seções tem suas próprias configurações. Então, sim, se você quiser brincar com isso, mas esta lição ou este vídeo é mais para mostrar o que está por vir a fim de informar se você ainda deseja investir em um criador de páginas ou esperar até que essas mudanças ocorram. Portanto, é muito encorajador ver esses recursos serem lançados no editor de temas. Quanto melhor o editor de temas fica, menos atraentes se tornam os aplicativos de criação de páginas E isso é sempre bem-vindo para mim como desenvolvedor. Como essa nova funcionalidade de bloco permitiu o desenvolvimento de uma prévia, devemos vê-la lançada ao público em breve. Quanto às seções flexíveis, algo que foi anunciado seis meses antes da última edição, ainda não ouvimos uma atualização sobre isso Então, por enquanto, o que vou fazer é terminar este vídeo com um clipe do canal oficial da Have Fi no Youtube, onde a visão do novo editor de temas é discutida e as seções flexíveis são apresentadas Ok, então vamos voltar ao editor da loja virtual, que é onde eu sei que muitos de vocês passam seu tempo fazendo com que seus sites tenham uma ótima aparência. E quero mostrar alguns novos recursos em nosso programa, Fire Themes, que ajudarão a dar um pouco mais de vida à sua loja. Então, aqui no editor, vou clicar nas configurações do meu tema e clicar em Animações E há algumas coisinhas legais aqui. Assim, você pode ter seções reveladas na rolagem, o que me dá esse bom efeito quando minhas seções aparecem dinamicamente enquanto eu percorro a página E esse outro efeito de foco para elevação em três D significa que, ao passar o mouse sobre os elementos da página, obtenho esse belo efeito cintilante em três D que dá vida ao site É muito legal. O último pequeno efeito que quero mostrar está nas seções em que você tem imagens Temos esse novo efeito em que você pode basicamente criar uma paralaxe definindo posições de fundo fixas Então, à medida que percorro a página, obtemos esse belo efeito de paralaxe, que, novamente, ótimo efeito visual, torna sua sessão um pouco mais Agora, tudo o que eu mostrei hoje até agora está ao vivo e disponível para todos vocês usarem. Antes de encerrarmos hoje, quero dar uma olhada por trás da cortina em alguns novos recursos que ainda não estão prontos, mas que serão lançados em breve E estou animado para que vocês dêem uma olhada. Então, a primeira é algo que chamamos de seções flexíveis Então, aqui no editor vou clicar fora da seção, assim como sempre faria no seletor de seções Na verdade, agora vejo uma pequena prévia das seções antes de clicar nelas. O que é muito bom e útil se eu estiver passando muito tempo testando seções do meu tema. Agora eu tenho a seção na página, e isso é muito bom, mas não é exatamente o que eu quero. Agora, com seções flexíveis, posso realmente personalizar essa seção com novos blocos Vou clicar nesse botão de adição e dizer que quero outra imagem aqui. Vamos colocar algumas imagens reais nesses blocos. Vou pegar as bolas de tênis na parte inferior, e talvez vamos escolher o kit de costura para a parte superior Agora eu quero que isso tenha um tamanho um pouco diferente. Agora eu posso simplesmente pegar essa alça e arrastá-la para ficar do tamanho que eu quero. Na verdade, eu quero duplas desta seção, então vou clicar aqui e clicar em Duplicar Agora eu tenho dois deles, mas eu meio que quero que esse esteja à direita. Então, vamos pegá-lo e arrastá-lo para o lado direito. Eu meio que quero que sejam o contrário. Vou arrastar isso para baixo de outra forma. Eu quero a simetria aqui, então vou escolher isso e vou dizer, por favor, alinhe isso à direita. Talvez. Vamos ver uma pequena variação nessa imagem. Escolha um kit de costura diferente. Ótimo, eu realmente gosto da aparência dessas imagens. Agora vamos entrar e colocar uma cópia, então vamos chamá-la de criada nos EUA Então, vamos colocar uma cópia de marketing aqui. Na verdade, não sou muito bom em marketing de textos. Vamos comprar algumas cópias mágicas da Shop Fi sobre equipamentos de tênis fabricados nos EUA. Vamos escolher, sei lá, brincalhão, gerar. Ok, partida de set de jogo. Por que não? Vamos pegar isso então. A última coisa que quero consertar são esses botões. Esses botões estão um em cima do outro. Eu preferia que eles estivessem realmente lado a lado. Ok, eu tenho a seção do jeito que eu quero agora. Isso está no desktop. Vamos verificar rapidamente. Fica bem no celular. É super legal. É simplesmente apresentado de forma responsiva. Isso é incrível. Simples assim, terminamos. Vou clicar em Salvar. Isso se chama Flex Sections Estamos ansiosos para colocá-lo em suas mãos em breve 5. Introdução aos aplicativos de criação de páginas: Idealmente, o editor de temas nativo do Chobifi deve ser suficiente para que os comerciantes personalizem o front-end Mas, infelizmente, para os usuários que desejam ter mais controle sobre seus designs de front-end, eles acabarão sendo forçados a usar um aplicativo. Esses aplicativos de criação de páginas representam softwares personalizados que oferecem mais controles de personalização, geralmente permitindo mais recursos que os comerciantes desejam que o editor de temas Shobifi tenha, como arrastar e soltar, e componentes padronizados com softwares personalizados que oferecem mais controles de personalização, geralmente permitindo mais recursos que os comerciantes desejam que o editor de temas Shobifi tenha, como arrastar e soltar, e componentes padronizados com muitas configurações de personalização. Antes de começarmos a usar alguns desses aplicativos, gostaria de ajudar você a entender o que exatamente está acontecendo quando você usa um aplicativo no Chobfi Vamos até nosso administrador do Shopper Fire e adicionar nosso primeiro aplicativo de criação de página Atualmente, você pode encontrar o menu de aplicativos abaixo da sua lista de canais de vendas partir daqui, clique na palavra Aplicativos e o menu suspenso se expandirá, permitindo que você veja a lista de aplicativos atualmente instalados, bem como pesquise novos aplicativos para instalar. Vamos pesquisar o Page Builder e ver o que aparece. Isso nos levará à Shaba Fi App Store, onde podemos ver as listagens correspondentes para o termo de pesquisa Page Builder Como você pode ver, há muitas opções aqui, mas algumas das principais são Page fly, show gun composer e gem pages Nesta aula, daremos uma olhada em apenas algumas dessas páginas de gemas, Replo e Instant Vamos começar com Em pages. Clicaremos no ícone ou no título da lista de páginas Em aqui. E isso nos levará à página oficial do aplicativo na Shopify App Store for Em pages Em seguida, clicaremos no botão para instalar o aplicativo. E isso nos direcionará de volta à nossa loja Shopify, onde a Shopify solicitará a aprovação de determinados acessos exigidos determinados acessos Lembre-se de que , embora o aplicativo tenha sido aprovado pela loja de aplicativos Shop Fi, ele ainda é um software de terceiros. As permissões que você concede aqui permitirão que o aplicativo se conecte à sua loja da Shopify e faça determinadas alterações Clique no botão de instalação e agora você verá a interface do aplicativo dentro do administrador de suas lojas Chop Fi. Algumas coisas a serem observadas aqui são que, em primeiro lugar, eles obviamente criaram seu aplicativo para bastante semelhante ao resto do administrador. Mas não se deixe enganar, essa interface é totalmente determinada pelo aplicativo Se você já trabalhou com vários aplicativos no Chop Fi antes, deve ter notado que nem todos parecem se encaixar perfeitamente no administrador do Hopi Fi E isso porque eles podem ser projetados o desenvolvedor do aplicativo quiser. E número dois, assim como o design, a funcionalidade e o método exato que um aplicativo como esse pode usar para entregar os designs que você cria ao tema real podem e geralmente diferem entre os aplicativos que estão sendo usados. Além disso, como esses aplicativos são softwares de terceiros, o custo do aplicativo não é coberto pela Habi Fi Portanto, a maioria desses aplicativos terá algum tipo de preço de assinatura. Eles cobram dos comerciantes para usá-los. Se eu clicar no selo aqui para desenvolvimento no aplicativo Gem Pages, posso ver os diferentes planos disponíveis e suas inclusões para esse aplicativo específico Neste curso, no entanto, não precisaremos assinar nenhum plano pago para acompanhar. Mas se você acabar se comprometendo com um aplicativo específico de que gosta, convém comprar um desses planos pagos para obter os recursos anunciados Agora que entendemos que os aplicativos do Page Builder são softwares externos que se conectam à sua loja, cobram seus próprios custos e manipulam sua loja de maneiras personalizadas, vamos ver como podemos usar esses aplicativos na podemos usar esses aplicativos 6. Gempages: Tudo bem, agora que abordamos como aplicativos se conectam à nossa loja da Shopify, vamos demonstrar três aplicativos diferentes pelos quais achei meus clientes mais entusiasmados São páginas de gemas, Replo e Instant. Vamos começar com páginas de gemas, que instalamos no vídeo anterior. Então, vou clicar nos aplicativos e posso ver aqui meus aplicativos instalados. Vou clicar em Em Pages Builder depois de esperarmos algum tempo para carregar. Você pode ver aqui que podemos criar uma nova página, mas na verdade há um novo recurso aqui. Podemos criar seções. Em vez de criar um modelo inteiro, podemos criar uma seção que pode ser incluída em um modelo, provavelmente no editor Tudo bem, agora vou clicar em Criar nova página. Então, aqui você pode ver que podemos criar a partir de uma variedade de modelos, alguns dos quais foram totalmente desenvolvidos e com todos os recursos. Se tivermos um produto que corresponda muito bem a isso, podemos selecionar um deles como ponto de partida. Muito útil para muitas pessoas que não querem personalizar uma landing page ou uma página de produto, mas precisam de algumas ideias E esse é um dos maiores pontos de venda do uso de um construtor de páginas. O App Shop Pi também não fornecerá isso a você fornecerá isso a você com todo o conteúdo de demonstração. Dito isso, muitos desses elementos são específicos para o produto específico que está sendo vendido. Então, eu não vejo nada aqui para snowboards, então vamos começar do zero Vou criar uma página de produto do zero. E o que posso fazer aqui é inserir uma linha de duas colunas, por exemplo, e começar a criar meu layout. Isso é arrastar e soltar, esse sistema, que é bom para muitos usuários. Então eu poderia arrastar um título para este lado, eu poderia arrastar uma imagem para esta coluna. Como você pode ver, essa funcionalidade de arrastar e soltar você realmente não tem no editor de temas do Shopify Esse é o ponto de venda de um aplicativo de criação de páginas como esse. Mas, como essa é uma página de produto, primeiro quero criar um conteúdo dinâmico. Desculpe, estou clicando nas áreas erradas aqui. Na verdade, não uso aplicativos de criação de páginas porque sou desenvolvedor. Mas deixe-me ver. Eu deveria ser capaz de clicar aqui. E agora temos essa seção. Vou deletar essa seção. Vou rolar para baixo até o produto. E isso nos permitirá trazer informações dinâmicas sobre o produto. Como você pode ver aqui, está trazendo o produto de camiseta que está na minha loja. Mas vamos trazer o snowboard Oxygen completo. Acho que foi a coleção de snowboard Oxygen com a qual brincávamos mais cedo Tudo bem, então vamos usar isso como nosso produto de exemplo, certo? Portanto, temos essa seção de produtos aqui e podemos alterar o layout. Podemos visualizá-lo em diferentes tamanhos de tela. E o que é legal sobre páginas de gemas, eu acho, é que podemos criar layouts embaixo Então, talvez queiramos um título de galeria de produtos, seletor de preço e quantidade, como de costume Mas também queremos incluir algumas outras seções abaixo para realmente vender o produto. Assim, podemos trazer, você sabe, algo assim com um modelo predefinido Você sabe, podemos arrastar e soltar aqui. Então, podemos realmente colocar essa imagem em qualquer lugar que quisermos. Podemos trazê-lo de volta para aquela coluna. Poderíamos reorganizar isso acima ou abaixo. Então, muita flexibilidade aqui. E é um sistema muito bom para usuários que apreciam a funcionalidade de arrastar e soltar. Tudo bem, agora, obviamente, isso não é conteúdo dinâmico, então provavelmente vamos querer atribuí-lo apenas a um único produto ou encontrar uma maneira de trazer conteúdo dinâmico aqui. Mas é meio difícil com páginas de gemas. A área em que esses aplicativos tendem a falhar é quando trazemos conteúdo dinâmico. E o que quero dizer com conteúdo dinâmico é que isso aqui está inserindo o título do produto Você pode ver que não consigo editar isso. Não consigo editar isso. Isso é extraído do próprio produto. Esses são dados dinâmicos, mas aqui eu poderia mudar isso para qualquer imagem que eu quiser. Mude isso para qualquer texto que eu quiser. É totalmente comestível. A única desvantagem disso é que esse conteúdo se aplicará a todos os produtos aos quais esse modelo for atribuído Então, por falar em tarefa, vamos até aqui e clicar em zero produto atribuído E vamos atribuí-lo a esse produto. Então, acredito que a coleção, Snowboard , Oxygen, se chama. Clique em Confirmar. Agora, quando clicarmos em Publicar, esse modelo será atribuído a esse produto. Feito isso, podemos clicar em Exibir página ativa. E agora podemos ver que a página do produto é igual à que criamos aqui nas páginas de gemas. Agora, porque sou desenvolvedor , acho importante entender como isso está realmente se conectando à sua loja O que isso está realmente fazendo é criar um modelo em seu tema e, em seguida, atribuir esse modelo ao seu produto O que eu quero dizer com isso. Deixe-me demonstrar isso para você agora. Se eu entrar em produtos e encontrar a coleção Snowboard Oxygen na minha lista de produtos aqui, desço até onde o modelo está selecionado Temos template GP, que significa páginas de gemas, e esse código longo que representa o modelo que acabamos de criar, certo? Portanto, não é um nome muito fácil de usar, mas nos vincula diretamente a esse modelo que acabamos de criar, certo? E então, se examinarmos nosso código de tema, não se preocupe, não escreveremos nenhum código de tema aqui. Mas eu só quero te mostrar o efeito que isso tem na sua loja. Você verá que páginas de gemas, qualquer coisa com gemas ou páginas nesta lista de arquivos, aqui são arquivos que foram criados por páginas de gemas apenas instalando o aplicativo e executando determinadas funções. Então, você pode ver que temos quatro arquivos aqui e, se entrarmos em nossa pasta de modelos aqui e rolarmos para baixo, podemos ver esse modelo de produto com o código depois dele. E você pode ver que ele vincula duas seções que têm seção GP seguida por um ID exclusivo Então, se rolarmos até aqui, agora você pode ver que cada seção se torna esse arquivo em nossa pasta de seções também. Então eu menciono isso porque no momento, isso não é tão confuso. Mas se você acabar criando muitos modelos em sua loja usando páginas de modelos em sua loja jam ou um aplicativo semelhante, tudo começa a parecer muito confuso. Deixe-me mostrar um exemplo de um dos meus clientes. Aqui está o código do tema para um dos meus clientes. E, como você pode ver aqui, temos esses quatro arquivos em nossa pasta de layout. Mas se rolarmos para baixo, temos páginas preciosas, modelos para artigos. E se rolarmos uma tonelada para baixo para ver as coleções, teremos uma tonelada até mesmo para o modelo de índice, que é a página inicial, temos um monte de páginas personalizadas aqui com códigos diferentes. Basicamente, temos muitos arquivos de páginas de gemas aqui. Então, aqui vamos para a seção de produtos, veja todos esses modelos de produtos diferentes sem nomes descritivos Apenas códigos relacionados a produtos em páginas de gemas. Portanto, é importante observar aqui que quando você enlouquece com esses aplicativos de criação de páginas, isso realmente adiciona muito volume ao seu tema. Aqui, entramos nas seções aqui, e você pode ver que, se rolarmos para baixo, felizmente, não está criando muito na forma de arquivos de seção , mas definitivamente na forma de modelos aqui Agora você provavelmente não vai brincar neste editor de código, mas onde isso se manifestará é no editor de temas. Se você se lembra dessa lista suspensa anterior, onde poderíamos ver todos os modelos de produtos. Você verá aqui que temos uma lista gigante e muitos modelos são atribuídos a apenas um produto. Isso torna um pouco mais difícil de gerenciar. Se quisermos usar o editor de temas, será difícil determinar qual modelo nas páginas de gemas está sendo aplicado a qual produto. E se tentarmos editar isso em nosso editor de temas, você verá que não há opções. Não há nem mesmo uma seção aqui para usarmos. Tudo está vindo por meio de páginas preciosas. Então, basicamente, não funciona muito bem com o editor de temas se você estiver usando páginas de gemas. Dito isso, no caso de querermos criar um modelo que se aplicasse a vários produtos com seções personalizadas que criamos por meio desse aplicativo Page Builder , as páginas de gemas provavelmente não causarão muitos problemas. Podemos entrar aqui, clicar em Gerenciar produtos atribuídos e atribuir esse modelo a vários produtos diferentes. Então, poderíamos fazer snowboard completo em vez disso. Se eu ouvir Publicar, agora o modelo de snowboard completo mudará do padrão para esse modelo específico de páginas de joias. Para provar isso, vamos voltar ao nosso administrador Vou sair do código do tema aqui. Entre nos produtos. E era o snowboard completo, não era? Aqui mesmo. Se eu rolar para baixo, podemos ver que este produto está usando o mesmo modelo que o outro das páginas Chem Mas podemos entrar aqui e definir isso como produto padrão, e isso fará com que ele volte a ser exibido por meio do modelo padrão. Se eu clicar em visualizar, esse é o modelo padrão. Se eu o mudei de volta para o modelo G em pages, clique em visualizar Agora você pode ver que o mesmo produto é entregue por meio de um modelo diferente, aquele que criamos nas páginas de gemas. Portanto, os prós e os contras de usar páginas de gemas são quando criamos um modelo de página em páginas de gemas , ele realmente não funciona bem com o editor de temas Embora o editor de temas possa não ter toda essa funcionalidade de arrastar e soltar, o uso de páginas de gemas proporcionará menos controle sobre o editor de temas. Mas se você está feliz em confiar neste aplicativo de criação de páginas gemas, então você deve estar bem quando se trata de criar modelos para muito conteúdo dinâmico em páginas de gemas, pois isso começa a ficar um pouco complicado. Então, eu recomendaria mais páginas de gemas é criar páginas de destino. Obviamente, uma página de produto tem seus próprios dados e, portanto , é altamente dinâmica. Mas uma landing page é uma página única que tem conteúdo estático. E então Em pages é um ótimo construtor de páginas de destino. Se eu entrar aqui, por exemplo, posso clicar em Selecionar para selecionar esse modelo de página de destino e criar um modelo de páginas em. Com base nisso, obtemos esse lindo modelo que podemos mudar para o que quisermos. Podemos fazer uma promoção na Black Friday e vez disso, digamos que tenha 35% de desconto. E podemos vincular esses botões a qualquer lugar que quisermos vincular para alterar isso o quanto quisermos com essa bela funcionalidade de arrastar e soltar. Ok, se quisermos clicar em Publicar sobre isso, isso não é um produto, então não criará um modelo de produto. Mas isso criará um modelo de página. E não só isso, ele criará a página para acompanhá-la. Então, o que eu quero dizer com isso? Então, se clicarmos em Publicar novamente, o botão desaparecerá antes. Para a página View Live, é irritante. Você precisa realmente clicar Publicar para que esse botão apareça. Mas aqui você pode ver que criamos esta página. O identificador não é a melhor página de destino. 18, 13, 36, 16 de março. Mas é claro que podemos mudar isso. Mas agora temos essa linda landing page. E o que é feito, se observarmos como isso afetou nossa loja virtual, ela não apenas criou um modelo, mas criou uma página para tirar proveito desse modelo. Então, como você pode ver na loja online, temos páginas personalizadas e podemos ver que essa página de destino está lá. E no modelo do tema, você pode ver que é esse modelo recém-criado por Em pages. E como esse conteúdo é todo estático, é apenas uma landing page. Podemos colocar o que quisermos aqui. Isso tende a funcionar muito bem e não causar muitos problemas com o gerenciamento do código no futuro. Dito isso, no entanto, um dos maiores problemas com esses aplicativos de criação de páginas, quase todos eles, tenho certeza , é que, quando clicamos em publicar, essas alterações se aplicam apenas ao tema atualmente ativo. Se voltarmos aos nossos temas aqui, se olharmos para a versão 12 do Dawn, a que está sendo executada atualmente, você verá que todo o código das páginas de gemas foi colocado aqui. Mas se olharmos nossos temas de pré-visualização, então vamos dar uma olhada na versão 11 que está em pré-visualização, você verá que as páginas do Jem não instalaram nenhum de seus arquivos aqui Então, se quisermos utilizar temas de pré-visualização para pré-visualizar coisas, então queremos fazer uma alteração em um tema, talvez atualizar os dados e o editor de temas e depois visualizá-los antes de publicar. Isso é algo um pouco difícil de fazer em conjunto com as páginas do Jem ou qualquer outro aplicativo do Page Builder O que quero dizer com isso é que, se você ver aqui, todos esses temas têm um botão personalizado diferente. Então, se eu mudar o conteúdo desse tema, ele só se aplicará a esse tema. E como esse tema não é o tema ao vivo, tudo o que eu fizer aqui não será lançado. Eu posso testar um monte de coisas. Infelizmente, não acho que exista uma maneira de fazer com as páginas de gemas afetem esse tema em vez do tema atualmente ativo. E para alguém que trabalhou em lojas que usam páginas de gemas, mas também está tentando visualizar recursos personalizados desenvolvidos em um tema de pré-visualização, torna-se meio complicado e difícil fazer com que o processo de preparação funcione Então, essa é uma pequena demonstração das páginas de gemas e de como elas afetam sua loja. Acho que os maiores pontos de venda das páginas de gemas são esses modelos pré-fabricados que você pode simplesmente colocar em sua loja e reorganizar arrastando e soltando A queda do dragão parece funcionar muito bem. Você sabe, eu posso arrastar uma imagem entre qualquer um desses pequenos pedaços de texto, mover esses pedaços de texto ao redor. É muito bom para alguém que deseja a funcionalidade de arrastar e soltar. E, como você pode ver aqui, fizemos uma mudança. Então, precisamos republicar, e isso mudará nosso modelo Obviamente, o efeito colateral de tudo isso é como isso afeta seu tema. Mas, desde que você entenda isso, vamos passar para o próximo aplicativo, que é o rep blo 7. Replo: Tudo bem, neste vídeo, vamos dar uma olhada em outro aplicativo de criação de páginas chamado Replo Agora que você viu seu primeiro aplicativo de criação de página, agora você pode ver, por meio comparação com o Replo, quais coisas são iguais e quais coisas mudam dependendo do aplicativo de criação de página que você está usando Tudo bem, então vamos instalar esse novo aplicativo de criação de páginas. Replo, lá vamos nós. Designer da página inicial do Replo. Clicarei em Instalar e, em seguida, clicarei em Instalar novamente para conceder as permissões necessárias. E o Replo funciona de forma um pouco diferente porque você precisa criar um novo projeto no Replo. Em seguida, esse projeto é vinculado à loja. Vou chamar isso, digamos, de aula de compartilhamento de habilidades de Chris. Vou clicar em Criar projeto. Agora, com o Replo, você pode criar um modelo gerado por IA. Isso é muito moderno. Você pode criar uma página em branco ou navegar pelos modelos. Deixe-me dar uma olhada em alguns desses modelos aqui. Assim como as páginas de gemas, você tem muitas coisas pré-construídas aqui que pode utilizar em sua loja para não precisar criar um layout sozinho. Deixe-me clicar nesta e criar uma nova página com ela. Ao contrário das páginas de gemas, o Replo quer saber o nome e o identificador antes de começarmos a rever esta página Eu vou dizer página de destino. E, como você pode ver, a alça é gerada automaticamente. Mas podemos mudar isso agora ou podemos alterá-lo posteriormente no admin da Shopify Obviamente, todas as páginas personalizadas precisam ser atribuídas a uma página personalizada no sistema da Shopify Portanto, também poderemos mudar isso em nosso administrador. Então, vou clicar em Criar página. E se você for como eu usando uma loja de desenvolvimento, será solicitado que você insira a senha da sua loja. Todas as lojas de desenvolvimento são restritas externamente por meio de uma senha de loja. Assim, você pode acessar as preferências do canal de vendas da sua loja virtual e simplesmente copiá-las , caso seja solicitado. Esse também é um recurso se você tiver uma loja ativa e quiser ocultá-la, a menos que tenha uma determinada senha que também seja um recurso de lojas pagas. Mas como minha loja está em desenvolvimento, preciso restringir o uso de uma senha. Tudo bem, aqui atrás, você pode ver aqui que temos o conteúdo dinâmico chegando. E você pode ver que temos esse layout muito especial aqui. Obviamente, esse conteúdo aqui é um conteúdo de demonstração e vem de outro produto. Então, teríamos que mudar todo esse conteúdo para ser relevante para nosso produto. Mas se você olhar o Rep Blow e apenas compará-lo às páginas do Jem, você pode ver que temos esse painel à esquerda aqui, que é mais parecido com o editor de temas do que as páginas do Jem E se eu tentar clicar e arrastar esse conteúdo, ele funciona, mas é um pouco menos clicável e arrastável Acho que talvez seja um pouco mais robusto porque você tem esses contêineres diferentes aqui. E você pode ver a estrutura do modelo aqui. E você também pode clicar e arrastar nesta seção, assim como faria no editor de temas. Se você se lembra do que abordamos no vídeo sobre a atualização anunciada dos blocos que chegará ao editor de temas da Shopify, esse pequeno painel aqui se aproxima mais do que está chegando ao editor de temas da Shopify Portanto, é um paradigma semelhante, o que eu acho que é uma coisa boa Mas, novamente, se você aguentar até que essas mudanças entrem em vigor , isso esgota a necessidade de algo como golpe de reputação. Mas uma das grandes diferenças aqui é que você verá que criamos uma página aqui. Isso não é um produto. Então, se eu clicar em Publicar sobre isso, o que ele vai fazer é, bem , primeiro de tudo, pedir criemos um plano, o que não vamos fazer. Mas se clicássemos em Publicar, isso criaria uma página, não um produto. Se quiséssemos usar o Replo para afetar a página de um produto, precisaríamos primeiro criar uma seção Agora eu não vou começar a pagar, o que era, $300 por mês $250 por mês. Só para este vídeo. E eu também não espero que você saiba. Então, o que eu poderia fazer é mudar para uma das lojas dos meus clientes e podemos ver como isso está afetando nossa loja de vidas. Tudo bem, então aqui você pode ver que temos algo semelhante totalmente desenvolvido para um produto específico desta loja. Então, como você pode ver, é apenas para fins de demonstração, porque na verdade não está na página de um produto. que esse cliente está usando o replo Acho que esse cliente está usando o replo no momento são páginas de produtos, mas principalmente para a página inicial. Então, se eu pesquisar. Na seção de página da página inicial, você pode ver esse ícone aqui indicando que a página está definida como a página inicial E se eu clicar aqui, você pode ver que este é um layout de página inicial completo que foi criado para esse cliente. Acredito que neste caso contratamos própria Replo para construir esse layout para Assim como os outros modelos do Replo, podemos mergulhar em qualquer uma dessas seções e editar muitas coisas diferentes Há muitas opções diferentes aqui, mas você verá que elas parecem bem diferentes em termos de todos os layouts e maneiras diferentes de todos os layouts e maneiras diferentes alterar a largura em comparação com as páginas de gemas, que talvez sejam um pouco mais pesadas para arrastar e soltar Mas, novamente, cada um desses aplicativos faz coisas semelhantes. Eles simplesmente abordam isso de maneiras diferentes. Para criar uma página de produto ou criar algo em replo, que afetaria uma página de produto, ela precisa ser criada como uma seção Vou clicar aqui para entrar nas seções. E você pode ver aqui que eu tenho essa seção publicada atualmente para MCT Oil, Kickstart, Creio que esta seção já esteja publicada. Então, se eu entrar no personalizador do tema ao vivo aqui, você pode ver a página inicial rapidamente Você pode ver aqui que não há opções para personalizar. Isso é apenas no Replo, porque está sendo tratado pelo Mas se fôssemos acessar a página do produto, não tenho certeza em qual modelo ele está sendo executado. Vamos apenas pesquisar o nome do produto. Mct, Kickstart. Este é um mau exemplo porque está usando páginas G em. Na verdade, deixe-me clicar aqui para alterar e posso selecionar na lista de produtos. Pesquise por MCT, Kickstart. Espero que haja um que não esteja atribuído às páginas do Gem. Aqui vamos nós. Você pode ver que atualmente temos algumas seções nativas de shove Fi aqui E se eu clicar em Adicionar seção, podemos adicionar uma seção que foi gerada pelo Replo No nosso caso, deixe-me pesquisar um MCT Kickstart Aqui vamos nós. Mct Oil Kickstart E podemos trazer esta seção. E o que isso nos permite fazer é ocultá-los e usar a seção como nosso modelo de produto. Agora você pode ver que transformamos nossa página de produto para esse produto. Mas é claro que estamos no modelo de produto padrão. Não queremos afetar esse modelo específico. Gostaríamos de criar um novo modelo para o produto. Em seguida, atribua a seção que criamos a esse produto. Essencialmente, embora tenhamos criado uma seção aqui, ela não tem nenhuma configuração. A vantagem de ter isso como uma seção é somente se quisermos adicionar algo abaixo ou acima dela. Porque se algo for uma seção, podemos empilhar mais seções acima e abaixo dela Então, por exemplo, eu poderia pegar um banner de imagem aqui e colocá-lo na seção que foi gerada pelo Replo Ok, então voltando para a interface do Replo, eu pessoalmente não entendo o hype por trás dessa É um sistema semelhante ao Em pages. Você pode criar seções que, como vimos no último vídeo com páginas de gemas, parece que você pode criar seções nas páginas de gemas 2. Mas essas seções não têm configurações, então elas realmente não aproveitam a funcionalidade nativa do editor de temas da Shopify Mas uma das coisas que posso dizer que gosto sobre isso é essa estrutura em forma de árvore que temos à esquerda. E, claro, temos muitos componentes pré-construídos que também podemos usar. Parece que eles têm uma biblioteca de modelos bem grande, o que, obviamente, é um valor agregado para muitos comerciantes Mas, de forma muito semelhante às páginas de gemas, na forma como elas se conectam ao seu tema, elas criarão arquivos Antes de finalizarmos este vídeo, vamos dar uma olhada no código do nosso tema. Se pesquisarmos replo, podemos ver que, assim como Em pages, ele está criando muitos arquivos Replo com, bem, sequências de identificação não aleatórias, mas exclusivas aqui, que parecem muito feias e confusas Mas isso permite que o Replo faça suas coisas. Ele também criará um monte de replochunks na Quero dizer, veja todos esses relo, repl, replochunk. Se você concorda em sujar seu tema, então enlouqueça com esses aplicativos. Está tudo bem. Mas quando você começa a analisar o código do tema, isso começa a ficar muito confuso. De qualquer forma, tudo isso é um golpe de reputação neste vídeo O próximo abordará o aplicativo final, que é instantâneo 8. Instante: Tudo bem, nesta lição, abordaremos o último aplicativo em nossa lista, que é instantâneo. Tem havido muita publicidade em torno desse aplicativo, especialmente com o plug-in Figma e o recurso exclusivo que ele tem, que cria configurações de seção para você, mas veremos como isso funciona em apenas um segundo Na verdade, vamos instalar este aplicativo. Então, é chamado apenas de instantâneo. Estamos procurando o Instant Page Builder. Acredito que nenhum resultado foi encontrado. Então, vamos pesquisá-lo na loja de aplicativos clicando neste botão, Instant Page and Section Builder. Vamos clicar em Instalar novamente. Isso nos leva ao aplicativo instantâneo, que, ao contrário dos outros aplicativos que analisamos, este não carrega em sua loja virtual. Como mencionei antes, tudo isso é software externo, não importa qual aplicativo você esteja usando. E espero que o Fi permita que esses aplicativos sejam carregados dentro da janela, dentro da sua loja Fi store. Mas isso não significa que faça parte, então é integrado ao visual da Schopf por Este aplicativo o direcionará para seu próprio site, então você não verá a interface de usuário do shove pi à esquerda aqui E a outra coisa diferente aqui é que precisamos criar um site para páginas de gemas. Não precisávamos fazer nada disso para o representante abaixo. Precisávamos criar um projeto em instantes. Precisamos criar um novo site. Então, vou chamar isso de Christopher's Skillshare Store Hit Próxima etapa. Ele nos perguntará o que queremos vender. Nosso produto está mais próximo do fitness. Não sei se isso significa alguma coisa. Provavelmente é apenas uma pesquisa de mercado instantânea. Então, vou clicar em Fitness e agora vou para a interface do aplicativo Instant Page Builder. Agora, uma das coisas que eu gosto é esse design limpo que nos incentiva a fazer certas coisas que eu acho que são boas práticas, como configurar ativos antes de começarmos e configurar certos estilos de cores que podemos carregar em nossos diferentes layouts E aqui você pode ver que podemos criar páginas ou seções. Aqui você pode ver o painel de camadas. Mas precisamos primeiro criar uma página ou seção real para inserir algumas camadas. Vamos clicar aqui para criar do zero aqui. O que fazemos é clicar e arrastar desse painel até nossa tela aqui. Então, vamos começar um layout de duas colunas. E então digamos que vamos colocar uma imagem em um lado e vamos colocar um título no outro lado, bem neste lado. Vamos definir a imagem. Vou clicar na imagem. Podemos escolher sua fonte. Nós podemos. Vamos fazer o upload dessa imagem que, na verdade, vem da loja, tentando recriá-la em um de seus vídeos do Youtube É uma loja da Beyonce chamada Sacred. Como você pode ver aqui, podemos passar o mouse sobre determinados elementos, clicar neles para revelar suas configurações e podemos ver que eles estão respondendo aos nossos Mas o que não podemos fazer é clicar e arrastar os elementos. Você realmente não pode ver do seu ponto de vista, mas atualmente estou arrastando essa imagem e nada está acontecendo Portanto, não há nenhuma funcionalidade de clicar e arrastar aqui. Mas, semelhante ao Replo, temos essa estrutura em forma de árvore que, mais uma vez, será semelhante ao editor de temas quando a nova atualização for lançada Um dos recursos interessantes, porém, é que talvez ele não tenha funcionalidade de arrastar e soltar para mover as coisas. Mas ele tem redimensionamento de arrastar e soltar, então eu posso redimensionar essa imagem usando o editor visual, que é um recurso interessante Então, como você pode ver aqui, estamos no modo de criação de página. As duas opções instantâneas são criar uma página ou uma seção. Então, se eu clicar em Publicar sobre isso, primeiro de tudo, ele solicitará que nos conectemos ao shove Fi Não sei por que ele pede que façamos isso quando já instalamos o aplicativo. Mas talvez tenha algo a ver com o aplicativo fora do administrador. Então, vou clicar em Conectar. E acredito que isso conectará nosso site que criamos à nossa loja shove fi Um site e uma loja parecem ser duas coisas diferentes, mas podemos conectá-los. E agora podemos publicar esta página em nosso site de loja. Agora podemos clicar aqui para ver a página. Ao contrário do Replo, ele não nos deu a opção personalizar o título e o identificador da página, mas criou uma página em nossa loja virtual usando esse layout Então, se formos até aqui e descermos até as páginas, podemos ver a prova disso aqui. Se eu clicar aqui para ver a página, você pode ver que o nome da página é simplesmente página. E se entrarmos no SEO do site, podemos ver o identificador aqui da página. E então, se examinarmos o modelo, você verá que estamos usando páginas de gemas semelhantes, semelhantes a replo, estamos usando um modelo gerado por elas que ficará em algum lugar do nosso tema chamado instant seguido por uma string exclusiva Tudo bem, então é tão instantâneo criar uma página em nossa loja. Mas o interessante do Instant não é que podemos criar páginas como acabamos de criar, é que podemos criar seções e, em seguida, essas seções terão configurações integradas para que depois de inseri-las em nosso editor de temas, possamos editá-las usando o editor de temas. Então, idealmente, devemos ser capazes de tirar proveito do editor de temas e do construtor de páginas instantâneas seguindo esse sistema. Então, vamos testá-lo. Vamos criar uma seção. Digamos que queremos que essa seção seja uma seção de página de produto. O que podemos fazer é deixar que eu encontre o encarte na página aqui. Como é chamado? O menu Inserir. E eu vou entrar em elementos. Poderíamos fazer outro layout de duas colunas e colocar algum texto estático, alguma imagem estática, botão , vídeo, todas essas coisas boas. Mas o que podemos fazer é inserir conteúdo dinâmico do objeto do produto. Se colocarmos isso em uma página de produto ou mesmo se não colocarmos isso em uma página de produto, podemos vincular um produto e, em seguida, extrair as informações dinamicamente desse produto Então, ainda precisaremos criar um layout. Então, vou criar um layout de duas colunas. Eu só preciso arrastá-lo para a tela. E em vez de colocar uma imagem estática desse lado, vou colocar a imagem do produto desse lado. E então, em vez de ter um título aleatório, vou colocar o título do produto aqui. Mas eu não entendi o ponto, então preciso. Está aqui em cima, então eu só preciso arrastá-lo para aquela linha. Em seguida, também adicionarei, digamos, o preço aqui, preço do produto e a descrição. E adicione o botão de corte abaixo disso. Ok, agora, no momento, nada está aparecendo porque precisamos vinculá-lo a um produto Shopper Fire Aqui mesmo. Podemos selecionar Definir fonte. Vamos fazer o mesmo que fizemos o tempo todo, que foi a coleção Snowboard Oxygen Acredito que seja esse. Então, podemos acessar aqui o título de um produto, alterar a fonte para a coleção snowboard Oxygen E acho que o resto, essa adição ao carrinho, está atualmente vinculada a esse espaço reservado Então, queremos mudar a fonte para coletar oxigênio do snowboard também Ok, e então podemos criar, assim como fazemos com os outros aplicativos de criação de páginas, podemos criar outro tipo de conjunto de colunas abaixo dele e colocar mais conteúdo. Mas, por enquanto, vamos desfazer isso. Na verdade, não me deixa desfazer isso. Então, vou ter que simplesmente excluir essa linha. Isso funcionou? Não. Você só precisa clicar nele para excluir. Ok, acho que funcionou, embora não, há outra coluna lá. OK. Tudo bem, agora vou clicar em Publicar. E em vez de publicar uma página, ele criará uma seção que será inserida em nosso tema. E o que podemos fazer nesse momento é trazer essa seção para qualquer modelo usual dentro do nosso paradigma normal de desenvolvimento de temas, dentro do nosso editor de temas normal E então podemos utilizar essa seção. E acredito que isso também deve criar configurações, de modo que, depois de colocarmos esse layout em nosso editor de temas, também possamos editá-lo com o editor de temas. Então, vamos ver como isso funciona. Ok, então vou voltar ao meu editor de temas para o tema atual, clique em Personalizar para chegar lá porque criamos uma seção de produtos. Vamos abordar os produtos. Podemos entrar no produto padrão aqui. Digamos que quiséssemos substituir esta seção para mostrar as informações do nosso produto Não vou excluí-lo, vou apenas ocultar essas duas seções para que elas não apareçam. Então, no anúncio, não nomeamos nossa seção corretamente, apenas a chamamos de S. Eu acredito que esse é o nome que vai aparecer aqui. Mas, como você pode ver, a seção que criamos instantaneamente agora está disponível para adicionarmos no editor de temas. Então, vou clicar nisso e abrir isso. E você pode ver agora que temos nossas informações aqui, o único problema é que isso é para a coleta de oxigênio do snowboard E, como você pode ver aqui, estamos visualizando os air pods no produto padrão Portanto, não queremos que isso se aplique ao produto Airpods e todos os outros produtos no modelo de produto padrão Mas se eu clicar nesta seção, você verá que ela abrirá as configurações. Então, conforme prometido, o Instant nos fornecerá configurações junto com o conteúdo quando publicarmos uma seção em nossa loja da I Store, que eu acredito ser bastante única. Não sei se algum dos outros faz isso. Talvez Jem pages agora faça isso, não tenho certeza, mas acho que é daí que vem o entusiasmo em torno do instante Mesmo assim, o que eu não gosto nesse sistema é que há três lugares diferentes onde eu posso colocar um produto. Então, eu vinculei um produto aqui, vinculei-o duas vezes novamente. Adicionar ao botão de corte. O produto não foi vinculado, mas tudo deveria estar relacionado apenas a um único produto, certo? Então, devido a esse comportamento inesperado, achei que seria melhor perguntar ao próprio desenvolvedor do aplicativo por que temos três campos separados. E número dois, como podemos extrair o produto do modelo do produto? Em relação ao segundo ponto, a pessoa de suporte me disse que atualmente não suporta o uso da criação de páginas de produtos personalizadas completas, mas ela estará disponível em breve, portanto, todas as seções criadas devem ser usadas como expansões para sua página de produto atual Essencialmente, o que eu acho que ele quer dizer aqui é que não podemos extrair o produto do produto que estamos vendo em um modelo de produto. Mas o que podemos fazer é criar seções que extraem informações do produto. Especificamos que basicamente não podemos usar links dinâmicos aqui Temos que entrar e definir explicitamente um produto. Mas quanto aos três campos, ele menciona aqui que atualmente cada elemento está conectado separadamente. O que precisamos fazer é definir a conexão do produto na camada principal e, em seguida, todas as camadas abaixo podem extrair dados dessa única Referência cruzada dessas informações com dois canais T no Youtube por instância Acho que o que precisamos fazer é remover essas seções dinâmicas individuais do produto completamente essas seções dinâmicas individuais do produto e inserir algum conteúdo estático. Mas, em seguida, vincule o contêiner principal a um produto de incêndio do comprador Parece que não conseguiremos fazer com que essa seção seja extraída de uma página de produto. Mas pelo menos podemos criar algum tipo de seção de produto em destaque que podemos usar em outras páginas para destacar um produto específico. Deixe-me voltar ao editor aqui e seguir com essa ideia. Então, vou remover todos esses elementos com o produto no início. Todos esses elementos dinâmicos do produto que eu inseri antes. Então, vou usar minha chave de exclusão para removê-los mais facilmente. Agora, acabamos de obter nosso layout de duas colunas novamente. E você pode ver aqui que as linhas estão conectadas à Shopify Vamos apenas remover essa conexão dinâmica. Por enquanto, vamos inserir nosso texto estático. Nós tínhamos, qual era a imagem aqui? Texto aqui. Vamos ver. Agora precisamos de um texto de cabeçalho para o título do produto. Vou remover, na verdade, esse talvez possa ser o nosso preço. Vou deixar isso aí. Eu adoraria colocar um botão, mas não sei se podemos sair da loja, se eu estiver aqui. Vamos experimentá-lo. Agora que temos todo o conteúdo estático, deixe-me ir até aqui. E no contêiner principal, a coluna, vamos definir isso para um produto específico. Devemos ser capazes de alterar isso no editor de temas posteriormente com a fonte dinâmica selecionada no contêiner pai. Vamos entrar na imagem e você pode ver aqui que podemos vincular à fonte principal. E então, se rolarmos para baixo, o conteúdo da imagem pode ser definido de estático para dinâmico. E pegue a imagem do produto que será retirada do contêiner principal, de onde o produto está vindo, aqui embaixo. Temos a fonte aqui. E então podemos ir até aqui no conteúdo aqui, podemos fazer a mesma coisa, movê-lo de estático para dinâmico. Há mais uma etapa, eu tenho que realmente selecionar aqui de qual campo no objeto do produto eu quero extrair. Então, vou tirar do título aí. Você pode ver que ele puxa dinamicamente. E então, esse pequeno texto aqui, vamos ajustar o preço. E então, aqui embaixo, ele será extraído dessa fonte. Mas não acho que possamos dar a isso uma operação personalizada. Vamos ver as interações. Podemos fazer com que isso acrescente algo ao corte? Aqui vamos nós. Ação adicionada ao corte. Bem, temos nossa fonte aqui. Vamos testar isso. Deixe-me renomear isso. Se eu mergulhar no texto, digamos que adicione ao recorte. Agora clique em Salvar e vamos publicar essa seção e, em seguida, obteremos esse atalho útil para abri-la no editor de temas, vamos ver como isso altera o resultado Então, estamos dentro do editor de temas novamente. E vamos ao modelo do produto. Como você pode ver, temos o dobro de informações sobre o produto, então vamos ocultá-las. E o que nos resta é apenas a seção. Deixe-me entrar e verificar as configurações e ele pode ver que agora temos apenas um campo de produto. Então, se eu mudar isso para snowboard arquivado, devemos obter os dados dinâmicos extraídos do snowboard arquivado, que não parece ser Infelizmente, tem esse campo aqui. Mas se eu mudar o produto aqui, tudo bem, agora parece que está funcionando. OK. Então isso foi uma pequena falha, eu acho Tudo bem, agora podemos mudar isso para qualquer produto que quisermos. E todos os detalhes, a imagem, o título, o preço e o produto que é adicionado ao recorte agora devem estar presentes em qualquer produto que selecionarmos aqui Mais uma vez, estamos na página da coleção snowboard hydrogen Então, vamos tentar mais uma vez. Se pudermos usar links dinâmicos, selecionarei o produto e verificarei se isso muda quando mudarmos a página que estamos visualizando Então, se eu usar isso para alterar o produto que estamos visualizando por meio do produto padrão, vamos alterá-lo para oxigênio Ok, então a vinculação dinâmica parece estar funcionando agora que corrigimos esse problema com as entradas E você pode ver aqui antes quando estávamos usando links dinâmicos, estava dizendo da seção atual, agora diz da página atual, que é o que queríamos fazer Então, acho que houve um pouco de interpretação errada da minha parte do e-mail enviado anteriormente Desculpas por isso. Mas você pode ver que a vinculação dinâmica funciona Portanto, agora podemos criar essencialmente o mesmo que isso, uma seção principal de informações do produto em instantes, trazê-la de volta e ainda ter algumas opções de personalização no editor de temas Então, estamos obtendo um pouco dos benefícios dos dois mundos aqui. Então, se eu clicar em Salvar e visualizá-lo por meio desse tema, certo? Portanto, isso está no modelo de produto padrão, então isso deve realmente se aplicar a basicamente todos os produtos. Vou clicar aqui, isso abrirá o produto no administrador. Não acho que haja um link para abrir a página real do produto, o que é irritante Mas podemos clicar em Visualizar novamente para acessar a página no front-end. Como você pode ver aqui, estávamos clicando para pré-visualizar a coleção, Snowboard Oxygen, e temos isso Agora, se você clicar em um produto diferente, digamos algo completamente diferente, como um vale-presente. Você verá que o mesmo modelo está sendo aplicado e que os dados dinâmicos estão sendo transmitidos E espero que esse botão Adicionar ao carrinho também funcione E sim, identificou que o produto era um vale-presente e o revelou. Isso é excelente. Portanto, esse é o benefício de usar algo como instantâneo. Oferece um pouco do melhor dos dois mundos. Então, se você vai criar algo como uma página de produto que é altamente dinâmica, eu recomendaria fazer algo assim com o Instant, em vez de talvez algumas das outras opções sobre as quais falamos nesta aula, para que seja instantâneo. No próximo vídeo, resumiremos todo o nosso aprendizado até agora e, em seguida concluiremos a aula com seu projeto de classe e as próximas etapas 9. Resumo: Falei um pouco sobre as várias maneiras de personalizar um site Hopi Fi sem soluções de código Vamos recapitular rapidamente antes de prosseguirmos com a conclusão e o projeto da aula Como você viu ao longo desta aula, não importa qual solução você escolha, todas elas usarão um tema Shopifi, como também vimos nesta Com exceção da criação instantânea de um modelo ou seção em um aplicativo de criação de página, nos forçará a continuar usando esse aplicativo para fazer alterações em nossos arquivos de front-end que serão inseridos em nosso tema, mas para alterar o código, precisaremos voltar ao aplicativo que os criou. No próximo vídeo, compartilharei minhas recomendações pessoais. Mas para completar o resumo deste vídeo, aqui estão alguns pontos a serem lembrados. Em primeiro lugar, o canal de vendas da loja virtual da Shopify é construído em um sistema de modelos, seções e blocos No futuro, você poderá aninhar blocos dentro de blocos para criar layouts mais complexos Mas, por enquanto, os blocos existem em um único nível, aninhados abaixo das seções construtores de páginas número dois ajudam você a criar modelos personalizados Esses modelos não são divididos em várias seções temáticas e, portanto, não aproveitam os recursos do editor de temas. Dito isso, os criadores de páginas número três agora também estão criando seções temáticas para funcionar melhor com o editor de temas Mas até agora eu ainda não vi nenhum desses aplicativos de criação de páginas gerar blocos para você. Os aplicativos de criação de páginas número quatro criam uma bagunça na base de código de seus temas, o que pode causar problemas se você quiser personalizar o código no futuro E, finalmente, o número cinco. Cada aplicativo de criação de página também é um sistema separado, o que significa que você normalmente não pode migrar um modelo de um aplicativo para outro Por outro lado, se você criar apenas com as seções de temas nativos, poderá compartilhar esses arquivos entre temas e migrar seções com bastante facilidade entre temas e outras lojas 10. Conclusão: Parabéns. Agora você chegou ao final da aula e , se assistiu a todos os vídeos, agora deve ter uma boa ideia das opções para personalizar sua loja sem código Porém, como desenvolvedor, não posso enfatizar o quanto aprender um pouco de código pode ajudá-lo a evitar muitos dos problemas causados por confiar em aplicativos externos. É por isso que recomendo aprender pelo menos um causados por confiar em aplicativos externos É por isso que recomendo aprender pouco do desenvolvimento de temas do Shopify se você realmente quiser ter controle total sobre sua loja Se você está curioso para ver como é isso, acesse o código do meu canal no Youtube com Chris, o freelancer, ou confira algumas das minhas aulas, especificamente sobre desenvolvimento de temas da Shopify aqui em Skillshare.com. Por enquanto, como essa é uma classe sem código, quero que você escolha uma solução da classe, seja o editor de temas nativo ou um aplicativo de criação de páginas código do meu canal no Youtube com Chris, o freelancer, ou confira algumas das minhas aulas, especificamente sobre desenvolvimento de temas da Shopify aqui em Skillshare.com. Por enquanto, como essa é uma classe sem código, quero que você escolha uma solução da classe, seja o editor de temas nativo ou um aplicativo de criação de páginas, e crie sua seção ou modelo personalizado próprio. Depois de concluído, adicione seu trabalho à seção de projetos da turma para compartilhar com os outros alunos ou para obter feedback meu. Se você gostou desta aula, deixe uma avaliação positiva e confira algumas das minhas outras aulas aqui no Skillshare Obrigado por assistir e nos vemos na próxima.