Welcome to WebSensePro! Today, we’re diving into another Shopify tips and tricks tutorial. In this post, you’ll learn how to add a sticky add-to-cart bar to your Shopify store without using any apps. This is a cost-effective way to enhance your store’s functionality without worrying about ongoing fees from third-party apps.
Before jumping into the code, let’s visualize how the sticky add-to-cart bar will function.
Step 1: Preview the Sticky Add-to-Cart Bar
Before jumping into the code, let’s visualize how the sticky add-to-cart bar will function.
- Go to your All Products page.
- Select any product.
- As you scroll down, you’ll notice that the add-to-cart bar stays sticky at the bottom of the screen. When you scroll up, the bar disappears, and when you scroll down, it reappears.
The feature works seamlessly on both desktop and mobile versions. If your products have multiple variations (e.g., colors, sizes), the bar will include options for these as well.
Step 2: Customization in the Theme Settings
Now, let’s explore how you can customize this sticky add-to-cart bar:
- Color Scheme: Like other Shopify sections, you can adjust the color scheme to fit your brand.
- Size of the Add-to-Cart Button: Choose different button sizes (e.g., H1, H4) depending on your preference.
- Quantity Field and Button Style: You can enable the quantity field and change the style of the add-to-cart button.
- Padding and Offset: If you encounter any visibility issues (like the bar overlapping other elements), you can adjust the padding and offset settings.
Step 3: Adding the Sticky Add-to-Cart Bar Code
{% if section.settings.enable_section and request.page_type == 'product' and product.available %}
{% liquid
assign current_variant = product.selected_or_first_available_variant
assign product_form_id = 'product-form-' | append: section.id
assign image = current_variant.image | default: product.featured_image
assign img_size = section.settings.img_width | append: 'x' | append: section.settings.img_height
%}
<style>
#md-sticky-atc {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
padding: {{ section.settings.pt }}rem {{ section.settings.pb }}rem;
visibility: hidden;
opacity: 0;
transform: translateY(100%);
transition: all .15s ease-out;
border-top: 0.1rem solid rgba(var(--color-foreground), .08);
}
#md-sticky-atc.show {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
#md-sticky-atc .page-width-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
}
#md-sticky-atc .product-content {
display: flex;
align-items: center;
flex-grow: 1;
}
#md-sticky-atc .product-content img {
margin-right: 1rem;
width: {{ section.settings.img_width }}px;
height: {{ section.settings.img_height }}px;
object-fit: cover;
}
#md-sticky-atc .product-content .product__title {
margin: 0;
font-size: 1rem;
font-weight: 500;
font-family: var(--button-font-family-primary);
font-weight: var(--button-font-weight-primary);
}
#md-sticky-atc .product-content .price {
/* margin-left: 0.5rem; */
font-size: 0.9rem;
color: inherit;
font-family: var(--button-font-family-primary);
font-weight: var(--button-font-weight-primary);
}
#md-sticky-atc .product-form {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--button-font-family-primary);
font-weight: var(--button-font-weight-primary);
}
#md-sticky-atc .select select {
padding: 0.3rem 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.9rem;
appearance: none;
background-color: inherit;
color: inherit;
font-family: var(--button-font-family-primary);
font-weight: var(--button-font-weight-primary);
}
#md-sticky-atc .quantity {
display: flex;
align-items: center;
margin: 0 0.5rem;
font-family: var(--button-font-family-primary);
font-weight: var(--button-font-weight-primary);
}
#md-sticky-atc .quantity__input {
width: 50px;
text-align: center;
padding: 0.25rem;
border: 1px solid #ccc;
border-radius: 4px;
background-color: inherit;
color: inherit;
font-family: var(--button-font-family-primary);
font-weight: var(--button-font-weight-primary);
}
#md-sticky-atc .quantity__button {
background: none;
color: inherit;
border: none;
font-size: 1.2rem;
cursor: pointer;
padding: 0 0.5rem;
font-family: var(--button-font-family-primary);
font-weight: var(--button-font-weight-primary);
}
#md-sticky-atc button[name="add"] {
background-color: {{ section.settings.bg-color }};
color: {{ section.settings.bt-color }};
font-family: var(--button-font-family-primary);
font-weight: var(--button-font-weight-primary);
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
box-shadow: 6px 8px 0px -2px {{ section.settings.ani-bt-color }};
transition: 0.2s;
}
#md-sticky-atc button[name="add"]:hover {
box-shadow: none !important;
transition: 0.2s;
}
.product-form__controls {
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 768px) {
#md-sticky-atc .page-width-inner {
flex-direction: column;
padding: 0.5rem;
}
#md-sticky-atc .product-content {
margin-bottom: 0.5rem;
}
#md-sticky-atc .product-form {
flex-direction: row;
justify-content: center;
width: 100%;
}
#md-sticky-atc .select,
#md-sticky-atc .quantity {
margin: 0 0.25rem;
}
#md-sticky-atc button[name="add"] {
width: 100%;
/* margin-top: 0.5rem; */
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const stickyATC = document.querySelector('#md-sticky-atc');
const img = stickyATC.querySelector('.product-content img');
const selectField = stickyATC.querySelector('select[name="id"]');
const quantityInput = stickyATC.querySelector('.quantity__input');
const minusBtn = stickyATC.querySelector('.quantity__button[name="minus"]');
const plusBtn = stickyATC.querySelector('.quantity__button[name="plus"]');
const addBtn = document.querySelector('button[name="add"]');
let threshold = 0;
if (addBtn) {
threshold = addBtn.getBoundingClientRect().bottom + window.scrollY;
}
window.addEventListener('scroll', () => {
if (window.scrollY > threshold) {
stickyATC.classList.add('show');
document.documentElement.style.paddingBottom = `${stickyATC.clientHeight}px`;
} else {
stickyATC.classList.remove('show');
document.documentElement.style.paddingBottom = '0';
}
});
if (selectField) {
selectField.addEventListener('change', () => {
img.setAttribute('src', selectField.options[selectField.selectedIndex].dataset.img);
});
}
minusBtn?.addEventListener('click', () => {
let currentQty = parseInt(quantityInput.value);
if (currentQty > 1) quantityInput.value = currentQty - 1;
});
plusBtn?.addEventListener('click', () => {
let currentQty = parseInt(quantityInput.value);
quantityInput.value = currentQty + 1;
});
});
</script>
<div id="md-sticky-atc" class="color-{{ section.settings.color_scheme }}" aria-hidden="true">
<div class="page-width">
<div class="page-width-inner">
<div class="product-content">
{% if section.settings.show_img %}
<img src="{{ image | img_url: 'medium' }}" loading="lazy">
{% endif %}
<div>
<h3 class="product__title">{{ product.title }}</h3>
<div class="price">{{ current_variant.price | money }}</div>
</div>
</div>
<product-form class="product-form">
{%- form 'product', product, id: product_form_id, class: 'form' -%}
<div class="product-form__controls">
<div class="select" style="{% if product.has_only_default_variant %}display: none;{% endif %}">
<select name="id" aria-label="Select variant">
{% for variant in product.variants %}
{% assign variant_image = variant.image | default: product.featured_image %}
<option
value="{{ variant.id }}"
data-img="{{ variant_image | img_url: 'medium' }}"
{% if current_variant.id == variant.id %}
selected
{% endif %}
>
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>
</div>
<quantity-input class="quantity">
<button class="quantity__button" name="minus" type="button">-</button>
<input
class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
min="1"
value="1"
form="{{ product_form_id }}"
>
<button class="quantity__button" name="plus" type="button">+</button>
</quantity-input>
<button type="submit" name="add" class="product-form__submit added">
{{ 'products.product.add_to_cart' | t }}
</button>
</div>
{%- endform %}
</product-form>
</div>
</div>
</div>
{% endif %}
{% schema %}
{
"name": "Sticky ATC",
"settings": [
{
"type": "header",
"content": "General"
},
{
"type": "checkbox",
"id": "enable_section",
"label": "Enable \"Sticky ATC\"",
"default": true
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"default": "scheme-1"
},
{
"type": "color",
"id": "bg-color",
"label": "Button Background",
"default": "#000"
},
{
"type": "color",
"id": "bt-color",
"label": "Button Color",
"default": "#fff"
},
{
"type": "color",
"id": "ani-bt-color",
"label": "Animated Button Background",
"default": "#fff"
},
{
"type": "checkbox",
"id": "show_img",
"default": true,
"label": "Show image"
},
{
"type": "text",
"id": "img_width",
"default": "60",
"label": "Image width (px)"
},
{
"type": "text",
"id": "img_height",
"default": "60",
"label": "Image height (px)"
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "range",
"id": "pt",
"label": "Padding top",
"min": 0,
"max": 5,
"step": 0.5,
"default": 0.5
},
{
"type": "range",
"id": "pb",
"label": "Padding bottom",
"min": 0,
"max": 5,
"step": 0.5,
"default": 0.5
}
],
"presets": [
{
"name": "Sticky ATC"
}
]
}
{% endschema %}Result:
Conclusion
By following this guide, you’ve successfully added a sticky add-to-cart bar to your Shopify store without needing to install any paid apps. This simple addition can significantly improve the user experience on your site, leading to higher sales and better conversions.
