Cambiar el color del texto de oferta y agotado en la pagina de colección

Technical Q&A
1

Tengo un problema en mi pagina de colección en el tema Dawn, normalmente el texto de oferta y agotado tienen colores azul y rojo respectivamente pero quise agregar un nuevo snippet con un slider de colecciones arriba de los productos pero al agregarlo se cambia el color de la oferta a gris y ya no es cuadrado redondeado sino circular y no se como arreglarlo, aquí explico:

Antes se veía así, con las ofertas azules y los agotados rojos (y así quiero que se vea):

DanielPlata_0-1723567825668.png
DanielPlata_0-1723567825668.png1724×823 199 KB

Luego agregue un slider en un nuevo snippet para que se viera un slider y ahora se ve asi:

DanielPlata_1-1723568130576.png
DanielPlata_1-1723568130576.png1715×780 207 KB

Adjunto un link de drive con un documento de texto con el código completo del slider de colecciones de arriba.

https://drive.google.com/file/d/1iHZbgo7oOi7RG2stNdBn50ohmRUymb-j/view?usp=sharing

Este es un ejemplo de un link a una colección de mi sitio:

https://tecnoventascol.com/collections/barberas

2

Hi @DanielPlata

Este problema surge porque Bootstrap CSS anula los estilos predeterminados en base.css.

Para solucionar este problema, siga estos pasos:

  1. Navegue a la Tienda en línea.
  2. Seleccione Editar código.
  3. Localice el archivo base.css y busque el código especificado (número de línea:2891).
.badge {
    border: 1px solid transparent;
    border-radius: var(--badge-corner-radius);
    display: inline-block;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    line-height: 1;
    padding: .5rem 1.3rem .6rem;
    text-align: center;
    background-color: rgb(var(--color-badge-background));
    border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
    color: rgb(var(--color-badge-foreground));
    word-break: break-word;
}
  1. Reemplácelo con el código que se proporciona a continuación:
.badge {
    border: 1px solid transparent;
    border-radius: var(--badge-corner-radius) !important;
    display: inline-block !important;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    line-height: 1;
    padding: .5rem 1.3rem .6rem;
    text-align: center;
    background-color: rgb(var(--color-badge-background)) !important;
    border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
    color: rgb(var(--color-badge-foreground));
    word-break: break-word;
}
  1. Guarde sus cambios.

Si logré ayudarte, ¡no olvides darle Me gusta y marcarlo como solución!

3

Listo ya se arregló muchas gracias

4

@DanielPlata

¡De nada! Me alegra poder ayudarte.

5

Hola de nuevo, tengo un problema que acabo de notar hoy y es que al usar el código que me pasaste si, se soluciona lo del color de ofertas y agotados en colecciones pero también pasa esto:

DanielPlata_0-1723828335404.png
DanielPlata_0-1723828335404.png493×155 7.8 KB

En las paginas de productos aparecen oferta y agotado a la vez sin importar si esta agotado o no y ya probé y quitando el código que me diste se arregla pero seguiría teniendo el error anterior, entonces perjudica mas que ayuda porque mis clientes piensan que todos mis productos están agotados y no es así, por ahora lo deje como estaba antes esperando a que me des una solución, gracias.

6

Hi @DanielPlata

Reemplace el código con el siguiente:

.badge {
    border: 1px solid transparent;
    border-radius: var(--badge-corner-radius) !important;
    display: inline-block;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    line-height: 1;
    padding: .5rem 1.3rem .6rem;
    text-align: center;
    background-color: rgb(var(--color-badge-background)) !important;
    border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
    color: rgb(var(--color-badge-foreground));
    word-break: break-word;
}

Déjame saber si esto funciona para ti!

Si logré ayudarte, ¡no olvides darle Me gusta y marcarlo como solución!

7

Listo ahora si, todo perfecto, gracias