Shopify Developer Needed for Custom Drag-and-Drop Product Personalization Builder & Checkout

Posted 6 days ago

Worldwide

Summary

I need a developer to build a custom multi-step product personalization tool for my Shopify store. Customers should be guided through the following process: 1) Select a product, 2) Choose a color, 3) Add a name or message, 4) Upload a photo, and 5) Review and confirm. The tool should be user-friendly and visually appealing, with clear instructions at each step. The final product should be a fully functional, customizable Shopify app. We are building a Shopify store where customers can personalise products such as pencil cases by arranging iron-on patches onto them. The complete customer journey has already been detailed Figma files will be provided. I am looking for an experienced Shopify developer to turn these ideas into a fully functional, responsive product builder. Customer journey: The builder should guide customers through the following steps: 1 Choose a base product Select a blank product, such as a tote bag or pencil case, including its available colour or style. 2 Choose patches Browse a visual patch library and add patches to the design. Customers should be able to filter or search the library, and only in-stock patches should be selectable. 3 Arrange the design Drag, rotate, and position patches directly on a visual preview of the selected product. The experience must work with both mouse and touch controls. 4 Review the design Review the finished product, return to previous steps and make changes before confirming. 5 Add to cart and checkout Add the complete customised product to Shopify’s cart with the correct price based on the selected base product and patches. 6 Order Email Would also be cool if they had an image of the custom product they ordered in their order email Shopify product and inventory requirements: Each base product and each individual patch should exist as a Shopify product or variant so that inventory can be managed through Shopify. The builder should: - Display current Shopify availability - Prevent customers from selecting out-of-stock items - Correctly deduct inventory for the base product and every patch included in an order - Calculate the total using the price of the base product plus the selected patches - Keep the customised design grouped clearly in the customer’s cart and order - Send us the final image of the customisation so that we can produce it for the customer. I am open to the developer recommending the most reliable Shopify-compatible structure for handling the parent customised product and its individual inventory-tracked components. Order and production information: Once an order is placed, I need enough information to recreate the customer’s design accurately and iron the patches onto the product. The order should include: - Selected base product and variant - Selected patches and quantities - Exact position of each patch - Rotation of each patch - Scale or size information where applicable - Final design preview Ideally, the completed design will be saved as: A clear preview image accessible from the Shopify order, which has a to-scale grid. That we can place over the real product in person to place the patches exactly where they need them. The preview and data must remain accessible to me after checkout. Additional requirements Responsive across desktop, tablet and mobile [Testing across modern browsers and mobile devices] Smooth drag-and-drop and touch interactions Integration with the existing Shopify cart and checkout Clear loading, validation and error states Clean, maintainable and documented code Source code and deployment instructions supplied at handover Stock Tracking for each element Basic post-launch support for resolving implementation issues When applying, please share examples of any Shopify configurators, custom product builders, canvas editors or similar interactive tools you have developed. Please also explain what parts of those projects you personally completed. Please begin your proposal with the words “Product Builder” so I know you have read the full brief :) I have attached a example image of the flow mocked up in Figma, the design is not accurate to the site, this was just to figure out the flow/screens I'd want. I have set up an hourly budget, but would be happy to do it as one 'fixed rate' project too.

  • Hours to be determined
    Hourly
  • 1-3 months
    Duration
  • Intermediate
    Experience Level
  • $8.00

    -

    $18.00

    Hourly
  • Remote Job
  • Ongoing project
    Project Type
Skills and Expertise
Mandatory skills
Shopify
Shopify Templates
Nice-to-have skills
BigCommerce
HTML
Activity on this job
  • Proposals:15 to 20
  • Last viewed by client:4 days ago
  • Interviewing:
    0
  • Invites sent:
    0
  • Unanswered invites:
    0
About the client
Member since Jul 16, 2026
  • South Africa
    12:56 AM
  • Art & Design
    Individual client

Explore similar jobs on Upwork

Squarespace
Web Design
Graphic Design
CSS
HTML
Website Optimization
Wix
Shopify Templates
Web Design
Web Development

How it works

  • Post a job icon
    Create your free profile
    Highlight your skills and experience, show your portfolio, and set your ideal pay rate.
  • Talent comes to you icon
    Work the way you want
    Apply for jobs, create easy-to-by projects, or access exclusive opportunities that come to you.
  • Payment simplified icon
    Get paid securely
    From contract to payment, we help you work safely and get paid securely.
Want to get started? Create a profile

About Upwork

  • Rating is 4.9 out of 5.
    4.9/5
    (Average rating of clients by professionals)
  • G2 2021
    #1 freelance platform
  • 49,000+
    Signed contract every week
  • $2.3B
    Freelancers earned on Upwork in 2020

Find the best freelance jobs

Growing your career is as easy as creating a free profile and finding work like this that fits your skills.

Trusted by

  • Microsoft Logo
  • Airbnb Logo
  • Bissell Logo
  • GoDaddy Logo