Atlas Total Support™
/* ---- BASE STYLES ---- */ .product-box { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); width: 420px; max-width: 100%; transition : all 0.3s ease; margin: auto; } /* ---- TABS WITH SLIDING INDICATOR ---- */ .tabs { position: relative; display: flex; background: #f0f0f0; border-radius: 25px; overflow: hidden; margin-bottom: 16px; } .tab { flex: 1; text-align: center; padding: 12px 0; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 14px; color: #333; position: relative; z-index: 2; transition: color 0.3s ease; } .tab.active { color: #fff; } .tab-slider { position: absolute; background: #333; height: 100%; width: 0; left: 0; top: 0; border-radius: 25px; transition: all 0.3s ease; z-index: 1; } /* ---- OFFER OPTIONS ---- */ .options { margin-top: 12px; } .option { position: relative; /* for absolutely positioned pseudo-element + badge */ display: flex; align-items: center; justify-content: space-between; padding: 14px; margin-bottom: 16px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 14px; background: white; transition: all 0.3s ease; } /* Hide center portion of top border to create a gap behind the sticker */ .option::before { content: ""; position: absolute; top: 0; left: 40px; right: 40px; height: 2px; background: inherit; border-top-left-radius: 8px; border-top-right-radius: 8px; } .option:hover, .option.selected { border-color: #ab7848; background: #f8f8f8; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .option input[type="radio"] { margin-right: 10px; } .option-content { display: flex; justify-content: space-between; width: 100%; align-items: center; } .option-text { display: flex; flex-direction: column; align-items: flex-start; } .option-price { font-weight: 600; font-size: 16px; text-align: right; min-width: 100px; position: relative; /* for badge positioning */ } .old-price { color: grey; font-size: 14px; font-weight: normal; text-decoration: line-through; margin-top: 4px; } .option-subtext { font-size: 12px; color: #777; margin-top: 3px; } /* ---- STICKERS (Most Popular / Best Value) ---- */ .badge { position: absolute; top: -12px; right: 24px; background: #e0e0e0; color: #333; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 9999px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); pointer-events: none; transition: background 0.3s ease, color 0.3s ease; } .option:hover .badge, .option.selected .badge { background: #ab7848; color: #fff; } /* ---- ONE-TIME BENEFITS ---- */ .one-time-benefits { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .one-time-benefits .benefit { display: flex; align-items: center; width: calc(100% - 6px); font-family: 'Montserrat', sans-serif; font-size: 12px; color: #333; line-height: 1.2; } .one-time-benefits .benefit svg { width: 14px; height: 14px; margin-right: 4px; flex-shrink: 0; } /* ---- SUBSCRIPTION BENEFITS ---- */ .subscription-benefits { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .subscription-benefits .benefit { display: flex; align-items: center; width: calc(50% - 6px); font-family: 'Montserrat', sans-serif; font-size: 12px; color: #333; line-height: 1.2; } .subscription-benefits .benefit svg { width: 14px; height: 14px; margin-right: 4px; flex-shrink: 0; } /* ---- SUBSCRIPTION USP (Above Subscription Offers) ---- */ .subscription-usp { display: flex; align-items: center; font-family: 'Montserrat', sans-serif; font-size: 12px; color: #333; margin-bottom: 8px; } .subscription-usp .usp-icon { width: 16px; height: 16px; margin-right: 8px; fill: #ab7848; } /* ---- DELIVERY NOTE (Icon + Text) ---- */ .delivery-note { display: flex; align-items: center; justify-content: flex-start; width: 420px; max-width: 100%; margin: 20px auto 0; font-family: 'Montserrat', sans-serif; font-size: 12px; color: #333; } .delivery-note svg { width: 16px; height: 16px; margin-right: 8px; fill: #ab7848; } /* ---- ADD TO CART BUTTON ---- */ .add-to-cart { background: linear-gradient(120deg, #000, #333); color: #fff; padding: 16px 24px; text-align: center; border-radius: 8px; margin: 20px auto 0; cursor: pointer; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 400; transition: all 0.3s ease; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 420px; max-width: 100%; } .add-to-cart:hover { background: linear-gradient(120deg, #333, #000); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); } /* ---- SOCIAL PROOF ---- */ .social-proof { width: 210px; max-width: 100%; margin: 0px auto 0; display: flex; gap: 8px; justify-content: center; align-items: center; } .social-proof img { width: 50%; height: auto; display: inline-block; } One-Time Purchase Subscription 1 Bottle 30-day supply £38.99 Most Popular 2 Bottles 60-day supply £77.98 Best Value ⚡ 3 Bottles 90-day supply £93.60 £116.97 30 day money back guarantee included Delivered monthly 1 Bottle 30-day supply £32.99 £38.99 Most Popular 2 Bottles 60-day supply £65.98 £77.98 Best Value ⚡ 3 Bottles 90-day supply £98.97 £116.97 15% off regular price Never run out of product Free standard shipping Skip or cancel anytime Orders delivered in 2–4 days (24h express available) ADD TO CART $(document).ready(function() { /* ----- SLIDER LOGIC FOR TABS ----- */ function updateTabSlider() { var $activeTab = $('.tab.active'); var left = $activeTab.position().left; var width = $activeTab.outerWidth(); $('.tab-slider').css({ left: left, width: width }); } // Initialize slider on page load updateTabSlider(); // Tab Switching with slider animation $('.tab').click(function() { $('.tab').removeClass('active'); $(this).addClass('active'); updateTabSlider(); var selectedType = $(this).data('type'); $('.options').hide(); $('#' + selectedType + '-options').fadeIn(300); $('input[name="purchase"]').prop('checked', false); $('.option').removeClass('selected'); $('#add-to-cart').text("ADD TO CART"); }); // Option Selection – update Add to Cart button text with only the current price $('.option input[type="radio"]').change(function() { $('.option').removeClass('selected'); $(this).closest('.option').addClass('selected'); var priceText = $(this).closest('.option').find('.option-price') .clone().children().remove().end().text().trim(); $('#add-to-cart').text("ADD TO CART - " + priceText); }); // Helper: Open Slide Cart function openSlideCart() { if (window.AmpCart && typeof window.AmpCart.open === 'function') { window.AmpCart.open(); } else { document.dispatchEvent(new CustomEvent('ampify:open-cart')); } } // Add to Cart Click $('#add-to-cart').click(function() { var activeTab = $('.tab.active').data('type'); var selectedOption = $('input[name="purchase"]:checked'); if (selectedOption.length === 0) { alert("Please select a product option."); return; } var quantity = parseInt(selectedOption.data('quantity'), 10); var payload = { id: 41184899268806, quantity: quantity }; if (activeTab === 'subscription') { payload.selling_plan = 602996934; } var discountApplies = (activeTab === 'one-time' && quantity === 3); function handleSuccess(data) { console.log("Product added", data); if (discountApplies) { setTimeout(function(){ window.SLIDECART_APPLY_DISCOUNT('ATS3'); }, 300); } setTimeout(openSlideCart, 300); } if (window.AmpCart && typeof window.AmpCart.addToCart === 'function') { var options = { openCart: true }; window.AmpCart.addToCart(payload, options); if (discountApplies) { setTimeout(function(){ window.SLIDECART_APPLY_DISCOUNT('ATS3'); }, 300); } setTimeout(openSlideCart, 300); } else { $.ajax({ type: "POST", url: "/cart/add.js", data: JSON.stringify(payload), dataType: "json", contentType: "application/json", success: handleSuccess, error: function(error) { console.error("Error adding to cart:", error); alert("There was an error adding the product to your cart."); } }); } }); /* ----- US PRICE OVERRIDE USING SHOPIFY'S CURRENCY ----- */ // Detect Shopify's active currency from a global variable or cookie. var shopifyCurrency = null; if (typeof Shopify !== 'undefined' && Shopify.currency && Shopify.currency.active) { shopifyCurrency = Shopify.currency.active; } else { // Fallback: read from cookie var nameEQ = "ShopifyCurrency="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) === ' ') { c = c.substring(1); } if (c.indexOf(nameEQ) === 0) { shopifyCurrency = c.substring(nameEQ.length); } } } console.log("Shopify currency detected: " + shopifyCurrency); // If the active currency is USD, update prices to US pricing and modify delivery note text. if (shopifyCurrency === "USD") { console.log("USD detected via Shopify. Updating prices to US prices."); // Define US prices for one-time options (unchanged) and subscription options calculated via conversion. // One-time pricing remains: var usdPrices = { oneTime: { "1": { current: "$54.99", old: "" }, "2": { current: "$109.98", old: "" }, "3": { current: "$132.00", old: "$164.97" } }, // For subscription pricing, we calculate using a conversion factor. // UK subscription price for 1 Bottle is £32.99 which converts to $47.06. // Apply the same factor to 2 and 3 bottles: // 1 Bottle: $47.06, 2 Bottles: $94.12, 3 Bottles: $141.18. // The "old" price for each subscription option matches the corresponding one-time US price. subscription: { "1": { current: "$47.06", old: "$54.99" }, "2": { current: "$94.12", old: "$109.98" }, "3": { current: "$141.18", old: "$164.97" } } }; // Function to update the displayed prices to USD values. function updatePricesToUSD() { // Update one-time options $('#one-time-options .option').each(function() { var qty = $(this).find('input[type="radio"]').data('quantity').toString(); var priceData = usdPrices.oneTime[qty]; if (priceData) { var priceHtml = priceData.current; if (priceData.old) { priceHtml += '' + priceData.old + ''; } $(this).find('.option-price').html(priceHtml); } }); // Update subscription options $('#subscription-options .option').each(function() { var qty = $(this).find('input[type="radio"]').data('quantity').toString(); var priceData = usdPrices.subscription[qty]; if (priceData) { var priceHtml = priceData.current; if (priceData.old) { priceHtml += '' + priceData.old + ''; } $(this).find('.option-price').html(priceHtml); } }); } updatePricesToUSD(); // Update the delivery note text for USD orders. $(".delivery-note span").text("Orders delivered in 4–9 days"); } else { console.log("Currency is not USD; keeping default GBP pricing."); // Ensure default delivery note text for GBP is shown. $(".delivery-note span").text("Orders delivered in 2–4 days (24h express available)"); } });
More you might like
Related
Atlas Rose - Total Aftercare Jelly Mask
Related
2-Pack Atlas Short Total Eclipse / True Black
Related
Total Definer: Atlas of Advanced Body Sculpting
Related