How can I add custom form fields to a product template using CSS?

Store Design
,
1

Hello, I am trying to add custom form fields to a specific product template. For example, the item has various weights, and weight is the only variant. But it does have many custom options.

Underneath the variant, I would like to have pull down menus as custom options

TIP TYPE - drop down selector which appears with the product at checkout

GRIP TYPE - drop down selector which appears with the product at checkout

SPECIFIC INSTRUCTIONS - Additional notes multiline text box.

I would like these to use the standard DAWN (latest) template CSS. Any help would be appreciated.

I would also like these to comply with the standard CSS template design.

Could someone please point me in the right direction? I’m quite new to this.

2

I’ve added a screen shot of what I’m attempting to achieve. Ass you can see the CSS properties aren’t inherited.

Screen Shot 2023-01-06 at 12.29.15 PM.png
Screen Shot 2023-01-06 at 12.29.15 PM.png376×1240 95.4 KB

3

One way is to use an add on app. An app I use for my day job is called Live Product Options by Cloudlift, and is very capable of achieving this with weights assigned to custom option selections through dropdown/select fields. It is VERY reasonably priced especially considering other competitor apps. Shoot me a message if you need additional help, as I would be happy to take on the job on the side.