Custom Button Placement & Styling

🎨 Custom Button Placement & Styling

If you want to custom place the Antla Virtual Try-On button inside your product image gallery (e.g., in the “True Classic” style), you can override the default placement and styling.

---

1. Select Target Placement

Use your page’s product gallery selector (for example, .liquid-pdp__gallery-main) to place the button where you want it to appear:

.liquid-pdp__gallery-main {
  /* Target container for custom button placement */
}

2. Hide the Default Antla Button

The default Antla button must remain in the DOM tree, but hidden from view. Use display: none;:

<style>
  .antla-button {
    display: none;
  }
</style>

3. Add Your Custom Button

Insert your own button in the desired location. Example:

<button class="my-custom-vtr-btn" onclick="customAntlaOpenModal()">
  Virtual Try On
</button>

Style this button to match your brand’s vibe.

4. Hook Into Antla’s Modal

Bind the button to Antla’s openModal() method:

<script>
function customAntlaOpenModal() {
  const defaultAntlaPopup = document.querySelector('antla-block');
  if (defaultAntlaPopup) {
    defaultAntlaPopup.openModal();
  }
}
</script>