Add a date picker to your store

Follow the steps below to add a date picker to your store.

Note: This feature only supports one date picker at the moment.

Create the date picker option

1. Navigate to your Infinite Options dashboard.

2. Create an option with a Text input type.

3. Click on the arrow or Label field to display the additional settings.

4. Set the Class Name to datepicker.

5. Save your changes.

Edit your store's code

1. From your Shopify admin, click Online Store to arrive at the Themes page.

2. Find the theme you want to edit, click the Actions button, then click Edit code.

Add the necessary scripts to your theme

1. On the left side, under the Layout heading, click on the theme.liquid file.

2. Do a search using the keyboard shortcuts (ctrl F or ⌘ F) for the following word.


3. Copy the following code snippet.

  window.Shoppad = window.Shoppad || {},
  window.Shoppad.apps = window.Shoppad.apps || {},
  window.Shoppad.apps.infiniteoptions = {
    ready: function() {

      function callback() {
        $('#infiniteoptions-container .datepicker').datepicker({
          inline: true,
          altField: '#infiniteoptions-container .datepicker input[type=text]',
          onSelect: function() {
            $('#infiniteoptions-container .ui-datepicker-inline').hide();

        $('#infiniteoptions-container .datepicker input[type=text]').change(function(){
          $('#infiniteoptions-container .datepicker').datepicker('setDate', $(this).val());

        $('#infiniteoptions-container .datepicker').datepicker( "setDate", '' );

        $('#infiniteoptions-container .datepicker input[type=text]').attr('readonly','true');

        $('#infiniteoptions-container .ui-datepicker').addClass('notranslate');
        $('#infiniteoptions-container .ui-datepicker').attr('translate', 'no');

        $('#infiniteoptions-container .ui-datepicker-inline').hide();

        $('#infiniteoptions-container .datepicker input[type=text]').on('click touchstart', function (e) {
              $('#infiniteoptions-container .ui-datepicker-inline').show();

      $(document).on('mouseup touchstart', function(e) {
        var isDatePickerInput = $('#infiniteoptions-container .datepicker input').is(;
        var isDatePicker = $('#infiniteoptions-container .ui-datepicker-inline').is(;
        var isChildOfDatePicker = $('#infiniteoptions-container .ui-datepicker-inline').has(;

        // If the target of the click isn't the text input, the date picker, or a descendant of the date picker
        if (!isDatePickerInput && !isDatePicker && !isChildOfDatePicker) {
          $('#infiniteoptions-container .ui-datepicker-inline').hide();

      if (window.jQuery.fn.datepicker) {
      } else {
        var script = document.createElement('script');
        script.src = '//';
        script.onload = callback;

4. Paste the snippet BEFORE the closing </head> tag.

5. Save your changes.

Add CSS styles

1. On the left side, click on the Assets folder to reveal its contents.

2. Open your main CSS file (usually named theme.scss.liquid, timber.scss.liquid, or styles.scss.liquid)then scroll to the bottom of the document.

3. Copy and paste the code snippet below at the bottom of that file.

/* Infinite Options by ShopPad - Styles for Date Picker */
#infiniteoptions-container .datepicker {
  position: relative;
  width: 100%;

#infiniteoptions-container .datepicker tr:after,
#infiniteoptions-container .datepicker tr:before,
#infiniteoptions-container .datepicker th:after,
#infiniteoptions-container .datepicker th:before,
#infiniteoptions-container .datepicker td:after,
#infiniteoptions-container .datepicker td:before {
  display: none !important;

#infiniteoptions-container .ui-datepicker-inline {
  margin: 0;
  padding-top: 0;
  background-color: #fff;
  color: #333;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;

#infiniteoptions-container .ui-datepicker-calendar {
  margin: 0;
  padding: 0;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

#infiniteoptions-container .ui-datepicker-calendar td,
#infiniteoptions-container .ui-datepicker-calendar th {
  cursor: pointer;
  text-align: center !important;
  padding: 5px !important;
  height: 10px !important;
  width: 10px !important;
  background-color: #fff;
  border: 1px solid #ddd;

#infiniteoptions-container .ui-datepicker-header {
  border: 1px solid #ddd;
  border-bottom: 0;

#infiniteoptions-container .ui-datepicker-title {
  text-align: center;
  padding: 10px;

#infiniteoptions-container .ui-datepicker-prev {
  float: left;
  padding: 10px;

#infiniteoptions-container .ui-datepicker-next {
  float: right;
  padding: 10px;

#infiniteoptions-container .ui-icon {
  cursor: pointer;

#infiniteoptions-container .ui-state-disabled {
  opacity: .5;

4. Save your changes.

5. For more customization options for the date picker, check out our guide: Click here!

Need assistance? Our support team is here to help. All you have to do is request the Expert Install Service from your Infinite Options dashboard and we can get this feature added for you.

Still need help? Contact Us Contact Us