Add Text after shipping fields on checkout page

[Sachin]

Hi, I want to add some text + input field after shipping page using shopify app how to add text field anyone please let me know.for example find attachment.

i have checked post_purchase extension,but nothing found any solutions

[SheetalZadfiya]

Hi @Sachin,

1: Add below code in checkout.liquid. It will added input field after the shipping method section.

<script>
      (function($) {
        
        $(document).on('page:load page:change', function() {
          if (Shopify.Checkout.step == 'shipping_method'){
            //create text input variable
            var input = 
                '<div class="section section--purchase-order">' +
                '<div class="section__header">' +
                '<h2 class="section__title">' +
                'Shipping Extra Notes'+
                '</h2>' +
                '</div>' +

                '<div class="section__content">' +
                '<div class="fieldset">' +
                '<div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_extra_notes">Shipping Extra Notes</label>' +
                '<input placeholder="Shipping Extra Notes"  autocorrect="off" class="field__input" aria-required="true" size="30" type="text" value="" name="checkout[attributes][purchaseOrderNumber]" id="checkout_shipping_extra_notes">' +
                '</div>' +
                '</div>' +
                '</div>';
            $(".section--shipping-method").after(input);
            
            $("#checkout_shipping_extra_notes").change(function(){
              var obj = $("#checkout_shipping_extra_notes").val();
              
              sessionStorage.setItem("shipping_extra_notes", obj);
            });
            
            var savedObj = sessionStorage.getItem("shipping_extra_notes");   
            if (savedObj !== null) {        
              $("#checkout_shipping_extra_notes").val(savedObj);

            }
          }
          });
        })(Checkout.$);
        
    </script>

2: You can also use checkout Js library to modify checkout page. Reference link : https://github.com/adearriba/ShopifyCheckoutJS

Thank you.

[Sachin]

How to use this library, because i have checked all option but not found any solutions.

I have use shopify apps because i don't have access on checkout page, please let me know how to use this library.

[SheetalZadfiya]

Hi @Sachin, 

Shopify plus plan is mandatory for any checkout customisation. without that you can not modify checkout file and merge or enqueue any additional scripts on checkout page.

Thank you.

[Sachin]

Hi @SheetalZadfiya ,

I have built a shopfy app, i want to add some functionality to the checkout page before shipping but i haven't found any solutions.

I have tried all the libraries and i couldn't found any solution, Below is the reference app which work according our needs without shopify plus plan, We also have to add similar functionality to our app.i am giving you the reference of the app below.

App Refernce Url: https://apps.shopify.com/ecocart?st_source=autocomplete

pelase check the working app result

could you please help me out.

Thanks

 

[MohamedELghorfi]

Check my last article regarding this topic:
https://bit.ly/3OfzAaz
reach me if you wanted help!

[MattyVatty]

check this out - 

https://community.shopify.com/c/shopify-discussions/how-to-edit-shipping-page-add-text-next-to-shipp...

worked like a charm!!

on a different theme and took a while to find the section but did work!  thanks nick

i follow this path Online Store> Themes> Actions> edit languages > then find the "checkout & System" tab

see below, i had to click on the 3 dots on the far right side to show me the "checkout & system" tab

for some reason the search bar did not work, so I bloody had to scroll down and down, and .... aaaaal the way -  and eventually, you will get to it as below 😉 

you need to find the "shipping method notice"

and whatever you write down here, the result will look like :

 

hope it helps!

so no coding or apps required 😉 freeeee (well sorta)