Setting Up Supertime and Getting Started

Welcome to Supertime! 

Please follow the set up steps below for getting started. You can follow along by reviewing each step below here, or reading by the rest of this guide.

Quick Links to Each Step:

  1. Review settings and customize your schedule. Once saved and enabled, Supertime will be active on your store cart page.
  2. Disable express checkout options. Supertime is a cart-based app. Dynamic checkout or additional payment methods in your cart will bypass Supertime at checkout. Review this article on how to configure your store.
  3. Review your store theme's language settings. Supertime uses this to determine the correct date and time format for your region. You may also need to customize your store's date format in your liquid templates.
  4. Update your order confirmation screen. Copy and Paste the Supertime code into your order confirmation page template so customers can see their details at checkout.
  5. Update your customer email template. Drop the Supertime code into your email template to send your customers their selected dates and times.
  6. Enable Supertime and perform a test order. Place a test order to make sure you have configured Supertime settings to your needs and are working correctly. And you're done!
  7. (Optional) Do you require date or time info on checkout? You may want to disable the checkout button in your theme until Supertime loads.

Want to further customize Supertime? Review our customization articles. Having trouble? Review our troubleshooting guide.

Step 1: Review Settings and Customize Your Schedule

Here's an overview of Supertime settings below. Once you have configured Supertime to your liking, remember to Enable Supertime.

Create Your Delivery Methods and Schedules

Use this section to select which dates you want to show your schedule for, and enable the timeslot option to offer timeslots with a specific start and end time, and the specified increments. Note that you can only select end times that are possible based on the provided increment. You will be able to customize your delivery method with additional settings, customized schedules, and timeslots.

How to Edit Your Delivery Method and Schedules

Use this section to customize your delivery method with the right settings that let you show your customers the right dates and timeslots for selection in Supertime. 

Supertime uses a rolling window to calculate your available dates or timeslots. The first timeslot starts from the minimum fulfillment days (either calendar days, or 'schedule days') from today, pushed out by a day if it's past the cut-off time, and the schedule window extends for the number of days in your 'max fulfillment days'. 

So in the above example: the first available time would be 2 schedule days from today (since we have just weekdays in the schedule, 2 weekdays from today) if it's before 6:00pm, or 3 if it's after 6:00pm, and we show timeslots for 10 weekdays from that date. 

Click here for more on how order limits, and cut-off and prep times work.

Creating different schedules for different days of the week

In your Supertime settings, click the edit icon next to the Delivery Method you would like to do this for. Then, under the schedules section, select a day (Monday, for example), and create your times for that day. Then click the Add Schedule button and do the same for Tuesday, Wednesday, and so on.

dbb997c40cc91dc588e46487d8108c6b.pngOnce done, click the Save button at the top of the page, and then you will have to click Save one more time on the settings page to apply your new schedule to your site.

Blackout Dates

Need to remove a date from selection? Use this feature to remove holidays, time off or specific days in your business.

Customizing the location of Supertime

Supertime works out of the box with many themes and configurations by auto-detecting where to place the widget in your store's cart. If needed, review how to use our custom placement mode.

Text Labels

Customize instructions that you provide to your customers in this section. These are all the text labels will be shown to your customers that can be customized. Supertime auto-translates the rest based on your store's locale.

Step 2: Disable Express Checkout Options

Dynamic checkout options (e.g. Paypal and Buy It Now) are designed to bypass the cart step and go straight to checkout, so there is no way for Supertime to capture a date with it. If Supertime information is required, We recommend disabling this so all your customers go through your cart page and fill out the Supertime form. Supertime works by providing cart attributes, so you'll need to disable dynamic checkout buttons as recommended by Shopify for compatibility

To remove dynamic checkout from your store, review this Shopify help article and complete all the steps described. If you do not have additional payment methods enabled, then you'll just need to disable this setting in your theme as described in the help article. 

Additional Steps if you have additional payment methods.

Otherwise, if you have additional payment methods (PayPal, G Pay, Apple Pay, Shop Pay, etc.) enabled, you may have to remove or hide these buttons in your theme directly. Review this Shopify help article for more, or review this example of how to remove your additional checkout buttons on the Debut theme:

  1. Visit your store's Theme settings.
  2. Click the Actions button and select Edit Code.Find your cart-template file (e.g. Sections > cart-template.liquid and remove the following lines of code):
  3. <p>{%- if additional_checkout_buttons -%}
    <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
    {%- endif -%}
    </p>
    	
  4. Click the Save button. (Note: these payment buttons will still be available in the checkout part of your store)


Step 3: Review Your Language and Region Settings

Is your date format MM/DD/YYYY and you want it to be DD/MM/YYYY (or vice versa)? Are you looking to change your time format from 12h to 24h time?

Note: If the below setup steps do not work for your store, you can use our override option by selecting "Use the following region and language for determining date and time format:"

