Frontend Cheat Sheet

Header HTML/CSS

Find header.html file from templates > components > common.
The below code is the header element.

<div class="header-nav-wrapper">
  <div class="header-nav-inner">
    <div class="header-logo header-logo--{{theme_settings.logo-position}}">
      <a href="{{urls.home}}" class="header-logo__link">
        <div class="header-logo-image-container"></div>
      </a>
    </div>

    <div class="header-search">
      <div class="dropdown dropdown--quickSearch" id="quickSearch" aria-hidden="true" tabindex="-1">{{> components/common/quick-search name='desktop-menu-quick-search'}}</div>
    </div>
    <div class="cta cta-desktop">
      <a href="tel:18009999999">Insert slogan here <span class="phone">1-800-999-9999</span></a>
    </div>
  </div>
</div>

3.Inside the header.html file find the code block below, delete any html between them and replace it with the header element

{{> components/common/navigation-menu}} *Place the element here*

<div class="navPages-container" id="menu" data-menu>{{> components/common/navigation-menu}}</div>

Add the style to an scss file of your choice. Replace the background image url at .header-logo-image-container with the url of your logo

.cart-icon {
  width: 20px;
  height: 20px;
  display: inline-block;

  .icon {
    width: 100%;
    height: 100%;
  }
}
.header {
  position: sticky;
  top: 0;
}

.header-nav-wrapper {
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  transition: all 0.5s;

  .header-logo-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('/your-logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .header-logo {
    display: flex;
    align-items: center;
    margin: 0;
  }
  .header-logo-image-container {
    width: 28vw;
    max-width: 375px;
  }
  .header-logo-image {
    position: relative;
  }
}

.header-nav-inner {
  flex: auto;
  transition: all 0.4s;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-search {
    max-width: 500px;
    min-width: 300px;

    .dropdown--quickSearch {
      display: inline-block;
      position: relative;
      opacity: 1;
      left: auto;
      width: 100%;
      padding: 0;
      background: transparent;

      .container {
        padding: 0 1.5rem;
      }
    }
  }
}

.cta-desktop {
  text-align: center;
  margin-right: 50px;
  a {
    display: block;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    text-align: right;
    letter-spacing: 0px;
    line-height: 1.4;
    text-align: center;
    font-size: 16px;
  }

  .phone {
    display: block;
    font-size: 26px;
    color: #333;
    font-weight: bold;
    transition: all 0.4s;
    &:hover,
    &:active {
      color: #666;
    }
  }
  .time,
  .mail {
    font-size: 12px;
  }
  .mail {
    font-size: 14px;
    display: inline-block;
  }
}

.quickSearchResults {
  position: absolute;
  width: 100%;
  z-index: 100;
  background: #fff;
  box-shadow: 0px 8px 10px -8px #888;

  .modal-close {
    color: #333333;
  }

  .productGrid {
    overflow: auto;
    height: 50vh;
    max-height: 350px;

    .product {
      width: 100%;
    }
  }

  .card {
    display: flex;
    margin-bottom: 0px;

    .card-figure {
      width: 30%;
    }

    .card-figcaption {
      display: none;
    }
  }
}

@media (min-width: 768px) {
  .page-with-filter {
    display: inline-flex;
  }
}

@media (max-width: 801px) {
  #opt7Filter {
    margin-bottom: 100px;
  }
}

@media (max-width: 801px) {
  .cta-desktop {
    display: none;
  }
  .header-logo-image-container {
    height: 100%;

    .header-logo__link {
      margin: unset;
    }
  }
  .navPages {
    .navPages-quickSearch {
      display: block;
    }
  }
  .mobileMenu-toggle {
    left: 0;
  }
  .navUser {
    right: 20px;
  }
  .search-button {
    height: 42px;
  }
  .header-search {
    display: none;
  }
  .header-nav-wrapper {
    padding: 0.5rem 1.5rem;
    width: 100%;
  }
  .header-logo__link {
    margin: 0 auto;
  }
  .header-nav-wrapper .header-logo-image-container {
    width: 300px;
  }
  .header-nav-right .header-search {
    min-width: unset;
  }
  .header-nav-wrapper .header-logo {
    margin: 0 auto;
  }
  .header-search .search-button {
    border-radius: 0px;
  }
  .dropdown--quickSearch .form-input {
    position: fixed;
    top: 72px;
    border: none;
    border-radius: 4px;
  }
}

Header JS

Add the script below to "global.js"

