Orderconfirmation: How can i change the Color in the Buttons?

n1ght2k · ‎10-26-2021

Hello,

I have the following problem and hope for your help:

For the order confirmation I would like to have a light yellow tone as color, but now the problem is that I can only change the accent color but not the font color inside the button. How can I make the font inside the button black?

I have attached my HTML code of the order confirmation and a screenshot with the problem.

Thanks in advance!

{% 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 %}

{% endcapture %}

<!DOCTYPE html>

<head>

<title>{{ email_title }}</title>

<style>

.button__cell { background: {{ shop.email_accent_color }}; }

a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }

</style>

</head>

<body>

<tr>

<td>

<tr>

<tr>

<td>

<tr>

{%- if shop.email_logo_url %}

{%- else %}

</h1>

{%- endif %}

</td>

Bestellung {{ order_name }}

</span>

</td>

</tr>

</table>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

<tr>

<tr>

<td>

<h2>{{ email_title }}</h2>

<p>{{ email_body }}</p>

{% if order_status_url %}

<tr>

</tr>

<tr>

<tr>

<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">Bestellung ansehen</a></td>

</tr>

</table>

{% if shop.url %}

<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 %}

<tr>

<tr>

<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Zu unserem Shop</a></td>

</tr>

</table>

</td>

</tr>

</table>

{% endif %}

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

{% assign gift_card_line_item = line_items | where: "gift_card" %}

{% if gift_card_line_item.first %}

<tr>

<tr>

<td>

<h3>Geschenkgutschein</h3>

</td>

</tr>

</table>

<tr>

<td>

<p> Du erhältst separate Benachrichtigungen für Geschenkgutscheine.</p>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

{% endif %}

<tr>

<tr>

<td>

<h3>Bestellübersicht</h3>

</td>

</tr>

</table>

<tr>

<td>

{% for line in subtotal_line_items %}

<table>

<td>

{% if line.image %}

{% endif %}

</td>

{% 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>

(-{{ discount_allocation.amount | money }})

</span>

{% endif %}

{% endfor %}

{% endif %}

</td>

{% if line.original_line_price != line.final_line_price %}

<del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>

{% endif %}

{% if line.final_line_price > 0 %}

{% if line.unit_price_measurement %}

{{ line.unit_price | money }}/

{%- if line.unit_price_measurement.reference_value != 1 -%}

{%- endif -%}

</div>

{% endif %}

{% else %}

Kostenlos

{% endif %}

</p>

</td>

</table>

</td>

</tr>{% endfor %}

</table>

<tr>

<td>

{% for discount_application in discount_applications %}

{% if discount_application.target_selection == 'all' %}

{% capture discount_title %}

{% if discount_application.title %}

{% else %}

Rabatt

{% endif %}

{% endcapture %}

<p>

<span>Rabatt</span>

<span class="subtotal-line__discount-title">{{ discount_title }}</span>

</span>

</p>

</td>

<strong>-{{ discount_application.total_allocated_amount | money }}</strong>

</td>

</tr>

{% endif %}

{% endfor %}

<p>

<span>Zwischensumme</span>

</p>

</td>

<strong>{{ subtotal_price | money }}</strong>

</td>

</tr>

{% if delivery_method == 'pick-up' %}

<p>

<span>Abholungen</span>

</p>

</td>

<strong>{{ shipping_price | money }}</strong>

</td>

</tr>

{% else %}

<p>

<span>Versand</span>

</p>

</td>

<strong>{{ shipping_price | money }}</strong>

</td>

</tr>

{% endif %}

{% if current_total_duties %}

<p>

<span>Zollgebühren</span>

</p>

</td>

<strong>{{ current_total_duties | money }}</strong>

</td>

</tr>

{% endif %}

<p>

<span>Steuern</span>

</p>

</td>

<strong>{{ tax_price | money }}</strong>

</td>

</tr>

{% if total_tip and total_tip > 0 %}

<p>

</p>

</td>

<strong>{{ total_tip | money }}</strong>

</td>

</tr>

{% endif %}

</table>

<p>

<span>Gesamt</span>

</p>

</td>

<strong>{{ total_price | money_with_currency }}</strong>

</td>

</tr>

</table>

{% if total_discounts > 0 %}

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 %}

