> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supercycle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Display method prices

> Show each method's price on product cards and product pages with a Liquid snippet

<Info>
  This snippet reads Supercycle's product [metafields](/developers/metafields), which the Supercycle Engine app embed keeps in sync. It works in any theme that renders product cards or prices in Liquid.
</Info>

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.

```liquid Product page theme={null}
{% assign sc_product = product %}
```

```liquid Product card theme={null}
{% assign sc_product = product_card %}
```

***

## Add the snippet

```liquid snippets/sc-prices.liquid theme={null}
{% 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 %}
```