How do I change the color of font for the text of the "sort by" option

[yanetha]

Hello I am new to shopify and am creating my first store for a product launch. I am using the Dawn theme and am having an issue with the color of specific clickable buttons such as the “Filter: Availability:” button and the “Sort by:” button. I also have a slide show on my home page that I would like to change the color of the dots for. I am also having this issue with the text on my cart page.

I want to change the color of my backgrounds that are currently red to black, but because the text does not change they end up blending into the background and disappearing. I am hoping for someone to help me with some code that could change those clickable buttons to white so they don’t disappear into the background.

Below I have attached a few screenshots with the font that I want to change from black into white highlighted in the blue boxes. The link to my website is https://r4bbit-teeth.myshopify.com/ and the current password for the website is t33th!

If anyone could please help I would really appreciate it. Thanks.

[Moeed]

Hey @yanetha

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[oscprofessional]

Hello @yanetha

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom

.product__text.caption-with-letter-spacing+.product__title {
    color: #fff !important;
}
.price__regular .price-item--regular {
    color: #fff !important;
}
.product-form__quantity .form__label {
    color: #fff !important;
}
p.product__text.inline-richtext.caption-with-letter-spacing {
    color: #fff !important;
}
.shopify-payment-button__more-options {
    color: #fff !important;
}
.product__description.rte.quick-add-hidden {
    color: #fff !important;
}
summary.share-button__button {
    color: #fff !important;
}
th.caption-with-letter-spacing {
    color: #fff !important;
}
td.cart-item__details {
    color: #fff !important;
}
a.cart-item__name.h4.break {
    color: #fff !important;
}
span.price.price--end {
    color: #fff !important;
}
cart-remove-button .icon-remove {
    color: #fff !important;
}
a.underlined-link {
    color: #fff !important;
}

[yanetha]

Thank you so much for your help! Your solution helped me mostly solve the problem I was having aside from a few other text blocks. The title of the product in the product page is still black and I would change it to white as well. Also, in my cart pages there are still a few places where I am wondering if it is possible to change the font from black to white. I have attached photos below of the places I would like the color changed as highlighted by the blue boxes.

Thank you so much for your help it is greatly appreciated!

[yanetha]

Thank you so much for your help! Your solution helped me mostly solve the problem I was having aside from a few other text blocks. The title of the product in the product page is still black and I would change it to white as well. Also, in my cart pages there are still a few places where I am wondering if it is possible to change the font from black to white. I have attached photos below of the places I would like the color changed as highlighted by the blue boxes.

Thank you so much for your help it is greatly appreciated!

[oscprofessional]

Hello @yanetha

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom

.product__text.caption-with-letter-spacing+.product__title h1 {
    color: #fff !important;
}
.quantity__button:not(:focus-visible):not(.focused), .quantity__input:not(:focus-visible):not(.focused) {
    color: #fff !important;
}
quantity-input.quantity.cart-quantity {
    position: inherit;
    border: 1px solid #fff !important;
}
.quantity {
    position: initial !important;
    border: 1px solid #fff !important;
}
.cart__items {
    position: relative !important;
}
.quantity:before {
    border: none;
    box-shadow: none;
}
.quantity:after {
    box-shadow: none;
    border: none;
}

[Moeed]

Hey @yanetha

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed