Link new and circular products

This snippet goes in a Custom Liquid block in the theme editor, so it works in any Online Store 2.0 theme. It styles itself with the Methods app block’s classes, so the Supercycle Engine app embed needs to be on.

You can sell a product new and offer it through circular methods such as resale, rental, or subscription from the same product page. To do that, create 2 Shopify products, one for the new product and one for the circular methods, and add a switcher that links them. Supercycle finds the pair by a suffix on the product handle.

A product page with a New and Resale switcher above the methods

How it works

The switcher relies on a naming convention for product handles:

Base product. The product sold new, for example t-shirt.
Linked product. The product with circular methods in Supercycle, with a suffix on the same handle, for example t-shirt-circular.

When a customer views either product, the block looks up the other by handle and shows a switcher between the new and circular versions. It only renders when both products exist, so a product without a twin shows nothing. You need both products before you start: a Shopify product for the new item, and a separate Shopify product set up in Supercycle with the suffix on its handle.

Add the switcher

Open the product page in the theme editor

On Themes, select Customize on your theme, then open a product page from the page selector at the top.

Add a Custom Liquid block

In the left sidebar, select Add block in the product information section, then Custom Liquid.

The Shopify theme editor on a product page with a Custom Liquid block selected in the sidebar, the switcher's Liquid code in the block's Liquid code field, and a New and Resale condition switcher rendered above the size options in the preview — The Custom Liquid block in the product information section, with the switcher code in its Liquid code field

Paste the code

Paste this into the block’s Liquid code field.

Custom Liquid block

{%- comment -%} Configurable variables {%- endcomment -%}
{% assign new_label = 'New' %}
{% assign linked_label = 'Resale' %}
{% assign linked_suffix = '-resale' %}

{%- comment -%}
  Work out base / linked handles
{%- endcomment -%}
{% assign current = product.handle %}
{% assign base = current | replace: linked_suffix, '' %}

{% assign is_linked = false %}
{% if base != current %}
  {% assign is_linked = true %}
{% endif %}

{% assign linked = base | append: linked_suffix %}

{%- comment -%} Look up products {%- endcomment -%}
{% assign base_product = all_products[base] %}
{% assign linked_product = all_products[linked] %}

{%- comment -%}
  Only show switcher when:
  - linked_suffix is not blank
  - base product exists
  - linked product exists and is a real product
{%- endcomment -%}
{% if linked_suffix != blank and base_product and linked_product and linked_product.title != blank %}
<div class="supercycle-options">
  <label class="supercycle-options__label form__label">Condition</label>

  <div class="supercycle-options__container">

    {%- comment -%} Base option (no suffix) {%- endcomment -%}
    <a href="{{ base_product.url }}" class="supercycle-options__option-link">
      <div class="
        supercycle-options__option
        {% unless is_linked %}supercycle-options__option--selected{% endunless %}
      " style="align-items: start;">
        <span class="supercycle-options__option-title">{{ new_label }}</span>
      </div>
    </a>

    {%- comment -%} Linked option (with suffix) {%- endcomment -%}
    <a href="{{ linked_product.url }}" class="supercycle-options__option-link">
      <div class="
        supercycle-options__option
        {% if is_linked %}supercycle-options__option--selected{% endif %}
      " style="align-items: start;">
        <span class="supercycle-options__option-title">{{ linked_label }}</span>
      </div>
    </a>

  </div>
</div>
{% endif %}

Set the variables

Change the three assignments at the top to match your labels and handle suffix.

Variables

{% assign new_label = 'New' %}
{% assign linked_label = 'Resale' %}
{% assign linked_suffix = '-circular' %}

Variable	Description	Examples
`new_label`	Label for the new product option	`New`, `Buy New`
`linked_label`	Label for the Supercycle product option	`Resale`, `Rental`, `Circular`, `Buy refurbished`
`linked_suffix`	Suffix on the base handle that identifies the Supercycle product	`-circular`, `-resale`, `-rental`

Save and check both products

Select Save, then open both products on the storefront. The switcher uses the same classes as the Methods app block, so it takes the block’s styling.

The switcher only appears when both the base product and the linked Supercycle product exist. If either is missing, nothing renders.

Introduction

App blocks

Code snippets

Guides

Troubleshooting

Link new and circular products

How it works

Add the switcher

​How it works

​Add the switcher

How it works

Add the switcher