Different shipping time for different variants

New Member
4 0 0

Dear Shopify Community,  

we do have several items with different shipping time for different variants (i.e. blue chair: 2 weeks, red chair: 4 weeks)

I would like to indicate this when the customer is on our site. As we do not use the barcode field for any purpose yet, the idea is to use it for delivery time in weeks. 

When the customer selects a variant, the barcode field should show up accordingly and show the customer the delivery time in weeks. 

I have seen a tutorial where the SKU can show up when the customer selects a variant:

https://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/add-var...

I was not able to test this tutorial, as the select.callback function seem to be a  bit different with my theme. 

Might this work with delivery time as a parameter for each variant=

Any help or hint is greatly appreciated.

Thanks a lot!

0 Likes
Shopify Expert
460 0 67

That should work fine. Just update the code from the tutorial a bit. Add this to your product.liquid template:

<div class="ship-time"></div>

 

Update this function in your app.js file.

selectCallback = function(variant, selector) {
    var $product = $('#product-' + selector.product.id);
    var $notify_form = $('#notify-form-' + selector.product.id);

    if (variant && $product.is(":visible")) {
      var $thumbs = $('.slides img', $product);
      var optionValue = variant.options[$('form.product_form', $product).data('option-index')];
      $.each($thumbs, function(index, value) {
        if($(value).attr('alt') == optionValue && !$(value).hasClass('flex-active')) {
          $('.flexslider', $product).flexslider(index);
          return false;
        }
      });
    }

    if (variant && variant.available == true) {
      if(variant.price < variant.compare_at_price){
        $('.was_price', $product).html(Shopify.formatMoney(variant.compare_at_price, $('form.product_form', $product).data('money-format')))        
      } else {
        $('.was_price', $product).text('')
      }  

      $('.sold_out', $product).text('');
      $('.current_price', $product).html(Shopify.formatMoney(variant.price, $('form.product_form', $product).data('money-format')));
      $('.add_to_cart', $product).removeClass('disabled').removeAttr('disabled').val('In den Warenkorb');
      $notify_form.hide();
 
    } else {
      var message = variant ? "leider ausverkauft" : "Out of Stock";    
      $('.was_price', $product).text('');
      $('.current_price', $product).text('');
      $('.items_left', $product).text('');
      $('.quantity', $product).removeAttr('max');      
      $('.sold_out', $product).text(message);
      $('.add_to_cart', $product).addClass('disabled').attr('disabled', 'disabled').val(message); 
      $notify_form.fadeIn();
    }

    if (variant) {
      $('.ship-time').text(variant.barcode);
    }
    else {
      $('.ship-time').empty();
    }
    
  };

Then add your ship time text to the barcode field for each product.

0 Likes
New Member
4 0 0

Thanks for your help Gina, it works seamless!

0 Likes
New Member
1 0 0

Hi Gina, when you say update the code from the tutorial what do you mean? Should I only use your code, or do I need something else?

 

Also my theme does not have an app.js file, the closest I found was rt.application.js.liquid  is this the correct file? Trying to get this implemented, and any help would be greatly appreciated!

0 Likes