Instruction Step 1: Create a snippet and name it sticky-atc-custom and the paste the code given below: {% comment %} Renders sticky product add to cart button. Accepts: - product: {Object} product object. - block: {Object} passing the block information. - product_form_id: {String} product form id. - section_id: {String} id of section to which this snippet belongs. Usage: {% render 'sticky-atc-custom', block: block, product: product, product_form_id: product_form_id, section_id: section.id %} {% endcomment %} {% assign has_variants = true %} {% if product.options.size == 1 and product.options.first == 'Title' %} {% assign has_variants = false %} {% endif %}
{{ product.title }}
{% if product.selected_or_first_available_variant.image %} Selected Variant Image {% elsif has_variants == false and product.images.size > 0 %} Product Image {% endif %}
{{ product.title }}
{% for option in product.options %}
{{ option }}: {{ product.selected_or_first_available_variant.options[forloop.index0] }}
{% endfor %}
{{ product.selected_or_first_available_variant.compare_at_price | money }} {{ product.selected_or_first_available_variant.price | money }} {%- assign difference = product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price -%} {%- assign float_difference = difference | times: 1.0 -%} {%- assign discount_fraction = float_difference | divided_by: product.selected_or_first_available_variant.compare_at_price -%} {%- assign discount_percentage = discount_fraction | times: 100 | round -%}   (Save {{ discount_percentage }}%)
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if gift_card_recipient_feature_active -%} {%- render 'gift-card-recipient-form', product: product, form: form, section: section -%} {%- endif -%}
{%- liquid assign check_against_inventory = true if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue' assign check_against_inventory = false endif if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory assign quantity_rule_soldout = true endif -%}
{%- endform -%}
Instruction Step 2: Now go to global.js and search updatemedia then enter the code given below (follow the video carefully) // Update the ATC box image const atcBoxImage = document.querySelector('#selectedVariantImage'); if (newMediaModal && newMediaModal.src && atcBoxImage) { atcBoxImage.src = newMediaModal.src; } Instruction Step 3: In global.js search renderproductinfo and paste the code given below (follow the video carefully) //Update Sticky ATC Product Info const regularPriceElement = source.querySelector('.price__sale s.price-item--regular') || source.querySelector('.price__regular .price-item--regular'); const salePriceElement = source.querySelector('.price__sale .price-item--sale'); const stickyAtcRegularPrice = document.querySelector('.sticky-atc .compared-price'); const stickyAtcSalePrice = document.querySelector('.sticky-atc .selection-price'); const stickyAtcDiscount = document.querySelector('.sticky-atc .discount-percentage'); if (regularPriceElement && stickyAtcRegularPrice) { stickyAtcRegularPrice.textContent = regularPriceElement.textContent; } if (salePriceElement && stickyAtcSalePrice) { stickyAtcSalePrice.textContent = salePriceElement.textContent; } if (regularPriceElement && salePriceElement) { // Extract numerical values let compareAtPrice = parseFloat(regularPriceElement.textContent.replace('$', '')); let price = parseFloat(salePriceElement.textContent.replace('$', '')); // Calculate discount percentage let difference = compareAtPrice - price; let discountFraction = difference / compareAtPrice; let discountPercentage = Math.round(discountFraction * 100); // Update the sticky ATC box with the discount percentage if (stickyAtcDiscount) { stickyAtcDiscount.textContent = `(Save ${discountPercentage}%)`; } if (compareAtPrice > price) { // Show compared price and discount percentage if(stickyAtcRegularPrice) stickyAtcRegularPrice.style.display = 'inline'; if(stickyAtcDiscount) stickyAtcDiscount.style.display = 'inline'; } else { // Hide compared price and discount percentage if(stickyAtcRegularPrice) stickyAtcRegularPrice.style.display = 'none'; if(stickyAtcDiscount) stickyAtcDiscount.style.display = 'none'; } } const stickyAddButtonUpdated = html.getElementById(`StickyProductSubmitButton-${sectionId}`); this.toggleStickyAddButton( stickyAddButtonUpdated ? stickyAddButtonUpdated.hasAttribute('disabled') : true, window.variantStrings.soldOut ); Instruction Step 4: In global.js search toggleAddButton and paste the code given below as shown in the video toggleStickyAddButton(disable = true, text, modifyClass = true) { const stickyProductForm = document.querySelector('.sticky-atc'); if (!stickyProductForm) return; const stickyAddButton = stickyProductForm.querySelector('[name="add"]'); const stickyAddButtonText = stickyAddButton.querySelector('[name="add"] > span'); if (!stickyAddButton) return; if (disable) { stickyAddButton.setAttribute('disabled', 'disabled'); if (text) stickyAddButtonText.textContent = text; } else { stickyAddButton.removeAttribute('disabled'); stickyAddButtonText.textContent = window.variantStrings.addToCart; } } Instruction Step 5: Now go to main-product.liquid and search paste the render code as shown in the video {% render 'sticky-atc-custom', block: block, product: product, product_form_id: product_form_id, section_id: section.id %} Instruction Step 6: If you want to keep updating the data of variant when changing them multiple times add this line of code in updateURL() and please follow the video to do it correctly location.reload();