How to add a checkbox to the checkout page and show up in the backend

Technical Q&A
1

Hi all, thank you for reading & trying to help!

I am trying to add (already done) a checkbox for customers to click on the checkbox on the checkout page, but it doesn’t show up in the backend for some reason.

I have tried a few ways, from going to the main code of the website and couldn’t find the file/code where to put it, so I made a Custom Liquid field and put it in there, it does show up on the main website but again not in the backend.

If you can help me with what to do that would be amazing!

Here are some images to back up what I am saying

Thank you, People! :heart:

Here is the code(s) I have been trying to use.

Code Attempt 2
Code Attempt 2408×531 25.1 KB

Code Attempt 1
Code Attempt 1384×472 13.3 KB

Where I put the code
Where I put the code422×457 17.8 KB

What it looks like
What it looks like951×291 16.2 KB

<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>

{% 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>
2

Hi there, are you on Shopify Plus? This is the only plan that you can edit the checkout page, using either legacy Scripts/checkout.liquid customizations - or via Checkout UI Extensions, etc.

Cheers.

WhiteWater Web

3

Thank you for getting back to me! :heart:

Yes they have +, I’m a dev myself but don’t use Shopify and a mate of mine has come to me with their account and given me access to see if I can do it, I did what I said above but nothing seems to be working on the database side (Not showing up if a customer clicked).

The code(s) I have used should be working I just don’t know where to add this to the database

4

Also, I don’t need at the checkout, could be on the product page or the shopping cart page, just as long as they can see the customers click or not