Adding a “Buy It Now” button to your Shopify store is a great way to improve conversions and streamline the checkout process for your customers. A sticky button, which remains visible as the user scrolls down the page, can be particularly effective. Here’s a guide to help you add a sticky “Buy It Now” button to your Shopify store, along with the benefits of doing so.
The Problem: Why a Sticky Button is a Great Solution
Imagine a customer browsing your product page. They read the description, look at the images, and are ready to buy. But to find the “Add to Cart” or “Buy Now” button, they have to scroll all the way back up. This extra step can be a point of friction, leading to a lost sale.
A sticky “Buy It Now” button solves this problem by keeping the call-to-action (CTA) always visible. No matter where the customer is on the page, the button is right there, ready to be clicked.
How to Add a Sticky “Buy It Now” Button to Your Shopify Store
You can add a sticky “Buy It Now” button to your store by using a simple code snippet. This method is a great alternative to paid apps and gives you more control over the button’s design and functionality.
Step 1: Get the Code
You’ll need a specific code snippet to add the sticky button functionality. You can find free code snippets online or in tutorials. The code will typically be a combination of HTML, CSS, and JavaScript.
Step 2: Add the Code to Your Theme
- From your Shopify admin, go to “Online Store” > “Themes.”
- Find the theme you want to edit and click “Actions” > “Edit code.”
- Find the
product-template.liquidfile or a similar file that controls your product page layout. - Paste the HTML code for the button in a suitable location, usually near the existing “Add to Cart” button.
- Add the CSS code to your
theme.scss.liquidorbase.cssfile to style the button and make it sticky. - Add the JavaScript code to a file like
theme.jsto control the button’s behavior, such as when it should appear or disappear.
Step 3: Customize and Test
Once you’ve added the code, you can customize the button’s appearance (color, font, size) and text. Don’t forget to test the button on both desktop and mobile devices to ensure it works correctly.
Premium Features Added:
- Enhanced Visual Design:
- Improved shadows and border-radius for a more premium look
- Better spacing and typography
- Gradient button with shimmer effect on hover
- Stock Level Indicator:
- Visual stock bar that shows inventory levels
- Color-coded indicators (red for low, yellow for medium, green for high)
- Dynamic updates when variant changes
- Free Shipping Progress Bar:
- Shows progress toward free shipping threshold
- Motivates customers to increase order value
- Trust Badges:
- Premium quality and secure checkout badges
- Increases conversion confidence
- Discount Badges:
- Visual “Save X%” badges for products on sale
- Highlights the value proposition
- Close Button:
- Allows users to hide the sticky bar
- Remembers user preference for 24 hours
- Improved Feedback:
- Success messages when items are added to cart
- Enhanced error messages with better styling
- Google Analytics Integration:
- Tracks conversions when purchases are made
- Ready for your conversion ID
- Mobile Optimizations:
- Better responsive behavior
- Cleaner layout on small screens
- Advanced Customization Options:
- More settings in the schema for finer control
- Accent color customization
- Sale badge color customization
This premium version maintains all the functionality of the original but adds significant value through enhanced UX, visual design, and conversion optimization features.
The Benefits of a Sticky “Buy It Now” Button
Adding a sticky “Buy It Now” button can significantly improve your store’s performance. Here are some of the key benefits:
- Improved Conversions: By making the “Buy Now” button always visible, you remove friction from the checkout process. This can lead to a higher conversion rate, as customers are more likely to complete their purchase.
- Enhanced User Experience: A sticky button makes it easier for customers to buy from you, leading to a smoother and more enjoyable shopping experience. This can increase customer satisfaction and encourage repeat purchases.
- Increased Mobile Sales: A sticky button is especially effective on mobile devices, where screen space is limited. It saves users from having to scroll repeatedly, making it easier for them to complete their purchase on the go.
- Better A/B Testing: You can use a sticky button as part of an A/B test to see how it performs against your existing “Add to Cart” button. This can help you identify what works best for your store and customers.
- Simple Implementation: With a little bit of code, you can add a sticky button to your store without the need for a complex app. This can save you money and give you more control over your store’s design.
Watch the Video Tutorial
For a step-by-step video guide and a free code snippet, check out our YouTube channel. The video provides a visual walkthrough of the process, making it even easier to implement the sticky “Buy It Now” button on your Shopify store.
<center>
[Link to your YouTube Video]
</center>
Conclusion
A sticky “Buy It Now” button is a simple yet powerful addition to any Shopify store. By making the checkout process more seamless, you can increase conversions, improve the user experience, and ultimately, grow your business. If you’re looking for a simple way to boost your sales, a sticky “Buy It Now” button is a great place to start.
{% comment %}
<!-- Designed by Foysal Ahmed YouTube Channel -->
{% endcomment %}
{% if 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 title_words = product.title | split: ' '
assign mobile_title = title_words | slice: 0, 3 | join: ' '
%}
<style>
.ecommercethesis-sticky-section {
display: block !important;
visibility: visible !important;
}
.ecommercethesis-sticky {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
transform: translateZ(0);
padding-top: {{ section.settings.pt }}rem;
padding-bottom: {{ section.settings.pb }}rem;
visibility: visible !important;
opacity: 1 !important;
display: block !important;
transform: translateY(0) translateZ(0);
border-top: 0.1rem solid rgba(var(--color-foreground),.08);
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
}
.ecommercethesis-sticky .page-width-inner {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2rem;
align-items: center;
}
.ecommercethesis-sticky .ecommercethesis-product-content {
display: flex;
align-items: center;
}
.ecommercethesis-sticky .ecommercethesis-product-content .product__title {
margin: 0 0 .5rem;
font-size: {{ section.settings.title_font_size }}px;
color: {{ section.settings.text_color }};
}
.ecommercethesis-sticky .ecommercethesis-product-content .price {
display: flex;
align-items: center;
color: {{ section.settings.text_color }};
}
.ecommercethesis-sticky .ecommercethesis-product-content img {
margin-right: .75rem;
object-fit: cover;
width: 90px;
height: 62px;
}
.ecommercethesis-sticky .product-form {
flex-shrink: 0;
justify-self: end;
width: 75%;
}
.ecommercethesis-sticky .product-form .select {
flex-shrink: 0;
width: auto;
margin-right: .75rem;
flex-grow: 1;
max-width: 40%;
position: relative;
}
.ecommercethesis-sticky .product-form .select__select {
width: 100%;
padding: 12px 16px;
padding-right: 40px;
border: 1px solid rgba(var(--color-foreground), 0.6);
border-radius: 6px;
background-color: var(--color-background);
color: var(--color-foreground);
font-size: 14px;
appearance: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ecommercethesis-sticky .product-form .select__select:hover {
border-color: rgba(var(--color-foreground), 0.8);
background-color: var(--color-background);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.ecommercethesis-sticky .product-form .select__select:focus {
outline: none;
border-color: var(--color-foreground);
box-shadow: 0 0 0 2px rgba(var(--color-foreground), 0.1);
}
.ecommercethesis-sticky .product-form .select .icon-caret {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
pointer-events: none;
color: var(--color-foreground);
}
.ecommercethesis-sticky .product-form .ecommercethesis-quantity-wrapper {
display: flex;
align-items: center;
}
.ecommercethesis-sticky .product-form .quantity {
flex-shrink: 0;
margin-right: .75rem;
display: flex;
}
.ecommercethesis-sticky .quantity__input {
width: 60px;
padding: 12px 8px;
border: 1px solid rgba(var(--color-foreground), 0.2);
border-left: none;
border-right: none;
background-color: rgba(var(--color-background), 0.8);
color: var(--color-foreground);
text-align: center;
font-size: 14px;
transition: all 0.2s ease;
}
.ecommercethesis-sticky .quantity__input:hover {
border-color: rgba(var(--color-foreground), 0.4);
background-color: var(--color-background);
}
.ecommercethesis-sticky .quantity__input:focus {
outline: none;
border-color: var(--color-foreground);
background-color: var(--color-background);
}
.ecommercethesis-sticky .quantity__button {
width: 40px;
height: 44px;
border: 1px solid rgba(var(--color-foreground), 0.2);
background-color: rgba(var(--color-background), 0.8);
color: var(--color-foreground);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.ecommercethesis-sticky .quantity__button:hover {
border-color: rgba(var(--color-foreground), 0.4);
background-color: var(--color-background);
}
.ecommercethesis-sticky .quantity__button:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.ecommercethesis-sticky .quantity__button:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.ecommercethesis-sticky .product-form button[name="buy-now"] {
flex-shrink: 0;
flex-grow: 1;
margin: 0;
padding: 12px 24px;
border: none;
border-radius: 6px;
background: {{ section.settings.button_gradient }};
color: {{ section.settings.button_text_color }};
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
min-height: 44px;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.ecommercethesis-sticky .product-form button[name="buy-now"]:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
background: {{ section.settings.button_hover_gradient }};
}
.ecommercethesis-sticky .product-form button[name="buy-now"]:active {
transform: translateY(0);
}
.ecommercethesis-sticky .product-form button[name="buy-now"]:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.ecommercethesis-sticky .product-form button[name="buy-now"]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.ecommercethesis-sticky .product-form button[name="buy-now"]:hover::before {
left: 100%;
}
.ecommercethesis-sticky .ecommercethesis-checkout-spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: ecommercethesis-spin 1s linear infinite;
margin-right: 8px;
}
@keyframes ecommercethesis-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ecommercethesis-sticky .icon.icon-caret {
width: 12px;
display: inline-block;
vertical-align: middle;
}
.ecommercethesis-sticky .ecommercethesis-error-message {
position: absolute;
top: -40px;
left: 0;
right: 0;
background: #dc3545;
color: white;
padding: 8px 16px;
border-radius: 4px;
font-size: 12px;
text-align: center;
display: none;
animation: ecommercethesis-slide-down 0.3s ease;
}
@keyframes ecommercethesis-slide-down {
from { transform: translateY(-10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 749px) {
body {
overflow-x: hidden !important;
}
.ecommercethesis-sticky {
overflow-x: hidden;
width: 100vw;
max-width: 100vw;
}
.ecommercethesis-sticky .page-width {
width: 100% !important;
max-width: 100vw !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.ecommercethesis-sticky .page-width-inner {
grid-template-columns: auto 1fr;
gap: 0.5rem;
padding: 0 1rem 0 0.5rem;
box-sizing: border-box;
max-width: 100vw;
width: 100%;
}
.ecommercethesis-sticky .ecommercethesis-product-content {
min-width: 0;
flex-shrink: 1;
}
.ecommercethesis-sticky .ecommercethesis-product-content img {
width: 60px;
height: 59px;
margin-right: .25rem;
flex-shrink: 0;
}
.ecommercethesis-sticky .ecommercethesis-product-content .product__title {
font-size: {{ section.settings.title_font_size | minus: 2 }}px;
margin: 0 0 .25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ecommercethesis-sticky .product-form {
width: 100%;
justify-self: stretch;
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
}
.ecommercethesis-sticky .product-form .ecommercethesis-quantity-wrapper {
justify-content: flex-end;
flex-wrap: nowrap;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
.ecommercethesis-sticky .product-form .select {
max-width: 28%;
margin-right: .5rem;
flex-shrink: 0;
}
.ecommercethesis-sticky .quantity {
margin-right: .5rem;
flex-shrink: 0;
}
.ecommercethesis-sticky .quantity__input {
width: 45px;
padding: 10px 6px;
}
.ecommercethesis-sticky .quantity__button {
width: 32px;
height: 40px;
}
.ecommercethesis-sticky .product-form button[name="buy-now"] {
padding: 10px 16px;
font-size: 12px;
min-height: 40px;
min-width: 70px !important;
flex-grow: 1 !important;
flex-shrink: 0 !important;
font-weight: 600;
white-space: nowrap;
}
.ecommercethesis-sticky .product-form .select__select {
padding: 10px 12px;
padding-right: 35px;
font-size: 13px;
border: 1px solid rgba(var(--color-foreground), 0.6);
background-color: var(--color-background);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ecommercethesis-sticky .product-form .select .icon-caret {
right: 10px;
width: 10px;
height: 10px;
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const stickyElement = document.querySelector('.ecommercethesis-sticky')
const img = stickyElement.querySelector('.ecommercethesis-product-content img')
const selectField = stickyElement.querySelector('select[name="id"]')
const plusButton = stickyElement.querySelector('button[name="plus"]')
const minusButton = stickyElement.querySelector('button[name="minus"]')
const quantityInput = stickyElement.querySelector('.quantity__input')
const buyNowButton = stickyElement.querySelector('button[name="buy-now"]')
const buyNowForm = stickyElement.querySelector('.product-form form')
const spinner = stickyElement.querySelector('.ecommercethesis-checkout-spinner')
const buttonText = buyNowButton.querySelector('span')
document.documentElement.style.paddingBottom = `${stickyElement.clientHeight}px`
function forceVisible() {
if (stickyElement) {
stickyElement.style.display = 'block'
stickyElement.style.visibility = 'visible'
stickyElement.style.opacity = '1'
}
}
forceVisible()
setInterval(forceVisible, 100)
if (selectField) {
selectField.addEventListener('change', () => {
const selectedOption = selectField.options[selectField.selectedIndex]
img.setAttribute('src', selectedOption.dataset.img)
const priceContainer = stickyElement.querySelector('.price')
const currentPrice = priceContainer.querySelector('.price__current')
const originalPrice = priceContainer.querySelector('.price__original')
if (currentPrice) {
currentPrice.textContent = selectedOption.dataset.price
}
if (selectedOption.dataset.comparePrice) {
if (!originalPrice) {
const newOriginalPrice = document.createElement('s')
newOriginalPrice.className = 'price__original'
priceContainer.insertBefore(newOriginalPrice, currentPrice)
}
priceContainer.querySelector('.price__original').textContent = selectedOption.dataset.comparePrice
} else if (originalPrice) {
originalPrice.remove()
}
})
}
if (plusButton && quantityInput) {
plusButton.addEventListener('click', () => {
const currentValue = parseInt(quantityInput.value) || 1
const maxValue = parseInt(quantityInput.getAttribute('max')) || 999
if (currentValue < maxValue) {
quantityInput.value = currentValue + 1
}
})
}
if (minusButton && quantityInput) {
minusButton.addEventListener('click', () => {
const currentValue = parseInt(quantityInput.value) || 1
const minValue = parseInt(quantityInput.getAttribute('min')) || 1
if (currentValue > minValue) {
quantityInput.value = currentValue - 1
}
})
}
function showError(message) {
let errorDiv = stickyElement.querySelector('.ecommercethesis-error-message')
if (!errorDiv) {
errorDiv = document.createElement('div')
errorDiv.className = 'ecommercethesis-error-message'
buyNowForm.style.position = 'relative'
buyNowForm.appendChild(errorDiv)
}
errorDiv.textContent = message
errorDiv.style.display = 'block'
setTimeout(() => {
errorDiv.style.display = 'none'
}, 4000)
}
function resetButton() {
buyNowButton.disabled = false
spinner.style.display = 'none'
buttonText.textContent = '{{ section.settings.button_text }}'
}
if (buyNowForm && buyNowButton) {
buyNowForm.addEventListener('submit', async (e) => {
e.preventDefault()
buyNowButton.disabled = true
spinner.style.display = 'inline-block'
buttonText.textContent = '{{ section.settings.processing_text }}'
const formData = new FormData(buyNowForm)
try {
const response = await fetch('/cart/add.js', {
method: 'POST',
body: formData
})
if (response.ok) {
buttonText.textContent = '{{ section.settings.redirecting_text }}'
setTimeout(() => {
window.location.href = '/checkout'
}, 500)
} else {
const error = await response.json()
throw new Error(error.message || error.description || 'Unable to add to cart')
}
} catch (error) {
console.error('Buy now error:', error)
showError(error.message || '{{ section.settings.error_text }}')
resetButton()
}
})
}
document.querySelector('.product-form [name="id"]')?.addEventListener('change', (e) => {
const value = Number(e.target.value)
if (value && selectField) {
selectField.value = value
selectField.dispatchEvent(new Event('change'))
}
})
})
</script>
{% comment %}
<!-- Designed by Foysal Ahmed YouTube Channel -->
{% endcomment %}
<div class="ecommercethesis-sticky" aria-hidden="false">
<div class="page-width">
<div class="page-width-inner">
<div class="ecommercethesis-product-content">
{% if section.settings.show_img %}
<img
src="{{ image | img_url: '90x62', crop: 'center' }}"
class=""
width="90"
height="62"
loading="lazy">
{% endif %}
<div class="">
<h3 class="product__title">
<span class="mobile-title">{{ mobile_title }}</span>
<span class="desktop-title">{{ product.title }}</span>
</h3>
<div id="price-{{ section.id }}" role="status">
<div class="price">
<span class="price__current">{{ current_variant.price | money }}</span>
{% if current_variant.compare_at_price > current_variant.price %}
<s class="price__original">{{ current_variant.compare_at_price | money }}</s>
{% endif %}
</div>
</div>
</div>
</div>
<product-form class="product-form">
<div class="product-form__error-message-wrapper" role="alert" hidden>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke-#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
<span class="product-form__error-message"></span>
</div>
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate' -%}
<div class="ecommercethesis-quantity-wrapper">
<div class="select" style="{% if product.has_only_default_variant %}display: none;{% endif %}">
<select class="select__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: '90x62' }}"
data-price="{{ variant.price | money }}"
data-compare-price="{% if variant.compare_at_price > variant.price %}{{ variant.compare_at_price | money }}{% endif %}"
{% if current_variant.id == variant.id %}selected{% endif %}
{% unless variant.available %}disabled{% endunless %}>
{{ variant.title }} - {{ variant.price | money }}
{% unless variant.available %} ({{ 'products.product.sold_out' | t }}){% endunless %}
</option>
{% endfor %}
</select>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
</svg>
</div>
{% if section.settings.show_quantity_input %}
<div class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
<span class="svg-wrapper">
{{- 'icon-minus.svg' | inline_asset_content -}}
</span>
</button>
<input class="quantity__input" type="number" name="quantity" id="Quantity-{{ section.id }}" min="1" max="{{ current_variant.inventory_quantity | default: 999 }}" value="1" form="{{ product_form_id }}">
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
<span class="svg-wrapper">
{{- 'icon-plus.svg' | inline_asset_content -}}
</span>
</button>
</div>
{% endif %}
<button type="submit" name="buy-now" class="product-form__submit button" {% unless current_variant.available %}disabled{% endunless %}>
<span class="ecommercethesis-checkout-spinner"></span>
<span>
{%- if current_variant.available -%}
{{ section.settings.button_text }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
</button>
</div>
{% endform %}
</product-form>
</div>
</div>
</div>
<style>
@media (max-width: 749px) {
.ecommercethesis-sticky .desktop-title {
display: none;
}
{% unless section.settings.show_title_mobile %}
.ecommercethesis-sticky .mobile-title {
display: none;
}
{% endunless %}
}
@media (min-width: 750px) {
.ecommercethesis-sticky .mobile-title {
display: none;
}
}
</style>
{% endif %}
{% schema %}
{
"name": "ET Sticky Buy Now",
"tag": "section",
"class": "ecommercethesis-sticky-section",
"settings": [
{
"type": "header",
"content": "General"
},
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#000000"
},
{
"type": "range",
"id": "title_font_size",
"label": "Title font size",
"min": 7,
"max": 24,
"step": 1,
"unit": "px",
"default": 16
},
{
"type": "checkbox",
"id": "show_title_mobile",
"label": "Show title on mobile",
"default": true
},
{
"type": "checkbox",
"id": "show_img",
"default": true,
"label": "Show image"
},
{
"type": "checkbox",
"id": "show_quantity_input",
"default": true,
"label": "Show quantity field"
},
{
"type": "header",
"content": "Button Text"
},
{
"type": "text",
"id": "button_text",
"label": "Buy now button text",
"default": "Buy It Now"
},
{
"type": "text",
"id": "processing_text",
"label": "Processing text",
"default": "Processing..."
},
{
"type": "text",
"id": "redirecting_text",
"label": "Redirecting text",
"default": "Redirecting..."
},
{
"type": "text",
"id": "error_text",
"label": "Error message",
"default": "Unable to process order. Please try again."
},
{
"type": "header",
"content": "Buy Now Button"
},
{
"type": "text",
"id": "button_gradient",
"label": "Button background gradient",
"default": "linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%)",
"info": "Use CSS gradient syntax or solid color"
},
{
"type": "text",
"id": "button_hover_gradient",
"label": "Button hover gradient",
"default": "linear-gradient(135deg, #ff5252 0%, #d84315 100%)",
"info": "Gradient for hover state"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button text color",
"default": "#ffffff"
},
{
"type": "header",
"content": "Spacing",
"info": "Adjust padding around the sticky bar"
},
{
"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": "ET Sticky Buy Now"
}
]
}
{% endschema %}