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

# Configuration

The LoyaltyLion SDK can be configured using the `loyaltylion.configure` function.

## Class-based isolation

We apply a set of 'isolation' styles to ensure that our components look good regardless of a theme's existing CSS. By default, this is implemented by rendering the root of our component trees with an `id="loyaltylion"` element, allowing us to target our isolation styles using `#loyaltylion ... { ... }` which enables robust and reliable isolation. This has the potential side effect of rendering more than one element on the page with the `#loyaltylion` id, which can raise warnings with some web standards validation tools.

If you prefer to use class-based isolation, you can use a configuration option to do so:

```javascript theme={null}
loyaltylion.configure({
  useClassIsolator: true,
})
```

This causes our components to render with a new `lion-isolator`, and subsequently your CSS customisations need to use this as well. From the example above, this now looks like:

```css theme={null}
/* instead of #loyaltylion */
.lion-isolator .lion-loyalty-panel-sidebar__title {
  font-weight: bold;
}
```

<Info>
  Note that class-based isolation is inherently less robust than id based
  isolation, and using it may require you to implement additional CSS overrides
  to address any conflicts that arise between your theme's styles and our
  components.
</Info>

#### Preview class-based isolation

To facilitate easy adoption of class-based isolation, you can enable it for a single pageview by adding a `?ll_use_class_isolator=1` query param. This allows you to try it out and see what additional CSS you may need to apply to address any style conflicts.

## Disable our default styles

It's possible to prevent our default styles from loading entirely, so you can start from a completely blank slate. To do this, set the `disableBundledCSS` option to `true` when you configure the LoyaltyLion SDK:

```javascript theme={null}
loyaltylion.configure({
  disableBundledCSS: true,
})
```

## Disable our default fonts

By default, we load the `Source Sans Pro` font, when using your own font your should disable ours to avoid loading an unnecessary font. To do this, set the `disableBundledFonts` option to `true` when you configure the LoyaltyLion SDK:

```javascript theme={null}
loyaltylion.configure({
  disableBundledFonts: true,
})
```

## Indicate your Shopify frontend type

By default, we'll assume that you're running on a native Shopify theme, and the SDK uses Shopify frontend APIs such as [`cart.js`](https://shopify.dev/docs/api/ajax/reference/cart).

If you're running a headless Shopify store, these APIs may not be available. To explicitly configure the SDK not to use these APIs, you can specify the `shopifyFrontend` configuration option. This turns off some features which depend on those APIs, such as [in-cart rewards](/docs/features/in-cart-rewards):

```javascript theme={null}
loyaltylion.configure({
  shopifyFrontend: 'unknown',
})
```