> For the complete documentation index, see [llms.txt](https://support.charlla.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.charlla.io/en/userguide/motion-thumbnail.md).

# Motion Thumbnail

### 1. What is Motion Thumbnail?

Motion Thumbnail **replaces static product thumbnail images with videos**.\
Insert the script once, and you can add moving thumbnails in just a few clicks, with no coding.\
Catch your customers' eye and boost your conversion rate with Motion Thumbnail!

{% hint style="success" %}

#### **Who is it for?**

* Store owners who want to add videos to their thumbnails without complex coding
* Marketers who want to use product videos to drive more clicks and purchases
  {% endhint %}

<figure><img src="https://content.gitbook.com/content/o7CC5HKFh1guYnGcyftj/blobs/SvF51EEkFwbiKAWD5Q0H/%E1%84%86%E1%85%A9%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8A%E1%85%A5%E1%86%B7%E1%84%82%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%AF.png" alt=""><figcaption></figcaption></figure>

### 2. What are the key features?

#### Easy one-time setup

* Insert the script once, and you can link images and videos with no extra coding.

#### Available on every plan

* Motion Thumbnail is available on every plan.

#### Works with any product

* You can add videos to the images of any product you register in Charlla.

### 3. How do I set it up?

{% stepper %}
{% step %}

#### [**Install the script**](/en/userguide/motion-thumbnail/installation.md)

* Follow the guide to insert the Charlla script code into your online store.

{% hint style="info" %}

#### **How to find the `</body>` tag quickly**

In your HTML editor, press **`Ctrl + F`** (**`Command + F`** on Mac) and search for **`</body>`**.

Paste the copied script code <mark style="color:$primary;">**on the line directly above the**</mark><mark style="color:$primary;">**&#x20;**</mark><mark style="color:$primary;">**`</body>`**</mark><mark style="color:$primary;">**&#x20;**</mark><mark style="color:$primary;">**tag**</mark>.
{% endhint %}
{% endstep %}

{% step %}

#### [**Link products and videos**](/en/userguide/motion-thumbnail/mapping.md)

* Register or select the product you want to use Motion Thumbnail for, then link the video you want to show on its product image.

{% hint style="info" %}

### **An easier way to copy an image URL**

Right-click the image and select **Copy image address** to copy its URL in one step.
{% endhint %}
{% endstep %}

{% step %}

#### [**Configure Motion Thumbnail**](/en/userguide/motion-thumbnail/settings.md)

* In the video link settings, choose which images to apply Motion Thumbnail to and adjust the settings.
  {% endstep %}

{% step %}

#### Check Motion Thumbnail on your store

* Open a page where you installed the script and see your motion thumbnails in action!
  {% endstep %}
  {% endstepper %}

### FAQ

<details>

<summary><strong>Can I use it on any e-commerce platform?</strong></summary>

Yes. Whatever platform you use, you can use Motion Thumbnail once you install the script.

</details>

<details>

<summary><strong>How many images can I link?</strong></summary>

You can register up to 4 images per product.

</details>

<details>

<summary><strong>How do I find an image URL?</strong></summary>

Right-click the image and select **Copy image address**. You don't need developer tools.

</details>

<details>

<summary><strong>The status shows [Reconnect Required]. How do I fix it?</strong></summary>

\[Reconnect Required] appears in exceptional cases, for example when the product or video linked to a motion thumbnail changes. Depending on the cause, reconnect it as follows.

* **The video or product link is broken**\
  Click **\[Link Video]** or **\[Link Product]** to link it again.
* **You've exceeded your plan's upload limit**\
  Upgrade your plan in **\[Payment]**, or delete existing videos to free up space.

If this doesn't solve the problem, contact us via live chat and we'll help you fix it.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://support.charlla.io/en/userguide/motion-thumbnail.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.