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.

Sticky: gallery sticks on the left when scrolling through personalization form

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

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

The developer tool will appear and auto detect the HTML tags of your selected gallery

Scroll up to find the biggest parent containing the whole gallery (usually <div class="product-gallery...">)

Right click on that line > Copy > Copy selector

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>

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:

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

Updated on: 23/05/2022