How does Supertime work with my theme?

• 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 code
        
        2. 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.