> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supercycle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme setup

> Add Supercycle to your Shopify theme with the Methods app block and style settings

<Info> Supercycle works with Shopify Online Store 2.0. If you're using an older theme, you’ll likely need a developer to help set it up. </Info>

### Activate Supercycle in your theme

To activate Supercycle in your theme, you need to enable the app embed. This will add the Supercycle app embed to your theme, allowing you to add app blocks to your store.

<Steps>
  <Step title="Customize theme">
    From your Shopify admin, go to **Online store** and click **Customize** on the theme you want to add Supercycle to.

    <Frame type="glass">
      <img src="https://mintcdn.com/supercycle/Omgmq0rsgqX1BZKa/images/screenshots/supercycle-admin/customise-theme.png?fit=max&auto=format&n=Omgmq0rsgqX1BZKa&q=85&s=61374a8f829b9912a861e0132a550287" width="1946" height="1116" data-path="images/screenshots/supercycle-admin/customise-theme.png" />
    </Frame>
  </Step>

  <Step title="Activate the app embed">
    On the sidebar, click the **App embed** icon and click the **toggle** beside the Supercycle app embed to activate it.

    <Frame type="glass">
      <img src="https://mintcdn.com/supercycle/Omgmq0rsgqX1BZKa/images/screenshots/supercycle-admin/enable-app-embed.png?fit=max&auto=format&n=Omgmq0rsgqX1BZKa&q=85&s=bfc905bdeb70c76c4154a2f213ffddf9" width="1944" height="1280" data-path="images/screenshots/supercycle-admin/enable-app-embed.png" />
    </Frame>
  </Step>

  <Step title="Save your theme changes">
    Don't forget to save your changes before leaving the theme customizer.
  </Step>
</Steps>

***

### Add the Methods app block to your theme

Supercycle's customer-facing functionality is added to your theme as app blocks, allowing you to add rental functionality exactly where you want to use it on your store.

At a minimum, you'll need to add **Methods** app block to your product page.

***

### Update style settings

The **Methods style** section in the Supercycle Engine app embed controls how Methods blocks look 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 proxy pages inherit your theme's typography. Buttons use the embed's **Button class** setting (default `button`), so CTAs match the rest of your storefront.

<Steps>
  <Step title="Go to theme editor">
    In your Shopify admin, go to **Online store > Themes** and click **Customize** on the theme you want to edit.
  </Step>

  <Step title="Open Supercycle app embed">
    In the left panel, select **App embeds**, then click **Supercycle Engine** to expand its settings.
  </Step>

  <Step title="Adjust Methods style">
    Scroll to **Methods style**. Set colors, border radius, and **Button class** here. The same values apply to Methods blocks and requirement proxy pages.
  </Step>

  <Step title="Save your changes">
    Select **Save** before leaving the theme editor.
  </Step>
</Steps>

***

## FAQs

<AccordionGroup>
  <Accordion title="I added the methods block to my product page but don’t see an add to cart button. How do I add it?">
    Supercycle’s methods block uses your theme’s existing **add to cart** button. Make sure the button is present in your product template and remove any “buy now” dynamic checkout buttons.

    <Frame type="glass" alt="Product page using Supercycle methods app block">
      <img src="https://mintcdn.com/supercycle/Omgmq0rsgqX1BZKa/images/screenshots/supercycle-admin/add-to-cart-button-methods.png?fit=max&auto=format&n=Omgmq0rsgqX1BZKa&q=85&s=6ea6f58c7cc036ab256746c565d8d815" width="1689" height="956" data-path="images/screenshots/supercycle-admin/add-to-cart-button-methods.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

<AccordionGroup>
  <Accordion title="Can I change the order of methods on the product page?">
    Yes. You can control the display order of methods by applying custom CSS.\
    Use the `order` property to rearrange elements:

    ```css theme={null}
    .supercycle-method--resale {
    order: 1;
    }

    .supercycle-method--calendar {
    order: 2;
    }

    .supercycle-method--membership-join,
    .supercycle-method--membership-overview {
    order: 3;
    }
    ```

    <Frame type="glass" alt="Ordered Methods">
      <img src="https://mintcdn.com/supercycle/XbKBsdX_PulItpyX/images/screenshots/customer-facing/storefront-methods-order.png?fit=max&auto=format&n=XbKBsdX_PulItpyX&q=85&s=4620d4131b7b9b77c5aa84e9d7d90ca7" width="578" height="331" data-path="images/screenshots/customer-facing/storefront-methods-order.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

<AccordionGroup>
  <Accordion title="How can I stop Supercycle from updating the add to cart button?">
    You can control whether Supercycle updates the add to cart button with a JavaScript variable:

    * `window.supercycleStopSync = true` stops Supercycle from updating the add to cart button.
    * `window.supercycleStopSync = false` re-enables it.
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Add to cart is disabled on the product page">
    Please reach out to support for assistance.
  </Accordion>

  <Accordion title="App blocks don't show up">
    If the app blocks don't show up, check if the app embed is enabled. If the problem persists, the theme you are using might not be compatible with the app blocks out of the box. Contact support at [support@supercycle.com](mailto:support@supercycle.com) so we can fix it for you.
  </Accordion>
</AccordionGroup>