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 placement mode for the free themes in the Shopify Theme Store (and also many popular themes).

If you have a custom theme, then you likely would need to consider using Supertime's custom placement mode.

You can control where Supertime appears on your cart page by adding the appropriate CSS Query Selector snippet to insert Supertime within the desired element, as long as this element is inside the <form action="/cart"> element of your cart theme template. Supertime also expects that your checkout button is inside a <form action="/cart"> field.

These can typically be found in the  cart.liquidcart-template.liquid or cart-drawer.liquid files of your theme.

Steps:

Note: If you are familiar with using your web browser's developer tools for finding an element within your checkout cart's <form> element that to identify the desired element, skip to Step 5.

  1. Visit your store's Theme settings.
  2. Click the Actions button and select Edit Code.
  3. Find the <form> element. This is typically the cart.liquid or cart-template.liquid file. If you are using a slide-out cart (like in the Express theme), you will want to find cart-drawer.liquid.

  4. Next, look for an appropriate element inside of your form. For example, a good place to place Supertime in the Narrative theme would be before the <div> element. In our case here, using a query selector to identify the <div class="cart__actions"> element like div.cart__actions would work.
  5. Next, let's return to Supertime's settings.
  6. In your Widget Placement settings, select "Custom placement for the Supertime widget",
  7. Update the Query Selector element with <the query suitable for your theme> (e.g. in our case here, div.cart__actions)
  8. Confirm where you would like to place your widget position, in our case we would like to do this before the element.
  9. Save your Supertime settings. Supertime will now insert the widget just before the <div> element.

Please contact us if custom placement mode still results issues for your cart after you have identified the correct query selectors. There are certain dynamic carts and situations where our team can help.