Multiple Design Product Badges

Vários emblemas de produtos de design

Log in or Sign up to ensure access to purchased code across multiple devices.

Helpful Free links

Migrating to Shopify Transferring Domain to Shopify Master sections and blocks Free Essential tools Custom App Creation Shopify theme templates Add custom CSS to themes Master product variants in Shopify Free Shopify Themes How to customize Shopify themes Automate your store processes Improve store's search Free apps to enhance your store Upload and manage files Facebook ads for your Shopify Shopify Support Stay updated with Shopify changes Join Shopify Community for free help

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

Compatibilidade : SOMENTE todos os temas GRATUITOS do Shopify 2.0 . Funciona da versão inferior até a versão 11

Você está cansado dos emblemas padrão fornecidos pelo tema Shopify 2.0 FREE? O seguinte irá ajudá-lo a personalizar o design enfadonho do seu crachá. Você pode escolher entre sete (7) designs de crachá e também usar sua imagem personalizada (somente PNG) ou SVG como crachá.

Os crachás ou etiquetas dos produtos ajudam os clientes a encontrar o que procuram com etiquetas atraentes. Crie emblemas personalizados usando sua própria imagem ou SVG ou use nossos 7 designs.

Confira a loja DEMO aqui 💻 . Senha: made4uo

O que você está comprando :

  • Atribua qualquer um dos 7 designs ou imagens de emblemas ou SVG para cada produto
  • Código capaz de usar imagem personalizada (suporta apenas arquivo PNG)
  • Código capaz de usar o arquivo SVG
  • Alterar a posição dos emblemas
  • Alterar a cor do emblema e a cor do texto
  • Use o metacampo para personalizar os emblemas com seu próprio texto, design e posição
  • Certifique-se de não usar textos mais longos para que o código funcione bem
  • Os rótulos serão exibidos na seção da coleção em destaque e na página da coleção
  • Personalize o rótulo ou emblema por produto

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
  • Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Configurando o metacampo:

1. Na sua página de administração, clique em Configurações no canto inferior esquerdo

2. Clique em Metacampos, em Produtos e em "Adicionar definição"

3. Siga as configurações do metacampo abaixo. As palavras diferenciam maiúsculas de minúsculas. Siga as configurações destacadas em verde. Vermelho é o seu próprio texto ou nome de arquivo que você deseja usar.

Configurações do emblema do metacampo

4. Certifique-se de adicionar o seguinte em suas escolhas predefinidas.

5. Você pode adicionar o texto que deseja que apareça no crachá como opção predefinida.

NOTA: Alguns dos crachás não poderão acomodar textos longos.

6. Se você estiver usando imagem (somente PNG) ou SVG, certifique-se de adicionar o arquivo primeiro. Em seguida, adicione o nome do arquivo nas predefinições do metacampo.

Adicionando o metacampo no produto:

1. Na sua página de administração, clique em Produtos e escolha o produto ao qual deseja atribuir um metacampo.
2. Role totalmente para baixo até ver o metacampo.

3. Clique em "Adicionar item" para criar metacampo de três (3) camadas.

A primeira camada deve ser o texto que você deseja em um crachá ou, se estiver usando uma imagem PNG ou SVG, use a primeira camada para fornecer o nome do arquivo.

Segundo nível, o design do emblema. Se você quiser usar imagem ou SVG, clique na imagem ou SVG como segunda camada.

Terceiro nível, a posição do emblema. Parte do design do emblema não combina com outras posições.

Camada de metacampo do produto do selo

Designs de crachás com a posição disponível correspondente:

Design do emblema 1: canto superior esquerdo, canto superior direito, centro superior
Design do selo 2: todos os canais
Design do emblema 3: canto superior esquerdo, canto superior direito, centro superior
Design do emblema 4: canto superior esquerdo, canto superior direito, centro superior
Design do emblema 5: canto superior esquerdo, canto inferior esquerdo
Design do emblema 6: canto superior esquerdo, canto inferior esquerdo
Design do emblema 7: canto superior direito
Imagem: todos os canais
SVG: todos os canais

Adicionando os arquivos (imagem PNG ou SVG):

1. Na sua página de administração, clique em Loja Online > Temas >Ações > Editar código.

2. Na pasta Ativos, clique em “Adicionar um novo ativo”. Carregue um arquivo e, em seguida, "Adicionar arquivo".

3. Encontre o arquivo que deseja adicionar, em Abrir e clique em Concluído.

4. O nome do arquivo deve corresponder ao texto fornecido no metacampo de primeira camada. Você pode editar o nome do arquivo clicando no lápis. Veja a imagem abaixo

Alterar o nome do arquivo

Veja o metacampo atribuído que corresponde ao nome do arquivo

Para iniciar:

1. Na sua página de administração, clique em Loja Online > Temas > Ações > Editar código
2. Na pasta Snippet, clique em “Adicionar um novo snippet”, nomeie-o “product-badge” e coloque o código abaixo. Certifique-se de clicar em SALVAR.



3. Em seguida, precisamos substituir o código do crachá padrão na pasta Snippet.

Para o tema Dawn com versão inferior a 2.5 , abra o product-card.liquid. Encontre o código abaixo.

Código do crachá do cartão do produto na versão 2.5 abaixo

Para o tema Dawn versão 2.5 e superior ou outros temas GRATUITOS do Shopify 2.0, abra o card-product.liquid. Encontre o código abaixo. NOTA: Existem dois códigos idênticos. O primeiro está na linha 118 e o segundo está na linha 314. Certifique-se de substituir ambos os blocos de código

Código do emblema Dawn versão 2.5 e superior

4. Substitua o código pelo código abaixo.

5. Em seguida, abra a pasta Config e depois settings_schema.json. Role até o fim, encontre o último "]" (quadrado de fechamento) e coloque o código abaixo antes dele.


Isso fornecerá opções quando você abrir o editor de temas.

opções de selo de produto do editor de tema

Certifique-se de clicar na caixa de seleção se você tiver a versão do tema Dawn abaixo de 2.5.

É isso (",)

Copied!
Voltar para o blogue

Deixe um comentário