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

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.

Remove dynamic checkout buttons on product pages

Steps (On Desktop):

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Open the drop-down menu at the top of the page.
  4. Select Product pages.
  5. Click the Product pages section.
  6. Uncheck Show dynamic checkout button.
  7. Click Save.

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 that you want to edit, and then tap Customize.
  5. Tap Templates.
  6. Select Product pages.
  7. Click the Product pages section.
  8. Uncheck Show dynamic checkout button.
  9. Click Save.

If you don't see the Show dynamic checkout button setting, then you need to update your theme or edit your theme code.

Remove dynamic checkout buttons on your home page

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.

Steps (On Desktop):

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Add section.
  4. Click Featured product, and then click Select.
  5. Enter your product details and uncheck Show dynamic checkout button.
  6. Click Save.

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 that you want to edit, and then tap Customize.
  5. Tap Edit.
  6. Click Add section.
  7. Click Featured product, and then click Select.
  8. Enter your product details and check or uncheck Show dynamic checkout button.
  9. Click Save.

If you don't see the Show dynamic checkout button setting, then you need to update your theme or edit your theme code. For removing dynamic checkout buttons, you can also review this Shopify help article. For additional checkout buttons, you can review and this Shopify help article. You will need to find and remove these snippets in your theme. 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.

Side Note: 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. 

If you do not have additional payment methods enabled for your store, you can skip this step.

Option 1: 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 2 or Option 3 below.

Option 2: Add This CSS Snippet To 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 Assets folder, open your main CSS file or one where you can add an additional snippet e.g.  theme.css.liquid.
  4. Place this code at the bottom of the CSS file (this may be a long file):
  5. /* hide additional checkout buttons for Supertime */
    .additional-checkout-buttons {
      display: none;
    }
    	
  6. 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 Assets folder, open your main CSS file or one where you can add an additional snippet e.g.  theme.css.liquid.
  6. Place this code at the bottom of the CSS file (this may be a long file):
  7. /* hide additional checkout buttons for Supertime */
    .additional-checkout-buttons {
      display: none;
    }
    	
  8. Click Save to save your changes to the file.
  9. The additional checkout buttons now appear on the checkout page instead of the cart page.

Option 3: 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:
  5. {% if additional_checkout_buttons %}      
      <div>        
        {{ content_for_additional_checkout_buttons }}      
      </div>    
    {% endif %}
    	
  6. 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:
  6. {% if additional_checkout_buttons %}
      <div>        
        {{ content_for_additional_checkout_buttons }}      
      </div>    
    {% endif %}
    	
  7. Click Save to save your changes to the file.
  8. The additional checkout buttons now appear on the checkout page instead of the cart page.

If you don't see the Show dynamic checkout button setting, then you need to update your theme or edit your theme code.

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:
  4. <input type="submit" name="checkout" value="{{ 'cart.general.checkout' | t }}" disabled>
    	
  5. 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.

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.