Skip to main content
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.
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.
Prefer a product-specific class or data attribute that your storefront owns. Avoid generated class names that change between deployments.
If you can edit the storefront markup, an explicit slot provides a stable target:

​
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.
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.
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.

​
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.