Alterar a posição do selo

Use a seção Position para posicionar um selo de texto ou de imagem sobre a imagem do produto, abaixo de um elemento da página de produto ou ao lado de um elemento personalizado do tema.

Abra a seção Position

1. Abra Badges & Labels

   No admin da Shopify, abra Sami Product Labels > Badges & Labels.

2. Crie ou selecione um selo

   Para criar um selo, clique em Create badge e escolha Text badge ou Image badge.

   Para atualizar um selo existente, clique em Edit badge/label na linha desse selo.

3. Expanda Position

   No editor de selos, permaneça na guia Design, role até Position e expanda a seção.

   

   Abra a guia Design e expanda Position.

Posicione o selo dentro da imagem do produto

Selecione Inside product image quando o selo deve se sobrepor à imagem do produto.

Escolha onde a configuração se aplica

Use Badge placement para escolher um destes modos:

• Use the same position for collection page and product page — Uma única posição vale para os dois tipos de página.
• Set different position for collection page and product page — Use as guias Listing pages e Product page para configurar cada posição separadamente.

Nota

O editor atual chama a primeira guia por página de Listing pages, e não de Collection page.

Aplique uma única posição dentro da imagem em todo lugar ou configure Listing pages e Product page separadamente.

Escolha uma posição predefinida

Em Badge position, selecione um dos nove pontos da grade de posição.

Posição	Local na imagem
Top left	Canto superior esquerdo
Top center	Centro da borda superior
Top right	Canto superior direito
Center left	Centro da borda esquerda
Center	Centro da imagem
Center right	Centro da borda direita
Bottom left	Canto inferior esquerdo
Bottom center	Centro da borda inferior
Bottom right	Canto inferior direito

Selecione uma das nove posições predefinidas dentro da imagem do produto.

Defina uma posição personalizada por porcentagem

Ative Use Custom Position quando as nove posições predefinidas não forem precisas o bastante. O editor substitui a grade por:

• Uma âncora vertical: Top ou Bottom.
• Uma âncora horizontal: Left ou Right.
• Um controle deslizante de porcentagem para o deslocamento a partir de cada âncora selecionada.

Use os botões de alteração de posição para trocar as âncoras e ajuste os controles deslizantes enquanto confere a prévia.

Escolha as âncoras vertical e horizontal e defina os deslocamentos em porcentagem.

Posicione o selo fora da imagem do produto

Selecione Outside product image quando o selo deve aparecer junto às informações do produto, em vez de se sobrepor à imagem.

Abra Predefined position e escolha uma destas opções:

Opção	Local na página de produto
Below the product image	Diretamente abaixo da imagem do produto
Below the product title	Diretamente abaixo do título do produto
Below the product price	Diretamente abaixo do preço do produto
Below the product quantity	Diretamente abaixo do controle de quantidade
Below the add to cart button	Diretamente abaixo do botão de adicionar ao carrinho
Below the buy now button	Diretamente abaixo do botão de comprar agora
Custom	Ao lado de um elemento identificado por um ID ou uma classe no seu tema

Em Badge position, escolha o alinhamento do selo à esquerda, ao centro ou à direita.

Escolha um elemento da página de produto e alinhe o selo à esquerda, ao centro ou à direita.

Posicione o selo com um seletor do tema

Escolha Custom em Predefined position para direcionar um elemento do seu tema. Informe o ID ou a classe correspondente em qualquer campo de que precisar:

Campo	Tipo de página
Position in product page	Páginas de produto
Position in home page	Página inicial
Position in collection page	Páginas de coleção
Position in other page	Outros tipos de página

Por exemplo, informe .product-form para uma classe ou #ProductInfo para um ID. Adicione um valor para cada tipo de página em que o selo precisa dessa posição personalizada.

Cuidado

Os IDs e as classes do tema variam. Inspecione o tema da sua loja para encontrar um seletor estável e verifique o resultado em todos os tipos de página em que o selo deve aparecer.

Informe o ID ou a classe do tema para cada tipo de página que precisa de uma posição personalizada do selo.

Ajuste a margem e o preenchimento

Expanda Margin para alterar o espaçamento externo em pixels. O editor mostra os lados relevantes para a posição selecionada.

Expanda Padding para alterar o espaço entre o conteúdo do selo e suas bordas. Você pode definir os valores superior, inferior, esquerdo e direito de forma independente.

Faça o ajuste fino do selo com valores de margem e preenchimento em pixels.

Visualize e salve

Use os controles de prévia para conferir Collection page e Product page e alterne entre Desktop view e Mobile view. Quando o selo aparecer no local desejado, clique em Save.

Próximas etapas

• Alterar o tamanho do selo: redimensione o selo para diferentes telas e tipos de página.
• Alterar o estilo do selo: personalize fontes, cores, bordas e fundos.
• Exibir por dispositivo e página: controle quais dispositivos e páginas exibem o selo.

Dica

Precisa de ajuda?

Se tiver qualquer dificuldade ao seguir estas etapas, entre em contato pelo e-mail [email protected].