Shopify Sticky Add to Cart – Persistent Purchase Option

                    <!-- 
========================================
Section Name: Sticky Add to Cart
Tech Stack: Liquid, HTML, CSS, JavaScript, jQuery
What This Section Does: 
- Displays a fixed bar at the bottom of the screen when users scroll past the main product form.
- Features dynamic product image, title, and price that updates with variant selections.
- Includes Shopify's native buy buttons for seamless cart integration.
- Fully responsive design with smooth animations for desktop and mobile users.

Promotion: 
Boost your conversion rates with a convenient sticky add-to-cart bar. Keep the purchase option visible as customers explore your product details. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<div class="product__sticky-atc">
<div class="page-width product__sticky-atc-wrapper">
<div class="product__sticky-atc-info">
<!-- Dynamic Product Image -->
<img id="sticky-product-img" src="{{ product.featured_image | img_url: 'small' }}" alt="{{ product.title }}">

<div>
<!-- Dynamic Product Name -->
<h2 id="sticky-product-name" class="product__sticky-atc-heading">{{ product.title }}</h2>

<!-- Dynamic Product Price -->
<div class="product__sticky-atc-price">
<span id="sticky-product-price" class="price-item">
{{ product.price | money }}
</span>
</div>
</div>
</div>

{%- render 'buy-buttons',
block: block,
product: product,
product_form_id: product_form_id,
section_id: section.id,
show_pickup_availability: true
-%}
</div>
</div>

<style>
.product__sticky-atc {
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
box-shadow: 2px -2px 4px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}

.product__sticky-atc.visible {
opacity: 1;
visibility: visible;
}

.product__sticky-atc-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
gap: 16px;
}

.product__sticky-atc-info {
display: flex;
align-items: center;
}

.product__sticky-atc-info img {
width: 64px;
height: 64px;
object-fit: contain;
background: #faf0e8;
margin-right: 16px;
}

.product__sticky-atc-heading {
margin: 0;
font-size: 16px;
}

.product__sticky-atc-price {
margin-top: 8px;
font-size: 14px;
}

.quick-add__submit {
background: black;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
@media(max-width:500px){
.product__sticky-atc-heading {
margin: 0;
font-size: 10px;
}
.product__sticky-atc-price {
margin-top: 3px;
font-size: 9px;
}

}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

$(document).ready(function () {
var $stickyBar = $(".product__sticky-atc");
var $productSection = $(".product-form");

$(window).on("scroll", function () {
if ($(window).scrollTop() > $productSection.offset().top + 100) {
$stickyBar.addClass("visible");
} else {
$stickyBar.removeClass("visible");
}
});

// Update Product Data When Switching Products (AJAX Rendering Support)
$(document).on('shopify:section:load', function () {
updateStickyCart();
});

function updateStickyCart() {
let newProductImage = $(".product-single__photo img").attr("src");
let newProductName = $(".product-single__title").text();
let newProductPrice = $(".product-single__price .price-item").text();
let newProductID = $(".product-form input[name='id']").val();

$("#sticky-product-img").attr("src", newProductImage);
$("#sticky-product-name").text(newProductName);
$("#sticky-product-price").text(newProductPrice);
$(".quick-add__submit").closest("form").find("input[name='id']").val(newProductID);
}
});



document.addEventListener("DOMContentLoaded", function () {
const productOptions = document.querySelectorAll(".product-option");

productOptions.forEach((option) => {
option.addEventListener("click", function () {
// Remove 'selected' class from all product options
productOptions.forEach((opt) => opt.classList.remove("selected"));

// Add 'selected' class to the clicked option
this.classList.add("selected");

// Find the respective radio button inside the clicked option and check it
const radioButton = this.querySelector(".radio-option");
if (radioButton) {
radioButton.classList.add("active"); // Apply 'active' class for styling
}

// Unselect all other radio buttons
document.querySelectorAll(".radio-option").forEach((radio) => {
if (radio !== radioButton) {
radio.classList.remove("active");
}
});
});
});
});


$(document).ready(function(){
$('.product-option').click(function(){
var pro_title = $(this).data('variant');
$('input[name="id"]').val(pro_title);
});
});




</script> 
{% schema %}
{
  "name": "Sticky Add to Cart",
  "settings": [

  ],
  "presets": [
    {
      "name": "Sticky Add to Cart",
      "category": "Product"
    }
  ]
}
{% endschema %}