How do I customize where to place my Supertime widget on my cart page?

If you are looking for help with customizing the CSS and styling of your Supertime widget (font size, padding, alignment, etc.) review these articles instead.

Automatic Detection and Placement

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.

Supertime interacts with your theme with these assumptions:

1. Supertime looks for the  <form action="/cart">  element in your store's theme to find where the theme's checkout buttons are located.
2. Supertime also expects that there is a checkout button, which would be a <button> or <input> field with name="checkout" as an attribute inside of this form. Note: Supertime uses this to manage whether or not the checkout button is disabled.
3. Supertime also looks for theme-specific elements to add Supertime in an optimal position based on the conditions above.
4. In addition to our automatic detection, in our automatic placement mode, Supertime inserts itself in an optimal place within this form in most of the supported themes, or just inside of the form if we do not detect an optimal placement for the detected elements. 
5. If Supertime cannot detect where to place the widgets in our automatic detection mode, then we return a message that you can see in your console instead.

If you have a theme where your checkout buttons are not inside of a form and use an <input> or <button> field as described above, then Supertime is incompatible with your theme without modification in your theme's cart to have a detected <form> element with a <input> or <button> field within as described above. This means if you have a checkout button or link that is constructed via something like an  <a href="/checkout">  tag, without a form, or your checkout form is a <form action="/checkout">   element -- these types of elements are ambiguous and is sometimes used to continue onto the cart. You may need to modify your theme, or use our manual detection mode.

You can usually edit your theme if it does not have checkout forms and buttons structured as per above to ensure compatibility with Supertime's automatic detection mode. Your checkout code can typically be found in the   cart.liquid, cart-template.liquid or cart-drawer.liquid files of your theme. We also provide a manual detection mode that can help provide compatibility with your theme and store setup.

If you have a custom theme and you aren't able to use our automatic detection and placement mode, or adjust your theme as described above, then you would need to consider using Supertime's custom placement mode. This lets you control where Supertime appears on your cart page via an appropriate CSS Query Selector snippet to insert Supertime with a provided position from the queried elements. 

You would also need to consider adding manual detection if our automatic detection mode isn't compatible with your theme and you aren't able to modify your theme to increase compatibility. Supertime cannot provide development support for theme modifications, but we can assist with questions about how our custom placement mode and manual detection as described below. Support for theme modifications are best directed toward a 3rd-party development service.

Custom Placement Mode

Is our automatic placement mode not working well for your theme? Are you looking to customize where Supertime appears on your cart page or cart drawer?

If you have a custom theme, heavily modified theme, an older theme where our automatic detection mode does not work well for your cart, or you want to place Supertime differently in your theme, then you or your development partner can use our custom placement mode instead as well.

In Supertime's custom placement mode, Supertime inserts itself where the provided CSS query selectors detects elements inside of these forms, and in the position that is provided, only if Supertime is detecting your theme successfully as described in our detection mode.

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. 

Instructions for Custom Placement Mode

Steps to adding a query Selector in Custom Placement Mode:

1. Navigate to your Supertime settings.
2. In your Widget Placement settings, select "Custom placement for the Supertime widget",
3. Update the Query Selector element field with the desired query selector. (Need help with finding an appropriate selector? Follow these steps). You can also string together multiple selectors by creating a list of selectors separated by a comma and a space.
   • The CSS selector for custom placement is relative to the form element, not the entire document!
4. Confirm where you would like to place your widget position, in our case we would like to do this before the element.
5. Save your Supertime settings and refresh the page to see if the custom placement is expected.
   • Tip: check the developer console to see if Supertime was able to find the element using the custom CSS selector

Example:

<div class=".side-drawer">
  <form class=".cart">
    <div class=".cart__items"></div>
    <div class=".cart__shipping"></div>

    <!-- We want Supertime to show up here -->

    <div class=".cart__actions">
      <button class=".checkout">Checkout</button>
    </div>
  </form>
</div>

In the above HTML snippet, if we wanted Supertime to appear after our shipping information but before our cart checkout button we would use the following settings:

Reminder: the CSS selector is relative to the form element! This is because Supertime must be part of the form submission to function properly. If our CSS selector was ".side-drawer div.cart__actions" the element would not be found since .side-drawer isn't a child element of the form element.

Adding Manual Detection

If you have a custom theme and Supertime is not being detected, you may also provide additional CSS query selectors in your theme via the following to add manual detection: 

• formSelector : use this for locating your cart's <form>  or <div>  where your checkout button resides. Supertime will also use this selector as the element for placement based on the provided options above. for Supertime to detect a cart update.
• refreshSelector : If you have cart actions or animations that cause the Supertime widget to disappear, Supertime will attempt be re-added into these detected elements, based on this provided selector. In general it's recommended to use a top-level div that won't be replaced (e.g., "#cart-drawer" for the top-level div for a sliding cart drawer theme)
• buttonSelector : Provide a CSS query selector to specify how to detect your checkout button located inside of Supertime's checkout form. Use this if you have a checkout button that isn't an <input>  or <button>  field with name='checkout' attribute. This can help you with disabling link or <a> tag checkout buttons.

Steps:

1. Copy and paste this snippet below and add the desired CSS Query Selectors for each of the detection options:

<script> SupertimeManualMode = { formSelector: "<insert your CSS Query Selector here>", refreshSelector: "<insert your CSS Query Selector here>", buttonSelector: "<insert your CSS Query Selector here>" };</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)