Skip to main content
Supercycle adds rental and resale options to your storefront through the Supercycle Engine app embed and app blocks in your theme. You set both up in Shopify’s theme editor, from Themes.
Supercycle works with Online Store 2.0 themes. On an older theme you’ll likely need a developer to add the blocks.

Turn on the app embed

The Supercycle Engine app embed loads Supercycle on every page and is required for the app blocks to work.
1

Open the theme editor

On Themes, select Customize on the theme you want to add Supercycle to.
Shopify's Online Store themes page with the current theme and its Customize button

Customize on the current theme opens the theme editor

2

Turn on the app embed

In the left sidebar, select App embeds, then turn on Supercycle Engine.
The theme editor's App embeds panel with the Supercycle Engine toggle turned on

App embeds in the theme editor sidebar, with Supercycle Engine turned on

3

Save

Select Save before leaving the theme editor.

Add the Methods app block

Supercycle’s storefront features are app blocks, so you place them where you want them in your templates. At a minimum, add the Methods app block to your product template: it shows the rental and resale options and drives your theme’s Add to cart button. For the block’s settings, see Methods app block.

Update style settings

The Methods style section of the Supercycle Engine app embed controls how the Methods block looks on product pages and how requirement pages look when customers follow links from checkout or their account: contract lists, contract signing, and ID verification at <your_proxy_url>/contracts, <your_proxy_url>/contracts/sign, and <your_proxy_url>/identity_verification. Headings and body copy on those pages inherit your theme’s typography. Buttons use the embed’s Button class setting, button by default, so they match the rest of your storefront.
1

Open the theme editor

On Themes, select Customize on the theme you want to edit.
2

Open the Supercycle Engine settings

In the left panel, select App embeds, then select Supercycle Engine to expand its settings.
3

Adjust Methods style

Under Methods style, set the colors, border radius, and Button class. The same values apply to Methods blocks and requirement pages.
4

Save

Select Save.

Theme setup FAQs

The Methods app block uses your theme’s own Add to cart button rather than adding one. Make sure the Buy buttons block is in your product template, and remove any dynamic checkout buttons such as Buy now.
The theme editor with the Methods and Buy buttons blocks in the product information section, and the Methods block above the Add to cart button on the product page

The Methods block and the theme's Buy buttons block in the product template

Yes. Set the display order with custom CSS in your theme, using the order property on each method’s class:
Methods order
The Methods app block on a product page showing Buy now, Rent with membership, and Rent one-time in that order

Resale first, then membership, then calendar

Set a JavaScript variable in your theme:
  • window.supercycleStopSync = true stops Supercycle from updating the add to cart button.
  • window.supercycleStopSync = false turns it back on.

Theme troubleshooting

Why it happens. The Methods app block controls your theme’s Add to cart button and keeps it disabled until the selection is complete: a method option with valid dates, stock for those dates, and every required terms row ticked.How to fix it. Check that the product has an active method with at least one option, that the dates picked are available, and that any terms rows are ticked. If the button stays disabled with a valid selection, contact support from the app with the product URL and a screenshot of the product page.
Why it happens. The Supercycle Engine app embed is off, or the theme doesn’t support app blocks in that template.How to fix it. Turn on the app embed under App embeds and reload the theme editor. If the blocks still don’t appear, contact support from the app with your theme name and the template you’re editing.