How to Convert Supplier CSVs to Shopify/Amazon/WooCommerce Without Uploading to a Server

javascript dev.to

Every e-commerce supplier sends files differently. One uses REF and DESIGNATION, another uses SKU and Description. Some ship XLSX with merged cells. Others hand you a UTF-16 CSV that Excel refuses to open.
The traditional solution: upload to a server, wait for parsing, hit errors, fix the file, repeat. This wastes time and exposes sensitive pricing data to a third party.
I built SKUMart — a client-side CSV/XLSX converter that auto-detects columns in 6 languages and maps them to Shopify, Amazon, WooCommerce, Etsy, or eBay. Everything happens in the browser. No upload, no server, no signup.
Here's how it works under the hood.

Why Client-Side

The decision to process everything in the browser wasn't just about cost savings (zero server bills). It's a privacy feature: supplier inventory data, wholesale prices, and margin calculations never leave the user's machine.
Technically, the app uses Papa Parse for CSV and SheetJS for XLSX, both loaded dynamically from CDN. The parsed rows are stored in a simple JavaScript array — no WebAssembly, no worker pool, just plain array operations that complete in under 50ms for typical supplier files.

Auto-Detection — The Hard Part

The core challenge: a column header like DESCRIPTION could map to description, body_html, or short_description depending on the target platform. A French supplier's PRIX_ACHAT needs to become price. A German BEZEICHNUNG should map to title.
The detector works by building a keyword map for each target field across all 6 supported languages (EN, FR, DE, ES, IT, ZH). Each source header is scored against every target field using a simple weighting system:

function scoreHeader(header, targetField, lang) {
  const keywords = targetField.keywords[lang] || targetField.keywords.en;
  const headerLower = header.toLowerCase().replace(/[^a-z0-9]/g, '');
  let score = 0;
  for (const kw of keywords) {
    if (headerLower === kw) score += 10;
    else if (headerLower.includes(kw)) score += 5;
    else if (kw.includes(headerLower)) score += 3;
  }
  return score;
}
Enter fullscreen mode Exit fullscreen mode

The highest-scoring pair wins. If no confident match is found, the column is flagged for manual mapping. This approach handles 90%+ of supplier files out of the box.
The Mapping Engine
Once columns are detected, users can override the auto-map or build custom mappings. The engine supports 5 e-commerce schemas out of the box:

  • Shopify: 40+ fields (title, body_html, variants, images, metafields)
  • Amazon Flat File: 30+ fields (SKU, ASIN, price, quantity, fulfillment)
  • WooCommerce: 25+ fields via CSV import spec
  • Etsy: 20+ fields (listing, inventory, shipping)
  • eBay: 30+ fields (item specifics, variations, shipping) Each schema is a JSON file defining field names, data types, and validation rules. The mapper walks source → target assignments and applies type coercion (string → number, date formatting, etc.) before export. The entire app stays under 200 KB gzipped by avoiding heavy UI libraries. It's built with Preact + htm (no JSX build step) and styled with Tailwind CSS v4. Export & Practical Considerations Export uses the standard Blob + download API. No server round-trip — just an ephemeral <a> click with URL.createObjectURL(). The free tier handles 50 rows, enough to validate the mapping before committing. Column mapping profiles can be saved and reused, which is useful when the same supplier sends weekly inventory files with identical headers. Try It If you deal with supplier files regularly, you might find this useful. SKUMart handles all of this out of the box — just drop a file and export.

Source: dev.to

arrow_back Back to Tutorials