Adicionar uma tabela de tamanhos pop-up às páginas de produto

Os metacampos ajudam a personalizar a funcionalidade e a aparência da sua loja na Shopify, pois permitem salvar informações especializadas que não costumam ser registradas no admin da Shopify. Os metacampos podem ser usados internamente no admin da Shopify e também podem ser exibidos na sua loja virtual.

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

Veja a seguir alguns exemplos de informações de pop-up que você pode adicionar às páginas de produto:

• Tabelas de tamanhos
• Instruções de cuidados
• Instruções de montagem
• Especificações do produto
• Perguntas frequentes

Este é um tutorial de 4 etapas que apresenta os metacampos de referência de página e mostra como criar um metacampo de produto para uma referência de página, criar um modelo de página de produto para a loja virtual, adicionar uma nova página, referenciar a página em produtos específicos e aplicar o modelo de página de produto a produtos específicos. Use este tutorial para criar o conteúdo que quiser no pop-up. O exemplo da tabela de tamanhos será usado em todo o tutorial.

Este tutorial exige um tema compatível com fontes dinâmicas. Se você estiver usando um tema vintage ou se quiser adicionar tipos de metacampo incompatíveis com o tema, poderá editar o código do tema ou contratar um Parceiro da Shopify.

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

Para começar, crie uma definição de metacampo de referência de página para as páginas de produto. O metacampo de produto se vincula a uma página específica e pode ser personalizado para cada produto. Caso não adicione uma referência de página a um produto que usa o mesmo modelo, o texto do link pop-up continuará a ser exibido como se houvesse conteúdo. Para exibir o link pop-up apenas em produtos específicos, é possível criar um modelo de produto e aplicá-lo somente aos produtos relevantes.

Com os metacampos de referência de página, é possível exibir diferentes informações sobre o produto criando páginas diferentes para tipos de produtos diferentes. Por exemplo, você pode criar duas páginas de tabela de tamanhos diferentes para duas faixas etárias distintas, como uma tabela de tamanhos para crianças pequenas e outra para bebês, e adicionar a referência de página para os tamanhos de crianças pequenas somente aos produtos dessa categoria.

É preciso criar uma definição de metacampo para uma referência de página para conectá-la ao bloco de pop-up no editor de temas. A opção Acesso à vitrine é selecionada por padrão durante a criação da definição de metacampo.

Etapas:

Desktop

1. No admin da Shopify, acesse Configurações > Metacampos e metaobjetos.

2. Na seção Definições de metacampo, clique em Produtos.

3. Clique em Adicionar definição.

4. No campo Nome, insira Tabela de tamanhos.

5. Clique em ⊕ Selecionar tipo.

6. Selecione Página no menu suspenso. A opção Uma página é selecionada por padrão.

7. Clique em Salvar.

Dispositivo móvel

1. No app da Shopify, toque em e depois em Configurações.

2. Na seção Configurações da loja, toque em Metacampos e metaobjetos.

3. Na seção Definições de metacampo, toque em Produtos.

4. Toque em +.

5. No campo Nome, insira Tabela de tamanhos.

6. Toque em + Selecionar tipo.

7. Toque para selecionar Página no menu suspenso. A opção Uma página é selecionada por padrão.

8. Toque em Salvar ou ✓.

Etapa 2: criar o modelo da página do produto

Este tutorial exige um tema compatível com fontes dinâmicas. Se você estiver usando um tema vintage ou se quiser adicionar tipos de metacampo incompatíveis com o tema, poderá editar o código do tema ou contratar um Parceiro da Shopify.

Depois de adicionar uma seção ou um bloco, é possível selecionar um metacampo clicando no ícone de origem dinâmica:

Se não quiser adicionar o link pop-up da tabela de medidas a todos os produtos, será preciso criar um novo modelo de página do produto. Nestas etapas, você criará um novo modelo de página do produto, mas também é possível personalizar um modelo já existente.

Etapas:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Clique em Editar tema ao lado do tema que quer personalizar.
3. No menu suspenso Página inicial, na parte superior do editor, clique em Produtos e, em seguida, em ⊕ Criar modelo para criar e personalizar um novo modelo.
4. Na barra lateral de seções, acesse os blocos em Modelo > Informações do produto e clique em ⊕ Adicionar bloco.
5. Clique em Pop-up.
6. No campo Rótulo do link, insira Tabela de medidas. Esse é o texto que o cliente clica para abrir o conteúdo da página pop-up.
7. Ao lado de Página, clique no ícone de origem dinâmica e, em seguida, clique para selecionar o metacampo de referência de página que você criou.
8. Clique em Salvar.

Dispositivo móvel

1. No app da Shopify, toque no ícone .

2. Na seção Canais de vendas, toque em Loja virtual > Gerenciar todos os temas.

3. Toque em Editar tema no tema que quer personalizar.

4. No menu suspenso Página inicial, na parte superior do editor, toque em Produtos e, em seguida, em ⊕ Criar modelo para criar e personalizar um novo modelo.

5. Na barra lateral de seções, acesse os blocos em Modelo > Informações do produto e toque em ⊕ Adicionar bloco.

6. Toque em Pop-up.

7. No campo Rótulo do link, insira Tabela de medidas. Esse é o texto que o cliente clica para abrir o conteúdo da página pop-up.

8. Ao lado de Página, toque no ícone de origem dinâmica e, em seguida, toque para selecionar o metacampo de referência de página que você criou.

9. Toque em Salvar ou ✓.

Etapa 3: adicionar uma página com a tabela de medidas

É preciso criar uma página com o conteúdo da tabela de medidas que será referenciado pelo metacampo. Caso já tenha 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. No campo Título, insira Tabela de medidas e, depois, adicione as informações da tabela de medidas em Conteúdo.
4. Na seção Visibilidade, defina a página como Visível.
5. Clique em Salvar.

Dispositivo móvel

1. No app da Shopify, toque no ícone .

2. Na seção Canais de vendas, toque em Loja virtual > Páginas.

3. Toque em Adicionar página.

4. No campo Título, insira Tabela de medidas e, depois, adicione as informações da tabela de medidas em Conteúdo.

5. Na seção Visibilidade, defina a página como Visível.

6. Toque em Salvar ou ✓.

É possível criar quantas páginas de tabela de medidas forem necessárias para referenciar no metacampo. No entanto, você só pode vincular uma página no metacampo do produto.

Etapa 4: referenciar a página e aplicar o modelo de produto a produtos específicos

Ao adicionar uma referência de página a um produto específico, as informações dessa página são exibidas apenas nele. Se a referência de página for deixada em branco em um produto que usa esse modelo, o texto do link continuará sendo exibido. No entanto, o pop-up ficará em branco por não ter referência de página, o que pode confundir os clientes. É possível usar um modelo de página de produto para tipos específicos de produtos com tabelas de medidas, como roupas ou sapatos, e outro modelo para outros tipos, como brinquedos infantis, joias e acessórios.

Saiba mais sobre modelos.

Etapas:

Desktop

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

Dispositivo móvel

1. No app da Shopify, toque no ícone .
2. Toque no produto ao qual você quer adicionar uma referência de página.
3. Na seção Metacampos do produto, toque na referência de página Tabela de medidas, depois em Selecionar páginas e selecione a página Tabela de medidas.
4. Na seção Modelo de tema, selecione o modelo de página de produto Tabela de medidas que você criou na etapa 2.
5. Toque em Salvar ou ✓.

Repita essas etapas para quantos produtos precisar.