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

Solved
Ty2019
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
Katy
Shopify Staff
Shopify Staff
771 43 168

This is an accepted solution.

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

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

0 Likes
Ty2019
Tourist
6 1 2

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

henz123
Excursionist
18 0 2

Hi Katy,

 

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

 

Thanks!

0 Likes
Katy
Shopify Staff
Shopify Staff
771 43 168

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

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

0 Likes
Ed19
Shopify Partner
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
Katy
Shopify Staff
Shopify Staff
771 43 168

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

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

0 Likes
Ed19
Shopify Partner
5 0 0
That's great, worked perfectly – Thanks so much Katy!

0 Likes
Katy
Shopify Staff
Shopify Staff
771 43 168

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

 

Cheers,

Katy

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

0 Likes
henz123
Excursionist
18 0 2

thanks katy!

0 Likes