Cómo Añadir Texto Personalizado Al Elemento Fecha De Entrega

De forma predeterminada, el elemento Fecha de Entrega solo muestra la información de entrega estimada, sin ningún texto personalizado adicional junto a ella.

Sin embargo, en muchos casos, los comerciantes desean añadir mensajes adicionales después de la fecha de entrega para mejorar la claridad, generar urgencia o aumentar la confianza del cliente.

Esta guía le muestra cómo añadir texto personalizado después del elemento Fecha de Entrega utilizando CSS personalizado en GemPages.

Casos de uso comunes

Añadir texto personalizado al elemento Fecha de Entrega puede ayudar a mejorar la experiencia de compra y a comunicar información importante con mayor claridad.

Algunos casos de uso comunes incluyen:

• Mostrar mensajes como:
  • "Entrega estimada"
  • "Envío rápido"
  • "Envío exprés disponible"
  • "Solo días hábiles"
  • "Stock limitado"
  • "Envío gratis incluido"
• Añadir mensajes promocionales junto a la estimación de entrega
• Destacar el envío rápido para optimizar la conversión
• Aplicar estilo a la información de entrega para que coincida mejor con la identidad de marca de su tienda
• Crear un diseño de página de producto más premium

Ejemplo:

12 jun – 15 jun | Envío Exprés Gratis

Paso 1: Abra el área de Código Personalizado

• Abra el editor de GemPages.
• Haga clic en el elemento Fecha de Entrega .
• Haga clic con el botón derecho en el elemento.
• Seleccione Código Personalizado.

Esto abre el editor de código personalizado para ese elemento específico.

Paso 2: Pegue el código personalizado

Pegue el siguiente código en el área de Código Personalizado:

.gzacmFacXB {}

.gzacmFacXB .estimate-date-main{

background: #339868;

padding:4px 10px;

border-radius: 6px;

color: #fff !important;

}

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

content: "Test Only";

position: relative;

color:#151515;

font-size: 17px;

font-family: 'AbeeZee', Sans-Serif;

}

@media(max-width:767px){

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

font-size: 14px;

}

}

Nota: Partes reemplazables del código

Antes de utilizar el código, asegúrese de reemplazar las partes personalizables que se indican a continuación para que coincidan con su propia configuración y preferencias de diseño.

Paso 3: Guardar y publicar

• Haga clic en Guardar.
• Publique o actualice su página.
• Previsualice la página en escritorio y en móvil.

Su elemento Fecha de Entrega debería mostrar ahora una insignia con estilo y texto personalizado junto a ella.