Add a form (or additional fields) to checkout

Tourist
15 0 0

Hi!

 

I would like to collect additional details at checkout (ex. instructions for the vendor).  I tried creating a new page and inputing the HTML of a google form but 1) it doesn't look too attractive 2) im not sure how to insert it into the checkout flow.

 

Thanks!

0 Likes

I'm fairly confident this is what you're after.

1. Navigate to "Edit Code" interface (guide article) and then open the product-template.liquid file.
2. Insert the following code snippet....

 <input class="additional-field" type="text" name="properties[Additional Field]">

...  anywhere between these two elements.

{% form %}
...
{% endform %}

NOTE: You will need to change the <input> element depending on what you require.


Let me know how you go with it. 

Was my answer helpful? Be sure to give it a "Like" and mark it as the solution - this way others can find it easily.
- Need help with a Shopify build or custom solution? Feel free to get in touch via hello@stonedigital.com.au !
- Did my reply help solve your problem? The above email is my Paypal too ʘ‿ʘ
0 Likes
Tourist
15 0 0

Hmmm i added the line of code but it doesnt seem to have updated on any of the pages.  I didnt alter the text at all because I just wanted to see where it would show up.

 

0 Likes

Can you send thru the URL? You likely inserted the <input> in an already hidden field.

Was my answer helpful? Be sure to give it a "Like" and mark it as the solution - this way others can find it easily.
- Need help with a Shopify build or custom solution? Feel free to get in touch via hello@stonedigital.com.au !
- Did my reply help solve your problem? The above email is my Paypal too ʘ‿ʘ
0 Likes
Tourist
15 0 0

snippet of the code:

{% comment %}
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% endcomment %}
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>

<input class="additional-field" type="text" name="properties[Additional Field]">

{% endform %}
</div>

 

0 Likes

It's a bit strange that parts of your form are commented out - shown by {% comment %} {% endcomment %}

I would adjust your code snippet as shown below. Which is 1) moving the input above the "submit" button and 2) removing {% comment %} tags

 

<input class="additional-field" type="text" name="properties[Additional Field]">

<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}
</div>

 

 

 

Was my answer helpful? Be sure to give it a "Like" and mark it as the solution - this way others can find it easily.
- Need help with a Shopify build or custom solution? Feel free to get in touch via hello@stonedigital.com.au !
- Did my reply help solve your problem? The above email is my Paypal too ʘ‿ʘ
0 Likes
Tourist
15 0 0

ahhh that's because I removed the add to cart functionality (on purpose) to only keep the Buy It Now function.  Given that, where would you recommend I put the input?  I can't seem to find the fields relating to Buy It Now..

 

0 Likes