🚀 HKLongd Partner Widget: Installation Guide🚀

Thank you for partnering with HKLongd to reach your international customers! This guide will show you how to add the "International Shipping" button to your Shopify store in less than 2 minutes.

Step 1: Open Your Theme Editor

1. Log in to your Shopify Admin.

2. Online Store > Themes > Edit theme/Customize 
   

Step 2: Add the Widget to your Product Page

1. At the top of the Theme Editor, Products > Default product.

2. Product Information > Add block > Custom Liquid
   

3. Drag and drop the Custom Liquid block directly underneath the "Buy buttons" block.

4. Paste the code into the box and click Save.

🛡️ How to Verify This Code is Safe

We believe in total transparency. If you have an IT team, they can review the code in seconds. If not, you can use AI to verify it for you:

1. Copy the entire code block below.

2. Go to ChatGPT or Gemini.

3. Paste the code and ask: "Explain what this code does and if it's safe for my Shopify store."

4. The AI will confirm:

   • ✅ Read-only access: It only reads your cart contents when clicked.

   • ✅ No Payment Data: It never touches your checkout or credit card systems.

   • ✅ Secure Redirect: It simply opens our secure portal in a new tab.

   • ✅ Customer-Triggered: It only runs if the customer actively clicks the button.

📦 The Code Snippet

{%- comment -%}
  HKLongd Worldwide Shipping Widget - Universal Version
  Instructions: Paste this into a "Custom Liquid" block in your Theme Editor.
{%- endcomment -%}

<div id="hklongd-shipping-widget" style="margin-top: 20px; width: 100%; border-top: 1px solid #e8e8e8; padding-top: 15px;">
  <p style="font-size: 13px; color: #666; margin-bottom: 10px; font-family: var(--font-body-family); line-height: 1.4;">
    Ready to ship internationally? <strong>Once all items are in your cart</strong>, click below to finalize your order via our HKLongd Partner Portal.
  </p>
  
  <button id="hklongd-btn" 
     style="
      display: block; width: 100%; padding: 18px 10px; background: #ffffff; 
      color: #000; border: 2px solid #000;
      border-radius: 4px; font-family: var(--font-body-family);
      text-align: center; font-weight: 700; font-size: 15px; cursor: pointer;
      transition: opacity 0.2s; -webkit-appearance: none;
     ">
    International Shipping powered by hklongd.com
  </button>
</div>

<script>
(function() {
  const btn = document.getElementById('hklongd-btn');
  if (!btn) return;

  btn.addEventListener('click', function(e) {
    e.preventDefault();
    const originalText = "International Shipping powered by hklongd.com";
    btn.innerText = "Connecting to HKLongd...";
    btn.style.opacity = "0.5";

    fetch(window.Shopify.routes.root + 'cart.js')
      .then(res => res.json())
      .then(cart => {
        if (cart.item_count === 0) {
          alert("Your cart is empty! Please add items before shipping internationally.");
          btn.innerText = originalText;
          btn.style.opacity = "1";
          return;
        }

        let params = new URLSearchParams();
        params.append('partner', "{{ shop.name | escape }}");

        cart.items.forEach((item, index) => {
          if (index < 10) {
            let details = `${item.product_title} (${item.variant_title}) x ${item.quantity}\n`;
            details += `Brand: ${item.vendor}\n`;
            details += `Price: ${(item.price / 100).toFixed(2)} ${cart.currency}\n`;
            details += `Link: ${window.location.origin}${item.url}`;
            params.append(`item${index + 1}`, details);
          }
        });

        const targetUrl = `https://hklongd.com/products/partner-shipping-portal?${params.toString()}`;
        window.open(targetUrl, '_blank');
        
        btn.innerText = originalText;
        btn.style.opacity = "1";
      })
      .catch(err => {
        console.error("HKLongd Error:", err);
        alert("Could not reach the cart. Please try again.");
        btn.innerText = originalText;
        btn.style.opacity = "1";
      });
  });
})();
</script>

Step 3: Test the Installation

1. Visit your website as a customer.

2. Add few products to your cart.
   

3. Click "International Shipping powered by hklongd.com".

4. All items from your cart should appear in the request form.

Need help? Contact us at 📧 info@hklongd.com