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/" />
4 thoughts on “How To Add Sticky Bar on Product Page – Dawn Theme Shopify”
This article was really helpful, but I need help with one thing can you please let me know how to clip the product name so that it doesn’t cover half of the screen?
Unfortunately can’t without actually seeing the issue, please email websensepro@gmail.com with complete details of the issue
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..
Add in code to any CSS file