# Anti-Flicker Modes

Intelligems adds an anti-flicker functionality to reduce the performance impacts of our JavaScript by default. Therefore, please do not `async` or `defer` your Intelligems script; this is handled internally and will cause flashing on your site if added.

### Anti-flicker Modes

Intelligems offers two anti-flicker modes:

1. Element-specific anti-flicker (default). This will temporarily hide all price elements selected during your integration.
2. Page anti-flicker. This will temporarily hide all site content.

The best mode will likely depend on your individual site; try out both and see which works best. Add the below snippet **above** the Intelligems script tag to enable **page** anti-flicker, mode 2. above.

Remember to replace the `xxxxxxxxxxxx` in the example below with your unique customer ID!

```html
<head>
  ...
    // This is the anti-flicker script:
    <script>
    window.igSettings = {
        hideBody: true
    }
    </script>

    // Your full theme script must go below it, with xxxxxxxxxxxx replaced by your customer ID:
    <script>
    window.Shopify = window.Shopify || {theme: {id: {{ theme.id }}, role: '{{ theme.role }}' } };
    window._template = {
        directory: "{{ template.directory }}",
        name: "{{ template.name }}",
        suffix: "{{ template.suffix }}"
    };
    window.__productIdFromTemplate = {{ product.id | json }};
    window.__plpCollectionIdFromTemplate = {{ collection.id | json }};
    window.igProductData = (function() {
      const data = {};
      {%- if template.name == 'collection' -%}
        {%- for product in collection.products -%}
          data["{{ product.id }}"] = {
            productId: {{ product.id | json }},
            handle: {{ product.handle | json }},
            tags: {{ product.tags | json }},
            collectionIds: [{% for col in product.collections %}{{ col.id }}{% unless forloop.last %},{% endunless %}{% endfor %}],
            inventory: {% assign total = 0 %}{% for v in product.variants %}{% assign total = total | plus: v.inventory_quantity %}{% endfor %}{{ total }},
            lowestVariantPrice: {{ product.price_min }}
          };
        {%- endfor -%}
      {%- elsif template.name == 'product' -%}
        data["{{ product.id }}"] = {
          productId: {{ product.id | json }},
          handle: {{ product.handle | json }},
          tags: {{ product.tags | json }},
          collectionIds: [{% for col in product.collections %}{{ col.id }}{% unless forloop.last %},{% endunless %}{% endfor %}],
          inventory: {% assign total = 0 %}{% for v in product.variants %}{% assign total = total | plus: v.inventory_quantity %}{% endfor %}{{ total }},
          lowestVariantPrice: {{ product.price_min }}
        };
      {%- endif -%}
      return data;
    })();
  </script>
  <script type="module" fetchpriority="high" src="https://cdn.intelligems.io/esm/xxxxxxxxxxxx/bundle.js" async></script>
  ...
</head>
```

## My Site is Still Flickering

The default configuration above works for most sites. However, if you are still experiencing flickering on your site, please [reach out to our support team](https://portal.usepylon.com/intelligems/forms/intelligems-support-request). We have several internal tools we can use to help reduce flickering.


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.intelligems.io/performance-optimization/anti-flicker-modes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
