How To Add Custom Button On Header In Shopify - eCommerce Thesis

How To Add Custom Button On Header In Shopify

Posted on by Foysal

Want to make your Shopify store stand out? In this quick tutorial, I’ll show you step-by-step how to add a custom button to your Shopify header—no coding experience needed! Whether you want a “Contact Us,” “Limited Offer,” or “Shop Now” button, this method works for any theme.

✨ Why Add a Custom Header Button?

✅ Boost Conversions – Direct customers to key pages (e.g., promotions, contact forms).
✅ Improve Navigation – Make important actions (like “Book a Call”) more visible.
✅ Enhance Branding – Match the button style to your store’s design for a professional look.
✅ Mobile-Friendly – Works seamlessly on all devices.

CODE: header.liquid front of : class=”desktop-localization-wrapper”>

<a href="#" class="custom-button">Our Store 𖡡</a>
        {% comment %}
        <!-- Designed by Foysal Ahmed YouTube Channel -->
        {% endcomment %}

  .custom-button {
      background-color: #000000 !important;
      color: #ffffff !important;
      border: none;
      padding: 7px 10px 5px 20px;
      cursor: pointer;
      font-weight: 500;
      font-size: 1.6rem;
      min-height: auto;
      transition: all 0.2s ease;
      border-radius: 0.5rem;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 4px 0 #333,          /* Bottom shadow for 3D effect */
            0 5px 10px rgba(0, 0, 0, 0.2);
      transform: translateY(0);
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
      overflow: hidden;
  }

    /* Glossy overlay (optional) */
    .custom-button::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 0.5rem 0.5rem 0 0;
    }

    /* Press-down effect */
    .custom-button:active {
        transform: translateY(4px); /* Moves button down */
        box-shadow:
            0 1px 0 #333,          /* Reduced shadow when pressed */
            0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Hover effect (optional) */
    .custom-button:hover {
        filter: brightness(1.1); /* Slight glow on hover */
    }

.header-country-selector {
  display: flex;
  align-items: center;
}

.header__icons.custom-button {
  margin-left: 1rem;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.localization-form__select {
  min-height: auto;
  vertical-align: middle;
}

@media screen and (max-width: 749px) {
  .custom-button {
    font-size: 0.75rem;
    padding: 0.50rem 0.88rem;
    border-radius: 0.2rem;
  }
  
  .header__icons.custom-button {
    margin-left: 0.4rem;
  }
  
  .header--mobile-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header__icons {
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  .header__icons--localization {
    display: flex;
    align-items: center;
    margin-right: auto;
  }
  
  .desktop-localization-wrapper {
    display: flex;
    align-items: center;
  }
}