Access is invite-only during beta. Once invited, create a key to personalize these examples. Production sending requires a separate review.
Global CSS
Write CSS once. PostShiba injects it and inlines it for the inbox.
Each template has a CSS pane. That CSS is the stylesheet for the whole email. You do not have to put a <style> tag in the HTML.
At preview and send time PostShiba:
- Renders Liquid in the CSS (so
a { color: {{ brand_color }} }works). - Injects the result into
<head>as<style type="text/css">. - Inlines the rules onto the HTML so inbox clients that strip
<style>still get the look.
Write email-safe CSS. Table layouts and inline-friendly properties survive more clients than flexbox or grid.
Example
global.css
1
body {
2
margin: 0;
3
background: #f4f4f5;
4
color: #18181b;
5
font-family: ui-sans-serif, system-ui, sans-serif;
6
}
7
.container {
8
max-width: 560px;
9
margin: 0 auto;
10
padding: 32px 16px;
11
}
12
.button {
13
display: inline-block;
14
padding: 10px 16px;
15
background: #18181b;
16
color: #fafafa;
17
text-decoration: none;
18
border-radius: 6px;
19
}
example.html
1
<div class="container">
2
<p>Hi {{ name }},</p>
3
<p><a class="button" href="{{ action_url }}">Continue</a></p>
4
</div>