Title of Item is white on white

Store Design
,
1

I am having alot of trouble with my website.

The Item title is white on a white background ( I want a white background with black words).

The add to cart button is black with black wording ( I want Maroon background like my home bar with white words)

Lastly, the drop down menu for the things that have subcatagories the drop down is white with white words ( I want maroon with white words as well)

Thanks

2

Hi @allshukup ,

Could you kindly provide us with your store URL and the protected password (if applied), so that our team can offer you the necessary support?

3
4

Hi @allshukup Please follow these steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, click the … button to open the actions menu, and then click Edit code.

To update product title color
3. Open the file assets/theme.scss.css and find the following:

.grid-view-item__title {
    margin-bottom: 0;
    color: #fff;
}
  1. And update color to “black”, so it should be:
.grid-view-item__title {
    margin-bottom: 0;
    color: black;
}
  1. In the same file, find the following:
.product-single__title {
    margin-bottom: .5rem;
}
  1. And add color style in it:
.product-single__title {
    margin-bottom: .5rem;
    color: black;
}

To update “Add to cart” button style

  1. Find the following in the same file:
.product-form__cart-submit, .shopify-payment-button .shopify-payment-button__button--unbranded {
    display: block;
    width: 100%;
    line-height: 1.4;
    padding-left: 5px;
    padding-right: 5px;
    white-space: normal;
    margin-top: 0;
    margin-bottom: 10px;
    min-height: 44px;
}
  1. And update this by adding background and color styles:
.product-form__cart-submit, .shopify-payment-button .shopify-payment-button__button--unbranded {
    display: block;
    width: 100%;
    line-height: 1.4;
    padding-left: 5px;
    padding-right: 5px;
    white-space: normal;
    margin-top: 0;
    margin-bottom: 10px;
    min-height: 44px;
    background: #931a59;
    color: white;
}

To update dropdown background

  1. And find the following in the same file:
.site-nav__dropdown {
    display: none;
    position: absolute;
    padding: 11px 30px 11px 0;
    margin: 0;
    z-index: 7;
    text-align: left;
    border: 1px solid black;
    background: #fff;
    left: -1px;
    top: 41px;
}
  1. And update the background style:
.site-nav__dropdown {
    display: none;
    position: absolute;
    padding: 11px 30px 11px 0;
    margin: 0;
    z-index: 7;
    text-align: left;
    border: 1px solid black;
    background: #931a59;
    left: -1px;
    top: 41px;
}

Please let me know if you have any concern.

Hope it will help you.
Vinh