FlexyPe Checkout

🎁 Flat 10% Off for New Users — Code NEW10 ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ✦‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎🚚 Free Delivery on All Orders ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ✦‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎🛡️ Try 21 Days Risk-Free — 100% Refund, No Questions ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ✦‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎💳 Extra 5% Off on Prepaid Orders ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ✦‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

Oops, This Page Is Missing

The page you’re looking for doesn’t exist or may have been moved. Let’s guide you back to something beautiful.

Back to home

) // // Create button HTML const backToTopHTML = ` `; // Icon SVG paths function getIconSVG(iconType) { const icons = { arrow: '', chevron: '', caret: '' }; return icons[iconType] || icons.arrow; } // Insert button into page document.body.insertAdjacentHTML('beforeend', backToTopHTML); // Get settings from Shopify const settings = { enabled: true, scrollThreshold: 300, position: 'bottom-right', bottomSpacing: 30, sideSpacing: 30, buttonStyle: 'square', buttonSize: 40, bgColor: '#333333', iconColor: '#FFFFFF', opacity: 90 / 100, hoverBgColor: '#333333', hoverOpacity: 100 / 100, animationType: 'scale', showShadow: true, iconSize: 24, smoothScroll: true, scrollDuration: 600 }; // Get button element const backToTopBtn = document.getElementById('back-to-top-btn'); if (settings.enabled && backToTopBtn) { // Apply styles applyStyles(); // Show/hide button on scroll let scrollTimeout; window.addEventListener('scroll', () => { clearTimeout(scrollTimeout); scrollTimeout = setTimeout(() => { if (window.pageYOffset > settings.scrollThreshold) { showButton(); } else { hideButton(); } }, 100); }); // Scroll to top on click backToTopBtn.addEventListener('click', () => { if (settings.smoothScroll) { smoothScrollToTop(); } else { window.scrollTo(0, 0); } }); // Apply all styles function applyStyles() { // Position let positionStyles = { bottom: settings.bottomSpacing + 'px' }; if (settings.position === 'bottom-right') { positionStyles.right = settings.sideSpacing + 'px'; } else if (settings.position === 'bottom-left') { positionStyles.left = settings.sideSpacing + 'px'; } else if (settings.position === 'bottom-center') { positionStyles.left = '50%'; positionStyles.transform = 'translateX(-50%)'; } // Shape let borderRadius = '0'; if (settings.buttonStyle === 'circle') { borderRadius = '50%'; } else if (settings.buttonStyle === 'rounded') { borderRadius = '12px'; } // Apply styles Object.assign(backToTopBtn.style, { position: 'fixed', zIndex: '99', width: settings.buttonSize + 'px', height: settings.buttonSize + 'px', backgroundColor: settings.bgColor, color: settings.iconColor, border: 'none', borderRadius: borderRadius, cursor: 'pointer', opacity: settings.opacity, transition: 'all 0.3s ease', boxShadow: settings.showShadow ? '0 4px 12px rgba(0,0,0,0.15)' : 'none', ...positionStyles }); // Icon size const icon = backToTopBtn.querySelector('.back-to-top-icon'); if (icon) { icon.style.width = settings.iconSize + 'px'; icon.style.height = settings.iconSize + 'px'; } // Hover effect backToTopBtn.addEventListener('mouseenter', () => { backToTopBtn.style.backgroundColor = settings.hoverBgColor; backToTopBtn.style.opacity = settings.hoverOpacity; backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'translateY(-5px)'; }); backToTopBtn.addEventListener('mouseleave', () => { backToTopBtn.style.backgroundColor = settings.bgColor; backToTopBtn.style.opacity = settings.opacity; backToTopBtn.style.transform = settings.position === 'bottom-center' ? 'translateX(-50%)' : 'none'; }); } // Show button with animation function showButton() { if (backToTopBtn.style.display === 'flex') return; backToTopBtn.style.display = 'flex'; backToTopBtn.style.alignItems = 'center'; backToTopBtn.style.justifyContent = 'center'; if (settings.animationType === 'fade') { backToTopBtn.style.opacity = '0'; setTimeout(() => { backToTopBtn.style.opacity = settings.opacity; }, 10); } else if (settings.animationType === 'slide') { backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'translateY(100px)'; setTimeout(() => { backToTopBtn.style.transform = settings.position === 'bottom-center' ? 'translateX(-50%)' : 'none'; }, 10); } else if (settings.animationType === 'scale') { backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'scale(0)'; setTimeout(() => { backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'scale(1)'; }, 10); } } // Hide button with animation function hideButton() { if (backToTopBtn.style.display === 'none') return; if (settings.animationType === 'fade') { backToTopBtn.style.opacity = '0'; } else if (settings.animationType === 'slide') { backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'translateY(100px)'; } else if (settings.animationType === 'scale') { backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'scale(0)'; } setTimeout(() => { backToTopBtn.style.display = 'none'; }, 300); } // Smooth scroll to top function smoothScrollToTop() { const startPosition = window.pageYOffset; const startTime = performance.now(); function animation(currentTime) { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / settings.scrollDuration, 1); // Easing function const easeInOutCubic = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2; window.scrollTo(0, startPosition * (1 - easeInOutCubic)); if (progress < 1) { requestAnimationFrame(animation); } } requestAnimationFrame(animation); } } //

Your cart is empty

Your cart

People Also Bought

Oops, This Page Is Missing