Vários emblemas de produtos de design

18 de dezembro de 2022

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.

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

emblema-1
distintivo-2
distintivo-3
distintivo-4
distintivo-5
distintivo-6
distintivo-7
SVG
imagem
canto superior esquerdo
canto superior direito
centro superior
inferior esquerdo
canto inferior direito
centro inferior

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.

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.

 <estilo> _
 . cartão . cartão -- produto {
 estouro : visível ;
 }
 . cartão__crachá . emblema - inferior - esquerdo {
 inferior : 1rem ; 
esquerda : 0 ;
 }
 . cartão__crachá . emblema - superior - esquerdo {
 topo : 1rem ;
 inferior : não definido ;
 esquerda : 0 ;
 }
 . cartão__crachá . emblema - inferior - direito {
 inferior : 1rem ; 
esquerda : não definido ;
 direita : 0 ;
 }
 . cartão__crachá . emblema - superior - direito {
 topo : 1rem ;
 inferior : não definido ;
 esquerda : não definido ;
 direita : 0 ;
 } 
. cartão__crachá . emblema - inferior - centro {
 inferior : 1rem ;
 esquerda : 50 %;
 transformar : traduzirX ( -50 % ) ;
 }
 . cartão__crachá . emblema - topo - centro { 
superior : 1rem ;
 inferior : não definido ;
 esquerda : calc ( 50 % - 1rem ) ;
 transformar : traduzirX ( -50 % ) ;
 }
 . produto - selo { 
peso da fonte : normal ;
 tamanho da fonte : 1,2rem ;
 altura da linha : 1 ;
 alinhamento de texto : centro ;
 }
 . fita - distintivo - 1 {
 posição : relativa ; 
margem : - 17px 5px 12px 15px ;
 espaçamento entre letras : 0,1rem ;
 }
 . fita - crachá - 1 : depois {
 posição : absoluta ;
 contente : "" ;
 largura : 100 %;
 altura : 5rem ; 
caminho do clipe : polígono ( 50 % 25 %, 0 0 , 100 % 0 ) ;
 fronteira : não definida ;
 plano de fundo : var ( -badge - background ) ; 
cor : var ( -cor do emblema ) ;
 esquerda : 0 ;
 superior : 99 %;
 }
 . fita - crachá - 1 palmo {
 posição : relativa ;
 exibição : bloco ; 
alinhamento de texto : centro ;
 plano de fundo : var ( -badge - background ) ;
 preenchimento : 10px 10px 5px ;
 borda - superior - direita - raio : 8px ;
 largura : 100 %;
 } 
. fita - crachá - 1 vão : antes ,
 . fita - crachá - 1 período : depois {
 posição : absoluta ;
 contente : "" ;
 altura : 6px ;
 topo : 0 ; 
plano de fundo : var ( -badge - background ) ;
 filtro : brilho ( 0,5 ) ;
 }
 . fita - crachá - 1 vão : antes {
 largura : 6px ;
 esquerda : - 6px ;
 } 
. fita - crachá - 1 período : depois {
 largura : 8px ;
 esquerda : - 8px ;
 raio da borda : 8px 8px 0 0 ;
 }
 . fita - distintivo - 2 {
 posição : relativa ; 
largura : conteúdo máximo ;
 largura mínima : calc ( 100 % -8rem ) ;
 largura máxima : 25 canais ;
 espaçamento entre letras : 0,1rem ;
 preenchimento : 0,5rem 1,3rem 0,6rem ;
 margem : 10px 35px 0px 35px ; 
raio da borda : 0px 0px 3px 3px ;
 plano de fundo : var ( -badge - background ) ;
 cor : var ( -cor do emblema ) ;
 }
 . fita - crachá - 2 : antes , 
