How can I move/relocate the Order Delivery Date calendar?

Change Delivery Date Position

There are 2 ways to change the position of the calendar:

  • By using the Calendar placement option.
  • By adding the shortcode in the cart page file.

By using the Calendar placement option.

→  Go to the Settings > General > Change Calendar Placement > Tick the option in which you want to change the position > Click Save button > Click Run Wizard button

→ Take a look at the following image to enable the option

Calendar placement

→ After that new window will open. On that page you’ll see the popup in the bottom left corner. Choose the option to move the calendar.
run wizard odd

→ Once you see the page on that you want to change the position, click the button as shown in below the image.
run wizard odd

→ Change the position as per your needs by choosing the place from dropdown.
run wizard odd

→ Click the Save this position button.
run wizard odd

By adding the shortcode in the cart page file.

To show the delivery date calendar at a specific position on your cart page, insert the following code in the cart.liquid file.
→ Most themes are using a cart-template.liquid file to show the content on the cart page.
To find the cart.liquid file of your store theme, please follow the below steps:

  1. Go to Shopify Account > Online Store > Themes > Theme library
  2. Click on the ‘Action’ button given in the  ‘Theme Library’ section
  3. Click on the ‘Edit Code’ from the options, and it will take you to the page where you can edit your template files.
  4. On the right side of this page, you will see all the liquid files and a Search Bar 
  5. Use the search bar to find the cart.liquid file
  6. Click the cart.liquid file from the templates menu and open the file
  7. Add the code if that file has all codes to show the cart content cart.liquid file 
  8. If the cart.liquid file have the code{% section 'cart-template' %}> then select cart-template.liquid file from the search result

→Now insert the below code in the file in the proper position where you want to show Delivery Datepicker and save the file.
→ <div class="identixweb-order-delivery"></div>
→ In our debut theme, the cart-template.liquid file is the correct file that is using cart content.

For a quick view of all the above steps, please check the below image.


Calendar Alignment

→ Align calendar to the left, right, or center of the cart page. No need to add Custom CSS code for alignment, just one click and save to align the calendar.

Check the below screenshot for alignment settings: