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

# Configure placement

> Choose the Try On Target, button behavior, and product image source.

Generic Embed placement is selector-first. The inline Try On Button appears only when Trylora can resolve an explicit Try On Target.

## Choose a Try On Target

In the Trylora dashboard, open the store's **Settings** tab and find **Storefront**.

Set **Try On Selector** to a stable CSS selector for the product image or the page area that the button should follow.

```css theme={null}
.product-gallery
```

Choose **Try On Button Mode**:

* **Single button** uses the first matching target.
* **Button for each matched target** adds a button to every match, such as product cards in a collection.

<Tip>
  Prefer a product-specific class or data attribute that your storefront owns. Avoid generated class names that change between deployments.
</Tip>

If you can edit the storefront markup, an explicit slot provides a stable target:

```html theme={null}
<div data-trylora-slot="cta"></div>
```

## Choose anchor placement

**Anchor Placement** controls the button relative to its target:

* **Below target** places it after the target.
* **Inside target · Bottom right** overlays the bottom-right corner.
* **Inside target · Bottom left** overlays the bottom-left corner.

Make sure an inside target has a useful rendered size and does not hide an existing product control.

## Configure product image sources

Trylora tries the primary Product Image Source first, then each fallback until it finds images.

### CSS images

Choose **CSS images** when product images are regular `<img>` elements. Enter a selector that matches the intended product gallery images.

```css theme={null}
.product-gallery img
```

The first resolved image is the primary product image. Remaining resolved images can provide reference context.

### Element attributes

Choose **Element attributes** when a selected variant or swatch element exposes image URLs in data attributes. Configure:

* **Element selector**
* **Primary image attribute**
* **Gallery image attribute**
* **Gallery separator**

Use this mode only when the attribute contract is stable across product pages.

### Fallback sources

Add fallbacks for alternate templates that use different markup. Order fallbacks from most specific to least specific.

<Warning>
  Confirm the Product Image Source with several products and variants. A selector that resolves a model photo, thumbnail, or unrelated recommendation can produce the wrong try-on input.
</Warning>

## Save and test

Select **Save Store Settings**, then test:

1. A standard product page
2. A product with multiple variants
3. A collection page when using multiple buttons
4. Mobile and desktop layouts

If selectors fail, the inline button remains hidden rather than guessing a location.