Order confirmation font color in button

n1ght2k
Tourist
14 0 1

Hello forum users,

I have a question regarding the email notifications to the customer. Namely, my client has chosen a very light accent color, #fdff40 Now the font color in the buttons is white and so hardly recognizable as you can see in the screenshot. I have been looking around for ages now but have not found the solution. How can I change the color from white to black in the buttons?

Already in advance, thanks for the help.

Best regards

 

Below the HTML code + Screenshotchrome_A3ArKef50f.png

 

{% capture email_title %}Vielen Dank für deinen Einkauf! {% endcapture %}
{% capture email_body %}
  {% if requires_shipping %}
  {% case delivery_method %}
      {% when 'pick-up' %}
        Du erhältst eine E-Mail, sobald deine Bestellung zur Abholung bereit ist.
      {% when 'local' %}
        Hallo {{ customer.first_name }}! Wir bereiten deine Bestellung gerade für die Zustellung vor.
      {% else %}
        Hallo {{ customer.first_name }}! Wir bereiten deine Bestellung gerade für den Versand vor. Wir benachrichtigen dich, sobald die Bestellung verschickt wurde.
    {% endcase %}
      {% if delivery_instructions != blank  %}
        <p><b>Informationen zur Zustellung:</b> {{ delivery_instructions }}</p>
      {% endif %}
  {% endif %}
{% endcapture %}
 
<!DOCTYPE html>
<html lang="de">
  <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
  <style>
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
  </style>
</head>
 
  <body>
    <table class="body">
      <tr>
        <td>
          <table class="header row">
  <tr>
    <td class="header__cell">
      <center>
 
        <table class="container">
          <tr>
            <td>
 
              <table class="row">
                <tr>
                  <td class="shop-name__cell">
                    {%- if shop.email_logo_url %}
                      <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                    {%- else %}
                      <h1 class="shop-name__text">
                        <a href="{{shop.url}}">{{ shop.name }}</a>
                      </h1>
                    {%- endif %}
                  </td>
 
                    <td class="order-number__cell">
                      <span class="order-number__text">
                        Bestellung {{ order_name }}
                      </span>
                    </td>
                </tr>
              </table>
 
            </td>
          </tr>
        </table>
 
      </center>
    </td>
  </tr>
</table>
 
          <table class="row content">
  <tr>
    <td class="content__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
            <h2>{{ email_title }}</h2>
            <p>{{ email_body }}</p>
            {% if order_status_url %}
              <table class="row actions">
  <tr>
    <td class="empty-line"> </td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
 
    
          <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">Bestellung ansehen</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
 
        <td class="link__cell">oder <a href="{{ shop.url }}">Zu unserem Shop</a></td>
      </tr>
    </table>
{% endif %}
 
    </td>
  </tr>
</table>
 
            {% else %}
              {% if shop.url %}
    <table class="row actions">
      <tr>
        <td class="actions__cell">
          <table class="button main-action-cell">
            <tr>
              <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Zu unserem Shop</a></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
{% endif %}
 
            {% endif %}
 
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>
 
          {% assign gift_card_line_item = line_items | where: "gift_card" %}
          {% if gift_card_line_item.first %}
            <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Geschenkgutschein</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
              <p> Du erhältst separate Benachrichtigungen für Geschenkgutscheine.</p>
 
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>
          {% endif %}
 
          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Bestellübersicht</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            