$('body').on('click', '.quickSearchResults > .modal-close', function () {
  $('.quickSearchResults').html('');
});

Delete the code block below from assets > js > theme > global > cart-preview.js

if (!quantity) {
  $cart.addClass('navUser-item--cart__hidden-s');
} else {
  $cart.removeClass('navUser-item--cart__hidden-s');
}

Search Button with Magnifying Glass Icon (OPTIONAL)

Paste this svg to file icon-sprite.svg

<symbol viewBox="0 0 21 21" id="icon-search"
  ><title>search</title>
  <path
    d="M20.997,19.365 C20.997,19.365 19.365,21.009 19.365,21.009 C19.365,21.009 12.993,14.594 12.993,14.594 C11.629,15.651 9.926,16.287 8.072,16.287 C3.608,16.287 -0.010,12.643 -0.010,8.148 C-0.010,3.653 3.608,0.010 8.072,0.010 C12.536,0.010 16.154,3.653 16.154,8.148 C16.154,9.936 15.575,11.584 14.604,12.927 C14.604,12.927 20.997,19.365 20.997,19.365 ZM8.073,2.333 C4.885,2.333 2.300,4.936 2.300,8.146 C2.300,11.357 4.885,13.959 8.073,13.959 C11.262,13.959 13.847,11.357 13.847,8.146 C13.847,4.936 11.262,2.333 8.073,2.333 Z"
  ></path>
</symbol>

Paste this code, below </fieldset> in quick-search.html

<button type="submit" class="search-button">
  <svg class="search-icon">
    <use xlink:href='#icon-search'/>
  </svg>
</button>

Paste this code - don't forget to change background color.

.search-button {
  width: 41px;
  height: 100%;
  position: absolute;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  right: 0;
  top: 0;
  background-color: $color;
}

.search-icon {
  width: 80%;
  height: 80%;
  fill: #fff;

  svg {
    fill: #fff;
  }
}

Change cart text to icon (OPTIONAL)

Find icon-sprite.svg in assets > img.
Copy and paste the symbol below into icon-sprite.svg make sure it is inside the svg tag

<symbol viewBox="0 0 24 24" id="icon-cart">
  <path
    d="M23.475 4.434a.498.498 0 0 0-.613.351l-.332 1.217H4.554l.36-1.687a.491.491 0 0 0 0-.209A1.357 1.357 0 0 0 3.593 3.04H.629a.5.5 0 0 0 0 1h2.964c.136 0 .258.079.315.195l-.461 2.163v.008a.503.503 0 0 0 .001.208l.001.004v.001l2.045 8.962-.535 1.906A1.205 1.205 0 0 0 6.14 18.93h14.277a.5.5 0 0 0 0-1H6.141a.205.205 0 0 1-.16-.076c-.022-.027-.058-.086-.05-.131l.469-1.668 13.805-1.497c.63 0 1.171-.428 1.312-1.023l2.31-8.487a.502.502 0 0 0-.352-.614zm-2.927 8.855c-.038.159-.179.27-.396.272L6.399 15.05 4.562 7.002h17.696l-1.71 6.287zM6.978 19.905a2.015 2.015 0 0 0-2.017 2.009 2.016 2.016 0 0 0 4.033 0 2.015 2.015 0 0 0-2.016-2.009zm0 3.019c-.561 0-1.017-.453-1.017-1.01s.456-1.009 1.017-1.009c.56 0 1.016.452 1.016 1.009s-.456 1.01-1.016 1.01zM18.901 19.905a2.015 2.015 0 0 0-2.016 2.009c0 1.108.904 2.01 2.016 2.01a2.015 2.015 0 0 0 2.017-2.01 2.015 2.015 0 0 0-2.017-2.009zm0 3.019c-.56 0-1.016-.453-1.016-1.01s.456-1.009 1.016-1.009c.561 0 1.017.452 1.017 1.009s-.456 1.01-1.017 1.01z"
  />
</symbol>

In the navigation.html file delete

<span class="navUser-item-cartLabel">{lang 'common.cart'}</span>

and paste

<div class="cart-icon">
  <svg class="icon">
    <use xmlns:xlink="http://www.w3.org/2000/svg" xlink:href='#icon-cart'></use>
  </svg>
</div>

BigCommerce

Bigcommerce Headless

Magento

GA4 Implementation

Shopify

Wordpress

3dCart

Custom Checkout

Common

Header HTML/CSS

Header JS

Search Button with Magnifying Glass Icon (OPTIONAL)

Change cart text to icon (OPTIONAL)