> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Live preview on gallery doesn't work?

**Live preview** means when you click on a personalization option, you can see the change updated on gallery immediately.

In case you find no live preview on your product page, you need to know if the current gallery is from **your theme** or from **teeinblue app**.

---

# Identify teeinblue's gallery

You can identify teeinblue's gallery by these details:

* **Arrows** on 2 sides and **Number navigation** on the bottom left. ![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_7ntahn.png)

* **Sticky:** gallery sticks on the left when scrolling through personalization form ![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1q5ixqa.png)

| ➡ If your current gallery matches with ALL conditions above, then it's **teeinblue's gallery**.

To resolve the live preview does not work on teeinblue's gallery, you can check the "Disable Live preview" option on Product page settings. ![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_b9anc7.png)

* If the toggle is enabled, please turn it off.
* If it's already off, please contact us to fix the problem.

| However, if your current gallery does NOT match with one of the conditions above, then it's your **theme's gallery**.
Usually, teeinblue finds your theme's default gallery and replaces it with app's gallery, in order to make live preview works.
But for some themes, teeinblue cannot find it. Hence, please follow the steps below to resolve the problem.

# Replace your theme's gallery with teeinblue's gallery

### Step 1: Copy CSS selector of your theme's gallery

* **Right click** on your theme's gallery > **Inspect** ![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_yadcrw.png)

* The developer tool will appear and auto detect the HTML tags of your selected gallery ![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_2botsf.png)

* Scroll up to **find the biggest parent** containing the whole gallery (usually _<div class="product-gallery...">_) ![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_5uu4oh.png)

* **Right click** on that line > **Copy > Copy selector** ![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1eudu03.png)

* You've successfully copied the CSS selector of your theme's gallery.

|| If you have troubles finding your gallery's selector, contact us for help.

### Step 2: Add teeinblue's script to your theme
* Go to your **Shopify admin > Themes > Actions > Edit code** of your published theme.

* Under **Layout** folder, find the **"theme.liquid"** file, click on the file name to open that file on the right.

* Ctrl+F to find the tag ++</head>++ ![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_hlqpdc.png)

* Paste the lines of code below **above </head>** and **replace the "yourselector" with the CSS selector** you copied in Step 1:

```
<script type="text/javascript">
    teeinblue = {
      gallerySelector: 'yourselector',
    };
</script>
```

_For example_: The CSS selector you copied is ".product-gallery-wrapper". Then paste it like this: ![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1u4rjrc.png)

||| Remember the apostrophe ' at the beginning and the end of the CSS selector. It is ++'yourselector'++, not **yourselector**.

* Save the changes. Done.

* Go to storefront to check if it's teeinblue's gallery (check the [Identify teeinblue's gallery](#1-identify-teeinblues-gallery) above).
And select a few personalization options to see if the live preview works yet.

|| If live preview is still not working, contact us for help.

### ⚠ Themes don't work well with teeinblue

Here're the list of the themes that do not work well with our application:

* Pop
* Boundless
* Jumpstart
* Avenue
* Galleria
* Venue
* Handy
* Vogue
* Maker
* Showtime
* Pacific
* Showcase
* Vantage
* Editions
* Fashionopolism