Como otimizar a exibição da lista de ingredientes de cosméticos usando Metacampos do Shopify

Introdução: A importância da lista de ingredientes em lojas de cosméticos online

Cosméticos podem afetar a pele e causar alergias, por isso é essencial que os consumidores tenham acesso às informações sobre os ingredientes antes da compra. No comércio eletrônico, onde as embalagens físicas não estão visíveis, a clareza e a forma de apresentação da lista de ingredientes no site impactam diretamente nas vendas e na taxa de recompra.

1. Regulamentações de rotulagem de cosméticos em países-chave

• Estados Unidos (FDA): Exige que os ingredientes sejam listados na embalagem em ordem decrescente de quantidade. eCFR
• União Europeia: Exige a “Lista completa de ingredientes” usando a nomenclatura INCI. A publicação online da lista deve seguir as diretrizes de cada país.
• Japão: A legislação exige a divulgação de todos os ingredientes conforme a Lei de Assuntos Farmacêuticos e de Dispositivos Médicos. Recomenda-se também indicar os nomes INCI. cosmetic-ingredients.orgbloom-jp.com

2. O que são os Metacampos do Shopify?

Os Metacampos do Shopify permitem adicionar dados personalizados a recursos como produtos, coleções ou clientes. Em lojas de cosméticos, é possível usar metacampos para exibir informações que não estão nos campos padrão, como “lista de ingredientes” ou “alertas de alérgenos”, diretamente no tema da loja. shopify.devShopify Help Center

3. Como definir um Metacampo para lista de ingredientes (exemplo)

1. Painel de administração do Shopify > Configurações > Dados personalizados > Produtos > “Adicionar definição”
2. Nome: Ingredientes, Namespace e chave: custom.ingredients, Tipo: Texto de linha única (Lista de valores)
3. Configure validações (como limite de caracteres), se necessário, e salve
4. Na página de detalhes de cada produto, insira a lista de ingredientes no campo de Metacampos

4. Exibindo na loja

4-A. Usando blocos específicos do tema

1. Painel do Shopify > Loja virtual > Personalizar > Produtos > Produto-padrão > Adicione um bloco como “Linha recolhível” na seção de informações do produto
2. Título: Ingredientes
3. No ícone à direita de “Conteúdo da linha”, clique em “Conectar origem dinâmica” > Modelo “Produto” > Ingredientes
4. Salver

4-B. Usando código Liquid personalizado

1. Painel do Shopify > Loja virtual > Personalizar > Produtos > Produto padrão > Adicione um bloco “Liquid personalizado” na seção de informações do produto
2. Cole o seguinte código:

{% if product.metafields.custom.ingredients != blank %}
  <section class="product-ingredients">
    <h2>Ingredientes</h2>
    <ul>
      {% for ingredient in product.metafields.custom.ingredients.value %}
        <li>{{ ingredient }}</li>
      {% endfor %}
    </ul>
  </section>
{% endif %}

Dicas:

• custom.ingredients é o “Namespace e chave” definido anteriormente
• Use CSS para ajustar o design, se necessário
• Adicione marcação Schema.org com PropertyValueList para melhorar o SEO

5. Melhores práticas de UI

• Exibição recolhível: Use acordeões para listas longas para manter o layout limpo
• Otimização para mobile: Garanta espaçamento e tamanho de fonte adequados ao toque
• Acessibilidade: Use aria-label e textos alternativos para compatibilidade com leitores de tela

Conclusão

Utilizar Metacampos do Shopify para exibir listas de ingredientes ajuda a cumprir regulamentações e aumentar a confiança do consumidor. Siga os passos acima para integrar essa funcionalidade ao seu tema e otimize tanto para SEO quanto para experiência do usuário.