https://www.youtube.com/watch?v=-KLAhVtc-UY

Top Banner

Below you'll find a video that explains how to create the Top Banner, as well as the code and notes.

Code

<div class="promo-banner">
  <ul>
    <li>
      <em class="icon-check">&nbsp;</em>
      <span>
        <strong>THEME EDITOR INTEGRATED</strong> 
          <span>CUSTOMIZE WITHOUT CODE.</span>
      </span>
    </li>
    <li>
      <em class="icon-tablet">&nbsp;</em>
      <span>
        <strong>RESPONSIVE DESIGN</strong>
        <span>TABLET, PHONE &amp; DESKTOP</span>
      </span>
    </li>
    <li>
      <em class="icon-wrench">&nbsp;</em>
      <span>
        <strong>BUILT ON STENCIL</strong> 
        <span>THEME ENGINE</span>
      </span>
    </li>
  </ul>
</div>

Notes

Font Awesome 4.7.0

https://fontawesome.com/v4.7.0/icons/

Inline Style Examples

• style="color: #FF000;"
• style="font-size: 60px;"
• style="color: #FF000; font-size: 60px;"

Default Font Sizes:

• Icons are 48px
• Headline is 20px
• Sub-Headline is 16px

Bottom Banner

Below you'll find a video that explains how to create the Bottom Banner, as well as the code and notes.

Code

<div class="promo-box-row">
  <ul>
    <li>
      <a href="/theme-features/">
        <img src="/product_images/uploaded_images/filename1.jpg" alt="Alt Text" width="433" height="225" />
      </a>
    </li>
    <li>
      <a href="/mens-bike/">
        <img src="/product_images/uploaded_images/filename2.jpg" alt="Alt Text" width="433" height="225" />
      </a>
    </li>
    <li>
      <a href="/womens-bike/">
        <img src="/product_images/uploaded_images/filename3.jpg" alt="Alt Text" width="433" height="225" />
      </a>
    </li>
  </ul>
</div>

Notes

Image Size & File Type

• File Type: PNG or JPG
• Width: 433px
• Height: 225px (optional)