> ## 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 chosen theme

<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

If you want to change the style or theming of Supercycle blocks, you can do this in the theme editor.

<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="Scroll to style options">
    Scroll down to the **Style** section. Here you’ll find all the controls for changing how Supercycle blocks look.
  </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>
