Solved

Adding a checkbox to the checkout page

jraymond12
Tourist
3 0 1

I'm trying to add a checkbox to my checkout page (the checkbox text would be: Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?)

I've gone through the forums and found a way to add it to the code. It worked by adding it to the code but when I sent through a test order, it does not show on my end whether or not the customer selected the checkbox. 

Is there another way of doing this, so that as the shop owner I can see whether or not the customer has selected the checkbox? 

Accepted Solution (1)

Alpha_Geek
Shopify Partner
17 5 2

This is an accepted solution.

Hi jraymond12,

Please go to 'Online store' -> 'Actions' -> 'Edit code' and add this to your cart.liquid file in between the <form> </form> tags. It will appear where you place the code. And this will show up on each order in the top right:

<p class="cart-attribute__field">
  <input type="hidden" name="attributes[Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?]" value="No">
  <input type="checkbox" name="attributes[Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?]" value="Yes"{% if cart.attributes["Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?"] == "Yes" %} checked{% endif %}>
  <label>Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?</label>
</p>

 

View solution in original post

Replies 7 (7)

Alpha_Geek
Shopify Partner
17 5 2

This is an accepted solution.

Hi jraymond12,

Please go to 'Online store' -> 'Actions' -> 'Edit code' and add this to your cart.liquid file in between the <form> </form> tags. It will appear where you place the code. And this will show up on each order in the top right:

<p class="cart-attribute__field">
  <input type="hidden" name="attributes[Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?]" value="No">
  <input type="checkbox" name="attributes[Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?]" value="Yes"{% if cart.attributes["Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?"] == "Yes" %} checked{% endif %}>
  <label>Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?</label>
</p>

 

jraymond12
Tourist
3 0 1

Thank you Alpha_Geek! That worked perfectly. 

booshdaboo
Visitor
2 0 0

I am also trying to do this but I don't have the <form> </form> tags.

This is the code I have-

 

{% comment %}
The contents of the cart.liquid template can be found in /sections/cart-template.liquid
{% endcomment %}

{% section 'cart-template' %}

booshdaboo
Visitor
2 0 0

Finally got it. Tried to delete last comment but cannot, so please just ignore 🙂

MarshallUK
New Member
5 0 0

Hi would this still work now?

 

I have done a few things thinking it should have worked but It hasn't 

 

I would like to see if the customer Would You Like to Ship with Recycled Packaging and if they do or don't for it to show up on the backend of the order page ( in the database) but for some reason, I can't get this to work 

 

Hope you can help! 

 

Than You

 

Screenshot 2024-02-22 14.21.49.pngScreenshot 2024-02-22 14.20.44.pngScreenshot 2024-02-22 14.20.07.pngScreenshot 2024-02-22 14.38.01.png

Jay99wilt
New Member
5 0 0

Good day. Is it possible for you to make me a checkbox code as well? In checkout. It should be called "Bed Insurance" for R109 p/m.


Thanks in advance

MarshallUK
New Member
5 0 0

Hi I have some code here for that but I can't get it to work on the database lol 

 

Here is what I am using, you're welcome to use it and let me know how you get it to work haha 

 

CODE ONE:

<p class="cart-attribute__field">
  <input type="hidden" name="attributes[Would You Like to Ship with Recycled Packaging'?]" value="No">
  <input type="checkbox" name="attributes[Would You Like to Ship with Recycled Packaging'?]" value="Yes"{% if cart.attributes["Would You Like to Ship with Recycled Packaging'?"] == "Yes" %} checked{% endif %}>
  <label>Would You Like to Ship with Recycled Packaging'?</label>
</p>

 

CODE TWO:

{% assign field_label = "Use Recycled Packaging?" %}
{% assign required_field = false %}
{% assign position = "middle" %}
{% assign checked_value = "Yes" %}
{% assign hide_checkout = false %}

{% comment %}
Use the code below to add a link in the checkbox text

<a href='' target='_blank'>

</a>

{% endcomment %}


{% comment %} 
Do not edit the code below
{% endcomment %}

{% assign gen_id = field_label | remove: " " | strip | downcase %}

<div class="checkbox-container">
    <fieldset class="product-form__input line-item-property__field"
        data-input-type="checkbox">
        <input id="{{ gen_id }}"
            class="input-checkbox required__check {% if required_field %}required__field{% endif %}"
            form="product-form-{{ section.id }}"
            type="checkbox"
            name="properties[{% if hide_checkout %}_{% endif %}{{ field_label | strip_html }}]"
            value="{{ checked_value }}"
            data-controller-form-label="{{ field_label }}"
            {% if required_field %}required{% endif %}>
        
        <label for="{{ gen_id }}" class="form__label checkbox__label checkbox__align_{{ position }}">
            {{ field_label }}
        </label>
    </fieldset>
</div>

<style>
    .form__label {
        max-width: 37rem;
        margin-bottom: 0.6rem !important;
    }

    input[type="checkbox"] {
        cursor: pointer;    
    }
    
    .checkbox__label {
        display: inline-block;
        max-width: 85%;
    }
    
    .checkbox__align_top {
        vertical-align: top;
    }
    
    .checkbox__align_middle {
        vertical-align: middle;
    }
    
    .checkbox__align_bottom {
        vertical-align: bottom;
    }
    
    .checkbox__label > p {
        margin: 2px 0px;
    }
    
    .checkbox-container, .checkbox-container > fieldset {
        margin: 5px 0px;
    }
</style>