Website logo
Get started
Docs
Dev
Log
Navigate through spaces
⌘K
Developer documentation
Themes
Javascript SDK
Admin API
Docs powered by Archbee
Themes
Components

Featured plans

This is currently in development and might have some issues.

The featured plans section displays information on your store's different Membership plans and lets merchants choose compare and add a plan to their cart. There are two versions, a basic version for all Shopify themes and a Dawn-specific version. These give you the starting code to build out your own custom Featured plan section for Supercycle.


Document image


Setup

Create a new section called membership-plans. Copy and paste the code below.

Basic
Dawn
{%- liquid
  assign interval_select = section.settings.enable_interval_select
-%}

<div class="color-{{ section.settings.color_scheme }} isolate gradient">
  <div class="collection section-{{ section.id }}-padding">
    {% if interval_select %}
      <div class="plans-select-wrapper">
        <div class="plans-select">
          {%- capture unique_billing_intervals -%}
      {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
        {%- for group in product.selling_plan_groups -%}
          {%- for option in group.options -%}
            {%- for billing_interval in option.values -%}
              {{ billing_interval }},
            {%- endfor -%}
          {%- endfor -%}
        {%- endfor -%}
      {%- endfor -%}
      {%- endcapture -%}

          {%- assign unique_billing_intervals_array = unique_billing_intervals | split: ',' | uniq -%}

          {% for billing_interval in unique_billing_intervals_array %}
            <button
              type="button"
              class="button {% if forloop.first %} button--primary{% else %} button--secondary{% endif %}"
              data-number="{{ billing_interval | remove: "Billing " }}"
            >
              {{ billing_interval | remove: 'Billing ' | capitalize }}
            </button>
            {% if forloop.first %}
              {% assign first_data-number = billing_interval | remove: 'Billing ' %}
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endif %}

    <div class="plans-wrapper">
      {%- for product in section.settings.collection.products -%}
        {% for group in product.selling_plan_groups %}
          {% for selling_plan in group.selling_plans %}
            {% assign billing_interval = selling_plan.options.first.value | remove: 'Billing ' %}
            <div
              class="plan-card-wrapper color-{{ section.settings.row_color_scheme }}"
              data-number="{{ billing_interval }}"
            >
              <div class="plan-card-content">
                {% form 'product', product %}
                  <p class="h2">{{ product.title }}</p>
                  <p class="h1 plan-card-price">
                    {{ selling_plan.price_adjustments[0].value | money_without_trailing_zeros }}
                  </p>
                  <p class="plan-card-interval">Billed {{ billing_interval }}</p>
                  <p class="plan-card-credits h3">
                    {{ product.selected_or_first_available_variant.metafields.supercycle.credit_allowance }} credits
                  </p>
                  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                  <input type="hidden" name="selling_plan" value="{{ selling_plan.id }}">
                  <input
                    id="credit-allowance-visible-property"
                    name="properties[Allowance]"
                    value="{{ product.selected_or_first_available_variant.metafields.supercycle.credit_allowance }} credits"
                    type="hidden"
                  >
                  <input
          id="hidden_credit_allowance"
          name="properties[_credit_allowance]"
          value="{{ product.selected_or_first_available_variant.metafields.supercycle.credit_allowance }}"
          type="hidden"
                    >
                   <input type="hidden" name="return_to" value="{{section.settings.redirect_url}}">
                  <div class="plan-card-button">
                    <input type="submit" value="Choose plan" class="button button--primary button--full-width">
                  </div>
                  <div class="plan-card-features">{{ product.description }}</div>
                {% endform %}
              </div>
            </div>
          {% endfor %}
        {% endfor %}
      {% endfor %}
    </div>
  </div>
</div>

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  {% if interval_select %}
  .plan-card-wrapper[data-number]:not([data-number="{{first_data-number}}"]) {
     display:none;
  }
  {% endif %}
  .plans-select-wrapper,
  .plans-select {
    display: flex;
    justify-content: center;
  }
  .plans-select {
    border: 1px solid;
    margin-bottom: 2rem;
    padding: 1rem;
  }
  .plans-select button {
    margin: 1rem;
  }
  .plans-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  @media screen and (min-width: 750px) {
    .plans-wrapper {
    flex-direction: row;
    }
  }
  .plan-card-wrapper {
    width: 100%;
    max-width: 290px;
    flex: 1 1 0%;
    margin: 1rem;
    justify-content: center;
    text-align: center;
    border: 1px solid;
  }
  .plan-card-content {
    width: 100%;
  }
  .plan-card-button {
    padding: 2rem;
  }
  .plan-card-features {
    text-align: left;
    padding: 0 2rem 2rem 2rem;
  }
  .plan-card-price,
  .plan-card-interval {
    margin: 0;
  }
  .plan-card-credits {
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 1rem 0;
  }
{%- endstyle -%}

{% if interval_select %}
  <script>
     document.addEventListener('DOMContentLoaded', function () {
      const buttons = document.querySelectorAll('.plans-select button');
      const planCardWrappers = document.querySelectorAll('.plan-card-wrapper');

      function handleButtonClick(button) {
        const selectedNumber = button.getAttribute('data-number');

        // Remove the 'active' class from all buttons
        buttons.forEach(b => b.classList.remove('button--primary'));
        buttons.forEach(b => b.classList.add('button--secondary'));

        // Add the 'active' class to the clicked button
        button.classList.add('button--primary');
        button.classList.remove('button--secondary');

        // Show/hide plan card wrappers based on the selected number
        planCardWrappers.forEach(card => {
          const cardNumber = card.getAttribute('data-number');
          card.style.display = cardNumber === selectedNumber ? 'flex' : 'none';
        });
      }

      buttons.forEach(button => {
        button.addEventListener('click', () => {
          handleButtonClick(button);
        });
      });
    });
  </script>
{% endif %}

{% schema %}
{
  "name": "Membership plans",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
    {
      "type": "checkbox",
      "id": "enable_interval_select",
      "default": true,
      "label": "Interval select"
    },
     {
      "type": "text",
      "id": "redirect_url",
      "default": "/cart",
      "label": "Rediret URL"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "color_scheme",
      "id": "row_color_scheme",
      "label": "t:sections.multirow.settings.container_color_scheme.label",
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "Memebership plans"
    }
  ]
}
{% endschema %}





Did this page help you?
PREVIOUS
Components
NEXT
Credit cost
Docs powered by Archbee
TABLE OF CONTENTS
Setup
Docs powered by Archbee
Legal | Supercycle, part of Made Super Ltd. 2023