Como adicionar texto personalizado ao elemento de data de entrega

Por padrão, o Elemento Data de entrega Exibe apenas as informações de entrega estimadas, sem texto personalizado adicional ao lado.

No entanto, em muitos casos, os comerciantes desejam adicionar mensagens extras após a data de entrega para melhorar a clareza, criar senso de urgência ou aumentar a confiança do cliente.

Este guia mostra como adicionar texto personalizado após o elemento Data de Entrega usando CSS personalizado no GemPages.

Casos de uso comuns

Adicionar texto personalizado ao elemento Data de Entrega pode ajudar a melhorar a experiência de compra e comunicar informações importantes com mais clareza.

Alguns casos de uso comuns incluem:

• Exibindo mensagens como:
  • “Entrega estimada”
  • “Envio Rápido”
  • “Entrega expressa disponível”
  • “Somente em dias úteis”
  • “Estoque limitado”
  • “Frete grátis incluído”
• Adicionar mensagens promocionais ao lado da estimativa de entrega.
• Destacando o frete rápido para otimização da conversão
• Informações de entrega personalizadas para melhor combinar com a identidade visual da sua loja.
• Criando um design de página de produto mais sofisticado

Exemplo:

12 a 15 de junho | Frete Expresso Grátis

Passo 1: Abra a área de código personalizado

• Abra o editor GemPages.
• Clique no Data de entrega elemento.
• Clique com o botão direito do mouse no elemento.
• Selecionar Código personalizado.

Isso abre o editor de código personalizado para esse elemento específico.

Passo 2: Cole o código personalizado

Cole o seguinte código na área de Código Personalizado:

.gzacmFacXB {}

.gzacmFacXB .estimate-date-main{

plano de fundo: # 339868;

preenchimento: 4px 10px;

border-radius: 6px;

cor: #fff !importante;

}

.gps .gzacmFacXB .estimate-date-container:after {

Conteúdo: "Apenas para teste";

position: relative;

color: #151515;

font-size: 17px;

família de fontes: 'AbeeZee', sem serifa;

}

@media(largura máxima:767px){

.gps .gzacmFacXB .estimate-date-container:after {

font-size: 14px;

}

}

Nota: Peças substituíveis no código

Antes de usar o código, certifique-se de substituir as partes personalizáveis ​​abaixo para que correspondam à sua configuração e preferências de design.

Etapa 3: salvar e publicar

• Clique Economize.
• Publique ou atualize sua página.
• Visualize a página em computadores e dispositivos móveis.

O elemento "Data de Entrega" agora deve exibir um selo estilizado com um texto personalizado ao lado.