Supertime - Troubleshooting

Having trouble with Supertime? Here's a list of our most frequently encountered issues and questions.


Further information can also be found in the Supertime - Getting Started and Supertime - Customization support articles.

How do I update my store (e.g. remove Dynamic Checkout and Additional Payment Buttons) for Supertime compatibility?

Remove Dynamic Checkout and Additional Payment Buttons in your Cart and Theme for Supertime Compatibility

For theme compatibility notes, please refer to to this document.

Are you not seeing Supertime date and time data in your orders? Ensure you have reviewed this article below. We also have additional troubleshooting steps.

Dynamic checkout and Additional Payment buttons in your theme 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. 

1. Remove your dynamic checkout buttons by disabling these settings in your theme and removing additional checkout buttons from your product and cart pages.

To remove dynamic and additional checkout buttons from your store, follow the steps provided below. Once you're done you should no longer see "Buy It Now" or branded payment options on your cart or product pages.

Complete these steps:

a. To remove dynamic checkout buttons on product pages, follow these instructions from the Shopify Help Center.

b. If your home page includes a featured product section with an Add to cart button, then you would need to remove dynamic checkout buttons on that section. To do so, follow these instructions from the Shopify Help Center.

Note: If you are on an older Shopify theme or a custom one where the Show dynamic checkout button setting does not exist yet, then you need to update your theme (which would then add this setting) or edit your theme code to find and remove these snippets in your theme instead.

Note #2: If you have payment methods with accelerated checkouts, enabling certain payment methods may bypass Shopify's Local Pickup feature.


2. Removing additional checkout buttons from your cart

Do you have additional payment methods like G Pay, Apple Pay, PayPal, etc. enabled in your store? You'll need to remove additional checkout buttons on the cart page if you have Additional Payment Methods by following the steps below. Option 1 will defer showing the additional checkout buttons to the checkout stage.

If you do not have additional payment methods enabled for your store, you can skip this step. Once you have removed these buttons, then these payment methods are provided in the checkout page instead, and there are no checkout paths where a customer could bypass date and time collection in your cart.

Option 1: Remove These Buttons Directly In Your Theme Code

Steps (On Desktop):

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Sections folder, click cart-template.liquid . If your theme doesn’t have a cart-template.liquid , then click cart.liquid  in the Templates folder.
  4. Find the following code and delete it:
{% if additional_checkout_buttons %}         <div>             {{ content_for_additional_checkout_buttons }}         </div>     {% endif %}
  1. Click Save to save your changes to the file.

The additional checkout buttons now appear on the checkout page instead of the cart page.

Steps (On Mobile):

  1. From the Shopify app, tap Store.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  4. Find the theme you want to edit, and then click Actions > Edit code.
  5. In the Sections folder, click cart-template.liquid . If your theme doesn’t have a cart-template.liquid , then click cart.liquid  in the Templates folder.Find the following code and delete it:
{% if additional_checkout_buttons %}   <div>             {{ content_for_additional_checkout_buttons }}         </div>     {% endif %}
  1. Click Save to save your changes to the file.
  2. The additional checkout buttons now appear on the checkout page instead of the cart page.

Option 2: Update Your Theme by following these instructions from Shopify

More detailed instructions can be found here from the Shopify forums.

Option 3: Remove these buttons by configuring your Payment Providers.

The simplest way to remove the additional checkout buttons that correspond to payment providers that are visible in your cart. You can change your payment providers by visiting the Payments page of your Shopify admin Settings.

If these payment providers are needed as payment types, then complete the steps provided in Option 1 instead.

3. Review your store's configuration and disable third-party applications that allow users to checkout from your store.

Since Supertime is a cart-based application, if you have third-party applications that enable checkout by creating their own drawer or cart, re-enable the use of the checkout button (for example, a Terms of Condition application), or nudges a customer to go to checkout directly, these paths will bypass date and time collection for Supertime. To ensure the correct operation of Supertime, you will need to also disable the checkout functionality found in these applications.

4. Review that Supertime is showing up in all of your carts on your theme

Review that Supertime is showing up in all of your carts on your theme. Supertime's automatic placement mode may not be compatible with your cart. If this is the case you will need to use our custom placement mode.

5. Disable the checkout button in your cart by default to prevent checkouts without date collection on slow connections

Supertime by default is loaded using Shopify's script tag feature, which means we are loaded after the initial page is loaded, which can lead to Supertime being loaded slowly on slow connections especially if you happen to have a lot of scripts, apps or plugins in your storefront. If a date or time slot is required to checkout on your store, you may want to follow the steps below.

You may want to additionally restrict your customers from being able to checkout with the additional step of disabling your checkout button by default. Otherwise, your customers may be able to checkout before apps like Supertime have loaded in your theme's cart. 

  • Common occurrences: if you have tried applications that interact with your cart and checkout flow, these can prevent Supertime or the methods below from disabling your checkout button even if you have uninstalled the apps if you have not removed the code snippets created by these third party applications in your cart (e.g. apps from popular vendors like HulkApps)

You can update your theme to disable the checkout button by following the instructions below. Supertime will manage your checkout button's state once it is loaded in your cart. 

Method 1: Disable the button directly in your theme

