How to Add Custom Scripts to Multiship

In this tutorial, we will demonstrate how to add custom CSS and JavaScript to Multiship’s shipping rates page, as well as the Multi-Multiship address page.

Please note: This is an advanced tutorial and should be completed by a qualified Shopify developer familiar with JavaScript. Since you cannot preview these changes, any code you implement will be live.

Shipping Rates Page
The shipping rates page appears after entering all addresses and clicking checkout. You can paste the following code block in Giftship’s general settings under the Multishipping tab > Custom JavaScript. The following snippets will retrieve the corresponding file from the live theme’s asset folder.

var loadCSS = function(url, location) {
 var link  = document.createElement('link');
 link.rel  = 'stylesheet';
 link.type = 'text/css';
 link.href = url;
 link.media = 'all';
 location.appendChild(link);
}

loadCSS("{{ 'custom.css' | asset_url }}", document.body);

Custom JS

var loadJS = function(url, location){
 var scriptTag = document.createElement('script');
 scriptTag.src = url;
 location.appendChild(scriptTag);
};

loadJS("{{ 'custom.js' | asset_url }}", document.body);

Multiship Landing Page

{% if request.path contains '/a/gs/cart/' %}
// CSS
// JS
{% endif %}