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

Solved
Highlighted
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
605 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
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
605 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
New Member
5 0 0

Hi Katy,

 

I have a related question.

 

The 'View your order' button looks great on the mobile but I'd like to also use 100% width when displayed on other devices too. At the moment the button looks a bit lost on desktops as it just uses the width of the text + padding.

 

Any help would be appreciated!

 

Thanks,

 

Ed

0 Likes
Shopify Staff
Shopify Staff
605 33 72

Hi, @Ed19 !

 

Thanks for joining in here.

 

Sure thing! In this case, you would just need to append some inline styling style=“width:100%”  to the following line of code:

 

<table class="button main-action-cell">

The above line should appear twice within your order notification template. You will need to adjust the first one only. This sits just above the following line of code:

 

<td class="button__cell"><a href="" class="button__text">View your order</a></td>

 

Once you have added the styling it should then look like:

 

<table class="button main-action-cell" style="width:100%">

 

This should do the trick for you. Do feel free to let me know how you get on, 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
New Member
5 0 0
That's great, worked perfectly – Thanks so much Katy!

0 Likes
Shopify Staff
Shopify Staff
605 33 72

Brilliant - delighted to hear it! Feel free to reach out any time at all.

 

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