ShopBox

When ShopBox partnered with Webyansh, the company was facing several development challenges that prevented it from delivering the seamless customer experience it envisioned. Their existing website was built on an outdated technology stack, making content updates and feature enhancements difficult and time-consuming for their internal team.

One of the most critical missing features was an integrated shipping cost calculator and package tracking system. These tools were essential for allowing customers to estimate shipping costs and delivery timelines directly from the website.

In addition, although a new website design had already been created by another designer, the original development team was unable to deliver a pixel-perfect implementation. The design was also limited to desktop, leaving the website without a responsive mobile experience.

Project Objectives

To address these challenges, our goals were to:

• Deliver a pixel-perfect implementation of the approved website design.
• Develop a seamless shipping cost calculator and package tracking system.
• Build a fully responsive website optimized for desktop, tablet, and mobile devices.

ShopBox entrusted Webyansh with this critical project because of our proven expertise in delivering high-quality, scalable, and performance-driven Webflow 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