. fita - crachá - 2 : depois ,
 . fita - crachá - 2 vãos : antes ,
 . fita - crachá - 2 vãos : depois {
 contente : "" ;
 posição : absoluta ; 
superior : - 5px ;
 }
 . fita - crachá - 2 : antes ,
 . fita - crachá - 2 : depois {
 plano de fundo : var ( -badge - background ) ; 
filtro : brilho ( 0,8 ) ;
 altura : 85 %;
 largura : 3rem ;
 topo : - 15 %;
 }
 . fita - crachá - 2 : antes {
 esquerda : - 3rem ; 
caminho do clipe : polígono ( 0 % 0 %, 100 % 0 %, 100 % 100 %, 0 % 100 %, 50 % 50 % ) ; 
}
 . fita - crachá - 2 : depois {
 direita : - 3rem ; 
caminho do clipe : polígono ( 0 % 0 %, 0 % 100 %, 100 % 100 %, 50 % 50 %, 100 % 0 % ) ; 
}
 . fita - crachá - 2 vãos : antes ,
 . fita - crachá - 2 vãos : depois {
 altura : 15 %;
 largura : automático ;
 topo : - 15 %; 
proporção de aspecto : 1 ;
 plano de fundo : var ( -badge - background ) ;
 filtro : brilho ( 0,5 ) ;
 }
 . fita - crachá - 2 vãos : antes { 
esquerda : - 0,5px ;
 caminho do clipe : polígono ( 0 100 %, 0 0 , 100 % 100 % ) ;
 }
 . fita - crachá - 2 vãos : depois { 
direita : - 0,5px ;
 caminho do clipe : polígono ( 100 % 0 , 0 % 100 %, 100 % 100 % ) ;
 } 
. fita - distintivo - 3 {
 largura : 3rem ;
 altura : conteúdo máximo ;
 espaçamento entre letras : - 0,5rem ;
 preenchimento : 10px 10px 10px 0px ;
 posição : relativa ;
 alinhamento de texto : centro ; 
borda - superior - direita - raio : 3px ;
 plano de fundo : var ( -badge - background ) ;
 cor : var ( -cor do emblema ) ;
 orientação do texto : vertical ; 
modo de escrita : vertical - rl ;
 superior : - 2,2rem ;
 }
 . fita - crachá - 3 : antes ,
 . fita - crachá - 3 : depois {
 contente : "" ; 
posição : absoluta ;
 altura : 0 ;
 }
 . fita - crachá - 3 : antes {
 altura : 0 ;
 largura : 0 ;
 esquerda : - 6px ;
 superior : 0,1px ; 
border - bottom : 6px var sólido ( -badge - background ) ;
 borda esquerda : 6px sólido transparente ;
 filtro : brilho ( 0,5 ) ;
 }
 . fita - crachá - 3 : depois { 
largura : 3rem ;
 inferior : - 15px ;
 esquerda : 0 ;
 largura da borda : 3rem ;
 borda - esquerda : var sólido de 15px ( -badge - background ) ; 
borda direita : var sólido de 15px ( -badge - background ) ;
 borda inferior : 15px sólido transparente ;
 }
 . fita - distintivo - 4 {
 largura : 3rem ;
 altura : conteúdo máximo ; 
espaçamento entre letras : - 0,5rem ;
 preenchimento : 10px 10px 10px 0px ;
 posição : relativa ;
 alinhamento de texto : centro ;
 borda - superior - esquerda - raio : 3px ;
 plano de fundo : var ( -badge - background ) ; 
cor : var ( -cor do emblema ) ;
 orientação do texto : vertical ;
 modo de escrita : vertical - rl ;
 superior : - 2,2rem ;
 }
 . fita - crachá - 4 : antes , 
. fita - crachá - 4 : depois {
 contente : "" ;
 posição : absoluta ;
 altura : 0rem ;
 }
 . fita - crachá - 4 : antes {
 largura : 0 ; 
direita : - 6px ;
 superior : 0,1px ;
 border - bottom : 6px var sólido ( -badge - background ) ;
 borda direita : 6px sólido transparente ;
 filtro : brilho ( 0,5 ) ;
 } 
