Create a modern & stylish cart reminder email for Nike for a pair of Air Force one sneakers

Here's a modern and stylish cart reminder email for Nike featuring Air Force One sneakers using MJML:

mjmlhtml
mjml
DownloadCopy code
1<mjml>
2  <mj-head>
3    <mj-title>Don't Miss Out on Your Nike Air Force 1</mj-title>
4    <mj-font name="Helvetica" href="https://fonts.googleapis.com/css?family=Helvetica" />
5    <mj-attributes>
6      <mj-all font-family="Helvetica, Arial, sans-serif" />
7    </mj-attributes>
8    <mj-style>
9      .hover-underline:hover {
10        text-decoration: underline !important;
11      }
12    </mj-style>
13  </mj-head>
14  <mj-body>
15    <mj-section background-color="#ffffff" padding="20px 0">
16      <mj-column width="100%">
17        <mj-image width="120px" src="https://res.cloudinary.com/dmubfrefi/image/private/s--XPYRQrV7--/c_crop,h_2813,w_5000,x_0,y_0/c_scale,w_3840/f_auto/q_auto/v1/dee-about-cms-prod-medias/cf68f541-fc92-4373-91cb-086ae0fe2f88/001-nike-logos-swoosh-black.jpg?_a=BAACwmBs" alt="Nike Logo" align="left" />
18      </mj-column>
19    </mj-section>
20
21    <mj-section background-color="#f7f7f7" padding="40px 0">
22      <mj-column width="600px">
23        <mj-text font-size="32px" color="#000000" align="center" font-weight="bold">
24          Your Nike Air Force 1 is Waiting
25        </mj-text>
26        <mj-text font-size="18px" color="#555555" align="center">
27          Don't let this classic slip away. Complete your purchase now!
28        </mj-text>
29      </mj-column>
30    </mj-section>
31
32    <mj-section background-color="#ffffff" padding="40px 0">
33      <mj-column width="500px">
34        <mj-image width="400px" src="https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/e380b4ea-ec2c-4ee6-8acd-10b338a954fe/AIR+FORCE+1+LE+%28GS%29.png" alt="Nike Air Force 1" />
35      </mj-column>
36    </mj-section>
37
38    <mj-section background-color="#ffffff" padding="20px 0 40px 0">
39      <mj-column width="400px">
40        <mj-button background-color="#000000" color="#ffffff" font-size="18px" font-weight="bold" href="https://www.nike.com/cart" width="300px">
41          COMPLETE YOUR PURCHASE
42        </mj-button>
43      </mj-column>
44    </mj-section>
45
46    <mj-section background-color="#f7f7f7" padding="40px 0">
47      <mj-column width="400px">
48        <mj-text font-size="18px" color="#000000" align="center" font-weight="bold">
49          Why You'll Love the Air Force 1
50        </mj-text>
51        <mj-text font-size="16px" color="#555555" align="center" line-height="24px">
52          • Timeless style<br>
53          • Premium leather upper<br>
54          • Comfortable Air cushioning<br>
55          • Versatile for any outfit
56        </mj-text>
57      </mj-column>
58    </mj-section>
59
60    <mj-section background-color="#ffffff" padding="40px 0">
61      <mj-column width="400px">
62        <mj-text font-size="16px" color="#555555" align="center">
63          Need help? <a href="https://www.nike.com/help" style="color: #000000; text-decoration: none;" class="hover-underline">Contact our support team</a>
64        </mj-text>
65      </mj-column>
66    </mj-section>
67
68    <mj-section background-color="#000000" padding="20px 0">
69      <mj-column width="400px">
70        <mj-text font-size="14px" color="#ffffff" align="center">
71          © 2023 Nike, Inc. All Rights Reserved.
72        </mj-text>
73        <mj-text font-size="12px" color="#ffffff" align="center">
74          <a href="https://www.nike.com/privacy-policy" style="color: #ffffff; text-decoration: none;" class="hover-underline">Privacy Policy</a> | 
75          <a href="https://www.nike.com/terms-of-use" style="color: #ffffff; text-decoration: none;" class="hover-underline">Terms of Use</a>
76        </mj-text>
77      </mj-column>
78    </mj-section>
79  </mj-body>
80</mjml>
DesktopMobile
Send Test Email

This email design features:

1. A clean, modern layout with the Nike logo at the top.
2. A bold headline and subheading to grab attention.
3. A large, high-quality image of the Air Force 1 sneakers.
4. A prominent call-to-action button to complete the purchase.
5. A section highlighting key features of the Air Force 1.
6. Contact information and links to support.
7. A footer with copyright information and important links.

The color scheme uses Nike's signature black and white, with light gray backgrounds for some sections to create visual separation. The typography is clean and modern, using Helvetica for a sleek look that aligns with Nike's brand.

Certainly! I'll center the Nike logo for you. Here's the updated MJML code with the centered logo:

