On form submit add product to cart

New Member
7 0 0

I'm adding a gift boxing section to my cart page, where I want to collect information about what the gift box name is, what products from the cart are included and if they want a gift note. I have built the form which collects the cart attribute information, but I need it to add value to cart as we charge £4 for gift boxing, currently, it just collects the information. I need the form to have a submit button which when clicked adds value to the total cart value, either adding the value directly or adding a product to cart on submit. I also allow multiple boxes to be added so each time a section is added and the submit is clicked it adds 4 pounds.


{% for item in cart.items limit:1%}
 {% if item.product.tags contains 'Can Be_Gift Boxed' %} 
<div class="gift-box-section">
      <button type="button" id="myCheck" onclick="myFunction()" name="attributes[Gift Box My Items]" value="Gift Box My Items"{% if cart.attributes["Gift Box My Items"] == "Gift Box My Items" %} checked{% endif %} class="Button Button--primary Button--full" data-text-swap="Cancel Gift boxing">
              <span>Gift Box My Items</span>
      <div class="giftboxsection" id="giftboxsection" style="display:none">
        <input type="hidden" name="id" value="{{ gift-box-1 }}" />
  <input min="1" max="1" type="hidden" id="quantity" name="quantity" value="1"/>
        <div class="giftbox duplicate-sections">
          <div class="form-section">
          <h2 class="muli Heading u-h4">Gift Boxing</h2> 
          <div class="giftproducts">
            <p class="cart-attribute__field">
              <label for="gift-box-name" style="display:block;padding:10px 0;">Name:</label>
              <input id="gift-box-name" class="Form__Textarea" style="width:150px;"type="text" name="attributes[Gift Box Name]" placeholder="e.g Birthday Gift" value="{{ cart.attributes["Gift Box Name"] }}">
            <p class="cart-attribute__field">
              <label>Which items would you like inside? ( Max 3 items )</label><br>
              {%- for line_item in cart.items -%}
                {% if item.product.tags contains 'Can Be_Gift Boxed' %}
              <input required class="required single-checkbox" type="checkbox" name="attributes[Which items would you like inside?]" value="{{ line_item.product.title }}"{% if cart.attributes["Which items would you like inside?"] == "{{ line_item.product.title }}" %} checked{% endif %}>
              <span><img class="CartItem__Image" src="{{ line_item.image | img_url: '60x' }}" alt="{{ line_item.image.alt | escape }}"></span>
              <span>{{ line_item.product.title }}</span><br>
                {% endif %}
              {%- endfor -%}
          <div class="giftnote">
            <p class="cart-attribute__field">
              <label>Would you like to add a free gift note?</label><br>
              <input required class="required single-checkbox2" type="checkbox" id="mycheckbox" name="attributes[Would you like to add a free gift note?]" value="Yes please"{% if cart.attributes["Would you like to add a free gift note?"] == "Yes please" %} checked{% endif %}> <span>Yes please</span><br>
              <input required class="required single-checkbox2" type="checkbox" name="attributes[Would you like to add a free gift note?]" value="No thank you"{% if cart.attributes["Would you like to add a free gift note?"] == "No thank you" %} checked{% endif %}> <span>No thank you</span><br>
            <div class="" id="mycheckboxdiv" style="display:none;">
            <p class="cart-attribute__field">
              <label>Type of note</label><br>
              <select required class="required" id="type-of-note" name="attributes[Type of note]">
                <option value="Happy Birthday"{% if cart.attributes["Type of note"] == "Happy Birthday" %} selected{% endif %}>Happy Birthday</option>
                <option value="Congratulations"{% if cart.attributes["Type of note"] == "Congratulations" %} selected{% endif %}>Congratulations</option>
                <option value="Thank You"{% if cart.attributes["Type of note"] == "Thank You" %} selected{% endif %}>Thank You</option>
            <p class="cart-attribute__field" >
              <label for="to">To:</label>
              <input required class="required Form__Textarea" style="width:150px;" placeholder="e.g Matthew" id="to" type="text" name="attributes[To]" value="{{ cart.attributes["To"] }}">
            <p class="cart-attribute__field">
               <label for="from">From:</label>
               <input required class="required Form__Textarea" style="width:150px;" placeholder="e.g Lisa" id="from" type="text" name="attributes[From]" value="{{ cart.attributes["From"] }}">
            <p class="cart-attribute__field">
               <label for="message">Message:</label>
               <textarea required class="required Form__Textarea" style="width:300px; min-height:100px;" placeholder="e.g Happy Birthday Matthew! Wishing you all the best and have a wonderful day." id="message" name="attributes[Message]">{{ cart.attributes["Message"] }}</textarea>
            <a href="#" class="remove">Remove Section</a>
          <a href="#" class="addsection" data-section='0'>Add Section</a>
 {% endif %}
{% endfor %}

function myFunction() {
var x = document.getElementById("giftboxsection");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
$(document).ready(function() {
$('#mycheckbox').change(function() {
$("button").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
} else {
el.data("text-original", el.text());

$('.single-checkbox').on('change', function() {
if($('.single-checkbox:checked').length > 3) {
this.checked = false;

$('.single-checkbox2').on('change', function() {
if($('.single-checkbox2:checked').length > 1) {
this.checked = false;

//define template
var forms = [];

$('.duplicate-sections .form-section').each(function(){

//define counter
var sectionsCount = 1;

//add new section
$('body').on('click', '.addsection', function() {
var template = forms[$(this).data('section')];


//loop through each input
var section = template.clone().find(':input').each(function(){

//set id to store the updated section number
var newId = this.id + sectionsCount;

//update for label
$(this).prev().attr('for', newId);

//update id
this.id = newId;


//inject new section
return false;

//remove section
$('.duplicate-sections').on('click', '.remove', function() {
//fade out section
$(this).closest('.form-section').fadeOut(300, function(){
return false;


Shopify Partner
84 16 20

Hello @alfie24 


I understand your issue it required custom coding to add that extra product for the gift box. Please Inbox me

Best Regards
Parth Bhut


Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: parth.bhut143@outlook.com
Skype: parthbhut7