. fita - crachá - 4 : depois {
 largura : 3rem ;
 inferior : - 15px ;
 esquerda : 0 ;
 largura da borda : 3rem ;
 borda - esquerda : var sólido de 15px ( -badge - background ) ; 
borda direita : var sólido de 15px ( -badge - background ) ;
 borda inferior : 15px sólido transparente ;
 }
 . fita - distintivo - 5 {
 posição : relativa ;
 topo : 0 ;
 preenchimento : 10px 10px 10px 5px ; 
plano de fundo : var ( -badge - background ) ;
 caixa - sombra : -1px 2px 3px rgba ( 0 , 0 , 0 , 0,3 ) ;
 } 
. fita - crachá - 5 : antes ,
 . fita - crachá - 5 : depois {
 contente : "" ;
 posição : absoluta ;
 }
 . fita - crachá - 5 : antes { 
largura : 7px ;
 altura : calc ( 100 % + 7px ) ;
 topo : 0 ;
 esquerda : - 6,5px ;
 plano de fundo : var ( -badge - background ) ; 
raio da borda : 5px 0 0 5px ;
 }
 . fita - crachá - 5 : depois {
 largura : 5px ;
 altura : 5px ;
 inferior : - 5px ;
 esquerda : - 4,5px ; 
plano de fundo : var ( -badge - background ) ;
 filtro : brilho ( 0,5 ) ;
 raio da borda : 5px 0 0 5px ;
 }
 . cartão__crachá . cartão__crachá - 6 { 
largura : 100px ;
 altura : automático ;
 proporção de aspecto : 1 ;
 posição : absoluta ;
 estouro : oculto ;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 } 
. cartão__crachá . cartão__crachá - 6 . emblema - superior - direito {
 superior : - 5px ;
 direita : - 5px ;
 }
 . card__badge - 6 : antes , 
. card__badge - 6 : depois de {
 contente : "" ;
 posição : absoluta ;
 plano de fundo : var ( -badge - background ) ;
 filtro : brilho ( 0,5 ) ;
 } 
. card__badge - 6 : antes de {
 largura : 10px ;
 altura : 5px ;
 topo : 0 ;
 esquerda : 0 ;
 raio da borda : 5px 5px 0px 0px ;
 }
 . card__badge - 6 : depois de { 
largura : 5px ;
 altura : 10px ;
 direita : 0px ;
 inferior : 0 ;
 raio da borda : 0px 5px 5px 0px ;
 }
 . fita - distintivo - 6 {
 largura : 130px ;
 altura : 25px ; 
preenchimento : 5px 10px ;
 posição : absoluta ;
 superior : - 5px ;
 direita : 0px ;
 margem : 0 ;
 índice z : 2 ;
 estouro : oculto ; 
- webkit - transform : girar ( 45 graus ) ;
 transformar : girar ( 45 graus ) traduzir ( 33 % ) ;
 contorno : 1px tracejado ; 
caixa - sombra : 0 0 0 5px var ( -crachá - fundo ) , 0 20px 5px - 20px #0009;
 plano de fundo : var ( -badge - background ) ; 
cor : var ( -cor do emblema ) ;
 alinhamento de texto : centro ;
 }
 . fita - distintivo - 7 {
 largura : 100 %;
 altura : 100 %;
 preenchimento : 10px ; 
posição : relativa ;
 esquerda : - 10px ;
 superior : 0px ;
 margem : 10px 0 10px ;
 plano de fundo : var ( -badge - background ) ;
 cor : var ( -cor do emblema ) ;
 } 
