Change color of product recommendations and social media button text - debut theme

Store Design

Topic summary

Main issue: After changing product page colors in Debut, the text on social share buttons and the “You may also like” (product recommendations) header remains white. Request to change these to a mauve/violet used elsewhere.

Proposed fixes:

  • CSS targeting section headers and social icons added to theme stylesheet (Online Store → Theme → Edit code → Assets → theme.scss.liquid):
    • .section-header.text-center h2 { color: var(–color-body-text); }
    • .btn–share .icon-[facebook|twitter|pinterest] { fill: var(–color-body-text); }
  • Additional CSS suggested for product template:
    • .template-product .share-title { color: #000 !important; }
    • .template-product div#shopify-section-product-recommendations .section-header h2 { color: #000 !important; }

Current outcome:

  • Partial success: social media symbols (icons) changed color, but the button text did not.
  • Helper requested a screenshot for further debugging; one screenshot is attached earlier in the thread.

Status: Unresolved/ongoing. Next steps likely require targeting the specific text element/class inside the share buttons (not just the SVG icon ‘fill’) and aligning colors to the desired mauve/violet instead of #000 or var(–color-body-text).

Summarized with AI on March 5. AI used: gpt-5.
1

Hello,

I recently changed the color of my product page including the background and several titles. However, the color of the text on the social media buttons and the product recs (“You may also like”) is still white. How can I change it to the mauve or violet I’ve used elsewhere?

Please let me know. I’m comfortable with editing the code after I’ve been nudged in the right direction.

Thank you.

Screenshot (588).png
Screenshot (588).png1593×906 309 KB

my shopify : bazaarify.net

1 Like
2 
.section-header.text-center h2 {
    color: var(--color-body-text);
}
.btn--share .icon-facebook {
    fill: var(--color-body-text);
}
.btn--share .icon-twitter {
    fill: var(--color-body-text);
}
.btn--share .icon-pinterest {
    fill: var(--color-body-text);
}

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

1 Like
3

@ahana165

Please add the following code at the bottom of your CSS file.

.template-product .share-title{ color: #000 !important; }
.template-product div#shopify-section-product-recommendations .section-header h2 {
    color: #000 !important;
}

Hope this works.

Thanks!

4

thank you for your help!

5

Thank you for your help! This is partially correct; the text on the social media buttons didn’t change color, only the symbols did.

6

please share screenshot