Add HTML or custom liquid widget on the target page or in footer if want it sitewide and then paste this code:
<!-- Sticky Action Bar -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
/* Sticky Action Bar Styles */
#sticky-action-bar {
display: none; /* hidden until scroll */
position: fixed;
bottom: -100px; /* start hidden for animation */
left: 0;
right: 0;
background: #ffffff;
border-top: 2px solid #e0e0e0;
box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
z-index: 9999;
display: flex;
justify-content: space-between;
align-items: stretch;
transition: bottom 0.4s ease-in-out;
}
#sticky-action-bar.show {
display: flex;
bottom: 0; /* slide up */
}
#sticky-action-bar .sticky-btn {
flex: 1; /* equal width */
text-align: center;
padding: 16px 10px;
font-size: 16px;
font-weight: 600;
color: #fff;
text-decoration: none;
transition: all 0.2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
#sticky-action-bar .sticky-btn i {
font-size: 18px;
}
#sticky-action-bar .sticky-btn:hover {
filter: brightness(1.1);
}
/* Button-specific professional colors */
#sticky-action-bar .call-btn { background: #28a745; } /* Green */
#sticky-action-bar .estimate-btn { background: #ffc107; color: #000; } /* Yellow */
#sticky-action-bar .quote-btn { background: #007bff; } /* Blue */
/* Responsive tweaks */
@media (max-width: 768px) {
#sticky-action-bar .sticky-btn {
font-size: 14px;
padding: 14px 5px;
}
}
</style>
<div id="sticky-action-bar">
<a href="#" class="sticky-btn call-btn"><i class="fas fa-phone"></i> Call</a>
<a href="#" class="sticky-btn estimate-btn"><i class="fas fa-file-alt"></i> Estimate</a>
<a href="#" class="sticky-btn quote-btn"><i class="fas fa-shopping-cart"></i> Add to Quote</a>
</div>
<script>
document.addEventListener("scroll", function() {
const bar = document.getElementById("sticky-action-bar");
if (window.scrollY > 100) {
bar.classList.add("show");
} else {
bar.classList.remove("show");
}
});
</script>