Shopify (Dawn): block "Embroidery/Monogram" in the product card + saving in line item properties

Need a Shopify developer (Liquid/JS/CSS) for the Dawn theme (Online Store 2.0).

Goal: create an “Embroidery / Monogram” block on the product page (PDP) like in the example (card in the right column), which opens the embroidery settings panel. Embroidery is free (the product price does not change), but the selected parameters should go into the order as line item properties.

Where the block should be

• Inside Product information on the product page

• As a block, not a separate section

• Location: below the Quantity selector, before the Buy buttons

  
  

  UI/Functionality

In collapsed form (card):

• Title: “Add Your Monogram”

• Subtitle: “Personalize with elegant hand-finished embroidery”

• Badge on the right: “COMPLIMENTARY”

• Button/link: “Configure”

When clicking Configure:

• A drawer/modal opens

  • Desktop: drawer on the right

  • Mobile: bottom-sheet or full-screen panel

  
  

• Mandatory:

  • scroll inside (content should not be cut off)

  • close by X and by clicking on overlay

  • the block should not “stick” open

  
  

  
  

Inside the drawer steps:

1. Location selection (radio):

   • Top Right Corner

   • Bottom Right Corner

   • Top Left Corner

   • Bottom Left Corner

   
   

2. Embroidery text

   • max 10 characters

   • counter 0/10

   • validation: minimum 1 character (if “No, thanks” is not selected)

   
   

3. Font selection

   • 6 options (01–06)

   • Important: buttons are not just names, but previews “ABC” like on the embroidery machine screen

   
   

4. Thread color

   • swatches (circles) + label/tooltip

   • colors:

     • Cream #F5EFE3

     • Deep Ecru #D8C3A5

     • Ivory #F7F1E6

     • Cloud #B9B5AE

     • Dusty Navy #2F4E73

     • Baby Blue #7FB2D8

     • Light Mint #CFE8D8

     • Khaki #8A7B6A

     • Winterberry #A3182E

     • Red #D1122E

     • Pink #F2B6C6

       
       

     
     

Buttons:

• “No, thanks”

• “Cancel”

• “Save”

After Save:

• summary is displayed (text + location + font + color)

• Edit / Remove buttons

What should go into the order (line item properties)

Must be recorded in the product form (through hidden inputs or otherwise correctly):

• properties[Embroidery Text]

• properties[Embroidery Location]

• properties[Embroidery Font]

• properties[Embroidery Thread Color]

If “No, thanks”:

• Embroidery Text = "No, thanks"

• other fields can be left empty

Technical requirements

• Dawn / OS 2.0

• Implementation as a block in sections/main-product.liquid (schema + output through case block.type)

• Render through snippet snippets/embroidery-block.liquid

• JS without eval, without violating CSP, scoped selectors (to avoid breaking with multiple blocks)

• Responsive 320px+, drawer: max-height: 90vh; overflow-y: auto

• Do not break the standard add-to-cart Dawn, no errors in the console

Result

• Code integrated into the theme + testing on Desktop/Mobile

• I will check: saving settings → adding to cart → properties visible in cart item and in order

  
  

Please, in your response

• send 2–3 examples of Shopify work (Dawn/OS2.0)

• time/cost estimate

• confirm that you have done custom line item properties