How can I improve alignment in my abandon cart email?

How can I improve alignment in my abandon cart email?

Primroseliving
Excursionist
29 0 10

Hi Everyone, 

 

This is most likely a very easy solution, but I'm not very confident on coding and breaks, etc. 

 

I'm trying to centre my logo and the text, and make a few spaces in my abandon cart email so it flows a little bit better. This is how it currently looks - I hope that makes sense! 

 

Screenshot 2021-11-22 at 13.14.24.png

 

If anyone could kindly help me, I would be very appreciative. 

 

Thank you! x

Charlotte 

Replies 9 (9)

Olivia
Shopify Staff
1725 148 315

Hi, @Primroseliving.

 

Thanks for your question.

 

To better help you, please provide us with the email template you are using. It's possible that simple elements such as <center> (to center text) and <br> (to insert breaks) tags will do the trick, but it's best to see what code you are already using. 

 

I look forward to your reply,

 

Olivia | 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

LitExtension
Shopify Partner
4860 1002 1160

Hi @Primroseliving,

Refer https://www.w3schools.com/cssref/pr_text_text-align.ASP

You can use text-align: center . Ex:

<h2 style="text-align: center;">text-align: center:</h2>

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Olivia
Shopify Staff
1725 148 315

Hi, @LitExtension!

 

Thank you so much for sharing your advice, I trust @Primroseliving will find this helpful.

 

Warm regards,

Olivia | 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

Primroseliving
Excursionist
29 0 10

Thank you so much for your help! Sorry, should I put the code before or after the text? 

Olivia
Shopify Staff
1725 148 315

Thanks for the reply, @Primroseliving.

 

In the example provided by, @LitExtension, the code would render each line in a H2 tag as centered, regardless of where you place it. Here's some detailed documentation on using CSS to center text. 

 

I will also let, @LitExtension, chime in on any additional advice.

 

Warm regards,

Olivia | 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

LitExtension
Shopify Partner
4860 1002 1160

It will be added directly in the HTML tag, if you don't know, just send me the full HTML code of the mail. I will check and guide you in detail.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Olivia
Shopify Staff
1725 148 315

Thank you so much, @LitExtension.

 

That would be very much appreciated.

 

Warm regards,

Olivia | 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

Primroseliving
Excursionist
29 0 10

Hi Again! 

 

I'm ever so sorry to trouble you, but I'm still having trouble with making my logo and the top text central.

I've taken a screenshot of the code, and how it is appearing. Could you kindly just help guide me with making it central please?

 

Screenshot 2022-03-07 at 11.54.37.png

 

Thank you again! 

 

Charlotte  

LitExtension
Shopify Partner
4860 1002 1160

Hi @Primroseliving,

Please find 'shop-name__cell' and add code here:

Screenshot.png

Code: style="text-align: center"

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify