Global CSS
Write CSS once. PostShiba injects it and inlines it for the inbox.
Each template has a CSS tab. That CSS styles the whole email, so you do not need a <style> tag in the HTML.
How PostShiba applies it
At preview and send time, PostShiba does three things.
- Renders any Liquid in the CSS, so
a { color: {{ brand_color }} }works. - Injects the result into
<head>as<style type="text/css">. If the HTML has no<head>, PostShiba adds one. - Inlines the rules onto the HTML elements, so inbox clients that strip
<style>still show the design.
Example
global.css
1body {
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>