{% 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 %}

<p>

<span>{{transaction_name}}</span>

</p>

</td>

<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 %}

<p>

<span>Zurückerstatten</span>

<br>

<small>{{ refund_method_title | capitalize }}</small>

</p>

</td>

<strong>- {{ transaction.amount | money }}</strong>

</td>

</tr>

{% endif %}

{% endfor %}

</table>

{% endif %}

</td>

</tr>

</table>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

<tr>

<tr>

<td>

<h3>Kundeninformationen</h3>

</td>

</tr>

</table>

<tr>

<td>

<tr>

{% if requires_shipping and shipping_address %}

<h4>Lieferadresse</h4>

</td>

{% endif %}

{% if billing_address %}

<h4>Rechnungsadresse</h4>

</td>

{% endif %}

</tr>

</table>

<tr>

{% if requires_shipping and shipping_address %}

<h4>Versand</h4>

<p>{{ shipping_method.title }}</p>

</td>

{% endif %}

{% assign transaction_count = transactions | size %}

{% if transaction_count > 0 %}

<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 %}

<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" %}

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 %}

{{ transaction.gateway_display_name }} — <strong>{{ transaction.amount | money }}</strong>

</p>

{% endif %}

{% endfor %}

</td>

{% endif %}

</tr>

</table>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

<tr>

<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>

</td>

</tr>

</table>

</body>

</html>

{%- if shop.terms_of_service.body != blank -%}

{%- endif -%}

{%- if shop.refund_policy.body != blank -%}

{%- endif -%}

n1ght2k · ‎10-26-2021

{% 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 %}

{% endcapture %}

<!DOCTYPE html>

<head>

<title>{{ email_title }}</title>

<style>

.button__cell { background: {{ shop.email_accent_color }}; }

a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }

</style>

</head>

<body>

<tr>

<td>

<tr>

<tr>

<td>

<tr>

{%- if shop.email_logo_url %}

{%- else %}

</h1>

{%- endif %}

</td>

Bestellung {{ order_name }}

</span>

</td>

</tr>

</table>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

<tr>

<tr>

<td>

<h2>{{ email_title }}</h2>

<p>{{ email_body }}</p>

{% if order_status_url %}

<tr>

</tr>

<tr>

<tr>

<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">Bestellung ansehen</a></td>

</tr>

</table>

{% if shop.url %}

<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 %}

<tr>

<tr>

<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Zu unserem Shop</a></td>

</tr>

</table>

</td>

</tr>

</table>

{% endif %}

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

{% assign gift_card_line_item = line_items | where: "gift_card" %}

{% if gift_card_line_item.first %}

<tr>

<tr>

<td>

<h3>Geschenkgutschein</h3>

</td>

</tr>

</table>

<tr>

<td>

<p> Du erhältst separate Benachrichtigungen für Geschenkgutscheine.</p>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

{% endif %}

<tr>

<tr>

<td>

<h3>Bestellübersicht</h3>

</td>

</tr>

</table>

<tr>

<td>

{% for line in subtotal_line_items %}

<table>

<td>

{% if line.image %}

{% endif %}

</td>

