Adicionar um pop-up às páginas do produto com metacampos

Com os metacampos, é possível personalizar as funções e a aparência da loja e salvar informações especializadas que não costumam ser solicitadas no admin da Shopify. Eles podem ser usados internamente no admin da Shopify e também exibidos na loja virtual.

Com metacampos, é possível adicionar uma referência de página a um bloco pop-up que exibe um link nas páginas do produto. Quando clicado, o link abre um pop-up que exibe o conteúdo da sua página. É possível adicionar imagens e outras mídias utilizando o editor de rich text de suas páginas.

A seguir, alguns exemplos de informações pop-up que podem ser adicionadas às páginas de produto:

• Gráficos de tamanhos
• Instruções de cuidado
• Instruções de montagem
• Especificações do produto
• Perguntas frequentes

Este é um tutorial de 4 etapas que apresenta metacampos de referência da página e como criar um metacampo de produto para uma referência de página, como criar um modelo de página do produto para sua loja virtual, como adicionar uma nova página, como consultar a página em produtos específicos e como aplicar o modelo de página do produto a produtos específicos.

Caso tenha um tema da Online Store 2.0, use o editor para conectar a maioria dos metacampos. Se você estiver usando um tema vintage ou quiser adicionar tipos de metacampos não aceitos por seu tema, poderá editar o código do seu tema ou contratar um Parceiro da Shopify.

Etapa 1: criar um metacampo de produto para uma página

Para começar, você precisa criar uma definição de metacampo de referência para suas páginas de produtos. O metacampo do produto vincula a uma página específica e pode ser personalizado para cada produto. Se você não adicionar uma referência de página a um produto que usa o mesmo modelo, o texto do link pop-up ainda será exibido como se tivesse conteúdo. Para exibir apenas o link pop-up em produtos específicos, você pode criar um modelo de produto e aplicá-lo apenas a produtos relevantes.

Com metacampos de referência de página, você pode exibir informações diferentes do produto criando páginas diferentes para outros tipos de produtos. Por exemplo, você pode criar duas páginas de tabela de medidas diferentes para duas faixas etárias diferentes, como uma tabela de medidas para crianças pequenas e uma tabela de medidas para bebês, e então adicionar a referência de página para tamanhos de bebês apenas a produtos destinados a crianças pequenas.

Você precisa criar uma definição de metacampo para uma referência de página para conectá-la ao bloco pop-up no editor de temas. Por padrão, o acesso à vitrine é selecionado quando você cria a definição de metacampo.

Etapas:

Desktop

1. No admin da Shopify, acesse Configurações > Dados personalizados.
2. Na seção Definições de metacampo, clique em Produtos.
3. Clique em Adicionar definição.
4. No campo Nome, dê à definição de metacampo um nome. Por exemplo, se você estiver criando uma tabela de medidas, talvez queira dar um nome à definição Tabela de medidas.
5. Clique em ⊕ Selecionar tipo.
6. Selecione Página no menu suspenso. Por padrão, Uma página é selecionada.
7. Clique em Salvar.

iPhone

1. No app da Shopify, toque em ... > Configurações.
2. Toque em Dados personalizados.
3. Na seção Definições de metacampos, toque em Produtos.
4. Toque em +.
5. Nomeie a definição. Por exemplo, se você estiver criando uma tabela de medidas, talvez queira dar um nome à definição Tabela de medidas.
6. Toque em + Selecionar tipo.
7. Toque para selecionar Página no menu suspenso. Por padrão, Uma página é selecionada.
8. Toque em Salvar.

Android

1. No app da Shopify, toque em ☰ > Configurações.
2. Toque em Dados personalizados.
3. Na seção Definições de metacampos, toque em Produtos.
4. Toque em +.
5. Nomeie a definição. Por exemplo, se você estiver criando uma tabela de medidas, talvez queira dar um nome à definição Tabela de medidas.
6. Toque em + Selecionar tipo.
7. Toque para selecionar Página no menu suspenso. Por padrão, Uma página é selecionada.
8. Toque em ✓ para salvar.

Etapa 2: criar um modelo de página do produto

Se você tem um tema da Online Store 2.0, é possível conectar a referência da página ao seu tema usando o editor de temas. Se você estiver usando um tema vintage ou quiser adicionar tipos de metacampos não aceitos por seu tema, poderá editar o código do seu tema ou contratar um Parceiro da Shopify.

Após adicionar uma seção ou um bloco, clique no ícone de origem dinâmica para selecionar um metacampo:

Se você não quiser adicionar o bloco pop-up a todos os seus produtos, precisará criar um novo modelo de página do produto. Nas etapas, você cria um novo modelo de página do produto, mas também pode escolher um modelo de página de produto para personalizar.

Etapas:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Ao lado do tema que você quer personalizar, clique em Personalizar.
3. No menu suspenso Página inicial na parte superior do editor, clique em Produtos e, depois, em ⊕ Criar modelo para criar e personalizar um novo modelo.
4. Na barra lateral de navegação Seções, acesse Modelo > blocos de Informações do produto e, depois, clique em ⊕ Adicionar bloco.
5. Clique em Pop-up.
6. Insira uma etiqueta de link. Este é o texto que exibe o que um cliente clica para obter o conteúdo da página pop-up. Por exemplo, se a página pop-up for uma tabela de medidas, você poderá querer que a etiqueta do link seja Tabela de medidas.
7. Ao lado de Página, clique no ícone de origem dinâmica e, depois, clique para selecionar o metacampo de referência da página que você criou.
8. Clique em Salvar.

