How To Add Sticky Bar on Product Page

Adding a sticky bar to your product pages is an effective way to keep customers updated on their order status and increase the chances of completing a purchase. In this video, we’ll show you how to add a sticky bar using the Dawn theme for Shopify.

1- Adding jQuery in theme.liquid file

Add the following code under <head> in theme.liquid file:

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

2- Adding schema settings in main-product-liquid file

Add the following code below “label”: “t:sections.main-product.settings.enable_sticky_info.label” }, this line:

{
      "type": "checkbox",
      "id": "enable_sticky_bar",
      "default": true,
      "label": "Enable Sticky Bar"
    },

3- Add code in product-thumbnail.liquid

Add the following code at the bottom of product-thumbnail.liquid file:

<!-- code for sticky bar -->
 <div class="sticky-bar-form" style="{% if section.settings.enable_sticky_bar %}display:block; {% else %} display:none; {% endif %}">
   {% form 'product', product, class: product_form_class, data-product-form: '' %}
            <div class="sticky-bar" style="display:none;">
              <div class="product-title-sticky">
                <div class="sticky-bar-thumb-img">
                    <img class="sticky-bar-thumb-thumb" src="{{ product.featured_image | img_url }}" width="60" height="60">
                </div>
     <!-- code from websensepro.com -->
        <div class="sticky-bar-title">
          <span class="sticky-title">{{ product.title }}</span>
          </div>
              </div>
         
<div class="sticky-bar-price">
<div class="variant-drop-down">
<form action="/cart/add" method="post" >
<div class="product-form__item">
                  <label for="Quantity-{{ section.id }}" class="quantity-label">Quantity</label>
                  <input type="number" id="Quantity-{{ section.id }}"
                    name="quantity" value="1" min="1" pattern="[0-9]*"
                    class="quantity__input" data-quantity-input
                  > 
 
</div>
{% if product.has_only_default_variant %}
  <span class="sticky-bar-price">
        {%- render 'price', product: product, use_variant: true' -%}
      </span>
  {% endif %}
<select name="id" style="{% if product.has_only_default_variant %}display:none; {% endif %}">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }} - {{product.variants[forloop.index0].price | money}}</option>
{% else %}
  <!-- code from websensepro.com -->
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
</select>
<input type="submit" value="Add To Cart" class="variant-button" />
</form></div>
</div>
{% endform %}
  </div>
     </div>             
            <!-- code for sticky bar -->

4- Add code in global.js

Add the following code at the bottom of global.js file

// STICKY BAR BUY NOW - JS CODE - WEBSENSEPRO.COM

$(window).scroll(function() {
    // Code from websensepro.com
    //After scrolling 700px from the top...
    
  if($(window).width() > "1024"){
  if ( $(window).scrollTop() >= 500 ) {
    $('.sticky-bar').css('display', 'flex');

    //Otherwise remove inline styles and thereby revert to original stying
    } else {
    $('.sticky-bar').css('display', 'none');
    }
}});

$(window).scroll(function(){
//here we check the viewport width
if($(window).width() < "1024"){
//if the viewport width is less then 1024 scrolltop is 800
  if ($(window).scrollTop() >= 900) {
         $('.sticky-bar').css('display', 'flex');

    //Otherwise remove inline styles and thereby revert to original stying
    } else {
    $('.sticky-bar').css('display', 'none');
        
    }
}
});

5- Add code in base.css file

Add the following code at the bottom of the base.css file

/* CSS for sticky bar websensepro */
  
#MainContent .sticky-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  align-items: center;
  background: #fff;
  height: auto;
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 100%;
  z-index: 3;
  box-shadow: #000000 0 6px 12px -2px, #0000004d 0 3px 7px -3px;
}

.sticky-bar {
display:none;
}

.product-details-sticky,.product-title-sticky{
  display: flex;
  align-items: center;
}

.sticky-bar-price .variant-drop-down, .variant-drop-down .product-form__item{
  display: flex;
  align-items:center;
  justify-content: end;
}
.variant-drop-down input[type=number] {
    width: 50px;
    border: black 1px solid;
    margin: 5px; }

.variant-button {
  background-color: black;
  color: white;
  width: 150px;
  margin-left: 5px;
}

.sticky-bar-thumb-thumb {
margin:10px;
vertical-align:middle;  
}

.sticky-bar-price .price--on-sale .price-item--regular {
display:none;
}

 .sticky-bar-price .price:not(.price--show-badge) .price-item--last:last-of-type{
      margin-top: 6px;
    font-size: 15px; }

@media (max-width:600px) {
  .quantity-label {
    display:none;
  }
  .sticky-bar {
  padding: 0px !important;
  }
  .variant-button {
  width: 65px;
    margin-left: 2px;
    margin-right: 2px;
  }

}
  
/* End CSS for sticky bar */

Skip Cart Page

Add the following code just above <input type="submit" value="Add To Cart" class="variant-button" /> in product-thumbnail.liquid file

<input type="hidden" name="return_to" value="/checkout/" />

How To Add Sticky Bar on Product Page – Dawn Theme Shopify

Categories

Recent Posts

Have Any Questions?