<table class="row">
  {% for line in subtotal_line_items %}
  <tr class="order-list__item">
    <td class="order-list__item__cell">
      <table>
        <td>
          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% endif %}
        </td>
        <td class="order-list__product-description-cell">
          {% if line.product.title %}
            {% assign line_title = line.product.title %}
          {% else %}
            {% assign line_title = line.title %}
          {% endif %}
 
          {% if line.quantity < line.quantity %}
            {% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
          {% else %}
            {% assign line_display = line.quantity  %}
          {% endif %}
 
          <span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
 
          {% if line.variant.title != 'Default Title' %}
            <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
          {% endif %}
 
          {% if line.selling_plan_allocation %}
            <span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
          {% endif %}
 
          {% if line.refunded_quantity > 0 %}
            <span class="order-list__item-refunded">Zurückerstattet</span>
          {% endif %}
 
          {% if line.discount_allocations %}
            {% for discount_allocation in line.discount_allocations %}
              {% if discount_allocation.discount_application.target_selection != 'all' %}
                <span class="order-list__item-discount-allocation">
                  <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                  <span>
                    {{ discount_allocation.discount_application.title | upcase }}
                    (-{{ discount_allocation.amount | money }})
                  </span>
                </span>
              {% endif %}
            {% endfor %}
          {% endif %}
        </td>
          <td class="order-list__price-cell">
            {% if line.original_line_price != line.final_line_price %}
              <del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
            {% endif %}
            <p class="order-list__item-price">
              {% if line.final_line_price > 0 %}
                {{ line.final_line_price | money }}
                  {% if line.unit_price_measurement %}
                    <div class="order-list__unit-price">
                      {{ line.unit_price | money }}/
                      {%- if line.unit_price_measurement.reference_value != 1 -%}
                        {{- line.unit_price_measurement.reference_value -}}
                      {%- endif -%}
                      {{ line.unit_price_measurement.reference_unit }}
                    </div>
                  {% endif %}
              {% else %}
                Kostenlos
              {% endif %}
            </p>
          </td>
      </table>
    </td>
  </tr>{% endfor %}
</table>
 
            <table class="row subtotal-lines">
  <tr>
    <td class="subtotal-spacer"></td>
    <td>
      <table class="row subtotal-table">
        {% for discount_application in discount_applications %}
          {% if discount_application.target_selection == 'all' %}
            {% capture discount_title %}
              {% if discount_application.title %}
                {{ discount_application.title | upcase }}
              {% else %}
                Rabatt
              {% endif %}
            {% endcapture %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Rabatt</span>
        <span class="subtotal-line__discount">
          <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
          <span class="subtotal-line__discount-title">{{ discount_title }}</span>
        </span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>-{{ discount_application.total_allocated_amount | money }}</strong>
  </td>
</tr>
 
          {% endif %}
        {% endfor %}
 
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Zwischensumme</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ subtotal_price | money }}</strong>
  </td>
</tr>
 
        {% if delivery_method == 'pick-up' %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Abholungen</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>
 
        {% else %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Versand</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>
 
        {% endif %}
 
        {% if current_total_duties %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Zollgebühren</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ current_total_duties | money }}</strong>
  </td>
</tr>
 
        {% endif %}
 
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Steuern</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ tax_price | money }}</strong>
  </td>
</tr>
 
 
        {% if total_tip and total_tip > 0 %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Tip</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ total_tip | money }}</strong>
  </td>
</tr>
 
        {% endif %}
      </table>
      <table class="row subtotal-table subtotal-table--total">
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Gesamt</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ total_price | money_with_currency }}</strong>
  </td>
