1. Copy the combined snippet
Open your project, switch to Code, and copy the complete output. Do not split the markup, styles, and runtime.
2. Open the product template
In Shopify Admin, go to Online Store → Themes. Duplicate the theme you intend to edit, then choose Customize and open the relevant product template.
3. Add Custom Liquid
Inside the main Product information area, add a Custom Liquid block. Position it above the primary Buy buttons block so the bridge can score the correct product scope.
4. Paste and save
Paste the generated snippet without wrapping it in another <form>. Save the duplicate theme and open a product that uses this template.
5. Run the test checklist
Test Add to Cart and Buy It Now while required fields are empty and completed. Check the cart line item and a Shopify test order. Custom themes and sticky purchase bars can require a tailored adapter.