{% 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>

(-{{ discount_allocation.amount | money }})

</span>

{% endif %}

{% endfor %}

{% endif %}

</td>

{% if line.original_line_price != line.final_line_price %}

<del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>

{% endif %}

{% if line.final_line_price > 0 %}

{% if line.unit_price_measurement %}

{{ line.unit_price | money }}/

{%- if line.unit_price_measurement.reference_value != 1 -%}

{%- endif -%}

</div>

{% endif %}

{% else %}

Kostenlos

{% endif %}

</p>

</td>

</table>

</td>

</tr>{% endfor %}

</table>

<tr>

<td>

{% for discount_application in discount_applications %}

{% if discount_application.target_selection == 'all' %}

{% capture discount_title %}

{% if discount_application.title %}

{% else %}

Rabatt

{% endif %}

{% endcapture %}

<p>

<span>Rabatt</span>

<span class="subtotal-line__discount-title">{{ discount_title }}</span>

</span>

</p>

</td>

<strong>-{{ discount_application.total_allocated_amount | money }}</strong>

</td>

</tr>

{% endif %}

{% endfor %}

<p>

<span>Zwischensumme</span>

</p>

</td>

<strong>{{ subtotal_price | money }}</strong>

</td>

</tr>

{% if delivery_method == 'pick-up' %}

<p>

<span>Abholungen</span>

</p>

</td>

<strong>{{ shipping_price | money }}</strong>

</td>

</tr>

{% else %}

<p>

<span>Versand</span>

</p>

</td>

<strong>{{ shipping_price | money }}</strong>

</td>

</tr>

{% endif %}

{% if current_total_duties %}

<p>

<span>Zollgebühren</span>

</p>

</td>

<strong>{{ current_total_duties | money }}</strong>

</td>

</tr>

{% endif %}

<p>

<span>Steuern</span>

</p>

</td>

<strong>{{ tax_price | money }}</strong>

</td>

</tr>

{% if total_tip and total_tip > 0 %}

<p>

</p>

</td>

<strong>{{ total_tip | money }}</strong>

</td>

</tr>

{% endif %}

</table>

<p>

<span>Gesamt</span>

</p>

</td>

<strong>{{ total_price | money_with_currency }}</strong>

</td>

</tr>

</table>

{% if total_discounts > 0 %}

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 %}

{% 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 %}

<p>

<span>{{transaction_name}}</span>

</p>

</td>

<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 %}

<p>

<span>Zurückerstatten</span>

<br>

<small>{{ refund_method_title | capitalize }}</small>

</p>

</td>

<strong>- {{ transaction.amount | money }}</strong>

</td>

</tr>

{% endif %}

{% endfor %}

</table>

{% endif %}

</td>

</tr>

</table>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

<tr>

<tr>

<td>

<h3>Kundeninformationen</h3>

</td>

</tr>

</table>

<tr>

<td>

<tr>

{% if requires_shipping and shipping_address %}

<h4>Lieferadresse</h4>

</td>

{% endif %}

{% if billing_address %}

<h4>Rechnungsadresse</h4>

</td>

{% endif %}

</tr>

</table>

<tr>

{% if requires_shipping and shipping_address %}

<h4>Versand</h4>

<p>{{ shipping_method.title }}</p>

</td>

{% endif %}

{% assign transaction_count = transactions | size %}

{% if transaction_count > 0 %}

<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 %}

<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" %}

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 %}

{{ transaction.gateway_display_name }} — <strong>{{ transaction.amount | money }}</strong>

</p>

{% endif %}

{% endfor %}

</td>

{% endif %}

</tr>

</table>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

<tr>

<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>

</td>

</tr>

</table>

</body>

</html>

{%- if shop.terms_of_service.body != blank -%}

{%- endif -%}

{%- if shop.refund_policy.body != blank -%}

{%- endif -%}

Zworthkey · ‎10-26-2021

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

n1ght2k · ‎10-26-2021

Hello Zworthkey thank you very much for the fast reply.

This is the Shop URL: https://moafakastudios.myshopify.com/

Thank you! 🙂

Zworthkey · ‎10-26-2021

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

n1ght2k · ‎10-26-2021

Im sorry, i havent bought the theme so far is that a problem?

moafaka+studio < this is the password

Zworthkey · ‎10-26-2021

@n1ght2k
Can you give me page link where you are seeing this error in your store?
Thank You.

n1ght2k · ‎10-26-2021

Hello, the error is on the order confirmation that the customer gets by mail. So Settings > Notifications > Order Confirmation, I do not know exactly how I can send you the link in this case. I can send you the test mail out or is there another possibility?

n1ght2k · ‎10-29-2021

@Zworthkey do you have a solution? 😕

david360 · ‎08-07-2023

I also have a similar question as I also posses a website and want to add a table of content for my blog do any one of you can assist me?

Orderconfirmation: How can i change the Color in the Buttons?

Orderconfirmation: How can i change the Color in the Buttons?

Community Blog Articles