How to change color on a notification template button?

Shopify Discussion

Topic summary

A user is experiencing an issue with customizing a notification template button in Shopify. They modified both background-color and color CSS attributes, but only the inner portion of the button changed color, not the entire button.

Technical Details:

  • The issue involves an order status button in an email notification template
  • The button appears in notifications sent to customers after purchase
  • Code snippet shows the button is within a table structure with specific styling

Current Status:

  • Multiple users requested the store URL and additional details to investigate
  • The affected store is hairmony.gr
  • One responder indicated they couldn’t locate the button on the website, prompting clarification that it’s specifically in email notification templates
  • The discussion remains open with no solution provided yet

Note: Some text in the code snippets appears reversed or encoded, which may be part of the template structure or a display issue.

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

Hello i have changed the values of both background-color and color CSS attributes but the color of the button changed only inner not the entire button. Does anyone knows why this happend?

The button:

Screenshot 2023-10-12 093210.png
Screenshot 2023-10-12 093210.png621×144 5.74 KB

The code:


<!-- BEGIN SECTION: Order Status Button -->
<tr id="section-6539989" class="section order_status_button">
<th style="mso-line-height-rule: exactly; padding: 0 44px 11px;" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<th class="sides column_text_before_button" data-key="6539989_text_before_button" style="mso-line-height-rule: exactly; direction: ltr; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,'Open Sans'; font-size: 15px; line-height: 22px; font-weight: 300; text-transform: none; color: #666666; padding-bottom: 11px;" align="left" bgcolor="#ffffff" valign="top">
{% if requires_shipping %}<p style="mso-line-height-rule: exactly; direction: ltr; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,'Open Sans'; font-size: 15px; line-height: 22px; font-weight: 300; text-transform: none; color: #666666; Margin: 0;" align="left">Αν θέλεις, μπορείς να παρακολουθείς την εξέλιξη της παραγγελίας σου.</p>{% endif %}
</th>
</tr>
<!-- Button : BEGIN -->

Thanks in advance

2

@mpatsia Can you please send me the store URL?

1 Like
3

Hey @mpatsia

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

1 Like
4

https://hairmony.gr/

5

https://hairmony.gr/

6

Hey @mpatsia

I’m unable to locate that button on your website, can you please tell me that on which page that button is located?

Best Regards,

Moeed

7

Sorry for the confusion i forgot to mention it, is a notification template button send after a customer make a purchase.

8

Hello @mpatsia


{% if requires_shipping %}



Αν θέλεις, μπορείς να παρακολουθείς την εξέλιξη της παραγγελίας σου.



{% endif %}