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

[DanielPlata]

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):

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

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

[Priyanka_]

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;
}

4. 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;
}

5. Guarde sus cambios.

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

[DanielPlata]

Listo ya se arregló muchas gracias

[Priyanka_]

@DanielPlata 

¡De nada!  Me alegra poder ayudarte. 

[DanielPlata]

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:

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.

[Priyanka_ · Accepted solution]

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!

[DanielPlata]

Listo ahora si, todo perfecto, gracias