ShopBox

When Shopbox reached out to Webyansh, they were facing several development issues that were preventing them from delivering a memorable customer experience. Their existing website was built on an outdated tech stack, making it difficult and time-consuming for their internal team to update content or add new features.

One of the most important features missing was a shipping cost calculator and shipment tracker. These were essential for their customers to estimate shipping costs and delivery time directly on the website.

Also, despite having a new design prepared by another designer, the developer they initially hired was unable to create a pixel-perfect replica of this design. Additionally, the design only accounted for the desktop version, leaving the website without a mobile-friendly version.

To address these challenges, our goal was to:
⬥ Ensure a pixel-perfect replica of the existing design
⬥ Develop a seamless cost calculator & shipment tracker
⬥ Implement a fully responsive design for both desktop and mobile users

Shopbox trusted us with this delicate task because of our proven experience in delivering high-quality web development solutions.

Shopbox wanted to offer complete transparency on the pricing of their services. Hence, an Ocean and Air Freight Calculator was at the centre of their revamp plans.

They provided us with item category data in a spreadsheet format along with specific formulas for calculation.

Here are the best features of the calculator :-

• CMS Integration: We imported the item category data from Shopbox’s spreadsheet into their CMS. This setup allows Shopbox’s team to update the data at any time.

• Automatic Conversion and Calculation: To enhance usability, we implemented automatic conversion between kilograms (kg) and pounds (lbs) based on user input. This feature simplifies the process for customers, ensuring that they can input weight data in their preferred units without manual conversions.
• Static UI Design Using Webflow: For the user interface, we opted for a static design using Webflow. This decision not only streamlined development but also ensured a clean and intuitive interface for users interacting with the calculator.

Here’s the backend workflow of the calculator :-

1. Item Selection: The process begins with customers selecting an item from a list provided in the CMS, which is then populated into a dropdown menu.
2. Inputting Details: Customers enter the item’s cost in $US and its weight in either Lbs or Kg. If the weight is entered in one unit, the corresponding value in the other unit is automatically calculated and displayed.
3. Calculating Costs: Based on the selected item and entered details, we perform a series of calculations for various charges, including Item Duty, Freight Rate, Fuel Surcharge, Handling Fee, Insurance, and Duties. These are computed using precise formulas provided by ShopBox.
4. Displaying Results: The calculated values are then dynamically shown in the UI, with both $US and $EC values displayed clearly. A ‘Clear’ button is also provided to reset all fields.

We used JavaScript DOM manipulation to bring this feature to life. By attaching a ‘click’ event listener to the ‘Calculate’ button, we ensure that the calculations are performed accurately and the results are updated in real-time on the UI.

With this brand-new calculator feature, Shopbox was able to offer transparent pricing for its customers and add another star to their user experience.

A reliable shipment tracker was one of the key requirements of Shopbox when they reached out to us. However, they weren’t sure how to capture and display the tracking data effectively. Since the feature was important to improve the user experience, we took on the challenge and came up with a solution.

API Integration

1. Current status of the package (with date and time)
2. Previous location
3. Carrier used (like Bluedart
4. Shipping and delivery times
   ‍

Designing the User Interface

Using Webflow, we crafted a user-friendly progress bar that visually represents the shipment’s journey. This feature allows customers to easily track their package’s status with just a glance.

For those who want more details, we included an option to view the complete tracking history. A simple click redirects them to packagetrackr.com, with the tracking number already filled in, making the process seamless and convenient.

Backend Workflow
ted data containing the package’s status and related information. The fetched data is then parsed and dynamically updated in the UI using the querySelector method to ensure accuracy and responsiveness.

By developing this seamless tracker, we helped Shopbox not only meet their requirements, but also significantly improve their user experience.

‍

Backend Workflow

To build these functionalities, we used the fetch method in JavaScript for API calls to “kd100”. This method efficiently retrieves JSON-format

Webflow Migration & Technical SEO

• Migrated to Webflow’s performant hosting → 40% faster page loads (LCP <2.5s)
• Implemented mobile-first design and optimized Core Web Vitals
  ‍

Domain Authority & Visibility

• Authority Score rose to 9 (from ~1)
• Semrush Domain Rank improved from ~3.2M to ~1.8M

‍Top Keywords (US market):

• “shop box” – Position 1 (210 vol/mo) – 39% of all organic traffic
• “shopbox” – Position 2 (480 vol/mo) – 47% of all organic traffic
• “customs duty calculator st lucia” – Position 3 (30 vol/mo)
  ‍

Geographic & Market Share

• Traffic Share (US): 34% (134 visits/mo)
• Denmark: 20% (78 visits/mo)
• India: 16% (65 visits/mo)
• Global Market Share vs. Competitors: 39% of total category traffic

Backlink Profile

• 2,600+ total backlinks (from 92 domains)
• Follow vs. Nofollow: 2,600 Follow | 27 Nofollow