. fita - crachá - 7 : antes ,
 . fita - crachá - 4 : depois {
 contente : "" ;
 posição : absoluta ;
 }
 . fita - crachá - 7 : antes { 
altura : 0 ;
 largura : 0 ;
 superior : - 8,5px ;
 esquerda : 0px ;
 border - bottom : var sólido de 9px ( -badge - background ) ;
 borda esquerda : 9px sólido transparente ; 
filtro : brilho ( 0,5 ) ;
 }
 . fita - crachá - 7 : depois {
 altura : 100 %;
 largura : 2rem ;
 topo : 0 ;
 esquerda : 99 %; 
caminho do clipe : polígono ( 0 % 0 %, 100 % 0 %, 0 % 50 %, 100 % 100 %, 0 % 100 % ) ; 
plano de fundo : var ( -badge - background ) ;
 }
 . cartão__svg img ,
 . cartão__imagem img {
 largura : 80px ;
 altura : automático ;
 proporção de aspecto : 1 ;
 }
 </ estilo > 
{ % atribuir badgeMetafield = produto. metacampos . personalizado . produto_badges . valor % }
 { % atribuir badgeText = badgeMetafield [ 0 ] % } 
{ % atribuir cracháDesign = badgeMetafield [ 1 ] % }
 { % atribuir badgePosition = badgeMetafield [ 2 ] % }
 < div
 class = "card__badge card__ {{ badgeDesign}} emblema- {{ badgePosition }} " 
style = "--badge-background: {{ settings.sale_badge_color_bg }} ; --badge-color: {{ settings.sale_badge_color_text }} "
 >
 { % se badgeMetafield ! = em branco % }
 { % case badgeDesign % }
 { % quando 'svg' % } 
< img src = " {{ badgeText | append: " . svg " | asset_url }} " alt = " {{ badgeText }} " >
 { % quando 'imagem' % } 
< img src = " {{ badgeText | append: " . png " | asset_url }} " alt = " {{ badgeText }} " >
 { % outro % }
 < h3 class = "fita de crachá de produto- {{ badgeDesign }} " > 
< intervalo >
 { { badgeText } }
 </span> _
 </ h3 >
 { % final % }
 { % outro % } 
{ % se configurações. versão antiga % }
 { %- se produto. disponível == falso -% }
 < span class = "crachá - cor inferior esquerda {{ settings.sold_out_badge_color_scheme }} " > 
{ { - 'produtos.produto.esgotado' | t - } }
 </span> _
 { %-produto elsif. compare_at_price > produto. preço e produto. disponível -% } 
< span class = "crachá emblema - cor inferior esquerda {{ settings.sale_badge_color_scheme }} " >
 { { - 'produtos.produto.em_venda' | t - } }
 </span> _
 { %- fim se -% } 
{ % outro % }
 { %- se produto. disponível == falso -% }
 < intervalo
 id = "NoMediaStandardBadge- {{ section_id }} - {{ card_product.id }} " 
class = "crachá - cor inferior esquerda {{ settings.sold_out_badge_color_scheme }} "
 >
 { { - 'produtos.produto.esgotado' | t - } }
 </span> _ 
{ %-produto elsif. compare_at_price > produto. preço e produto. disponível -% }
 < intervalo
 id = "NoMediaStandardBadge- {{ section_id }} - {{ product.id }} "
 class = "crachá - cor inferior esquerda {{ settings.sale_badge_color_scheme }} "
 > 
{ { - 'produtos.produto.em_venda' | t - } }
 </span> _
 { %- fim se -% }
 <estilo> _
 . cartão__content {
 exibição : flexível ;
 } 
. cartão__content . cartão__crachá {
 posição : absoluta ;
 }
 </ estilo >
 { % fim se % }
 { % fim se % }
 </div> _ _

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.

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

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

{ % se configurações. versão antiga % }
 { % render "product-badge" , produto : product_card_product % } 
{ % outro % }
 { % render "product-badge" , produto : card_product % }
 { % fim se % }

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.

 , { 
"name" : "Selos do produto" ,
 "configurações" : [
 {
 "tipo" : "cabeçalho" ,
 "content" : "Se o metacampo não for atribuído, o emblema do tema padrão será usado"
 } ,
 {
 "tipo" : "caixa de seleção" , 
"id" : "versão_antiga" ,
 "label" : "Você tem o Dawn versão 2.5 e inferior?" ,
 "padrão" : falso
 } ,
 {
 "tipo" : "cor" ,
 "id" : "sale_badge_color_bg" , 
"default" : "#FFFFFF" ,
 "label" : "Cor de fundo do emblema"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "sale_badge_color_text" ,
 "default" : "#FFFFFF" , 
"label" : "Cor do texto do emblema"
 }
 ]
 }