Multiship Installation

Introduction

First of all, Thank you for choosing Multiship!

Before you start

Make sure you have done the following.

  1. Create a backup of your theme file
  2. Install Multiship from the Shopify App Store

Be careful while editing your theme. If not edited properly, design elements may break. No support is provided for faulty customization.



Watch the installation video

Getting Started #back to top

If you haven't already done so, install Multiship on your Shopify Store and authorize Multiship to connect with your shop.

The installation process involves altering your theme files, so it's a good idea to make a backup before you begin.

You can try out Multiship for 7 days before you will be billed.

Accessing Theme Files #back to top

In order for MultiShip to function correctly, we'll need to make a few changes to your theme files. There are a few steps, which might be located in various parts of you're theme.

  1. Log in to your shopify admin by going to "yourstore.myshopify.com/admin", and entering your login details.
  2. Click on "Online Store", then click on the "Actions" button over the theme you would like to edit.
  3. Select "Edit HTML/CSS".

Changes to cart.liquid #back to top

In this next step, we'll be making some changes to the cart loop.


  1. In Shopify Admin, go to Online Store -> Themes -> Actions -> Edit HTML/CSS
  2. Open the "cart.liquid" file in the "Templates" folder. In this file, you should see {%for item in cart.items %}. If you find this line, great, your ready to go to the next step. If it's not there, look out for something like {% section 'cart-template' %} or {% include 'cart-template' %}. If you find either of these, you will have to find the referenced file and continue to the next step.


  3. Find the line directly below {% for item in cart.items %}. Add the following classes and data attributes to this top level element.
                                    

    Make sure to add the closing div tag in the snippet above to be at the end of the loop, so find the {% endfor %} at the bottom of the cart loop, and add the closing div tag there.

    Once complete, your the start of you loop should look like this: install start


  4. Next, locate the line of code within the for loop that contains either of {{ item.line_price | money }} or {{ item.price | money }}. Add the following code on the line directly above it.
                                      
                                    

    Your code should now look as follows:

    install item price


  5. Now we'll need to edit the line item properties loop. Look for the line of code that contains: {% for p in item.properties %}. Once found you'll need to wrap the entire for loop with the following div element. Remember to close the div right before the end of the for loop like it step 1.
                                      
    Once you have wrapped the entire loop, we'll need to edit the loop itself. You can copy the following code and replace your loop, or integrate it with your own if you have already customized your line item properties loop.
    
                                      
    {% assign properties_amount = item.properties | size %} {% if properties_amount > 0 %} {% for p in item.properties %} {% assign first_character_in_key = p.first | truncate: 1, '' %} {% if p.first contains 'National Tax' or p.first contains 'Regional Tax' %} {% assign tax_class = "ms__tax-line" %} {% else %} {% assign tax_class = null %} {% endif %} {% if p.first contains 'Address' %} {% assign address = p.last %} {% endif %} {% if address == true %} {% endif %} {% assign address = null %} {% if p.first contains 'Address' %} {% endif %} {% unless p.last == blank or first_character_in_key == "_"%}

    {{ p.first }}: {% if p.last contains '/uploads/' %} {{ p.last | split: '/' | last }}
    {% else %} {{ p.last }}
    {% endif %}

    {% endunless %} {% endfor %} {% endif %}

    Once complete, your code should look like below. The changes are highlighted in yellow:

    install line-item properties


  6. Find the input which controls the quantity of each line in your cart. It should look something like this:
                                      
                                    
    Add the class "ms__line-qty" and add the attribute "data-line="{{ forloop.index }}:
                                      
                                    

    Once complete, this line should look as follows: install quantity


  7. Somewhere within the product loop, add the following two lines of code. A good spot for these is often underneath the "remove item" link, but they can be placed anywhere you see fit, as long as it is within the cart item loop.
                                    
                                    
    
                                    

    install buttons


  8. Find the line in your cart template that contains {{ additional_checkout_buttons }}. Wrap this code in a div with the class "additional-checkout-buttons", or replace with the code below:
                                      
    {{ additional_checkout_buttons }}



  9. The last step is to add the address modal. Find the closing form tag and add the following code directly below it:
                                    {% for item in cart.items %}
                                    

    Shipping Address

    Add Address

    {% if shop.customer_accounts_enabled %}

    Saved Addresses

    {% if customer %} {% if customer.addresses == 0 %}

    You have no saved addresses

    Add Address {% else %} Add Address
    {% for address in customer.addresses %}

    {{ address.first_name | capitalize | replace: ',', '-' }} {{address.last_name | capitalize | replace: ',', '-'}} {{ address.company | replace: ',', '-'}}, {{ address.address1 | replace: ',', '-'}} {{ address.address2 | replace: ',', '-'}}, {{ address.city | capitalize | replace: ',', '-'}}, {{ address.province_code | upcase | replace: ',', '-'}}, {{ address.country_code | replace: ',', '-'}}, {{ address.zip | upcase | replace: ',', '-'}}, {{ address.phone | replace: ',', '-'}}

    {% endfor %}
    {% endif %} {% else %} Login {% endif %}
    {% endif %}
    {% endfor %}

    See the screenshot below which illustrates where the above code should be placed:

    install modal


  10. Save your changes by clicking the "Save" button in the top right corner.

