I have a Shopify headless theme and I want to add a Shopify code form. Is there a plugin for this or how can I do it myself?
COD (Cash on delivery) within Shopify is already active, but I want to add something like plugins like easycellCOD.
Topic summary
A developer working with a Shopify headless theme (Next.js) sought to implement a custom Cash on Delivery (COD) form, similar to plugins like easycellCOD, while COD was already enabled in their Shopify backend.
Solution implemented:
- Added a frontend COD button that triggers a custom form for collecting user information
- Used the Storefront API to capture form data
- Redirected users to Shopify’s native checkout page with pre-filled information
- Users complete the purchase by selecting the COD option at checkout
Shipping fee workaround:
- Created an empty product with its price set to the shipping cost
The developer successfully resolved their issue and expressed interest in learning alternative approaches from the community. The discussion remains open for additional implementation suggestions.
Thank you! I found a solution like this: I added a ‘Cash on Delivery’ (COD) button on the frontend. When the user clicks this button, a form appears where they can enter their information. After submitting the form, I redirected them to Shopify’s checkout page. Since the necessary information was already collected through the form, the user only needs to select the ‘Cash on Delivery’ option at checkout.
To add a shipping fee, I created an empty product and set its price as the shipping cost.
Here’s the flow:
- The user visits the site.
- Clicks the ‘Cash on Delivery’ button.
- Fills out the form.
- The form data is captured using the Storefront API.
- The user is redirected to the Shopify checkout page.
- On the checkout page, the user selects the ‘Cash on Delivery’ option.
- The order is then recorded in the Shopify admin panel.
This is the method I followed. I’d also love to hear how you approached it!