Ensuring the Logo Link is Active and ‘Back to Cart’ Breadcrumb is Always Present During Checkout ✏️

*Update: the instructions in this article no longer work, as Shopify updated the “Additional Google Analytics Javascript” feature to no longer allow the checkout to be modified. This article will remain here for historical purposes, and as a code snippet for Shopify Plus users, who can access the checkout.liquid file.

Original Content:

Since Giftship + Multiship create the multiple shipping address checkout via the Shopify API, you may notice that you no longer see the cart breadcrumb and the logo does not link back to the shop.

If you would like to ensure that the logo always has a link back to the shop page, we can insert this snippet into the ‘Additional Google Analytics JavaScript’ section of your preferences page, by going to Online Store –> Preferences.

<script>  
Checkout.$(document).on('page:load page:change', function(e) {     

  //The below snippet checks if the logo element is a broken link, and if so, adds it back in.

  var logos       = Checkout.$('.logo');
  var broken_logo = false;
  var cart_crumb  = Checkout.$('<li class="breadcrumb__item" aria-current="step"><a class="breadcrumb__link" href="/cart">Cart</a><svg class="icon-svg icon-svg--color-adaptive-light icon-svg--size-10 breadcrumb__chevron-icon" aria-hidden="true" focusable="false"> <use xlink:href="#chevron-right"></use> </svg></li>');
  var breadcrumb  = Checkout.$('.breadcrumb');
      


  logos.each(function() {

    var el = Checkout.$(this);

    if (el.is('a') || el.closest('a').length) {
      return;
    }

    el.wrap( "<a href='/'></a>" );

    broken_logo = true;

  });


  if (broken_logo === true) {

    breadcrumb.prepend(cart_crumb);

  }
  
});
</script>