This is a temporary solution while we implement a proper integration.
Example of new and resale product switcher on a product page
Prerequisites
- A Shopify product for the new item (e.g
t-shirt)
- A separate Shopify product setup with Supercycle with a suffix (e.g
t-shirt-circular)
How it works
The code uses product handle naming conventions to automatically link products:
- Base product:
t-shirt (new product from Shopify)
- Linked product:
t-shirt-circular (product with circular methods via Supercycle)
When a customer views either product, they see a switcher that lets them toggle between the new and circular versions.
Add the code to your theme
Add the Liquid code
Add a Custom Liquid block to your product page in the theme editor:
- Go to Online Store > Themes in your Shopify admin
- Click Customize on your active theme
- Navigate to a product page using the page selector dropdown
- In the left sidebar, click Add block in the product information section
- Select Custom Liquid from the block options
- Paste the following code into the Custom Liquid field:
{%- 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 %}
Configure the variables
Update these variables to match your setup:{% assign new_label = 'New' %}
{% assign linked_label = 'Resale' %}
{% assign linked_suffix = '-circular' %}
| Variable | Description | Examples |
|---|
new_label | Label shown for the new product option. | New, Buy New |
linked_label | Label shown for the Supercycle product option. | Resale, Rental, Circular, Buy refurbished |
linked_suffix | Suffix added to the base product handle to identify the Supercycle version. | -circular, -resale, -rental |
Style the switcher
The switcher uses the same classes as the Supercycle methods app block.
The switcher only appears when both the base product and the linked Supercycle product exist. If either product is missing, the switcher won’t display.
