Skip to content
Bearded Coder

Case study · Scorebuilders

Shopify Migration, Custom Checkout & Automated Discounts

Store migration to Shopify with a storefront built from Figma designs, a custom Checkout UI Extension, a custom app and automatic discounts based on customer segments.

Engagement
Migration & storefront build
Design source
Figma
Checkout
Custom Checkout UI Extension
Pricing
Segment-based automatic discounts

Business context

Scorebuilders moved its e-commerce store to Shopify. The project combined a data migration, a new storefront built from Figma designs, and checkout and pricing features that go beyond what Shopify does by default.

Migration requirements

The migration involved data mapping, Shopify store configuration and validation for:

  • Customer accounts
  • Historical orders
  • Product categories
  • Discounts
  • Content pages

Figma-to-Shopify storefront implementation

The storefront was designed and developed from Figma designs. UI specifications became responsive storefront components built with Shopify Liquid, HTML, CSS and JavaScript, so the theme is something merchants can manage instead of a static copy of the design.

Checkout UI Extension

A custom Shopify Checkout UI Extension was built for specialized checkout functionality. It uses Shopify's supported checkout extensibility instead of changing checkout directly.

Customer segmentation & automatic discounts

Automatic discounts based on customer segments were implemented to support targeted pricing and promotions. Eligible customers get the right pricing without having to enter discount codes by hand.

Technical implementation

A custom Shopify application extends native Shopify capabilities where the store's requirements needed it. The diagram shows how the migration, storefront, checkout and pricing pieces fit together.

Architecture

Migration and commerce flow

  1. 1WordPress

    Legacy Store Data

    Customers, orders, categories, discounts and pages

  2. 2Migration

    Data Mapping & Validation

    Mapped to Shopify structures and checked

  3. 3Figma → Liquid

    Shopify Storefront

    Responsive components built from the designs

  4. 4UI Extension

    Extended Checkout

    Specialized checkout functionality

  5. 5Customer segments

    Segment Discounts

    Automatic discounts for targeted pricing

Store data is mapped and validated into Shopify. A storefront built from Figma leads into a checkout extended with a custom UI extension and segment-based automatic discounts.

Technologies

  • Shopify
  • WordPress
  • Figma
  • Shopify Liquid
  • JavaScript
  • Checkout UI Extensions
  • Custom Shopify App
  • Customer Segments
  • Data Migration

My contribution

The sections above describe the project as a whole. This list covers only the work I did myself.

  • Handled the technical migration work: data mapping, Shopify store configuration and validation.
  • Designed and developed the Shopify storefront from Figma designs.
  • Turned UI specifications into responsive storefront components using Liquid, HTML, CSS and JavaScript.
  • Developed a custom Shopify Checkout UI Extension for specialized checkout functionality.
  • Built a custom Shopify application to extend native Shopify capabilities.
  • Implemented automatic discounts based on customer segments to support targeted pricing and promotions.

This case study is a high-level summary. It contains no confidential client data, credentials, internal metrics or private screenshots. Scorebuilders and other names are trademarks of their respective owners.

Working on something similar? I'd be glad to hear about it.

Email meContact options