mjmlhtml
mjml
DownloadCopy code
1<mjml>
2  <mj-head>
3    <mj-title>Don't Miss Out on Your Nike Air Force 1</mj-title>
4    <mj-font name="Helvetica" href="https://fonts.googleapis.com/css?family=Helvetica" />
5    <mj-attributes>
6      <mj-all font-family="Helvetica, Arial, sans-serif" />
7    </mj-attributes>
8    <mj-style>
9      .hover-underline:hover {
10        text-decoration: underline !important;
11      }
12    </mj-style>
13  </mj-head>
14  <mj-body>
15    <mj-section background-color="#ffffff" padding="20px 0">
16      <mj-column width="100%">
17        <mj-image width="120px" src="https://res.cloudinary.com/dmubfrefi/image/private/s--XPYRQrV7--/c_crop,h_2813,w_5000,x_0,y_0/c_scale,w_3840/f_auto/q_auto/v1/dee-about-cms-prod-medias/cf68f541-fc92-4373-91cb-086ae0fe2f88/001-nike-logos-swoosh-black.jpg?_a=BAACwmBs" alt="Nike Logo" align="center" />
18      </mj-column>
19    </mj-section>
20
21    <mj-section background-color="#f7f7f7" padding="40px 0">
22      <mj-column width="600px">
23        <mj-text font-size="32px" color="#000000" align="center" font-weight="bold">
24          Your Nike Air Force 1 is Waiting
25        </mj-text>
26        <mj-text font-size="18px" color="#555555" align="center">
27          Don't let this classic slip away. Complete your purchase now!
28        </mj-text>
29      </mj-column>
30    </mj-section>
31
32    <mj-section background-color="#ffffff" padding="40px 0">
33      <mj-column width="500px">
34        <mj-image width="400px" src="https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/e380b4ea-ec2c-4ee6-8acd-10b338a954fe/AIR+FORCE+1+LE+%28GS%29.png" alt="Nike Air Force 1" />
35      </mj-column>
36    </mj-section>
37
38    <mj-section background-color="#ffffff" padding="20px 0 40px 0">
39      <mj-column width="400px">
40        <mj-button background-color="#000000" color="#ffffff" font-size="18px" font-weight="bold" href="https://www.nike.com/cart" width="300px">
41          COMPLETE YOUR PURCHASE
42        </mj-button>
43      </mj-column>
44    </mj-section>
45
46    <mj-section background-color="#f7f7f7" padding="40px 0">
47      <mj-column width="400px">
48        <mj-text font-size="18px" color="#000000" align="center" font-weight="bold">
49          Why You'll Love the Air Force 1
50        </mj-text>
51        <mj-text font-size="16px" color="#555555" align="center" line-height="24px">
52          • Timeless style<br>
53          • Premium leather upper<br>
54          • Comfortable Air cushioning<br>
55          • Versatile for any outfit
56        </mj-text>
57      </mj-column>
58    </mj-section>
59
60    <mj-section background-color="#ffffff" padding="40px 0">
61      <mj-column width="400px">
62        <mj-text font-size="16px" color="#555555" align="center">
63          Need help? <a href="https://www.nike.com/help" style="color: #000000; text-decoration: none;" class="hover-underline">Contact our support team</a>
64        </mj-text>
65      </mj-column>
66    </mj-section>
67
68    <mj-section background-color="#000000" padding="20px 0">
69      <mj-column width="400px">
70        <mj-text font-size="14px" color="#ffffff" align="center">
71          © 2023 Nike, Inc. All Rights Reserved.
72        </mj-text>
73        <mj-text font-size="12px" color="#ffffff" align="center">
74          <a href="https://www.nike.com/privacy-policy" style="color: #ffffff; text-decoration: none;" class="hover-underline">Privacy Policy</a> | 
75          <a href="https://www.nike.com/terms-of-use" style="color: #ffffff; text-decoration: none;" class="hover-underline">Terms of Use</a>
76        </mj-text>
77      </mj-column>
78    </mj-section>
79  </mj-body>
80</mjml>
DesktopMobile
Send Test Email

The change I made was in the first mj-section, where the Nike logo is displayed. I updated the align attribute of the mj-image component from "left" to "center". Here's the specific change:

mjml
DownloadCopy code
1<mj-image width="120px" src="https://res.cloudinary.com/dmubfrefi/image/private/s--XPYRQrV7--/c_crop,h_2813,w_5000,x_0,y_0/c_scale,w_3840/f_auto/q_auto/v1/dee-about-cms-prod-medias/cf68f541-fc92-4373-91cb-086ae0fe2f88/001-nike-logos-swoosh-black.jpg?_a=BAACwmBs" alt="Nike Logo" align="center" />

This will center the Nike logo at the top of the email, creating a balanced and professional look. The rest of the email design remains the same, maintaining its modern and stylish appearance while now featuring a centered logo.