Show or hide Supertime based on products or product information in your cart

Supertime can be configured to be shown or hidden based on product information in the cart while in the custom placement mode by adding some custom theme integration code. You can provide custom theme code for controlling how Supertime interacts with your cart in our custom placement mode to show or hide the Supertime widget. 

We have provided example use cases with relevant snippets for your cart below -- these are advanced tutorials where you may need help from a Shopify Partner that specializes in custom theme development. Before you review the steps below, please first read more on how Supertime interacts with your cart in the custom placement mode by reviewing this article.

Use Case: Show Supertime for only certain products with a desired Product Tag

1. Add this Snippet for identifying when to show Supertime using Product Tags wherever you have your cart templates:

{% assign show_supertime = false %}

{% for item in cart.items %}
  {% for tag in item.product.tags %}
    {% if tag contains "Local Delivery" %}
      {% assign show_supertime = true %}
    {% endif %}
  {% endfor %}
{% endfor %}

2. Update all the checkout buttons for updating your cart so that Supertime is hidden or shown based on the show_supertime flag that has been created above.

Below is an a working snippet for the Debut Theme:

a. Find a suitable div inside of the cart form in your sections -> cart-template.liquid file in your theme by editing the theme code. For our example, we are going to add the "show-supertime" class name in the <div class="cart__buttons-container"> class so that we can place the Supertime element before this in our custom placement mode:

                              <div class="cart__buttons-container">

b. Replace the above with this snippet below - we are adding the show-supertime class that Supertime's custom placement mode can use for detecting the theme:

            {% if show_supertime == true %}
              <div class="cart__buttons-container show-supertime">
            {% else %}
              <div class="cart__buttons-container">              
            {% endif %}

c. Once you've updated the theme, it should look like this:

3. Update your Supertime settings to use the custom placement mode with a query selector that looks for an element in your cart form that includes the show-supertime class:

Once completed, Supertime will only detect the checkout button when certain products with certain products tags (e.g. if you set a "Local Delivery" tag in your product") are present in your cart. 

Additional Use Cases: 

Hide Supertime only when certain products are in your cart using a Product Title

Snippet for identifying when to show Supertime using a Product Item name for creating your show_supertime flag. See above for steps for updating your cart's checkout buttons to support this workflow.

{% assign show_supertime = true %}

{% for item in cart.items %}
    {% if item.product.title contains "Same Day" %}
      {% assign show_supertime = false %}
    {% endif %}
{% endfor %}

Show Supertime unless you only have certain products in your cart using Product Title

Snippet for identifying when to show Supertime using a Product Item name for creating your show_supertime flag. See above for steps for updating your cart's checkout buttons to support this workflow.

{% assign show_supertime = false %}

{% for item in cart.items %}
    {% unless item.product.title contains "Gift Card" %}
      {% assign show_supertime = true %}
    {% endif %}
{% endfor %}