Supertime uses your store theme's language settings to determine the correct date and time format for your region. Click here to review your store theme's language settings to make sure you have configured your language settings correctly. If your store is in English, please review step 4 to change your date format to dd/mm/yyyy.

Steps:

  1. Visit your Store Languages settings.
  2. In the Default language section click the "Change theme language" link.
  3. On the next page, select the correct language for your region from the drop-down menu.

  4. You may need to select "Other Languages" to find your region. For example, there are multiple English options to support multiple regions. The standard English setting on Shopify uses North American date/time formats (mm/dd/yyyy, 12-hour time). You may need to change to a region that shows date/time formats that suits your locale.

    For example: Australian English will show a different date format (dd/mm/yyyy) to American English. If you only see one English option, click on "Other languages..." and then select English, and you will be able to select your region there. 

5. Once you have selected your theme language and region, press Save.

Note: for email notifications, etc. you will need to review customizing your formatting for your liquid templates.

Step 4: Add Supertime details to the post-checkout confirmation / order status page

Do you want to show the date/time a customer has picked on their Order Confirmation page?

You can show the selected date, time and delivery method for a customer's order on the post-checkout confirmation page by using Shopify's Additional Scripts feature. Paste the following snippet into the Additional Scripts box on your Checkout settings page:

{% if order.attributes %}
<script>
SupertimeOrder = {
  deliveryMethod: "{{ order.attributes["Supertime Delivery Method"] }}",
  deliveryDate: "{{ order.attributes["Supertime Delivery Date"] }}",
  timeslot: "{{ order.attributes["Supertime Timeslot"] }}"
};
</script>
<script async src="{{ "https://getsupertime.com/supertime.js?shop=" | append: shop.permanent_domain }}"></script>
{% endif %}

Optionally, if you want to customize the "Delivery Details" title text and add your own instructions text, use this snippet and add your own text:

{% if order.attributes %}
<script>
SupertimeOrder = {
  deliveryMethod: "{{ order.attributes["Supertime Delivery Method"] }}",
  deliveryDate: "{{ order.attributes["Supertime Delivery Date"] }}",
  timeslot: "{{ order.attributes["Supertime Timeslot"] }}",
  deliveryDetailsText: "Order Pick-up and Local Delivery Instructions",
  additionalInstructionsText: "We will be in touch to confirm your availability."
};
</script>
<script async src="{{ "https://getsupertime.com/supertime.js?shop=" | append: shop.permanent_domain }}"></script>
{% endif %}

  1. Visit your Checkout Settings page.
  2. Scroll down to the Order processing section.
  3. In the Additional Scripts text box, paste in the code snippet shown above. Your "Additional Scripts" section should now include this snippet and look something like this:

    Click the Save button at the bottom of the page to save your settings.

You may also customize your Order Confirmation page using Additional Scripts in a more custom manner using these liquid variables:

  • Date: {{ attributes["Supertime Delivery Date"] | date: format: "basic" }}
  • Time (24 hour time): {{ attributes["Supertime Timeslot"] }}
  • Time (12 hour time or custom time formats):{{ attributes["Supertime Timeslot"] | slice: 0,4 | time_tag '%-I:%M %p' }} - {{ attributes["Supertime Timeslot"] | slice: 8,12 | time_tag '%-I:%M %p' }}
  • Delivery Method: {{ attributes["Supertime Delivery Method"] }}

Refer to this article in the Shopify Help Center for additional details.

Step 5: Add Supertime details to my customer order confirmation email

Do you want to include Supertime details in your customer's order confirmation emails? Supertime supports that!

You can show the selected date, time and delivery method for a customer's order collected through Supertime using Shopify's order attribute tags. Paste the following snippets into your customer notification templates in your Notifications settings:

  • Date: {{ attributes["Supertime Delivery Date"] | date: format: "basic" }}
  • Time (default - 24 hour time): {{ attributes["Supertime Timeslot"] }}
  • Time (12 hour time or custom time formats):{{ attributes["Supertime Timeslot"] | slice: 0,5 | time_tag: '%-I:%M %p' }} - {{ attributes["Supertime Timeslot"] | slice: 8,12 | time_tag: '%-I:%M %p' }}
  • Delivery Method: {{ attributes["Supertime Delivery Method"] }}

For more details on how to customize email notifications, review this article.

Steps:

  1. Visit your Notification Settings.
  2. Click on the Order confirmation email template.

  3. In the Email body (HTML) input box, locate the following lines of code:
    <p><b>Delivery information:</b> {{ delivery_instructions }}</p> 
    {% endif %}
    	
  4. Underneath the {% endif %}, paste the above code snippets that are relevant to you.

  5. Click the save button.

Step 6: Enable Supertime and Perform a Test Order

Enable Supertime and perform a test order. Place a test order to make sure you have configured Supertime settings to your needs and are working correctly. And you're done!

Optional Steps