Como adicionar metacampos de produtos à sua página do Shopify

O que é um metacampo de produto no Shopify?

A Metacampo do Shopify permite que você armazene informação extra sobre o conteúdo da sua loja que não se enquadra nos campos padrão. Um dos tipos mais utilizados é o Metacampo do produto — perfeito para adicionar especificações exclusivas, como tipos de cuidados com a pele, informações nutricionais, ingredientes ou até mesmo URLs de imagens para emblemas personalizados.

Se você está procurando exibir detalhes personalizados do produto ou enriquecer seu Páginas de produtos do Shopify com dados personalizados, os metacampos são sua solução ideal.

Como adicionar metacampo de produto no Shopify

Etapa 1: Crie um metacampo de produto no Shopify

Para usar um metacampo, você deve primeiro definir no seu Admin do Shopify.

• De você Administrador do Shopify, vá ao Configurações > Metacampo e Metaobjetos > Produtos.

• Em seguida, clique em “Adicionar definição”.

• Preencha Nome, Descrição, selecione Tipo de conteúdoe selecione Categorias.

• Acertar "Salvar" quando terminar.

Etapa 2: adicione valores de metacampo ao seu produto

Depois de criar com sucesso o metacampo do produto, você pode notar que ele foi adicionado às suas configurações de produto. Então, para adicionar valor ao seu metacampo criado recentemente, siga as etapas descritas abaixo.

• Acesse Administração do Shopify > Produtos e selecione o produto ao qual deseja adicionar mais informações através dos metacampos.
• Desloque-se até o Metacampos seção na página de configuração do produto.

• Insira o valor no campo. Não se esqueça de clicar "Salvar" quando terminar.

Etapa 3: Exiba o Metacampo em sua página

• Voltar para Administrador do Shopify > Metacampos e Metaobjetos > Produto e localize o Metacampo que você deseja exibir na sua página.
• Em seguida, copie a linha de código no Espaço para nome e chave seção.

• Acesse Painel GemPages > Páginas de produtos, selecione o modelo preferido para entrar no editor.

A partir deste ponto, os passos podem variar dependendo da versão específica do editor que você está usando. Localize as instruções correspondentes à sua versão do GemPages e prossiga com os passos seguintes.

Se você estiver usando o GemPages V6

• Na barra lateral esquerda, arraste e solte um Elemento líquido no seu local preferido na página.

• Clique com o botão direito no elemento Líquido e selecione Editar Código.

• Em seguida, cole o código que você copiou anteriormente no Modelo painel.

Observe que você deve adicionar produto.metacampos. antes da linha de código que você acabou de copiar, e o código deve ser colocado entre {{ }}.

Por exemplo:

{{product.metafields.my_fields.skintype}}

• Acertar "Salvar" e confira a página de visualização para ver como ficou.

Se você estiver usando o GemPages V7

• Localize o Código personalizado elemento na barra lateral esquerda, sob o Avançado seção. Arraste e solte-o no local de sua preferência.

• Clique no elemento para revelar o painel de código na barra lateral esquerda.

• Cole o código que você copiou anteriormente no HTML/Líquido aba. Você também precisa adicionar o prefixo product.metafields. antes da linha de código que você acabou de copiar, e o código deve ser colocado entre {{ }}.

Por exemplo:

{{product.metafields.custom.product_test}}

• Clique Economize e publique sua página para conferir o resultado na sua vitrine.

Como conectar a fonte da imagem a um metacampo?

O Shopify também oferece suporte metacampos de imagem, mas renderizá-los em sua página requer código HTML personalizado.

Depois de enviar suas imagens para os metacampos, você pode usar o seguinte código para exibir a imagem:

{{product.metafields.custom.test_metafield_image | metafield_tag}}