Checkbox on Cart Drawer (Horizon Theme)

Hey there,

i would like to add a checkbox on the cart drawer (just above the total value element)

The customers are given the chance to get a free scoop (not an active product) to their order.

If checked it should say something like ‘Scoop: Yes’ in the Order note.

Any idea on how to realize this?

Online Store → Three Dots → Edit Code

Find this file and open it:

Find this exact place:

Paste this code and save:

  <div class="free-scoop-attribute" style="margin-bottom: 12px;">
  <span style="display: block; font-size: 1rem; margin-bottom: 6px;">Free Scoop</span>
  <label style="display: flex; align-items: center; gap: 8px; font-size: 1rem; cursor: pointer;">
    <input
      type="checkbox"
      name="attributes[Free Scoop]"
      value="Yes"
      form="cart-form"
      {% if cart.attributes['Free Scoop'] == 'Yes' %}checked{% endif %}
      style="width: 18px; height: 18px; cursor: pointer;"
    >
    <strong>Yes</strong>
  </label>
</div>

Note: this will be visible on cart drawer and cart page, but not in checkout. It will appear in Orders as this:

Thank you soooo much! :slight_smile:

You made my day! Thanks alot!

Do you maybe also know how to add this exact field to the orderprinter documents ? :smiley:

If you have access to the code you can try this. Add this somewhere you think makes sense.

{% if order.attributes['Free Scoop'] != blank %}<p><strong>Free Scoop</strong></p>{% endif %}

You can change this text to whatever you want.

If that doesn’t work try

{% if order.cart_attributes['Free Scoop'] != blank %}<p><strong>Free Scoop</strong></p>{% endif %}

First one worked like a charm! Thank you so much man <3