iPhone

1. No app da Shopify, toque em ... > loja virtual.
2. Toque em Gerenciar todos os temas.
3. Ao lado do tema que você quer personalizar, toque em Personalizar.
4. No menu suspenso Página inicial na parte superior do editor, toque em Produtos e, depois, toque em ⊕ Criar modelo para criar e personalizar um novo modelo.
5. Na barra lateral de navegação Seções, acesse Modelo > blocos de Informações do produto e, depois, toque em ⊕ Adicionar bloco.
6. Toque em Pop-up.
7. Insira uma etiqueta de link. Este é o texto que exibe o que um cliente clica para obter o conteúdo da página pop-up. Por exemplo, se a página pop-up for uma tabela de medidas, você poderá querer que a etiqueta do link seja Tabela de medidas.
8. Ao lado de Página, toque no ícone de origem dinâmica e, depois, toque para selecionar o metacampo de referência da página que você criou.
9. Toque em Salvar.

Android

1. No app da Shopify, toque em ☰ > Loja virtual.
2. Toque em Gerenciar todos os temas.
3. Ao lado do tema que você quer personalizar, toque em Personalizar.
4. No menu suspenso Página inicial na parte superior do editor, toque em Produtos e, depois, toque em ⊕ Criar modelo para criar e personalizar um novo modelo.
5. Na barra lateral de navegação Seções, acesse Modelo > blocos de Informações do produto e, depois, toque em ⊕ Adicionar bloco.
6. Toque em Pop-up.
7. Insira uma etiqueta de link. Este é o texto que exibe o que um cliente clica para obter o conteúdo da página pop-up. Por exemplo, se a página pop-up for uma tabela de medidas, você poderá querer que a etiqueta do link seja Tabela de medidas.
8. Ao lado de Página, toque no ícone de origem dinâmica e, depois, toque para selecionar o metacampo de referência da página que você criou.
9. Toque em ✓ para salvar seu tema.

Etapa 3: adicionar uma página com as informações do produto

Você precisa criar uma página com conteúdo que as referências de metacampos. Se você já tem uma página criada, pule para a etapa 4.

Etapas:

Desktop

1. No admin da Shopify, acesse Loja virtual > Páginas.
2. Clique em Adicionar página.
3. Nomeie a página e crie o conteúdo que você deseja exibir em um pop-up na página do produto.
4. Na seção Visibilidade, definir a página como Visível.
5. Clique em Salvar.

iPhone

1. No app da Shopify, toque em ... > loja virtual.
2. Toque em Páginas.
3. Toque em Adicionar página.
4. Nomeie a página e crie o conteúdo que você deseja exibir em um pop-up na página do produto.
5. Na seção Visibilidade, definir a página como Visível.
6. Toque em Salvar.

Android

1. No app da Shopify, toque em ☰ > Loja virtual.
2. Toque em Páginas.
3. Toque em Adicionar página.
4. Nomeie a página e crie o conteúdo que você deseja exibir em um pop-up na página do produto.
5. Na seção Visibilidade, definir a página como Visível.
6. Toque em ✓ para salvar.

Você pode criar quantas páginas forem necessárias para referência no metacampo. No entanto, você pode vincular apenas uma página no metacampo do produto.

Etapa 4: fazer referência à página e aplicar o modelo de produto a produtos específicos

Quando você adiciona uma referência de página a um produto específico, as informações dessa página são exibidas somente com esse produto. Se você deixar a referência da página em branco para um produto que usa esse modelo de produto, o texto do link ainda será exibido como um link. No entanto, o pop-up estará em branco, sem referência de página, e poderá ser confusão para seus clientes. Nesse caso, você pode usar um modelo de página de produto diferente para tipos de produto específicos. Por exemplo, você pode criar um modelo de produto para roupas com a página da tabela de medidas no bloco pop-up e, em seguida, criar um modelo de produto para bolsas onde não é necessário adicionar o bloco pop-up.

Saiba mais sobre modelos.

Etapas:

Desktop

1. No admin da Shopify, acesse Produtos.
2. Clique no produto ao qual deseja adicionar uma referência de página.
3. Na seção Metacampos de produto, clique no metacampo de referência da página que você criou e, depois, em Selecionar páginas.
4. Selecione a página que você criou no menu suspenso.
5. Na seção Modelo de tema, selecione o modelo de página do produto que você criou na etapa 2.
6. Clique em Salvar.

iPhone

1. No app da Shopify, acesse Produtos > Todos os produtos.
2. Toque no produto ao qual deseja adicionar uma referência de página.
3. Na seção Metacampos, toque em Ver tudo.
4. Toque no metacampo de referência da página que você criou e, depois, toque para selecionar a página criada.
5. Na seção Modelo de tema, selecione o modelo de página do produto que você criou na etapa 2.
6. Toque em Salvar.

Android

1. No app da Shopify, acesse Produtos > Todos os produtos.
2. Toque no produto ao qual deseja adicionar uma referência de página.
3. Na seção Metacampos, toque em Ver tudo.
4. Toque no metacampo de referência da página que você criou e, depois, toque para selecionar a página criada.
5. Na seção Modelo de tema, selecione o modelo de página do produto que você criou na etapa 2.
6. Toque em ✓ para salvar.

Você pode repetir essas etapas para quantos produtos você precisar.