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

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="" 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">
     <!-- code from -->
        <div class="sticky-bar-title">
          <span class="sticky-title">{{ product.title }}</span>
<div class="sticky-bar-price">
<div class="variant-drop-down">
<form action="/cart/add" method="post" >
<div class="product-form__item">
                  <label for="Quantity-{{ }}" class="quantity-label">Quantity</label>
                  <input type="number" id="Quantity-{{ }}"
                    name="quantity" value="1" min="1" pattern="[0-9]*"
                    class="quantity__input" data-quantity-input
{% if product.has_only_default_variant %}
  <span class="sticky-bar-price">
        {%- render 'price', product: product, use_variant: true' -%}
  {% 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.title }} - {{product.variants[forloop.index0].price | money}}</option>
{% else %}
  <!-- code from -->
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
<input type="submit" value="Add To Cart" class="variant-button" />
{% endform %}
            <!-- code for sticky bar -->

4- Add code in global.js

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


$(window).scroll(function() {
    // Code from
    //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');

//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: flex;
  align-items: center;

.sticky-bar-price .variant-drop-down, .variant-drop-down .product-form__item{
  display: flex;
  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 {

.sticky-bar-price .price--on-sale .price-item--regular {

 .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 {
  .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/" />
4.4/5 - (19 votes)


4 thoughts on “How To Add Sticky Bar on Product Page – Dawn Theme Shopify”

  1. what if I don’t have a base.css file in Assets ? I am using maxmin premium theme and all went smooth but at the end just realized I don’t have the base.css with us :S..

Leave a Comment

Your email address will not be published. Required fields are marked *