Shopify Email - View in Custom Liquid/CSS in Real Test is different from Editor

Technical Q&A
, ,
1

Hello Shopify experts, I’m working on creating my own store custom Shopify Email with a custom liquid/CSS section. However, the CSS style I applied in my editor was not implemented/read thoroughly in my test email. I follow Shopify’s guidelines on how to write custom Liquid code on Shopify Email. The dynamic content displayed just fine but it’s only the styling that bothers me.

I am trying to figure out what to do. May i have any suggestions? Or must i go use other 3rd party email provider platform like Klaviyo for better CUstom code configurations?

This is what it’s supposed to look like in Editor:

Code_Not_working(2).jpg
Code_Not_working(2).jpg510×520 28.2 KB

But it shows like this in Real Test:

Code_Not_working.jpg
Code_Not_working.jpg1080×1304 63.2 KB

The Code I’ve Written is Here: {{Liquid Code}}

Using Inline Styling (But its not working too)

<div 
style="width: 100%; 
display: flex; 
flex-direction: row; 
justify-content: space-around; 
align-items: center; 
margin: 0.5rem;">
  <a style="text-decoration: none; color: #cc8309ff;font-family: 'Helvetica Neue';" href="i dont want to show my link sry">Browse</a>

  <a style="text-decoration: none; color: #cc8309ff; font-family: 'Helvetica Neue';" href="i dont want to show my link sry">Shop</a>

  <a style="text-decoration: none; color: #cc8309ff; font-family: 'Helvetica Neue';" href="i dont want to show my link sry">About Us</a>
</div>

NON-Inline Styling

<style>
  #picture_container{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  #image_text{
position:absolute; z-index: 2; font-family: 'Times New Roman'; color: white; font-size: 1.8rem; margin: 4rem; letter-spacing: -0.5px; font-style: italic;
  }
  #image{
    width: 70%; 
margin-top:2rem;
aspect-ratio: 2/2.5; background-size: cover; filter: brightness(0.9) contrast(0.8) saturate(1.35); 
    border-radius: 10px;
    z-index: 1;
    position:relative;
  }
  #button{
background:#cc8309ff;border-radius: 5px;
padding: 0.2rem 1rem;
position: absolute;
bottom: -0.65rem;
z-index: 2;
  }
  #underlay_background{
position:absolute; height: 45%; 
background: #cc8309ff; top: 0; 
width: 100%; 
z-index: 0; 
opacity: 0.3;
  }
</style>

  <div id="content_container" style="margin-top: 0rem;">
  <div id="picture_container">
    <p id="image_text" >Your perfect jewelry is still in your cart</p>
    <img id="image" src="#" />
    <div id="button" style="background:#cc8309ff;border-radius: 5px;
padding: 0.2rem 1rem;
position: absolute;
bottom: -0.65rem;
z-index: 2;">
      <a href="{{ abandoned_visit.url}}" style="text-decoration: none; color: white; font-size: 12px; letter-spacing: 0.5px; font-weight: 200;">Complete Your Checkout</a>
    </div>
  </div>
  <div id="underlay_background"></div>
</div>
2

Hi @Jeremy_Chong ,

Because you only provide a part of the code without giving a specific store to check, we can only give a few suggestions that may lead to the error as in the post:

  1. For header errors, you need to check the width attribute of parentElement

  2. In part 2, you wrote the standard CSS. I tested it and saw it displayed correctly like the edited part. However, if the email returned is not the same as the preivew, you can check to see if there are any strange classes other than the ones you want. put insert into email returns nil

In the case of writing email content, priority is given to inline CSS and writing HTML in table format.