This guide is for stores using older themes or custom themes that require manual code installation. The in-app installation guide will indicate if you need to follow this guide.

⚠️ Important: If your store uses an Online Store 2.0 theme (like Dawn), you should NOT need to follow this guide. SubZero Subscriptions works out-of-the-box with these themes.

When to Use This Guide

You'll need this guide if your store uses:

Older themes from the Shopify theme store
Legacy themes like Debut
Custom themes that aren't Online Store 2.0 compatible

Get Free Installation Help

Recommended: Submit a request for free assistance from our team. We'll handle updating your theme and consult on the best subscription plan configuration for your store.

📧 Contact: [email protected]
⏰ Turnaround: 1-2 business days once we have theme access

If you prefer to install manually, continue with the steps below.

Manual Installation Steps

Step 1: Install Required Snippet

Create a new file in your theme's code editor:

File location: sections/subzero.liquid
Content: Copy and paste the complete code block below

{% if content_for_header contains "joinsubzero.com" %}
  <script type="text/javascript">
    globalThis._SS_DATA = {{ product | json }}
    globalThis._SS_MF = {{ shop.money_format | json }}
    globalThis._SS_CUST_CUR = {{ cart.currency.iso_code | json }}
    globalThis._SS_SHOP_CUR = {{ shop.currency | json }}
    globalThis._SS_HEADER = {{ section.settings.purchase_options_header | json }}
    globalThis._SS_PRICE_FROM = {{ section.settings.price_from | json }}
    globalThis._SS_PRICE_EACH = {{ section.settings.price_each | json }}
    globalThis._SS_PER_SHIPMENT = {{ section.settings.per_shipment | json }}
    globalThis._SS_PER_SHIPMENT_ADJUSTMENTS = {{ section.settings.per_shipment_adjustments | json }}
    globalThis._SS_SUB_POLICY = {{ section.settings.sub_policy | json }}

    {% for locale in shop.published_locales %}
      {% if locale.primary %}
        globalThis._SS_SL = {{ locale.iso_code | json }}
      {% endif %}
    {% endfor %}
  </script>

  <script
    type="text/javascript"
    src="https://cdn.joinsubzero.com/app.min.js"></script>
{% endif %}

{% schema %}
  {
    "name": {
		"en": "SubZero Subscriptions"
	},
    "settings": [
      {
        "type": "text",
        "id": "purchase_options_header",
        "label": {
          "en": "Header"
        },
        "default": {
          "en": "Purchase options"
        }
      },
      {
        "type": "text",
        "id": "price_from",
        "label": {
          "en": "Price description"
        },
        "default": {
          "en": "from {amount}"
        }
      },
      {
        "type": "text",
        "id": "price_each",
        "label": {
          "en": "Price subtext"
        },
        "default": {
          "en": "each"
        }
      },
      {
        "type": "text",
        "id": "per_shipment",
        "label": {
          "en": "Shipment price display (single price)"
        },
        "default": {
          "en": "{amount} per order"
        }
      },
      {
        "type": "text",
        "id": "per_shipment_adjustments",
        "label": {
          "en": "Shipment price display (with price adjustments)"
        },
        "default": {
          "en": "{amount1} for the first {orderCount} order(s) then {amount2}"
        }
      },
      {
        "type": "text",
        "id": "sub_policy",
        "label": {
          "en": "Subscription policy link"
        },
        "default": {
          "en": "View subscription policy"
        }
      }
    ]
  }
{% endschema %}

