Adding custom field to Debut theme

[Ben_Spells]

Hi all,

I'm trying to add a field to product pages where customers can input their initials for a monogram.  I have successfully gotten the field on the page, however, it's misaligned and I have no idea how to fix it.  I thought I would be able to create an HTML table to have each variant in a dropdown but that hasn't happened as I'm not too skilled in HTML and I'm clueless with the liquid tags and all.  Any help would be appreciated, I'm working in the Debut theme.

[Jason]

Hey Ben,

Your storefront is currently locked so the forum members won't be able to see your site. Since this is a visual / design question it's really important to be able to view the site live. Without that, everyone would just be guessing at what you might need.

Consider posting your storefront (not Admin) password along with a link to a product that has the monogram field in place. 

[Ben_Spells]

Hi Jason,

I'm so sorry. That totally slipped my mind. https://sequins-lipstick-paper-co.myshopify.com/products/birthday-napkins   The storefront password is gleesk. Thanks so much for your help. 

[tim]

Now, the <div> you've added can be assigned class product-form__item, and the actual input can be assigned class product-form__input, so entire <div> looks like

<div class="product-form__item">
  <label for="monogram">Monogram (First-Middle-Last)</label>
  <input required="" type="text" id="monogram" name="properties[Monogram]" maxlength="3" class="product-form__input">
</div>

and things will straighten up a little.

[Ben_Spells]

Hi Tim,

Thanks so much for your help! That worked like a charm.  Happy New Year!

[Motiongg]

Where to add this code?