How To Change This Text Colour?

Store Design
, , , , , , ,

Topic summary

A user seeks to change text and icon colors from black to white on their Shopify store’s product page, specifically targeting payment button options and accordion elements.

Proposed Solutions:
Multiple community members provided similar CSS-based fixes:

  • Target the “More payment options” button text using .shopify-payment-button__more-options { color: #fff; }
  • Change accordion icon color with .accordion .accordion-icon svg path { fill: #fff; }

Implementation Steps:

  1. Navigate to Online Store → Edit Code
  2. Locate theme.liquid or base.css file
  3. Add the provided CSS code either:
    • Above the </body> tag in theme.liquid (wrapped in <style> tags), or
    • At the bottom of base.css

Status: Multiple working solutions provided with screenshots demonstrating expected results. The discussion appears resolved with actionable code snippets, though no confirmation from the original poster indicates whether the solution was successfully implemented.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hello, I Want To Change The Text & Icon Colour From Black To White.. I Had Shared The Images And Outlined It With Green Box..

My URL: https://theindianvastr.com/?_ab=0&_fd=0&_sc=1

IMG_20240705_114221.jpg
IMG_20240705_114221.jpg1080×2160 176 KB

2

Hey @Emiway

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:

Moeed_0-1720160514236.png
Moeed_0-1720160514236.png386×556 167 KB

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

Best Regards,
Moeed

3

@Emiway thanks for posting here.
please use this style code:

.product button.shopify-payment-button__more-options {
    color: #fff;
}
.collapsible-content .accordion svg path {
    fill: #fff;
}

ProtoMan44_1-1720160923231.png
ProtoMan44_1-1720160923231.png466×606 193 KB

4

HI @Emiway You can follow this step to archive your result
Go to online store->edit code-> theme.liquid file and past bellow code inside Style tag

.shopify-payment-button__more-options {
    color: white !important;
}
.accordion .icon-accordion {
    fill: white !important;
}
5

Hello @Emiway
Go to online store > edit theme code > theme.liquid > put in the below code in theme.liquid file before closing
6

Hello @Emiway
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the bottom of the file.

.shopify-payment-button__more-options {
color: #fff;
}
.accordion .icon-accordion {
align-self: center;
fill: #fff;
}

and the result will be

3.png
3.png425×832 211 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks