Retrieve B2B Saved Addresses in Multiship

Giftship’s multiship feature was originally designed to help customers send gifts to friends and family. If a customer is signed into your store, their saved addresses automatically appear in the address dropdown menu on the multi-address proxy page. However, for B2B customers, addresses are stored separately under their associated company locations. This guide shows you how to retrieve and display those B2B addresses using JavaScript.

Important Note: This is an advanced tutorial designed for qualified Shopify developers with JavaScript experience. If you’re not working with a developer and need assistance, we can implement this for a flat fee of $100 USD. Payment can be made at: https://shop.gist-apps.com.

Step 1: Duplicate Your Live Theme

Before making any changes, duplicate your live theme to ensure your live store remains unaffected.

Step 2: Create and Upload the Snippet

  1. In your theme, go to the Snippets folder.
  2. Create a new file named gs-company-addresses.liquid.
  3. Copy and paste the code below into the new file.
{% if customer.b2b? and request.path contains 'a/gs/cart' %}
  <script>
    (function() {
      
      var gsCompanyAddresses = {

        init: function() {
          this.hideExistingAddressOptions();
          this.populateCompanyAddresses();
        },

        hideExistingAddressOptions: function() {

          var existingAddressOptions = document.querySelectorAll(".gs__saved-address-item");

          existingAddressOptions.forEach(function(addressOption) {
            addressOption.style.display = "none";
          });
          
        },

        getCompanyAddresses: function() {

          var addresses = [];

          {% for location in customer.company_available_locations %}
            {% if location.shipping_address %}
              {% assign address = location.shipping_address %}
              var address = {{ address | json }};
              var completeAddress = "{{ address.first_name }} {{ address.last_name }}{% if address.company != "" and address.company != null %} {{ address.company }}{% endif %}, {{ address.address1 }} {{ address.address2 }}, {{ address.city }}, {{ address.province }}, {{ address.country }}, {{ address.zip }}";
              address = {
                ...address,
                address: "{{ address.address1 }}",
                address2: "{{ address.address2 }}",
                complete: completeAddress,
                display: completeAddress
              };
              addresses.push(address);
            {% endif %}
          {% endfor %}

          return addresses;
          
        },

        populateCompanyAddresses: function() {
          var addresses = this.getCompanyAddresses();
          localStorage.setItem('gs_saved_addresses', JSON.stringify(addresses));
        }

      };
    
      gsCompanyAddresses.init();
    })();
  </script>

{% endif %}

Step 3: Include the Snippet in theme.liquid

  1. Open your theme.liquid file.
  2. Scroll to the bottom of the file, just above the closing </body> tag.
  3. Paste the following code:
{%- render 'gs-company-addresses' -%}

Step 4 (Optional): Prevent Customers from Adding New Addresses

If you’d like to restrict customers from adding new addresses on the multiship page:

  1. Edit the same gs-company-addresses.liquid snippet.
  2. Add the following style block:
<style>
  #gsMultishippingPage .gs__set-shipping-address {
    display: none !important;
  }
</style>

If you have any questions or need assistance, feel free to contact our support team.

Can't find the answer in our documentation?
Contact Support