BLOG

without app how to create Sticky Add To Cart Button in Shopify Product Page

 

Step1: Create snipit with name sticky-add-to-cart

Step2: Past below code  and save it

/* Start code Code */

{% if template contains 'product' %}
{% comment %}{% endcomment %}
<div id="huratips-addtocart-sticky">
<img class="sticky-product-img" src="{{ product.featured_image | img_url: 'original' }}" >
<!-- <form action="/cart/add" method="post"> -->

<select name="id" hidden>
{% for variant in product.variants %}
<option value="{{variant.id}}">{{variant.title}}</option>
{% endfor %}
</select>
<div class="qtydiv"> <div class="qtybox"> <span class="btnqty qtyminus icon icon-minus">-</span> <input type="text" id="quantity" name="quantity" value="1" min="1" class="quantity-selector quantity-input quantity-input-qty" readonly=""> <span class="btnqty qtyplus icon icon-plus">+</span> </div> </div>
<button type="submit" class="custom-add-to-cart">Add to Cart</button>
<!-- </form> -->
<style>
.sticky-product-img{
width:auto;
max-width:70px;
max-height: 70px !important;
}
.qtydiv label{
display: block;
margin-bottom: 12px;
color: #747a7b;
}
.qtydiv .quantity-input {
text-align: center;
width: 50px;
outline: none;
border: none;
min-height: unset !important;
line-height: 35px;
border-radius: 0;
margin: 0;
height: unset !important;
background: transparent;
}
.qtydiv .btnqty {
display: inline-block;
cursor: pointer;
user-select: none;
min-height: 60px;
line-height: 60px;
width: 30px;
text-align: center;
}
.product-form__item .qtydiv {
margin: 0;
}
.qtybox {
width: max-content;
height: 60px;
display: flex;
background:#f2f2f4;
}
.product-form__item .qtybox span.btnqty {
min-height: 40px;
line-height: 40px;
}
.product-form__item .qtybox {
height: 40px;
}
button.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
background: #C67527 !important;
}
</style>
</div>

<style>
#huratips-addtocart-sticky button:hover {
background: #C67527;
}
#huratips-addtocart-sticky button {
padding: 0 10px;
background: #FAB538;
border: none;
margin: auto 0px;
color: #fff;
}
.qtydiv {
justify-content: center;
margin: auto 10px;
}

.fixed-sticky-cart {
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
z-index: 9999;
background: #fff;
padding-top: 5px;
/* border-top: 1px solid #e2e2e2; */
height: auto !important;
width: 100%;
max-width: 500px;
margin: auto;
left: 0;
right: 0;
padding: 20px 20px 20px;
transition: bottom .4s ease-in-out;
padding: 20px 20px 26px;
-webkit-box-shadow: 0 -4px 8px rgb(0 0 0 / 20%);
-moz-box-shadow: 0 -4px 8px rgba(0,0,0,.2);
box-shadow/* Start code Code */: 0 -4px 8px rgb(0 0 0 / 20%);
}
#huratips-addtocart-sticky select,
#huratips-addtocart-sticky input,
#huratips-addtocart-sticky button{
height:60px;
vertical-align: middle;
}
#huratips-addtocart-sticky input{
width: 50px;
text-align: center;
background: transparent;
padding: 0;
}
#huratips-addtocart-sticky button{
padding:0 10px;
max-width: 345px;
width: 100%;
}
@media screen and (max-width:750px){
.qtydiv .btnqty {
width: 20px;
}
#huratips-addtocart-sticky {
padding: 15px 13px 15px;
}
}
</style>
{% endif %}
<!-- <script>
$(document).ready(function(){
$('.class_qty').on('keyup change mousewheel onwheel',function(event){
console.log(event.target.value,'event')
// console.log($(this).val());

$('#Quantity-product-template').val($(this).val());
})
const el = document.querySelector('.class_qty');
el.addEventListener('wheel', function(e){
console.log('sadsad',e.target.value);
$('#Quantity-product-template').val($(this).val());
});
})
</script> -->

<script>
$('.qtybox .btnqty').on('click', function(){
var qty = parseInt($(this).parent('.qtybox').find('.quantity-input').val());
if($(this).hasClass('qtyplus')) {
qty++;
}
else {
if(qty > 1) {
qty--;
}
}
qty = (isNaN(qty)) ? 1:qty;
$('.quantity-input-qty').val(qty); });
$('.custom-add-to-cart').on('click',function(){
$('.product-form__cart-submit').trigger('click');
})
</script>
<script>
// $(window).scroll(function(){
// if ($(window).scrollTop() >= 300) {
// $('#huratips-addtocart-sticky').addClass('fixed-sticky-cart');
// }
// else {
// $('#huratips-addtocart-sticky').removeClass('fixed-sticky-cart');
// }
// });


function aliFunction(ali) {
if (ali.matches) { // If media query matches
$(window).scroll(function(){
if ($(window).scrollTop() >= 600) {
$('#huratips-addtocart-sticky').addClass('fixed-sticky-cart');
}
else {
$('#huratips-addtocart-sticky').removeClass('fixed-sticky-cart');
}
});
} else {
$(window).scroll(function(){
if ($(window).scrollTop() >= 300) {
$('#huratips-addtocart-sticky').addClass('fixed-sticky-cart');
}
else {
$('#huratips-addtocart-sticky').removeClass('fixed-sticky-cart');
}
});
}
}

var ali = window.matchMedia("(max-width: 700px)")
aliFunction(ali) // Call listener function at run time
ali.addListener(aliFunction) // Attach listener function on state changes
</script>

/* End code Code */

Step3:  

{% include 'sticky-add-to-cart' %}

How to create Sticky Add To Cart Button in Shopify Product Page without app

 

 

 

 

Share:

Post a Comment!