> For the complete documentation index, see [llms.txt](https://help.getalltool.com/king-linked-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.getalltool.com/king-linked-options/how-to-display-the-option-correctly-in-the-product-details-page-generated-by-pagefly.md).

# How to display the option correctly in the product details page generated by Pagefly

If you use Pagefly to generate product pages, you may find that our option is in the top left corner of the page, which is not what we want.

<figure><img src="/files/jIUTI7XXOJ6yi7o2gvm8" alt=""><figcaption><p>option's default position in pagefly</p></figcaption></figure>

To display the option in the correct position, we need to follow these steps:

Step 1: Open the PageFly app and navigate to the template editor.

<figure><img src="/files/9QYaEzPu3aAWyB1UkUAX" alt=""><figcaption></figcaption></figure>

Step 2: Find the Product Detail Section and select it, then click the Add Element button to add an HTML/Liquid element.

<figure><img src="/files/zGIThLFH4JrCqjFbLqRb" alt=""><figcaption><p>Add a HTML/Liquid element</p></figcaption></figure>

<figure><img src="/files/ed7d7nJPqhRutbFMOaIM" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/qWCjmwo0Qzidu4kua9tK" alt=""><figcaption></figcaption></figure>

Step 3: Click the Open code editor button on the right panel and copy the following code snippets into the code editor.

```
<div class="linked-option-variants-container"></div>
```

<figure><img src="/files/id66RJxEqL1pHl7ofBZX" alt=""><figcaption><p>Open code editor</p></figcaption></figure>

<figure><img src="/files/HycNm4Fm0Uu3tImKYCRf" alt=""><figcaption><p>Copy code snippets to code editor</p></figcaption></figure>

<figure><img src="/files/hrUSWpI1uNVa0Y0tIjKO" alt=""><figcaption><p>Save and publish</p></figcaption></figure>

<figure><img src="/files/nG8VMBp0DHODOsCQzrQD" alt=""><figcaption></figcaption></figure>
