1. Labels do Sistema

Labels – Gerenciador de Selos para Loja Virtual Labels – Gerenciador de Selos para a Loja Virtual. Com o Recurso Labels, você pode controlar de maneira fácil e prá?ca Selos promocionais para seus produtos e categorias. Cadastre imagens e textos e aplique-­‐os de maneira massiva em produtos ou categorias. Você pode inclusive criar regras para a inserção automá?ca de selos com condições especiais. Siga o tutorial para entender melhor a ferramenta. Índice 1 1.1 1.2 1.3 2 2.1 Labels do Sistema Insira Selos que funcionam de maneira automá?ca para Promoções, Estoque e Lançamentos. Adicionando um Label de Sistema – Promoção Adicionando um Label de Sistema – Estoque Adicionando um Label de Sistema – Lançamento Labels Customizados Insira Selos de acordo com condições personalizadas Adicionando um Label Customizado 1. Labels do Sistema 1. Labels do Sistema Por padrão, a ferramenta Labels oferece três ?pos de Selos que podem ser usados com base em condições pré determinadas: Selos de Promoção: São selos que destacam uma condição promocional. Através das variáveis u?lizadas, é possível capturar a promoção de maneira automá?ca e exibi-­‐la no selo dinamicamente. Selos de Estoque: Selos que destacam a quan?dade de itens restante no estoque da loja. Selos de Lançamento: Exibido em produtos considerados como Novidades da Loja Virtual. 1.1 Adicionando um Label de Sistema -­‐ Promoção Para adicionar um Label de Sistema, acesse Catálogo > Label dos Produtos > Labels do Sistema Ilustração 1: Menu Labels do Sistema 3 1.1 Inserindo um Label de Sistema -­‐ Promoção Na página que deverá se abrir, clique em Adicionar Label de Promoção. Ilustração 2: Labels do Sistema Comece preenchendo as informações da Guia Informações Gerais Ilustração 3: Guia Informações Gerais 3 1.1 Inserindo um Label de Sistema -­‐ Promoção Indexação de Produtos: Mantenha como HABILITADO para que os produtos elegíveis sejam indexados pelo Recurso Labels. Nome: Dê um nome de iden?ficação ao Label. Esse nome é usado apenas internamente. Status: Mantenha como HABILITADO para que o Label criado seja exibidos no catálogo e na página de produto. A próxima aba é Conteúdo (Página do Produto). Todas as configurações dessa Aba correspondem à exibição do Label na Página de Produto Ilustração 4: Guia Conteúdo (Página do Produto) 1.1 Inserindo um Label de Sistema -­‐ Promoção Posição: Define a área onde o Label será exibido. Imagem: Clique no botão Selecionar Arquivo para escolher a imagem que será usada como Label. No caso de Labels do Sistema, o ideal é u?lizar apenas uma imagem de fundo, sem texto. O texto será preenchido no campo seguinte. image Text: Aqui vai o conteúdo de texto do Selo. Nesse espaço, podem ser usadas variáveis que capturam informações do sistema. Das variáveis disponíveis, as mais importantes para os selos promocionais são: #discount_amount# : Valor de desconto aplicado no produto. #special_price# : Preço Especial #special_date# : Data Especial #final_price# : Preço Final #price# : Preço Exemplo de aplicação da variável: Se desejo exibir, no Label de Promoção, que meu produto tem 10% de Desconto, no campo Image Text posso inserir: Ilustração 5: Campo Image Text preenchido A par?r dessa configuração, meu selo exibirá o texto Economize 10 %! O valor de 10 será capturado automa?camente pela variável #discount_percent#. Naturalmente, é necessário que o produto de fato tenha uma Promoção de 10% de desconto configurada. Caso contrário, não haverá valor para ser capturado pela variável. PosiJon Style: U?lize valores da propriedade CSS Posi?on para alterar o posicionamento do Selo. 1.1 Inserindo um Label de Sistema -­‐ Promoção EsJlo da Fonte: U?lize valores da propriedade CSS Font para personalizar o texto do Label. Round Method: Defina o arredondamento de valores quebrados. Caso uma variável capture um desconto de, por exemplo, 9,84%, ele deve ser arredondado de que forma? Selecione: Ilustração 6: Seleção do Método de Arredondamento Arredondar: Defina o nível de detalhamento de casas decimais para exibição de valores no label: Ilustração 7: Seleção do Nível de Detalhamento de Casas Decimais 1.1 Inserindo um Label de Sistema -­‐ Promoção A próxima aba é Conteúdo (Página de Categoria). Essa guia é exatamente igual à guia anterior, entretanto, as configurações definidas aqui afetarão as Páginas de Categoria. Ilustração 8: Guia Conteúdo (Página de Categoria) Nesse exemplo, apenas repe?mos as configurações nas duas Guias (Produto e Categoria). 1.1 Inserindo um Label de Sistema -­‐ Promoção Finalmente, na guia Produtos Indexados é possível visualizar a relação de produtos para os quais o Label será aplicado. Por tratar-­‐se de um Label de Promoção, estarão elencados nessa lista os Produtos da Loja Virtual para os quais uma Regra de Promoção está configurada. Ilustração 9: Relação de Produtos Indexados A seguir, a visualização do Label com as configurações desse exemplo, no front end da Loja: 1.1 Inserindo um Label de Sistema -­‐ Promoção Ilustração 10: Label na Página de Catálogo Ilustração 11: Label na Página de Produto 1.2 Inserindo um Label de Sistema -­‐ Estoque Agora, adicionaremos um Label de Estoque. Na página de Labels do Sistema, clique em Adicionar Label de Estoque. Ilustração 11: Labels do Sistema Comece preenchendo as informações da Guia Informações Gerais Ilustração 12: Guia Informações Gerais 3 1.2 Inserindo um Label de Sistema -­‐ Estoque Indexação de Produtos: Mantenha como HABILITADO para que os produtos elegíveis sejam indexados pelo Recurso Labels. Nome: Dê um nome de iden?ficação ao Label. Esse nome é usado apenas internamente. Status: Mantenha como HABILITADO para que o Label criado seja exibido no catálogo e na página de produto. A próxima aba é Conteúdo (Página do Produto). Todas as configurações dessa Aba correspondem à exibição do Label na Página de Produto Ilustração 13: Guia Conteúdo (Página do Produto) 1.1 Inserindo um Label de Sistema -­‐ Promoção Posição: Define a área onde o Label será exibido. Imagem: Clique no botão Selecionar Arquivo para escolher a imagem que será usada como Label. No caso de Labels do Sistema, o ideal é u?lizar apenas uma imagem de fundo, sem texto. O texto será preenchido no campo seguinte. Image Text: Aqui vai o conteúdo de texto do Selo. Nesse espaço, podem ser usadas variáveis que capturam informações do sistema. Para Labels de Estoque, u?liza-­‐se a variável #stock_item# , que exibe automa?camente a quan?dade de itens em estoque. Exibir se o Estoque é Menor que: Estabeleça o número de unidades em estoque a par?r do qual o Label será exibido. Habilitar Label de Sem Estoque: Selecionando SIM, um Label alterna?vo será exibido quando o estoque dos produtos chegar a zero. Imagem de Sem Estoque: Caso tenha habilitado a exibição no item acima, clique no botão Selecionar Arquivo para fazer upload da imagem a ser usada no Label Sem Estoque Texto de Sem Estoque: Preencha aqui o conteúdo a ser exibido no Label dos produtos com estoque zero. PosiJon Style: U?lize valores da propriedade CSS Posi?on para alterar o posicionamento do Selo. EsJlo da Fonte: U?lize valores da propriedade CSS Font para personalizar o texto do Label. Round Method e Arredondar: Defina o arredondamento de valores quebrados. Essas opções raramente são aplicáveis à Labels de Estoque 1.2 Inserindo um Label de Sistema -­‐ Estoque A próxima aba é Conteúdo (Página de Categoria). Todas as configurações dessa Aba correspondem à exibição do Label na Página de Categoria Ilustração 14: Guia Conteúdo (Página de Categoria) Nessa aba, repe?mos as configurações da Página de Produto, fazendo apenas pequenos ajustes em PosiHon Style e EsHlo da Fonte, para melhorar a exibição do Label na Categoria. 1.1 Inserindo um Label de Sistema -­‐ Promoção Finalmente, na guia Produtos Indexados é possível visualizar a relação de produtos para os quais o Label será aplicado. Ilustração 9: Relação de Produtos Indexados A seguir, a visualização do Label com as configurações desse exemplo, no front end da Loja: 1.2 Inserindo um Label de Sistema -­‐ Estoque Ilustração 15: Label de Estoque na Página de Produto Ilustração 16: Label de Estoque na Página de Categoria 1.3 Inserindo um Label de Sistema -­‐ Lançamento Agora, adicionaremos um Label de Estoque. Na página de Labels do Sistema, clique em Adicionar Label de Lançamento. Ilustração 17: Labels do Sistema Comece preenchendo as informações da Guia Informações Gerais Ilustração 18: Guia Informações Gerais 3 1.3 Inserindo um Label de Sistema -­‐ Lançamento Indexação de Produtos: Mantenha como HABILITADO para que os produtos elegíveis sejam indexados pelo Recurso Labels. Nome: Dê um nome de iden?ficação ao Label. Esse nome é usado apenas internamente. Status: Mantenha como HABILITADO para que o Label criado seja exibido no catálogo e na página de produto. A próxima aba é Conteúdo (Página do Produto). Todas as configurações dessa Aba correspondem à exibição do Label na Página de Produto Ilustração 19: Guia Conteúdo (Página do Produto) 1.3 Inserindo um Label de Sistema -­‐ Lançamento Posição: Define a área onde o Label será exibido. Imagem: Clique no botão Selecionar Arquivo para escolher a imagem que será usada como Label. No caso de Labels do Sistema, o ideal é u?lizar apenas uma imagem de fundo, sem texto. O texto será preenchido no campo seguinte. Image Text: Aqui vai o conteúdo de texto do Selo. Nesse espaço, podem ser usadas variáveis que capturam informações do sistema. Para Labels de Estoque, u?liza-­‐se a variável #stock_item# , que exibe automa?camente a quan?dade de itens em estoque. PosiJon Style: U?lize valores da propriedade CSS Posi?on para alterar o posicionamento do Selo. EsJlo da Fonte: U?lize valores da propriedade CSS Font para personalizar o texto do Label. Round Method e Arredondar: Defina o arredondamento de valores quebrados. Essas opções raramente são aplicáveis à Labels de Lançamento 1.3 Inserindo um Label de Sistema -­‐ Lançamento A próxima aba é Conteúdo (Página de Categoria). Todas as configurações dessa Aba correspondem à exibição do Label na Página de Categoria Ilustração 20: Guia Conteúdo (Página de Produto) Nessa aba, repe?mos as configurações da Página de Produto, fazendo apenas pequenos ajustes em PosiHon Style e EsHlo da Fonte, para melhorar a exibição do Label na Categoria. 1.3 Inserindo um Label de Sistema -­‐ Lançamento Finalmente, na guia Produtos Indexados é possível visualizar a relação de produtos para os quais o Label será aplicado. Ilustração 9: Relação de Produtos Indexados A seguir, a visualização do Label com as configurações desse exemplo, no front end da Loja: 2. Gerenciar Labels 2. Gerenciar Labels Além dos Labels de Sistema, cujo comportamento é restrito à condições pré-­‐
determinadas, é possível inserir Labels customizados e parametrizados de acordo com condições estabelecidas livremente. 2.1 Adicionando um Label Customizado Para adicionar um Label Customizado, acesse Catálogo > Label dos Produtos > Gerenciar Labels Ilustração 1: Menu Labels do Sistema 3 2.1 Adicionando um Label Customizado Na página que deverá se abrir, clique em Adicionar Labels. Ilustração 2: Labels do Sistema Comece preenchendo as informações da Guia Informações Gerais Ilustração 3: Guia Informações Gerais 3 2.1 Adicionando um Label Customizado Indexação de Produtos: Mantenha como HABILITADO para que os produtos elegíveis sejam indexados pelo Recurso Labels. Nome: Dê um nome de iden?ficação ao Label. Esse nome é usado apenas internamente. Status: Mantenha como HABILITADO para que o Label criado seja exibido no catálogo e na página de produto. A próxima aba é Conteúdo (Página do Produto). Todas as configurações dessa Aba correspondem à exibição do Label na Página de Produto Ilustração 19: Guia Conteúdo (Página do Produto) 2.1 Adicionando um Label Customizado Posição: Define a área onde o Label será exibido. Imagem: Clique no botão Selecionar Arquivo para escolher a imagem que será usada como Label. No caso de Labels do Sistema, o ideal é u?lizar apenas uma imagem de fundo, sem texto. O texto será preenchido no campo seguinte. Image Text: Aqui vai o conteúdo de texto do Selo. Nesse espaço, podem ser usadas variáveis que capturam informações do sistema. Como esse exemplo é para a inserção de um Label de Marca, as variáveis não se aplicam. PosiJon Style: U?lize valores da propriedade CSS Posi?on para alterar o posicionamento do Selo. EsJlo da Fonte: U?lize valores da propriedade CSS Font para personalizar o texto do Label. Round Method e Arredondar: Defina o arredondamento de valores quebrados. Essas opções não serão aplicáveis nesse exemplo. 2.1 Adicionando um Label Customizado A próxima aba é Conteúdo (Página de Categoria). Todas as configurações dessa Aba correspondem à exibição do Label na Página de Categoria Ilustração 20: Guia Conteúdo (Página de Categoria) Nessa aba, repe?mos as configurações da Página de Produto. 2.1 Adicionando um Label Customizado Agora, devemos definir as condições para exibição do Label Customizado. Nesse exemplo, a intenção é fazer com que todos os produtos da Marca Converse exibam o Label “Converse Original”. Portanto, primeiro adicionamos a Condição Marca: Ilustração 21: Condições Em seguida, especificamos a marca Converse: Ilustração 22: Condições -­‐ Marca 2.1 Adicionando um Label Customizado Em Produtos Indexados, é possível visualizar os produtos elegíveis para exibição do Label: Ilustração 23: Produtos Indexados A seguir, exemplo de visualização do Label em Página de Produto e Categoria: Ilustração 24: Label na Página de Produto Ilustração 25: Label na Página de Categoria Produzido por BizCommerce – junho de 2014