Detection and Placement Options: Change the placement where Supertime shows up on my cart page or cart drawer

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? Supertime supports that!

Supertime works in automatic detection and placement modes for the free themes in the Shopify Theme Store and also many popular themes. If you have a custom theme, 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.

Automatic Detection

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></ocde> or <code><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. The Supertime widget is active and functional in forms that meet the conditions above.  

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.

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.liquidcart-template.liquid or cart-drawer.liquid files of your theme.

Adding Manual Detection

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

  • formSelector: 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.
  • 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.

Steps:

1. Copy and paste this snippet below and replace .your-selector-here with the desired CSS Query Selectors as needed:

<script> SupertimeManualMode = { formSelector: ".your-selector-here", refreshSelector: ".your-selector-here", buttonSelector: ".your-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.

Automatic and Custom Placement Modes

In Supertime's 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. 

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. 

Finding the Right CSS Query Selector

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 class="cart__buttons-container"> element:

  6. 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) into the Query Selector field in Supertime following the "Updating your Query Selector in Custom Placement Mode" steps below. To provide multiple selectors, you can enter multiple selectors separated by a comma into the Query Selector field.

Updating your 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 (for example, we have div.cart__actions below):
  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. Supertime will now insert the widget just before the <div> element.