ecommerce email template

project type
client work
last updated
Feb 28, 2022 06:54 PM
description
build responsive email templates with MJML
mjml is a lightweight code editor for creating responsive email templates. it’s a neat idea that helps people with a bit of coding knowledge create stunning templates. feel free to use these and modify them!

Mac and Cheeze

modern e-commerce template
 
notion image
 
<mjml>
  <mj-head>
    <mj-preview>This is Mac and Cheeze | Tiny Marketing Co.</mj-preview>
    <mj-font name="Courier Prime, Cormorant Garamond" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Courier+Prime&display=swap" />
    <mj-attributes>
      <mj-text align="center" font-family="Courier Prime, Cormorant Garamond, Helvetica" font-size="15px" />
    </mj-attributes>
    <mj-style inline="inline"> 
      .uppercase-title { color:#272727; font-size:18px; text-transform:uppercase; } 
      .lowercase-title { color:#272727; font-size:40px; font-family:Cormorant Garamond;} 
      .reverse-lowercase-title { color:#ffffff; font-size:40px; font-family:Cormorant Garamond;} 
      .link { color:#FFBE86; text-transform:uppercase; text-decoration:none; font-size:13px;} 
      .paragraph { font-size:14px; font-weight:300; line-height:1.5;} 
      .reverse-paragraph { font-size:12px; font-weight:300; line-height:1.5; color:#272727; } .carousel-image { width:100%; } 
      .new-products-sub { font-size:34px; line-height:1.2; color:#ffffff; text-align:left; font-family:Courier Prime, Helvetica;} 
      .new-products { font-size:44px; font-weight:300; line-height:1.2; color:#ffffff; text-align:left; font-family:Cormorant Garamond, Helvetica; font-style:italic;} 
      .footer-fine-print { color:#272727; font-size:10px;} 
      .fine-print { color:#ffffff; font-size:9px;} 
      .coupon-code { font-size:24px; font-weight:600; line-height:1.2; color:#FFBE86; text-transform:uppercase; font-family:Courier Prime, Helvetica;} </mj-style>
  </mj-head>
  <mj-body background-color="#fff">
    <!-- Logo -->
    <mj-section background-color="#272727" padding-top="40px" padding-bottom="10px">
      <mj-column>
        <mj-image src="https://tinymarketing.b-cdn.net/noun_Circle_2717448(1).png" width="90px" alt="tinymarketing logo" align="left"></mj-image>
      </mj-column>
      <!-- Top Banner -->
    </mj-section>
    <mj-section background-color="#272727" padding-top="0px" padding-bottom="50px">
      <mj-column>
        <mj-text>
          <p class="new-products">New Products: </p>
          <p class="new-products-sub">Sustainable T-Shirts</p>
        </mj-text>
      </mj-column>
    </mj-section>
    <!-- Hero -->
    <mj-hero mode="fluid-height" background-width="600px" background-height="500px" background-url="https://images.unsplash.com/photo-1564584217132-2271feaeb3c5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" background-color="#222222" background-position="bottom left" padding="100px 0px">
    </mj-hero>
    <!-- Group -->
    <mj-section padding-top="0px" padding-bottom="0px">
      <mj-group>
        <mj-column>
          <mj-image padding="20px 10px 0px 0px" src="https://images.unsplash.com/photo-1603320410149-db26b12d5c2b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
        </mj-column>
        <mj-column>
          <mj-image padding="20px 0px 10px 10px" src="https://images.unsplash.com/photo-1503341504253-dff4815485f1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
        </mj-column>
      </mj-group>
    </mj-section>
    <!-- Product Section -->
    <mj-section padding-top="40px">
      <mj-column>
        <mj-text>
          <p class="lowercase-title">Los Angeles Training Club — 705.</p>
        </mj-text>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding-top="0px" padding-bottom="0">
      <mj-column>
        <mj-text> <img src="https://images.unsplash.com/photo-1618354691373-d851c5c3a990?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8dCUyMHNoaXJ0fGVufDB8fDB8d2hpdGV8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" width="100%" alt="training club t shirt" /> </mj-text>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
        <mj-text align="left"> Organic + sustainable cotton</mj-text>
        <mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
        <mj-text align="left"> Available in short and long sleeve </mj-text>
        <mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
        <mj-text align="left">For people sizes XS - XL</mj-text>
        <mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
      </mj-column>
    </mj-section>
    <mj-section padding-top="0px" padding-bottom="0">
      <mj-group>
        <mj-column width="25%">
          <mj-image src="https://images.unsplash.com/photo-1618354691551-44de113f0164?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dCUyMHNoaXJ0fGVufDB8fDB8d2hpdGV8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
        </mj-column>
        <mj-column width="25%">
          <mj-image src="https://images.unsplash.com/photo-1618354691438-25bc04584c23?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dCUyMHNoaXJ0fGVufDB8fDB8d2hpdGV8&auto=format&fit=crop&w=500&q=60" />
        </mj-column>
        <mj-column width="25%">
          <mj-image src="https://images.unsplash.com/photo-1618354691309-b22b0de007eb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=658&q=80" />
        </mj-column>
      </mj-group>
    </mj-section>
    <!-- Button -->
    <mj-section padding-bottom="50px">
      <mj-column>
        <mj-button href="https://tinymarketing.co/" background-color="#ffffff" border-radius="0px" padding="10px 0px 20px 0px" inner-padding="20px 50px 20px 50px" text-transform="uppercase" font-size="18px" border="1px solid" color="#272727" font-family="Courier Prime, Helvetica">shop now</mj-button>
      </mj-column>
    </mj-section>
    <!-- Coupon Code -->
    <mj-section background-color="#272727">
      <mj-column>
        <mj-text>
          <p class="reverse-lowercase-title">10% off your order</p>
          <p class="coupon-code">code: GETMY10 </p>
        </mj-text>
        <mj-text>
          <p class="fine-print"> Get 10% off all regular-price products. Some Restrictions may apply. </p>
        </mj-text>
      </mj-column>
    </mj-section>
    <!-- Footer -->
    <mj-section padding-top="50px">
      <mj-column>
        <mj-image src="https://tinymarketing.b-cdn.net/noun_Circle_2717448(1).png" width="50px" alt="logo"></mj-image>
        <mj-text>
          <p class="reverse-paragraph">hire @ tinymarketing.co </p>
          <p class="reverse-paragraph">(605) 610 - 1940 </p>
        </mj-text>
        <mj-social font-size="11px" icon-size="20px" mode="horizontal" text-padding="5px" padding="0px 25px">
          <mj-social-element src=https://image.flaticon.com/icons/png/512/733/733635.png href="https://www.twitter.com/" alt="twitter icon">
          </mj-social-element>
          <mj-social-element src=https://image.flaticon.com/icons/png/512/733/733614.png href="https://www.instagram.com/" alt="instagram icon">
          </mj-social-element>
        </mj-social>
        <mj-text>
          <p class="footer-fine-print">You received this email because you signed up for our newsletter.</p>
          <p class="link"><a href="{$unsubscribe}" style="color: #FFBE86;">Unsubscribe</a></p>
        </mj-text>
        <mj-text>
          <p class="footer-fine-print">Sioux Falls SD<br /> 57106 United States</p>
        </mj-text>
        <mj-text>
          <p class="footer-fine-print">Copyright &copy; 2021 Tiny Marketing LLC. All rights reserved. </p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
 
Modify it in the MJML email editor: https://mjml.io/try-it-live