Checkout confirmation e-mail

Ask Me Anything Q&A Checkout Optimization
1

How do I make the background red and center the logo?

2

Hi @yenfish,

Thanks for posting your question. I work on the Checkout team at Shopify.

The visual email editor lets you upload a logo, set its width, and choose an accent color, but it doesn’t have controls for a full background color change or logo alignment. You can do both, but it requires a small edit to the order confirmation’s HTML.

If you haven’t already, go to Settings → Notifications → Customer notifications → Customize email template and click Choose file to upload your logo.

This logo will appear across all your notification emails. Details: [Add a logo](https://help.shopify.com/en/manual/fulfillment/setup/notifications/customizing-notification-template#logo)

Getting to the code

In your Shopify admin, go to Settings → Notifications → Customer notifications → Order confirmation → Edit code. Details: [Customizing email templates](https://help.shopify.com/en/manual/fulfillment/setup/notifications/customizing-notification-template)

Make the background red

Near the top of the template, find the <style> section and add:

body,
.body {
  background-color: #d70000 !important;
}

Replace #d70000 with whatever shade of red you’d like.

Center the logo

Search for shop-name__cell in the template. Replace that block with:

<td class="shop-name__cell" align="center" style="text-align: center;">
  {%- if shop.email_logo_url %}
    <img
      src="{{ shop.email_logo_url }}"
      alt="{{ shop.name }}"
      width="{{ shop.email_logo_width }}"
      align="center"
      style="display: block; margin: 0 auto;"
    >
  {%- else %}
    <h1 class="shop-name__text" style="text-align: center;">
      <a href="{{ shop.url }}">{{ shop.name }}</a>
    </h1>
  {%- endif %}
</td>

One thing to note: the default header has the logo on the left and the order number on the right in the same row. The snippet above centers the logo inside its cell. If you want the logo centered across the full email width, you’d need to move the order number to its own row below.

After saving, click Preview and Send test email to check how it looks in an actual inbox. Email clients can render HTML differently, so testing is always a good idea.

Hope that helps! Happy to dig into this further.