{children}

; export const DocPanel = ({children}) => { const {IndexCardStyles} = indexCardsScope(); return ; }; export const DocLineItem = () => { const {DocPanel, DocSurface} = indexCardsScope(); return

_cycle

{"{ "}"item": {"{ "}"type": "existing",

"filters": {"{ "}"availability"… {"} }"}

; }; export const DocMetafields = () => { const {DocPanel, DocSurface} = indexCardsScope(); return

namespace: supercycle

{[["supercycle_enabled", "true"], ["methods", "[…]"], ["uncommitted_inventory_count", "12"]].map((r, i) =>

{r[0]}{r[1]}

)} ; }; export const DocSnippetTarget = () => { const {DocPanel, DocSurface} = indexCardsScope(); return

{"/* hide one option */"}

[data-supercycle-option-name

*="insurance"] {"{ "}display: none {"}"}

; }; export const DocSnippetCart = () => { const {DocPanel, DocSurface} = indexCardsScope(); return

Cart

Silk Evening DressPremium plan $59.00

Then $59.00 a month

; }; export const DocSnippetLink = () => { const {DocPanel, DocSurface} = indexCardsScope(); return

Silk Evening Dress

{}

Buy newRent Buy newRent

; }; export const DocSnippetPrices = () => { const {DocPanel, DocSurface} = indexCardsScope(); return

{"{% assign sc_product = product %}"}

{"{% if "}cheapest_period{" %}"}

{"{{ "}cheapest_period.total_price{" }}"}

; }; export const DocBlockPlans = () => { const {DocPanel, DocSurface} = indexCardsScope(); return

{[["Essential", "$29", 1], ["Premium", "$59", 2]].map(([n, price, d]) =>

{n} {price} Choose plan

)}

; }; export const DocBlockAvailability = () => { const {DocPanel, DocSurface} = indexCardsScope(); return

Filter by dates 12 Sept - 19 Sept 10 products 8 available

{[0, 1, 2, 3, 4, 5, 6, 7].map(i => )}

; }; export const DocMethodsSetup = () => { const {DocPanel, DocSurface} = indexCardsScope(); return {[["Buy new", "$549.00", false], ["Rent", "From $57.00 a day", true]].map((m, i) =>

{m[0]} {m[1]}

)} ; }; For theme developers and agencies. It covers the app blocks you add in the theme editor, the metafields and line item properties Supercycle writes, and the Liquid and JavaScript you can add to a theme. Every app block needs the [Supercycle Engine app embed](/documentation/setup/theme-setup) turned on in the theme. Its **Methods style** settings, the colors, radii, and **Button class**, apply to the app blocks and to the [contract](/documentation/configuration/risk/e-signatures) and [ID verification](/documentation/configuration/risk/identity-verification) pages Supercycle serves through the app proxy. *** ## App blocks Add, position, and customize these blocks from the theme editor. Add every method a product offers to the product page and control the add to cart button. Let customers filter a collection page by rental dates or method. Show your membership plans as cards on any page so customers can join. *** ## Theme code Liquid and JavaScript you paste into a theme to go beyond what the blocks do on their own. Show each method's price on product cards and product pages. Add a switcher between a product sold new and its circular twin. Show plan names, first payments, and recurring totals on cart lines. Style or hide specific method options from CSS or JavaScript. *** ## Reference The data Supercycle writes to Shopify and reads back at checkout. Read the product, variant, and customer metafields Supercycle keeps in sync. Read the schema of the property that turns a cart line into a cycle. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.