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.

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 %}