How to center "view your order" button in email notification

Solved
Tourist
6 1 2

I'm struggling to center the "view your order" button in the order confirmation notification. I've successfully aligned the rest of the content but have had zero luck centering the button using inline CSS. Any suggestions? Thanks!

0 Likes

Success.

Shopify Staff
Shopify Staff
590 33 72

Hey, @Ty2019 !

 

Katy here from Shopify. I hope all is well with you.

 

Great work on getting the rest of your content aligned to your own preferences!

 

To center this button you'll need to look for this line of code: actions__cell. Within your order confirmation template you should find two of these. In this case, we just need to edit the first one. If you could append the following style="display: inline-table;"  to this so that it then appears like:

 

<td class="actions__cell" style="display: inline-table;">

This should then center this button for you.

 

Let me know how it goes for you, or if you need a hand.

 

Cheers,
Katy

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
6 1 2

You're the best, Katy! Worked like a charm! Thank you!

1 Like
New Member
3 0 0

Hi Katy,

 

How do align the order number and "thank you for your purchase" in the middle?

 

Thanks!

0 Likes
Shopify Staff
Shopify Staff
590 33 72

Hi, @henz123 !

 

Thanks for joining here. Sure. This will be a little bit different, but I have done some digging and included the code for you below. The process will be different for both desktop and mobile. 

 

If you could access your: Admin > Settings > Notifications > Order notification template.

 

To center on Desktop:


In here if you could search for the following lines of code:

 

<td class="order-number__cell">
<span class="order-number__text">
Order {{ order_name }}
</span>
</td>


These will need to be moved further down your template. If you could cut the above code from your template.  Once you have done so, you will then need to paste this just above the following lines of code:

 

<tr>
<td>
<h2>{{ email_title }}</h2>

 

Once pasted, it should look like this:

 

<td class="order-number__cell">
<span class="order-number__text">
Order {{ order_name }}
</span>
</td>
<tr>
<td>
<h2>{{ email_title }}</h2>

 

To center on mobile:


If you could paste the following code just above <!DOCTYPE html>

 

<style>
@media (min-width: 320px) {
.order-number__cell, h2 {
text-align: center !important;
}
</style>

 

I hope this helps you out - do feel free to let me know if you have any questions. 

 

Cheers,

Katy

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes