Customer Notifications

Store Design
,
1

Does anyone know how I can change the font color for the customer notification email buttons and links? The editor allows you to change the button color but not the button text color and because the button is a light pink, the white text inside the button doesn’t show very well. Store Design

IMG_8626
IMG_86261320×2868 231 KB

2

You need to use the code for this in the customer notifications to change the background of the buttons.

There are the steps you can follow to change the background of the button.

  • Go to Shopify Admin
  • Settings
  • Notifications
  • Customer Notifications
  • Click on Edit Code

Search for the class that is being used for the button**.** Just target it and change the background.

It will be something like this:

#cta-button {
  background-color: red;
}

Class names varies based on which is used there.

3

Hi @PetalLashes

You can fix this by editing the email template code manually:

  1. Go to Settings → Notifications

  2. Open the email template (e.g., Order confirmation)

  3. Click Edit code

Look for the button code (usually <a> tag) and update the inline style like this:

<a href="{{ some_url }}" style="background-color:#f8c8dc; color:#000000; padding:12px 20px; text-decoration:none; display:inline-block;">
  View your order
</a>

Best regards,
Devcoder :laptop:

5

I need to change the color of the button TEXT not the button itself. My store uses liquid coding and not CSS or HTML. The editor already lets you change the color of the button, but not the text..

6

Text color should just be color so take out the background-

7

Shopify’s notification editor is a bit misleading there because even though the emails use Liquid variables, the actual styling for buttons and links is still controlled through the HTML/CSS inside the notification template.

The button text color is usually being inherited from something like:

.button__text {
  color: #ffffff;
}

or sometimes directly inline inside the button cell.

Since your button background is light pink, you’d probably want to override the text color manually to something darker for readability.

One thing to watch though is that some notification templates reuse the same button class globally, so changing it once can affect multiple customer emails at the same time.

Did you already open the actual notification code editor or only the visual branding editor under Notifications?

8

I opened the actual code editor but I didn’t see the hex code for the font. Just liquid variables in which I’m assuming the hex code is embedded inside the variable?