Display method prices

This snippet reads Supercycle’s product metafields, which the Supercycle Engine app embed keeps in sync. It works in any theme that renders product cards or prices in Liquid.

Add this snippet to your theme’s price snippet or product card to show a price line for each method a product offers: a buy price for resale, a “rent from” price for calendar, a recurring price for subscription, and a “Free with membership” line for membership.

How it works

The snippet reads the four method configuration metafields and sets supercycle_methods to true when the product has any method. It then renders one .sc-method-price line per method, plus the compare-at price as an RRP line when it’s higher than the price. When the product has no method, supercycle_methods stays false, so you can render your theme’s normal price in an {% else %} branch. Change the first assignment to match where you place the snippet. On a product page the product is product. In a card it’s often product_card, or closest.product in newer themes.

Product page

{% assign sc_product = product %}

Product card

{% assign sc_product = product_card %}

Add the snippet

snippets/sc-prices.liquid

{% comment %} Assign the product resource (change this if needed) {% endcomment %}
{% assign sc_product = closest.product %}

{% comment %} Read the Supercycle method configuration {% endcomment %}
{% assign calendar_config     = sc_product.metafields.supercycle.calendar_configuration.value %}
{% assign membership_config   = sc_product.metafields.supercycle.membership_configuration.value %}
{% assign resale_config       = sc_product.metafields.supercycle.resale_configuration.value %}
{% assign subscription_config = sc_product.metafields.supercycle.subscription_configuration.value %}

{% comment %} Does the product have any Supercycle method? {% endcomment %}
{% assign supercycle_methods = false %}
{% if calendar_config.rental_periods or membership_config or resale_config or subscription_config %}
  {% assign supercycle_methods = true %}
{% endif %}

{% if supercycle_methods %}
  <div class="sc-prices">

    {% comment %} Resale: buy {% endcomment %}
    {% if resale_config and sc_product.compare_at_price != blank %}
      <div class="sc-method-price">
        <span class="type">Buy:</span>
        <span class="price">
          {%- if settings.currency_code_enable -%}
            {{ sc_product.price | money_with_currency }}
          {%- else -%}
            {{ sc_product.price | money }}
          {%- endif -%}
        </span>
      </div>
    {% endif %}

    {% comment %} Calendar: rent from the cheapest period {% endcomment %}
    {% if calendar_config and calendar_config.rental_periods %}
      {% assign cheapest_period      = calendar_config.rental_periods | sort: 'total_price' | first %}
      {% assign rental_periods_count = calendar_config.rental_periods | size %}

      {% if cheapest_period %}
        <div class="sc-method-price">
          <span class="type">
            {% if rental_periods_count > 1 %}
              Rent from:
            {% else %}
              Rent:
            {% endif %}
          </span>
          <span class="price">
            {%- if settings.currency_code_enable -%}
              {{ cheapest_period.total_price | money_with_currency }}
            {%- else -%}
              {{ cheapest_period.total_price | money }}
            {%- endif -%}
          </span>
        </div>
      {% endif %}
    {% endif %}

    {% comment %} Subscription: subscribe from the cheapest pricing group {% endcomment %}
    {% if subscription_config and subscription_config.pricing_groups %}
      {% assign cheapest_group = subscription_config.pricing_groups | sort: 'price_cents_per_day' | first %}
      {% assign groups_count   = subscription_config.pricing_groups | size %}

      {% if cheapest_group %}
        {%- assign interval_count = cheapest_group.billing_interval_info.count -%}
        {%- assign interval_unit  = cheapest_group.billing_interval_info.unit | downcase -%}
        {%- assign interval_duration = cheapest_group.billing_interval_info.duration -%}

        {%- if interval_count == 1 -%}
          {%- assign interval_label = interval_unit -%}
        {%- else -%}
          {%- assign interval_label = interval_duration -%}
        {%- endif -%}

        <div class="sc-method-price">
          <span class="type">
            {% if groups_count > 1 %}
              Subscribe from:
            {% else %}
              Subscribe:
            {% endif %}
          </span>
          <span class="price">
            {%- if settings.currency_code_enable -%}
              {{ cheapest_group.reccuring_price_cents | money_with_currency }}
            {%- else -%}
              {{ cheapest_group.reccuring_price_cents | money }}
            {%- endif -%}
            <span class="interval">/ {{ interval_label }}</span>
          </span>
        </div>
      {% endif %}
    {% endif %}

    {% comment %} Membership {% endcomment %}
    {% if membership_config and membership_config.credit_costs %}
      <div class="sc-method-price">
        <span class="type">Free with membership</span>
      </div>
    {% endif %}

    {% comment %} RRP {% endcomment %}
    {% if sc_product.compare_at_price and sc_product.compare_at_price > sc_product.price %}
      <div class="sc-method-price sc-price--rrp">
        <span class="type">RRP:</span>
        <span class="price">
          {%- if settings.currency_code_enable -%}
            <s>{{ sc_product.compare_at_price | money_with_currency }}</s>
          {%- else -%}
            <s>{{ sc_product.compare_at_price | money }}</s>
          {%- endif -%}
        </span>
      </div>
    {% endif %}

  </div>
{% endif %}

Introduction

App blocks

Code snippets

Guides

Troubleshooting

Display method prices

How it works

Add the snippet

​How it works

​Add the snippet

How it works

Add the snippet