{% stylesheet %}
  .ss-root {
    margin-bottom: 20px;
    padding: 0;
  }

  .ss-root input[type=radio] {
    margin-right: 5px;
  }

  .ss-root .ss-group-select {
    display: flex;
  }

  .ss-root .ss-group-select label {
    display: flex;
    align-items: center;
    align-self: center;
  }

  .ss-root .ss-group-select div {
    font-size: 0.9em;
    margin-left: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    margin-top: -4px;
  }

  .ss-root .ss-group-select sub {
    text-align: right;
  }

  .ss-root .ss-group-options {
    padding-left: 15px;
    margin-top: 5px;
  }

  .ss-root .ss-group-options > label {
    display: block;
    font-variant: small-caps;
  }

  .ss-description {
    margin: 5px;
    margin-bottom: 20px;
  }

  .ss-description .ss-price {
    font-weight: bold;
  }

  .ss-description p:not(.ss-price) {
    margin-bottom: 0.2em;
  }

  @media only screen and (min-width: 990px) {
    .ss-root {
      padding: 0 5px;
    }
  }
  .ss-root .ss-group {
    border-top: solid 1px var(--color-border-form-darker, #cccccc);
    border-left: solid 1px var(--color-border-form-darker, #cccccc);
    border-right: solid 1px var(--color-border-form-darker, #cccccc);
    padding: 10px 10px 5px 10px;
    background-color: var(--color-text-field);
  }

  .ss-root .ss-group-select label {
    display: flex;
    align-items: center;
    align-self: center;
    max-height: 25px;
  }

  .ss-group:last-of-type {
    border-bottom: solid 1px var(--color-border-form-darker, #cccccc);
  }

  .ss-root .ss-group-select div {
    color: inherit;
  }

  .ss-root .ss-group-options > div {
    max-height: 25px;
  }

  .ss-root .ss-group-options > div > label > input {
    min-height: 0px;
  }

  .ss-group-options > div > * {
    margin: 5px;
  }
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Step 2: Add Section to Product Template

Add the subscription widget section to your product page template.

Example for Debut theme:

Open templates/product.liquid
Add this line after {% section 'product-template' %}:

{% section 'subzero %}

Step 3: Tag the Product Variant Select

The master product variant select needs to be tagged so SubZero Subscriptions can find it.

Example for Debut theme:

Open sections/product-template.liquid
Find the select element with name="id"
Add data-product-master-select attribute:

<select
  name="id"
  id="ProductSelect-{{ section.id }}"
  class="product-form__variants no-js"
  data-product-master-select>
</select>

Important: Add this attribute to ALL product select elements if your theme uses different forms for single-variant and multi-variant products.

Step 4: Update JavaScript for Variant Changes

Update your theme's JavaScript to notify the app when the selected variant changes.

Add this code snippet to your variant change function:

if (typeof(globalThis._SS_APP) !== 'undefined') {
  globalThis._SS_APP.selectVariant(variant.id);
}

Example for Debut theme: Insert this in the _onSelectChange function after calling _updateMasterSelect.

Step 5: Place the Widget Container

Add the widget container where you want the purchase options to appear.

Add this HTML to your product template:

<div id="ss-options"></div>

Example for Debut theme: Place this in sections/product-template.liquid just before the "Add to Cart" button.

Optional Enhancements

Display Selling Plan in Cart

To show the subscription plan name in the cart, add this code to your cart template:

{% unless item.selling_plan_allocation == empty %}
  {{ item.selling_plan_allocation.selling_plan.name }}
{% endunless %}

📖 Learn more: Shopify's Storefront Guidelines for Subscriptions

Customize Widget Styling

The default CSS is included in the subzero.liquid file you created. Edit the CSS in the {% stylesheet %} section to match your theme's design.

AJAX Cart API Integration

If your theme uses the AJAX Cart API, you may need to include the selling_plan parameter in cart requests.

Get the selected selling plan ID:

const sellingPlan = document.querySelector('input[name=selling_plan]').value;

📖 Learn more: Shopify AJAX API Documentation

Verification

After completing the installation:

Test the widget: Visit a product page with subscription options
Check functionality: Ensure variant selection updates subscription options
Verify cart display: Confirm subscription plans show in cart (if implemented)
Test checkout: Complete a test subscription purchase

Troubleshooting

Common Issues

Widget not appearing: Check that the section is properly added to your product template
Variant selection not working: Verify the data-product-master-select attribute is added
Styling issues: Adjust the CSS in the subzero.liquid file

Need Help?

If you encounter issues during installation or prefer professional setup:

📧 Email: [email protected]
📝 Request free setup: We'll handle the entire installation process for you

Custom Theme Installation Guide