Here's an example of how to disable your checkout button on the Debut theme:

  1. Visit your store's Theme settings.
  2. Click the Actions button and select Edit Code. Find your template file where the checkout button would be (e.g. in our case, it's in Sections > cart-template.liquid)
  3. Add disabled within the <button> or <input> field of the checkout button as an attribute. It should look like the following lines of code for the Debut theme:
<input type="submit" name="checkout" value="{{ 'cart.general.checkout' | t }}" disabled>
  1. Click the Save button. Your checkout will be disabled by default, and Supertime will enable this button automatically, especially when your customers have provided required information for checkout.

Method 2: Insert a Snippet of Code to Disable Your Checkout Button on Load

Note: This method works if your theme has checkout buttons that have an attribute of name="checkout" and your checkout button is an <input> or <button> element, and your cart isn't custom loaded via JavaScript.

Steps:

1. Copy and paste this snippet below - this snippet will search for your buttons and set the checkout buttons to be disabled on load before Supertime is loaded:

<script>      
document.addEventListener("DOMContentLoaded", function(event) { 		
  var checkoutButtons = document.body.querySelectorAll('button[name="checkout"], input[name="checkout"]')         
  checkoutButtons.forEach(function(button) { 			
    button.disabled = true; 		
  });      
});   
</script>

2. Visit your store's Theme settings.

3. Click the    Actions button and select Edit Code. 

4. Find your theme.liquid file if you have a cart that is present on all your pages.  

5. Paste the provided snippet immediately below your   <body> tag in that file. or above the </body> tag

6. Perform a test checkout

Enable Supertime and perform a test to review all the places where your customers can checkout. Place a test order to make sure you have configured Supertime settings to your needs and are working correctly. Are you not seeing Supertime date and time data in your orders? Review these troubleshooting steps.


How do I troubleshoot Dates or Timeslots not showing up on my orders?

Are you not seeing Supertime date and time data in your orders?

Here are some troubleshooting steps:

  1. Ensure that additional checkout settings and dynamic checkout settings are disabled in your theme, especially if you have additional payment methods in your store. Otherwise your customers may be able to bypass date selection in your cart.
  2. Review your store's configuration and disable third-party applications that allow users to checkout from your store. Since Supertime is a cart-based application, if you have third-party applications that enable checkout by creating their own drawer or cart, re-enable the use of the checkout button (for example, a Terms of Condition application), or nudges a customer to go to checkout directly, these paths will bypass date and time collection for Supertime. To ensure the correct operation of Supertime, you will need to also disable the checkout functionality found in these applications. See below for more on steps.
  3. Make sure Supertime is enabled in your store. If Supertime is disabled then customers can still checkout.
  4. Make sure that "required to checkout" is selected in your schedule and delivery method settings.
  5. Review that Supertime is showing up in all of your carts on your theme. Supertime's automatic placement mode may not be compatible with your cart. If this is the case you will need to use our custom placement mode. If Supertime is not showing up and it was previously working, it's possible that other new or updates to existing third-party apps in your cart are causing compatibility issues. (See "More on Third-Party Applications and your Cart Page" below)
  6. Customers able to checkout before your cart has loaded? If you require date or time information from your customers, you may need to disable your checkout button in your theme by default to allow Supertime to control access even in low-bandwidth situations.
  7. Confirm that this order was created through your online store. For more on how to use your Timeline for an order to do so, review this Shopify Help article. Supertime works by collecting dates in the cart for your store's online channel. Our widget is a cart based app. We do not support date collection from other channels (e.g. Buy Button, auto-generated orders from subscriptions, etc.). You may also add Supertime information manually to these orders by reviewing this article.
  8. If you see a Supertime order with a date that you don’t think is selectable, review this article. Or confirm that your schedule is set correctly as desired.
  9. Perform a test order once you have reviewed all the steps above. If you are still experiencing issues with your store after completing these steps, you may have a compatibility problem with your store's theme or suite of apps that may interfere with how Supertime works for collecting date and time information in your cart. 

More on Third-Party Applications and your Cart Page

Steps for checking your cart for compatibility:

  1. Load Supertime on a slow connection (either on a mobile device, or simulate network throttling in your browser by reviewing a method like this). If the checkout button is enabled, and you require date selection, review this article to disable your checkout button in your theme by default since your customer can proceed to checkout before Supertime is loaded.
  2. As you review your cart on a slow connection, and you still see that the cart's checkout button is not disabled, or that it gets re-enabled as more of your cart loads, then you likely have a third-party application that is interacting with your cart.
  3. As you review your cart on a slow connection, and you see that it takes a long time for Supertime to load, or that Supertime does not load even if it's enabled, then there may be apps and scripts that are either not functioning correctly, or are causing this slowdown.
  4. In addition to issues related to apps loading, confirm how your apps that interact with checkout in your cart affect whether or not the checkout button is enabled. Do you have apps that detect order limits, item limits, or have terms of service checkboxes that would enable the checkout button? 
  5. To fix issues related to steps 2, 3 and 4, you can isolate which app is causing this by uninstalling and reinstalling these apps, and also by blocking the requests made by these applications. If these are changes that are from custom development to your cart, then you may need to perform theme updates to ensure compatibility. You may have to remove the snippets of code that load in your cart as these snippets are enabling your checkout button. In addition, if you have uninstalled the apps, you may still need to follow specific instructions to remove the code snippets created by these third party applications in your cart (e.g. apps from popular vendors like HulkApps).

Still experiencing issues after performing the troubleshooting steps? Please contact us and provide more information on what you are experiencing using the Ask form on Supertime. If your store is not live yet, please provide a preview link. If you are contacting us by email, please kindly provide us with your store's url on Shopify (e.g. your-store-url.myshopify.com). 


How do I troubleshoot Supertime not showing up on my cart page?

If Supertime is not showing up on your cart page, it could be because of a couple things:

1. You may not have activated Supertime yet

In your Supertime settings, visit the General tab. At the top of that page is a box. Does it say "Supertime is active"? If not, you will need to click the "Enable Supertime" button.

Once Supertime is enabled, you'll see this instead:

2. Your theme may not support Supertime automatically

Supertime works in automatic detection and placement modes for the free themes in the Shopify Theme Store and also many popular themes. You can learn more about our compatibility with themes in the Shopify Theme Store.

If your theme is not listed in the Shopify Theme Store or if you have a very customized or modified theme, then you will need to consider using our custom placement and manual detection modes the automatic placement mode is not showing results. Supertime cannot provide development support for where theme modifications are required to use Supertime or custom themes where our automatic modes does not work. Development support for theme modifications are best directed toward a 3rd-party development service. Review these instructions here.

Still having trouble? Review our Troubleshooting guide.


How do I prevent customers from checking out before Supertime is loaded?

Supertime by default is loaded using Shopify's script tag feature, which means we are loaded after the initial page is loaded, which can lead to Supertime being loaded slowly on slow connections especially if you happen to have a lot of scripts, apps or plugins in your storefront. You may also want to load Supertime earlier by adding our script directly to your store or cart. If a date or time slot is required to checkout on your store, you may want to follow the steps below.

Disable Checkout Button by Default to Allow Supertime to Collect Required Date or Time Data

You may want to additionally restrict your customers from being able to checkout with the additional step of disabling your checkout button by default. Otherwise, your customers may be able to checkout before apps like Supertime have loaded in your theme's cart. 

Common Issues:

  • If you have tried applications that interact with your cart and checkout flow, these can prevent Supertime or the methods below from disabling your checkout button even if you have uninstalled the apps if you have not removed the code snippets created by these third party applications in your cart (e.g. apps from popular vendors like HulkApps)
  • If you have tried applications that interact with your cart and checkout flow, these can slow down apps from loading in your cart via Script Tags even if you have uninstalled the apps if you have not removed the code snippets created by these third party applications in your cart
  • If you have not performed the steps below and you have customers that are accessing your store on a slow connection

You can update your theme to disable the checkout button by following the instructions below. Supertime will manage your checkout button's state once it is loaded in your cart. 

Method 1: Disable the button directly in your theme

Here's an example of how to disable your checkout button on the Debut theme:

  1. Visit your store's Theme settings.
  2. Click the Actions button and select Edit Code. Find your template file where the checkout button would be (e.g. in our case, it's in Sections > cart-template.liquid)
  3. Add disabled within the <button> or <input> field of the checkout button as an attribute. It should look like the following lines of code for the Debut theme:
                <input type="submit" name="checkout"
                  class="cart__submit btn btn--small-wide"
                  value="{{ 'cart.general.checkout' | t }}" disabled>
  1. Click the Save button. Your checkout will be disabled by default, and Supertime will enable this button automatically, especially when your customers have provided required information for checkout.

Method 2: Insert a Snippet of Code to Disable Your Checkout Button on Load

Note: This method works if your theme has checkout buttons that have an attribute of name="checkout" and your checkout button is an <input> or <button> element, and your cart isn't a custom loaded via JavaScript.

Steps:

1. Copy and paste this snippet below - this snippet will search for your buttons and set the checkout buttons to be disabled on load before Supertime is loaded:

   <script>
     document.addEventListener("DOMContentLoaded", function(event) {
		var checkoutButtons = document.body.querySelectorAll('button[name="checkout"], input[name="checkout"]')
        checkoutButtons.forEach(function(button) {
			button.disabled = true;
		});
     });
  </script>

2. Visit your store's Theme settings.

3. Click the   Actions button and select Edit Code. 

4. Find your theme.liquid file if you have a cart that is present on all your pages.  

5. Paste the provided snippet immediately below your <body> tag in that file.


How does Supertime work with my Shipping Rates, Setting Prices, Local Pickup, Local Delivery, or Delivery Methods

Supertime is designed to help you easily collect dates in your cart page, and we do not directly manage your shipping rates or methods in checkout. However, it works with many different configurations. If you are using:

  • Shopify's Local Delivery feature, review this help article from Shopify to set up how to filter for postal codes or a distance radius. Review this article for customizing and modifying your local delivery rates (e.g. by distance). 
  • Shopify's Local Pick-up, here is the help documentation from Shopify.
  • Your own shipping rates or a third-party application for managing your shipping methods (e.g. apps that can help with calculating availability and prices based on postal codes, zip codes, zones, distance and radius), here is the help doc for setting up shipping rates for reference. For example, you can use an app like Parcelify to provide a more customized pickup/local delivery rate together in your shipping setup. Note: for the third party rates/apps, you'll need access to Shopify’s Carrier Calculated Shipping API. This service costs $20/month, or comes for free with Advanced Shopify. You may need to get in touch with Shopify Support for help for getting access to this.

If you are using multiple methods for date collection in the cart with Supertime: while we do try to provide a streamlined and easy to use cart app that lets you provide multiple sets of dates and times before your customer continues their checkout flow, since we don’t manage shipping rates note that don’t control what your customers choose at the checkout stage. (e.g. what they enter as their address, and if you're using Shopify Local Delivery or Local Pickup -- they can choose these options independently at the end of checkout.)

In general, Supertime also works well with other apps through the use of Tags (under More Filters in the Schedule View). You may use the Schedule View to filter orders by delivery method if your store has a custom workflow where you are processing your orders using Tags:


Manually Edit or Add Supertime Attributes on New Orders, Existing Orders or Draft Orders

Supertime is a cart-based app, we help you collect a date and time in the cart before checkout using cart attributes. If you have orders that you did not collect this information in the cart from your customer or you would like to modify this information that was collected for the order, below are instructions on how to make these updates.

Update Attributes on existing orders with Supertime data

You can edit these details under "Additional Details" of your specific order. Be sure to use the same time and date formats as your other orders.

Steps:

  1. Open the order from the Orders page in your Shopify admin.
  2. Click on Edit under the Additional Details.
  3. Provide the desired value for this field. Be sure the adhere to these formats for compatibility:
    1. Supertime Delivery Method: the method used here should be the exact spelling of the method of one that you've created.
    2. Supertime Delivery Date: it should follow the yyyy-mm-dd date format of a similar date from the duplication
    3. Supertime Timeslot: it should follow a 24h format, with a space between the hyphen - "hh:mm - hh:mm"

  4. Once you have edited the value to what you desire. Hit Save:

  5. Repeat for all of your desired Supertime fields. 

For orders without Supertime attributes

Are you looking to add Supertime data on orders that do not have Supertime information? (e.g. this is a new draft order?) 

Here are recommended approaches below.

For Creating New or Draft Orders to include Supertime Attributes

You can enter Supertime details manually into Draft Orders. Essentially, you would be adding the information that's found in the Additional Details section (e.g. order/cart attributes)

The general approach (see steps below) would be to duplicate an existing order that contains Supertime attributes in it into a Draft Order and you'll be able to start with an order that has Supertime attributes under Additional Details.

Alternatively, here is a Shopify app that you can use for adding new attributes to existing orders, or to create draft orders with Supertime attributes. This app also allows you to save Supertime attribute names as presets for future use.

Steps:

  1. Look for an order in your system that contains Supertime information (e.g. you see Supertime data under the "Additional Details" section of the order). 
    1. If this does not exist, either perform a test order where you collect Supertime information for this purpose and use that for the below, or create your order using the Draft Orders method without Supertime information and review the instructions for "For adding Supertime attributes to orders without Supertime attributes" instead.
  2. Duplicate this order by following these steps:
    1. Open the order (or the draft order) from the Orders page in your Shopify admin.

    2. In the order (or draft order) details page, click Duplicate.

      A draft order is created with the same line items and customer information as the original order.

    3. Save it as a draft
  3. Remove any product, customer, address information from the duplicated order. And add in the details required for this order.

  4. Add the desired method, date and time slot information into the Additional Details section (e.g. "Supertime Delivery Method", "Supertime Delivery Date", "Supertime Timeslot").

  5. Be sure the adhere to these formats for compatibility:
    1. Supertime Delivery Method: the method used here should be the exact spelling of the method of one that you've created.
    2. Supertime Delivery Date: it should follow the yyyy-mm-dd date format of a similar date from the duplication
    3. Supertime Timeslot: it should follow a 24h format, with a space between the hyphen - "hh:mm - hh:mm"
    4. Supertime Timezone: this can be left as-is (it is used for timezone review and debugging purposes)
  6. Similarly, if you use order tags, add in the Tags for the delivery method, timeslot and date as needed, with the appropriate formats.
  7. Turn this Draft Order into an order by selecting a payment option when ready (e.g. When you accept payment for your draft order, an order is created for it on the Orders page.)

For adding Supertime attributes to an Existing Order

The general approach would be to add these attributes manually to your order. Be sure to use the exactly same time and date formats as your other orders, as well as the exact and correct attribute names (e.g. Supertime Delivery Date).

Here is a Shopify app that you can use for adding attributes to draft or existing orders. This app also allows you to save attribute names as presets for future use.

General Instructions:

  1. Provide the desired the name field(s) for the Supertime information you want to input (e.g. "Supertime Delivery Method", "Supertime Delivery Date", "Supertime Timeslot"). 
  2. Provide the desired value for entered field(s). Be sure the adhere to these formats for compatibility:
    1. Supertime Delivery Method: the method used here should be the exact spelling of the method of one that you've created.
    2. Supertime Delivery Date: it should follow the yyyy-mm-dd date format of a similar date from the duplication
    3. Supertime Timeslot: it should follow a 24h format, with a space between the hyphen - "hh:mm - hh:mm"

For other scenarios where you may want to edit the order itself

Please review this link on the Shopify Help Center for more on how to edit an order. Note that if you are using the Shopify Local Pickup feature, then orders are not editable. You will need to use the Draft Orders feature to create a new pickup order with the same details. You may want to recreate an order using the Draft Order feature to make any changes where there are changes to the shipping method or rates (here is a link to the Shopify Help Center).


How does Supertime work with my theme?

Theme Compatibility List for Supertime

Supertime works in automatic detection and placement modes for the free themes in the Shopify Theme Store and also many popular themes. We support the following themes in our automatic placement mode as described below.

The automatic placement mode is tested with all of the free themes on the Shopify Theme Store: 

  • 2.0: Sense, Ride, Dawn, Refresh, Colorblock, Crave, Craft, Taste, Studio
  • 1.0: Express, Narrative, Debut, Venture, Boundless, Simple, Brooklyn, Supply, Minimal.

Supertime is also compatible with recent updates to these paid themes in the Shopify Theme Store:

  • Impulse, Prestige, Warehouse, Motion, Streamline, Expanse, Empire, Chantilly, Broadcast, Pipeline, Venue, Flow, Showcase, Blockshop, Envy, Icon, Modular, Canopy, Baseline, Testament, Lorenza, District, Kingdom, Fashionpolism, Avenue, Highlight, Galleria, Bloom, Maker, Vantage, Capital, Fresh, Palo Alto, Atlantic, Mr Parker, Split, Retina, Beyond, Alchemy, Cantina, Ira, Editions, Expression, Cascade, Startup, Masonry, Sunrise, Context, Avatar, Record, Launch, Loft, Focal, Colors, Pacific, Mobilia, Foodie, Handy, Vogue, Kagami, Agency
  • We update our automatic placement mode on a regular basis, but if the automatic placement mode does not work well for you, you can always take advantage of our custom placement mode.

Additional Theme Compatibility Notes

1. If the Supertime pop up date selector disappears when you select a date, switch to the Inline Pop-up mode:

Depending on the theme, it may be helpful to switch between the Inline or the Portal Pop-up Style in your Settings to ensure date selection compatibility. For most themes, the Portal pop-up is a better fit. Other themes work better with the Inline Pop-up as it avoids a focus-stealing issue that can occur with certain pop-up or slide out carts.

Note: Supertime attempts to automatically show the "add to cart" notification pop-up using Inline mode for the free 2.0 themes.

2. If you are seeing your iOS device zoom in when a Supertime input field is selected, this is the default behaviour on iOS where the default font is smaller than 16px -- this is something that you will see on themes like Dawn/Craft/Sense/Crave. More on the topic on how you can change this behaviour here. 

If you do not see the Supertime label text in your theme, then your default font size on your theme is set to 0px. Add the following snippet to your CSS file for your theme (see this link for more on the topic):

div.supertime > div {     
font-size: 12px;
}

3. The following themes in the Shopify Theme Store will require some additional configuration for compatibility:

  • 2.0: Sense, Ride, Dawn, Refresh, Colorblock, Crave, Craft, Taste, Studio: 
    • Note: Supertime attempts to automatically show the "add to cart" notification pop-up using Inline mode, but you may want to disable Supertime in this pop-up based on your desired experience. 

      • you may want to comment out the checkout button and form in the snippets -> cart-notification.liquid file to remove the checkout button in your cart pop-up:

        • Alternatively, you can hide this pop-up altogether:


          1. Go to Online Store -> Theme -> Edit code2. Locate this CSS file in your theme: Asset folder -> component-cart-notification.css


          3. Add the following code snippet at the bottom of this file:

.cart-notification__links form#cart {
display: none;
}
  • Avenue: if you use the "cart terms" feature, then you'll need add the following to your style CSS:
div.supertime > div {     
text-align:center;
font-size: 12px;
}
  • Boost - You need to update your theme settings to use the following cart setting: Theme Settings -> Cart -> Select "Go to cart page"
  • Spark - You need to update your theme settings to use the following cart setting: Theme settings -> Cart -> Uncheck "Show notification when item is added to cart"
  • Grid - You will need to remove the <form /> element that has a persistent checkout link in the theme code itself, as that can continue to checkout without custom placement or the deletion of that element.
  • Responsive - You will need to remove the link element that has a persistent checkout link in the top right as per Grid. You need to update your Cart Page setting: Go to the Cart section -> Select Cart type as either Page or Refresh
  • ShowTime - You need to update your theme settings to use the following cart setting: Theme settings -> Cart -> Select Page as Cart type
  • Providence - You need to update your Cart Page setting:  Cart Page -> Cart page section -> Uncheck Show checkout buttons at the top
  • Artisan - Review the Adding Manual Detection section and add this following snippet in your theme for the pop-up cart to be detected using our manual mode:
    • <script> SupertimeManualMode = { formSelector: "#mini_cart_form", buttonSelector: "input[value='Checkout']" };</script>
  • Parallax - Review the Adding Manual Detection section and add this following snippet in your theme for the slider cart to be detected using our manual mode:
    • <script> SupertimeManualMode = { formSelector: "#cart", buttonSelector: "input[value='Checkout']" };</script>

Custom Themes (e.g. custom developed themes or themes purchased elsewhere)

If your theme is not listed in the Shopify Theme Store or if you have a very customized or modified theme, then you will need to consider using our custom placement and manual detection modes if the automatic placement mode is not showing results, and these modes will increase Supertime compatibility with the vast majority of themes with some minimal updates. Custom development support for theme modifications are best directed toward a 3rd-party development service.


The Buy It Now button does not work with Supertime

Unfortunately the Buy It Now button is designed to bypass your store cart and go straight to checkout, so there is no way for Supertime to work with it. To use Supertime, you'll need to disable Buy It Now along with other Dynamic Checkout options. See this article for more details.


Finding the CSS Query Selector for an element on your store page

You can use your web browser's developer tools for finding an element within your checkout cart's <form> element, then inspect your theme's checkout for an appropriate identifying query selector. Here are some sample steps using Chrome for finding a query selector for a specific element.

  1. Open Chrome Dev tools (cmd/ctrl + alt + j ):

  2. Right click on the area where you want to insert Supertime. 

  3. Select Inspect on the context menu. This will open the inspector on to the element you want to get the selector from in order in the dev tools panel:

  4. Right click on the dev tools element to open the context menu. 

  5. Select Copy -> Copy selector on the menu (note: this is Copy selector path on Safari). In the above case, you likely want to get the query selector for the <div> element:

  6. You can now paste this selector (it should look something like: #shopify-section-cart-template > div > div:nth-child(1) > form > div.cart__footer > div > div > div.cart__buttons-container) 
  7. To create a CSS Query Selector that uses a list of multiple selectors, you repeat steps 1-6 and create a list of multiple selectors separated by a comma.

Customer chooses a different shipping method than your store's Supertime method at checkout (local delivery, pickup, etc.) and handling when shipping methods differ or rescheduling dates

Supertime is designed to help you easily collect dates in your cart page, and we do not directly manage your shipping methods. Review this support article for more information on how Supertime works with your store's Shipping Rates, Setting Prices, Local Pickup, Local Delivery, or Delivery Methods. 

However, it's possible to be in a scenario where your customers to choose a different shipping method than what they may have chosen in the cart as Supertime does not have the ability to integrate directly with the checkout process, which is only available to Shopify Plus users. 

You may also have a scenario where a customer wants to reschedule, or change their delivery method (e.g. they are free to come pick up an order)


Recommended best practices:


Using Supertime on a different theme / Previewing and testing Supertime

Supertime works with all the free themes in the Shopify Theme Store and also many popular themes in our automatic placement mode. You can learn more about our compatibility with themes in the Shopify Theme Store here.

If you are setting up Supertime for testing, you can proceed with our guide on Setting Up Supertime and Getting Started while Supertime is disabled.

Here are a few ways to test Supertime if you are launching this on a live store:

  • You can test by enabling Supertime briefly while previewing your theme and going to the cart page with items in it. If you do not require date/time selection in your method(s), then this can be done with out interrupting the checkout flow for your customers.
  • You can also create use our custom placement mode with settings and query selectors for the theme that you want Supertime to be on (e.g. if Supertime cannot find elements with these selectors, we do not show ourselves) -- this is one way to have Supertime be active and shown on a theme in Preview Mode. You can have a query selector that includes both your current theme and your preview theme in custom placement mode.
  • You can use our manual detection mode to hide Supertime on a particular theme.

    • 1. Copy this snippet below: 


      <script> SupertimeManualMode = { formSelector: "", refreshSelector: "", buttonSelector: "" };</script>


      2. Visit your store's Theme settings.


      3. Click the Actions button and select Edit Code on the theme that you want to remove Supertime from. 


      4. Find your theme.liquid file if you have a cart that is present on all your pages. 


      5. Paste the provided snippet in step #1 immediately below your <body> tag in that file.

  • You should be able to add the snippets needed to active Supertime's Manual mode for a specific theme and then preview it with Supertime enabled in general, since we will use the Manual mode settings instead of our automatic detection on that theme. More on the topic here: How do I customize where to place my Supertime widget on my cart page?
  • More extensive testing can be done on a development store with a Shopify Partner account or a new trial store as well.
  • You can also review how Supertime looks by reviewing our demo store.

To note, Supertime is always loaded via Shopify's script tag feature when it is installed in your store so it is loaded on all of your themes. However, we have a convenient Disable/Enable feature to allow you show or hide Supertime as needed in your store. In your Supertime settings, visit the General tab. At the top of that page is a box. Does it say "Supertime is active"? If not, you will need to click the "Enable Supertime" button.

Once Supertime is enabled, you'll see this instead:

Have questions while you are testing Supertime? Review our getting started, troubleshooting and customization guides.


Do I need to do anything if I re-install or uninstall Supertime?

Supertime is designed to be easy to set up. The app is loaded via the script tag, uninstalling Supertime just requires following the standard uninstall process for a Shopify App from the Shopify App Store:


  1. From your Shopify Admin, click into the Settings page
  2. Click on the Apps and sales channels section:

  1. Locate the app you'd like to uninstall (in this case, Supertime Delivery Date Picker), and click the Uninstall button next to it
  2. Click Delete on the popup.

Once uninstalled, Supertime will not be in your cart, or collecting information from your customers on future orders. 

If you have further customized your store and theme to use Supertime, review these additional steps below.

Additional Steps for Uninstallation

If you have updated your theme template files as a part of using Supertime, you will need to revert those changes. You can do so using Shopify’s theme rollback feature. You may want to perform these steps before uninstallation.

  • If there were customizations made to your theme to support Supertime for using our widget's custom placement mode, you may want to rollback those changes on your theme.
  • If you have disabled your cart's checkout buttons by default and were using Supertime to manage enabling these buttons, you will want to rollback these changes (usually found in your cart-template.liquid file) - otherwise your checkout button may stay disabled if it is not also managed by other third-party apps.
  • If you have customized notification templates and your post-checkout confirmation, you may want to remove these from your templates even if you may not be seeing these on future orders. Your past orders may show the Supertime information that you have collected if you still have these customizations. So be sure to update your templates if you previously customized your email templates and your checkout's additional settings to include our attributes.

Can I export my orders or use Google Calendar to view my orders from Supertime?

Want to view your orders in Google Calendar?

You can use Zapier to automatically create an event in your desired calendar whenever you receive a new paid order through a link to this Zap.

You can also manually export your orders and import them into Google Calendar. To import a spreadsheet, click on your Settings, and then click on Import & Export:



Customer chooses a date or time in the past or a date or time that should not be available

As a technical limitation of being a cart-based app for collecting date and time information, in some rare cases (e.g. if you have abandoned carts enabled, or if someone hits checkout in the cart and waits for a very long time before they complete the checkout process), a customer can use the Supertime data that they selected at an earlier to complete a checkout later with a date that's expired or past your fulfillment date.

We currently also count an order towards the order limit after an order is successfully checked out. If there is an available timeslot or date and multiple customers get to your cart at the same time, they can proceed to checkout at the same time. In this situation, it is possible that your order limit will be exceeded and that these customer may select these dates/times at the same time.

If your store also has a condition where customers may be able to checkout before Supertime's loaded, perhaps you are seeing more incidents where folks may have previously selected a date before checking out as well. We have a recommended step in our getting started guide here that you can use to prevent this in the future: Disable Checkout Button by Default to Allow Supertime to Collect Required Date or Time Data

Recommended steps:

  • You can confirm when a customer made their date or time selection in the cart page by reviewing their "Supertime Selected" value under an order's additional details and compare that to when the customer completes the actual checkout in the order.
  • You can also enable an automatic selection timeout that clears any selection made after a set amount of time. The customer will be forced to reload the the page and make a new selection.
  • Follow this recommended step: in our getting started guide, we have instructions on how to Disable Checkout Button by Default to Allow Supertime to Collect Required Date or Time Data
  • You also can usually make sense of these cases by reviewing your Order timeline.
  • You may decide how to handle that case differently but likely it's best to just connect directly with the customer.
  • In addition to order limits from Supertime, it may be helpful to consider tracking inventory or other third-party apps for preventing overselling.
  • Review this link for instructions on disabling abandoned carts if required, or review this link to adjust your abandoned cart email.
  • More best practices can be found here.

Can I add Supertime to my product page? Can I collect date and time on a product page?

Unfortunately, Supertime is a cart-based app, helping you collect a date and time in the cart before checkout using cart attributes. There are other third-party apps that would allow for date selection by product if that's what you're looking for.


Troubleshooting Supertime Email Notifications

Are you not seeing Supertime information (e.g. date, time slot or delivery method) in your email notification templates?

Troubleshooting Steps:

1. Perform a real test order. If you used the order confirmation notification template "Preview" feature, Shopify does not show order attributes which means the Supertime snippets may not show up.

2.  Confirm Supertime data is captured for the order under Additional Details. Supertime data is still not showing up? You may also want to confirm that your order is capturing Supertime information the Order's Additional Details section (see Supertime is not working for more)

3. Confirm your test order has items that require shipping. If you put Supertime liquid snippets into a standard order confirmation template, often times it is done 'within' the "{% if requires_shipping %}" block, so if your test order only has products that do not require shipping (e.g. the test product does not have "this is a physical product" checked, and thus no shipping method"), then you'll need to create an order with products that are shipped.

You can review your products in your test order by clicking on a Product, scrolling down the product details to see if this is checked:
b8c3318243a550d94f2c6468d14030ae.png4. Perform a test order using a snippet similar to the ones provided below. If you place the Attributes snippet just within the end capture block (e.g. below/outside of the last if block) then Supertime attributes would be shown on notifications for every order, not just ones that require shipping.

<p>Date: {{ attributes["Supertime Delivery Date"] | date: "%m/%d/%Y" }}</p>
<p>Time: {{ attributes["Supertime Timeslot"] }}</p>
<p>Method: {{ attributes["Supertime Delivery Method"] }}</p><br>
<p>Date: {{ attributes["Supertime Delivery Date"] | date: "%m/%d/%Y" }}</p>
<p>Time: {{ attributes["Supertime Timeslot"] | slice: 0,5 | time_tag: '%-I:%M %p' }}-{{ attributes["Supertime Timeslot"] | slice: 8,12 | time_tag: '%-I:%M %p' }}</p>
<p>Method: {{ attributes["Supertime Delivery Method"] }}</p><br>

Screen-Shot-2021-06-21-at-9-11-09-AM.png


I cannot customize the checkout page with date or time selection

Supertime works as a cart-based app. Unfortunately, since Shopify requires Shopify Plus access for modifying the checkout page, or checkout extensions, we do not support this currently.

If you are using Supertime on different channels other than your online store, Supertime will only collect dates if your channel is showing your store's cart page.

If you’re looking to make sure your customer is able to see their selected time slot, this article will help you with showing your Supertime details in the post-checkout confirmation page:

Add Supertime details to the post-checkout confirmation page

If you are a Shopify Plus customer, you can customize your checkout.liquid to show cart attributes -- but this will require custom third-party development support


Supertime is not working

Are you not seeing Supertime date and time data in your orders?

Here are some troubleshooting steps:

  1. Ensure that additional checkout settings and dynamic checkout settings are disabled in your theme, especially if you have additional payment methods in your store. Otherwise your customers may be able to bypass date selection in your cart.
  2. Review your store's configuration and disable third-party applications that allow users to checkout from your store. Since Supertime is a cart-based application, if you have third-party applications that enable checkout by creating their own drawer or cart, re-enable the use of the checkout button (for example, a Terms of Condition application), or nudges a customer to go to checkout directly, these paths will bypass date and time collection for Supertime. To ensure the correct operation of Supertime, you will need to also disable the checkout functionality found in these applications. See below for more on steps.
  3. Make sure Supertime is enabled in your store. If Supertime is disabled then customers can still checkout.
  4. Make sure that "required to checkout" is selected in your schedule and delivery method settings.
  5. Review that Supertime is showing up in all of your carts on your theme. Supertime's automatic placement mode may not be compatible with your cart. If this is the case you will need to use our custom placement mode. If Supertime is not showing up and it was previously working, it's possible that other new or updates to existing third-party apps in your cart are causing compatibility issues. (See "More on Third-Party Applications and your Cart Page" below)
  6. Customers able to checkout before your cart has loaded? If you require date or time information from your customers, you may need to disable your checkout button in your theme by default to allow Supertime to control access even in low-bandwidth situations.
  7. Confirm that this order was created through your online store. For more on how to use your Timeline for an order to do so, review this Shopify Help article. Supertime works by collecting dates in the cart for your store's online channel. Our widget is a cart based app. We do not support date collection from other channels (e.g. Buy Button, auto-generated orders from subscriptions, etc.). You may also add Supertime information manually to these orders by reviewing this article.
  8. If you see a Supertime order with a date that you don’t think is selectable, review this article. Or confirm that your schedule is set correctly as desired.
  9. Perform a test order once you have reviewed all the steps above. If you are still experiencing issues with your store after completing these steps, you may have a compatibility problem with your store's theme or suite of apps that may interfere with how Supertime works for collecting date and time information in your cart. 

More on Third-Party Applications and your Cart Page

Steps for checking your cart for compatibility:

  1. Load Supertime on a slow connection (either on a mobile device, or simulate network throttling in your browser by reviewing a method like this). If the checkout button is enabled, and you require date selection, review this article to disable your checkout button in your theme by default since your customer can proceed to checkout before Supertime is loaded.
  2. As you review your cart on a slow connection, and you still see that the cart's checkout button is not disabled, or that it gets re-enabled as more of your cart loads, then you likely have a third-party application that is interacting with your cart.
  3. As you review your cart on a slow connection, and you see that it takes a long time for Supertime to load, or that Supertime does not load even if it's enabled, then there may be apps and scripts that are either not functioning correctly, or are causing this slowdown.
  4. In addition to issues related to apps loading, confirm how your apps that interact with checkout in your cart affect whether or not the checkout button is enabled. Do you have apps that detect order limits, item limits, or have terms of service checkboxes that would enable the checkout button? 
  5. To fix issues related to steps 2, 3 and 4, you can isolate which app is causing this by uninstalling and reinstalling these apps, and also by blocking the requests made by these applications. If these are changes that are from custom development to your cart, then you may need to perform theme updates to ensure compatibility. You may have to remove the snippets of code that load in your cart as these snippets are enabling your checkout button. In addition, if you have uninstalled the apps, you may still need to follow specific instructions to remove the code snippets created by these third party applications in your cart (e.g. apps from popular vendors like HulkApps).

Still experiencing issues after performing the troubleshooting steps? Please contact us and provide more information on what you are experiencing using the Ask form on Supertime. If your store is not live yet, please provide a preview link. If you are contacting us by email, please kindly provide us with your store's url on Shopify (e.g. your-store-url.myshopify.com). 


Cart Page zooms or is zoomed in when I select a time or method on iOS devices

iOS has a system level behaviour for Safari where the browser will zoom if the font-size is less than  16px  and the default font-size for form elements is 11px  .

You can increase the size of the Supertime date input field to prevent this behaviour. See this article on how to add CSS to your store related to Supertime and add a snippet like this to your store's theme's style:

div.supertime > div { font-size: 16px;  }  
div.supertime > div > div > select { font-size: 16px; }  
input.DateInput_input { font-size: 16px; }

Also, you can prevent Safari from automatically zooming in on text fields during user input without disabling the user’s ability to pinch zoom. Just add maximum-scale=1  to your viewport <meta> tag  

It is a worthwhile option if you have a form in a layer that “floats” around if zoomed, which can cause important UI elements to move off screen.

Once you add this to your viewport meta tag the code will look something like this in your theme’s head:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Steps:

1. Visit your store's Theme settings.

2. Click the  Actions button and select Edit Code.

3. Find your theme.liquid file if you have a cart that is present on all your pages.

4. Copy this snippet above or look for the <meta name="viewport"> line in your theme.liquid file.

5. Modify your <meta name="viewport"> to have the same contents as the snippet above, or paste and replace that line in that file.

More on the topic can be found here.


How do I know when a customer made their selection for a date or time on an order?

Supertime will add a "Supertime Selected" attribute that will have the date and time that a customer made their selection in the cart page. This should help provide more insight into the checkout process and diagnosing edge cases with certain customers that selected a date and then take a long time to checkout (or for stores with abandoned carts enabled).

You can disable the "Supertime Selected" attribute by visiting your settings.


Date format in Additional Details in Orders

The date format is stored in a universal format in the order's additional details to make it easier for stores to customize the date format with liquid filters for customer facing interactions. You can however customize the date and time format of your tags and notes in settings.


How Can I Reduce Load Times with Supertime?

Supertime by default is loaded using Shopify's script tag feature, which means we are loaded after the initial page is loaded and minimizes the impact on store loading. 

It also means we are loaded after the initial page is loaded, which can lead to Supertime being loaded late on slow connections especially if you happen to have a lot of scripts, apps or plugins in your storefront. You may follow the steps below to load Supertime sooner in your store.

Steps:

1. Copy this snippet below into your clipboard:

<script async src="{{ "https://getsupertime.com/supertime.js?shop=" | append: shop.permanent_domain }}"></script>

2. Visit your store's Theme settings.

3. Click the  Actions button and select Edit Code. 

4. Find your theme.liquid file if you have a cart that is present on all your pages. 

5. Paste the provided snippet immediately below your  <body> tag in that file. (or above your </body> tag)

On top of that, Supertime attempts to minimize its load size by only loading the whole bundle if a cart form is detected as described in how our detection works. You can minimize load times for your store by only having Supertime load its full bundle when a cart needs to be present.

For example, if you are using the Dawn theme, when you add an item to the cart, we have a component that shows a cart form pop-up (which contains Supertime), which is present throughout your theme on every page in the header, it means that Supertime will load the whole bundle. For example if you are on a product page, and you add a product, it will show that popup alongside Supertime. 

You can hide these kinds of snippets in your theme where it's unnecessary and Supertime will avoid loading the majority of its payload. For example, in Dawn, you can remove or comment out the checkout form in your cart-notification.liquid snippet to stop Supertime from loading the whole bundle:


Help! I cannot connect to Supertime or load the Supertime App in my Shopify Apps

Note: To see if your error or connection issue is a system-wide issue, check our Status page.

Are you experiencing issues with loading the Supertime app? Please review the following troubleshooting steps and take a screenshot of what you're experiencing for submitting a support request.

Troubleshooting Steps:

  • Do you see a Supertime-specific error message? If you see a connection error where see a specific Supertime error message in your browser's error page, then it's a possible issue related to Supertime or your account itself that we can resolve via a support request.
  • Do you see an error message or issue related to authentication with your Shopify account?
    • Refresh your browser or app's Shopify Admin and Supertime App instance - it's possible that your session may have expired after a period of inactivity before attempting to use Supertime again.
    • Check your browser settings - There may be cookie/session related problems in your browser instance -- can you confirm if you are allowing third party cookies in your privacy settings on Chrome? If so, updating these settings, restarting Chrome, logging out and back into Shopify may resolve this issue.   
    • Log out and log back into your Shopify Admin instance - it's possible that there are session issues that are resolved once you log back into to your Shopify admin. Typically, re-authenticating with Shopify, and then our app can help in those instances, or there may be an issue with your device or connection. See steps below.
  • Do you see a browser-based error? (e.g. there is a connection or networking issue from your device or internet connection?)
    • Load Supertime on a different web browser on your device - it's possible that you have browser specific issues that is preventing Supertime from loading (e.g. browser apps/blockers)
    • Load Supertime from a different device (e.g. load Supertime from your mobile device on a different connection) - it's possible that you have device specific issues that is preventing Supertime from loading
    • Load Supertime from a different internet connection (e.g. load Supertime from your mobile device on a different connection) - Are you able to load Supertime from a different internet connection? If Supertime has been working regularly, it's possible that your internet connection may be experiencing temporary issues with cloud services like the one that is hosting Supertime. If this is the case, then there are possible steps to remedy this that are related to support from your internet connection provider. Since the source of the issue will either be related to that connection itself, we may not be able to directly remedy this issue if it's a temporary outage but please submit a support request with this relevant information our team for further review. 
    • Do you still experience an issue after loading Supertime on multiple devices and connections? In this scenario, please submit a support request and share the troubleshooting steps that you performed.

How to upgrade/downgrade your Supertime plan

To change your plan, click on your Supertime settings:

Scroll down to the bottom of the page and click on the link under the Plan section:

A modal will pop up with your plan details. Click the change link:

Select your new plan using the drop-down selector:

Click the Save button to confirm your plan.


Can I remove Supertime attributes and keep tags to help with compatibility with third-party apps like Shipstation?

Select the "Remove Supertime attributes from the order after order tags are added" to remove Supertime attributes after tagging your orders.

Warning: When checked, you will no longer see date and time slot data in the Schedule page. You will no longer have access to Supertime attributes for use in your notifications and order status page to show dates and times.

Sometimes, third-party apps like Shipstation will import everything stored in the note_attributes field (or the Additional Details) section that apps like Supertime use for storing and collecting information in an order. This setting may help you with removing this for compatibility in these kinds of situations. Specifically, Shipstation will merge the information in the Order Notes section and the Additional Details section.


How do I re-install Supertime?

Supertime can be accessed through this URL directly: https://apps.shopify.com/supertime — the app is currently visible but unlisted in the Shopify App Store.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.