Shopify Common Files #back to top

  1. Ensure that your theme is loading the following files:
                                      
                                      
                                    

    To check if these files are being loaded, go to your cart page at www.yoursite.com/cart and view your pages source code by right clicking anywhere on the page and selecting the option "view page source".

    Hit ctrl-f or cmd-f (mac) and search for "shopify_common", then repeat for "customer_area". If you are able to find the script tags that look like the ones above, then great - go to the next step.

  2. If the above script tags are not loading on the cart page:

    Open your theme.liquid file in the "Layout" folder, and add the below code directly above the closing "head" html tag in theme.liquid

                                      {{ "shopify_common.js"  | shopify_asset_url | script_tag }}
                                      {{ "customer_area.js"  | shopify_asset_url | script_tag }}
                                    

    This is how the assets should be placed in your theme.liquid file:

    install modal


  3. Now that you have ensured the shopify assets will load on your cart page, save your theme.liquid file.

Configuring Options #back to top

You may want to choose some of the options you would like to configure before going live.

multiship options

  1. In Shopify Admin, go to Online Store -> Apps -> Multiship, where you will be given some options on how the app works.

  2. Hide tax on cart page:

    Check this box if you don't want tax to show up when a visitor enters their shipping address on the cart page. Taxes will always be calculated and displayed on each checkout page.

  3. Highlight changes on cart page:

    Check this option to highlight in green changes to tax and address line item properties in the cart

  4. Animate modal window:

    This option adds a smooth animation when opening the shipping address modal window

Configuring Email Templates #back to top

In order for your customers to see their chosen shipping address and taxes charged in the order confirmation email, we need to add a liquid snippet for each required email template in Shopify's Notification Settings.

  1. Go to Settings -> Notifications -> Order Confirmation
  2. At the very top of your file, insert the following code before everything else:
                                      {% assign ms_order = false %}
                                      {% for tag in order.tags %}
                                      {% if tag == "ms_order" %}
                                      {% assign ms_order = true %}
                                      {% endif %}
                                      {% endfor %}
                                    



  3. Find the following code snippet in the Order Confirmations template:
                                      View your order
                                      

    Replace the above line with the following code:
                                      {% if ms_order == false %}
                                      View your order
                                      {% else %}
                                      

    Further confirmation emails will be sent for each item in your cart.

    {% endif %}



  4. Near the bottom of the same file, find the following section of code:
                                        

    Order summary


    Add the following line directly above the section mentioned above:
                                        {% if ms_order == false %}
                                      

    Find this section of code near the end of the file:
                                        
                                      
    Add the following line directly above this section:
                                        {% endif %}
                                      



  5. Click Save.
  6. Repeat this step for every order email template you would like the address to show up for.

Tax Settings (USA ONLY)#back to top

In order for Multiship to be able to correctly gather tax information, a store located in the USA must manually set their tax settings.

  1. Navigate to Shopify Admin -> Settings -> Taxes.
  2. Uncheck the box that says "Calculate taxes automatically":
    multiship options

  3. Enter the amount of tax to charge for each state that you must charge taxes for:
    multiship options

  4. Click Save.

Finish #back to top

Congratulations! You have now successfully configured Multiship.

Make sure you do a test order to ensure everything is functioning correctly before using on a live website. If you have any question regarding installation, please open a support ticket and we will be happy to assist you.