Magento 2 checkout - Move Email section to below Shipping address block

Question

I want to move the Email section into Shipping address block of the one page checkout. How can I do this?

Answer 1

To move email field at bottom of shipping address create "shipping.html" file in below path

app/design/frontend/[Theme_Vendor]/[Theme]/Magento_Checkout/web/template/shipping.html

Add code

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="step-title" translate="'Shipping Address'" data-role="title" />
    <div id="checkout-step-shipping"
         class="step-content"
         data-role="content">

        <each args="getRegion('address-list')" render="" />
        <each args="getRegion('address-list-additional-addresses')" render="" />

        <!-- Address form pop up -->
        <if args="!isFormInline">
            <div class="new-address-popup">
                <button type="button"
                        class="action action-show-popup"
                        click="showFormPopUp"
                        visible="!isNewAddressAdded()">
                    <span translate="'New Address'" />
                </button>
            </div>
            <div id="opc-new-shipping-address"
                 visible="isFormPopUpVisible()"
                 render="shippingFormTemplate" />
        </if>

        <each args="getRegion('before-form')" render="" />

        <!-- Inline address form -->
        <render if="isFormInline" args="shippingFormTemplate" />
        <each if="!quoteIsVirtual" args="getRegion('customer-email')" render="" />
    </div>
</li>

<!--Shipping method template-->
<li id="opc-shipping_method"
    class="checkout-shipping-method"
    data-bind="fadeVisible: visible(), blockLoader: isLoading"
    role="presentation">
    <div class="checkout-shipping-method">
        <div class="step-title"
             translate="'Shipping Methods'"
             data-role="title" />

        <each args="getRegion('before-shipping-method-form')" render="" />

        <div id="checkout-step-shipping_method"
             class="step-content"
             data-role="content"
             role="tabpanel"
             aria-hidden="false">
            <form id="co-shipping-method-form"
                  class="form methods-shipping"
                  if="rates().length"
                  submit="setShippingInformation"
                  novalidate="novalidate">

                <render args="shippingMethodListTemplate"/>

                <div id="onepage-checkout-shipping-method-additional-load">
                    <each args="getRegion('shippingAdditional')" render="" />
                </div>
                <div role="alert"
                     if="errorValidationMessage().length"
                     class="message notice">
                    <span text="errorValidationMessage()" />
                </div>
                <div class="actions-toolbar" id="shipping-method-buttons-container">
                    <div class="primary">
                        <button data-role="opc-continue" type="submit" class="button action continue primary">
                            <span translate="'Next'" />
                        </button>
                    </div>
                </div>
            </form>
            <div class="no-quotes-block"
                 ifnot="rates().length > 0"
                 translate="'Sorry, no quotes are available for this order at this time'" />
        </div>
    </div>
</li>

Save the file and run below commands

php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean

And the output shows in the below screenshot.

Hope this will work for you.