</tr>
 
      </table>
 
      {% if total_discounts > 0 %}
        <p class="total-discount">
          Du hast <span class="total-discount--amount">{{ total_discounts | money }}</span> gespart
        </p>
      {% endif %}
 
      {% assign transaction_size = 0 %}
      {% assign transaction_amount = 0 %}
      {% for transaction in transactions %}
        {% unless transaction.kind == "capture" or transaction.kind == "void" %}
          {% assign transaction_size = transaction_size | plus: 1 %}
          {% assign transaction_amount = transaction_amount | plus: transaction.amount %}
        {% endunless %}
      {% endfor %}
 
      {% if transaction_size > 1 or transaction_amount < total_price %}
        <table class="row subtotal-table">
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <tr><td colspan="2" class="subtotal-table__small-space"></td></tr>
 
          {% for transaction in transactions %}
            {% if transaction.status == "success" and transaction.kind == "authorization" or transaction.kind == "sale" %}
              {% if transaction.payment_details.credit_card_company %}
                {% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (mit den letzten Ziffern {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
              {% else %}
                {% capture transaction_name %}{{ transaction.gateway_display_name }}{% endcapture %}
              {% endif %}
 
              
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>{{transaction_name}}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ transaction.amount | money }}</strong>
  </td>
</tr>
 
            {% endif %}
            {% if transaction.kind == 'refund' %}
              {% if transaction.payment_details.credit_card_company %}
                {% assign refund_method_title = transaction.payment_details.credit_card_company %}
              {% else %}
                {% assign refund_method_title = transaction.gateway %}
              {% endif %}
 
              
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Zurückerstatten</span>
        <br>
        <small>{{ refund_method_title | capitalize }}</small>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>- {{ transaction.amount | money }}</strong>
  </td>
</tr>
 
            {% endif %}
          {% endfor %}
        </table>
      {% endif %}
    </td>
  </tr>
</table>
 
 
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>
 
          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Kundeninformationen</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            <table class="row">
              <tr>
                {% if requires_shipping and shipping_address %}
                <td class="customer-info__item">
                  <h4>Lieferadresse</h4>
                  {{ shipping_address | format_address }}
                </td>
                {% endif %}
                {% if billing_address %}
                <td class="customer-info__item">
                  <h4>Rechnungsadresse</h4>
                  {{ billing_address | format_address }}
                </td>
                {% endif %}
              </tr>
            </table>
            <table class="row">
              <tr>
                {% if requires_shipping and shipping_address %}
                <td class="customer-info__item">
                  <h4>Versand</h4>
                  <p>{{ shipping_method.title }}</p>
                </td>
                {% endif %}
                {% assign transaction_count = transactions | size %}
                {% if transaction_count > 0 %}
                <td class="customer-info__item">
                  <h4>Zahlung</h4>
                  {% for transaction in transactions %}
                    {% if transaction.status == "success" or transaction.status == "pending" %}
                      {% if transaction.kind == "authorization" or transaction.kind == "sale" %}
                        {% if transaction.payment_details.credit_card_company %}
                            <p class="customer-info__item-content">
                              <img src="{{ transaction.payment_details.credit_card_company | payment_icon_png_url  }}" class="customer-info__item-credit" height="24" alt="{{ transaction.payment_details.credit_card_company }}">
                              <span>endet mit {{ transaction.payment_details.credit_card_last_four_digits }} — <strong>{{ transaction.amount | money }}</strong></span>
                            </p>
                          {% elsif transaction.gateway_display_name == "Gift card" %}
                          <p class="customer-info__item-content">
                            <img src="{{ transaction.gateway_display_name | downcase | replace: ' ', '-'  | payment_type_img_url }}" class="customer-info__item-credit" height="24">
                          endet mit {{ transaction.payment_details.gift_card.last_four_characters | upcase }} — <strong>{{ transaction.amount | money }}</strong> <br />
                                Geschenkgutscheinguthaben: {{ transaction.payment_details.gift_card.balance |  money }}
                          </p>
                          {% else %}
                              <p class="customer-info__item-content">
                              {{ transaction.gateway_display_name }} — <strong>{{ transaction.amount | money }}</strong>
                              </p>
                          {% endif %}
                  {% endif %}
                    {% endif %}
                  {% endfor %}
                </td>
                {% endif %}
              </tr>
            </table>
 
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>
 
          <table class="row footer">
  <tr>
    <td class="footer__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
              <p class="disclaimer__subtext">Falls du Fragen hast, antworte auf diese E-Mail oder kontaktiere uns unter <a href="mailto:{{ shop.email }}">{{ shop.email }}</a>.</p>
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>
 
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
 
        </td>
      </tr>
    </table>
  </body>
</html>
 
{%- if shop.terms_of_service.body != blank -%}
  {{ shop.terms_of_service | attach_as_pdf: "AGB" }}
{%- endif -%}
 
{%- if shop.refund_policy.body != blank -%}
  {{ shop.refund_policy | attach_as_pdf: "Widerrufsbelehrung" }}
{%- endif -%}
Reply 1 (1)
Zworthkey
Shopify Partner
2567 309 641

Hii, @n1ght2k 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com