BLOG

Based on quantity update price recharge app subscription product page shopify

    Example store link:   https://pets-buy-supplement.myshopify.com/ https://optimalpaw.com/ <script> window.addEventListener('load', function() { $(".velaQtyButton").on( 'mouseup', function() { var cutext = $(".reg11 .money .money").text(); if( $(".rc_block__type__onetime").hasClass("rc_block__type--active") ) { cutext = $(".rc_block__type__onetime .money").text(); } else { cutext = $(".rc_block__type__autodeliver .money").text(); } var newpeic = cutext.replace( "$",'' ); var count_number...

Buy now/ Add to cart button shopify 2.0 collection page

<product-form class="product-form" id="add-to-cart">       {%- form 'product', product_card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}       <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">       {{ form | payment_terms }}       <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">       <div class="product-form__buttons"> ...

Newsletter popup with custom field Shopify

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" /><a id="popuplink" href="#inline" style="display:none;"></a><div id="inline" style="display:none;text-align:center;">    <div class="modal-f-content grid">      <div class="grid__item one-half news-sec image">        <img src="{{section.settings.image| img_url:'500x'}}">      </div>           <div class=" news-sec  form-padd grid__item one-half news-sec">        <h2...

In the press section slider using Slick (CDN Link Slick slider and jQuery)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> <!-- slick cdn links --> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>     /* Section Code */     <div class="page-width"> {% if section.settings.title != blank %} <div class="section-header text-center"> <h2>{{ section.settings.title | escape }}</h2> </div> {% endif %} {%...

Multiple Variant drop down to buy multiple variant onclick single cart button

Demo url: https://www.snowfeetstore.com/products/2-pairs   <div class="swtch-mrgn"><a class="tab-prod-btn" href="/products/2-pairs">2 Pairs</a><a class="tab-prod-btn" href="/products/3-pairs">3 Pairs</a><a class="tab-prod-btn" href="/products/4-pairs">4 Pairs</a><a class="tab-prod-btn" href="/products/5-pairs">5 Pairs</a><a class="tab-prod-btn selected" href="/products/10-pairs">10 Pairs</a></div> /* form code  */{% capture form_id %}AddToCartForm-{{ section_id }}{% endcapture %}<form action="/cart/add" method="post" class="variants cart" id="product-actions-{{ product.id }}" enctype="multipart/form-data">               <select...