Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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!

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

Third-Party Page Builders (GemPages, Shogun, PageFly, etc.)

If your store uses a third-party page builder, your landing pages may render through a separate layout file instead of theme.liquid. For example, GemPages typically uses theme.gempages.liquid.

If the Intelligems script is only installed in theme.liquid, it will not load on pages built with your page builder. This means redirects won't fire, anti-flicker won't activate, and tests won't run on those pages.

To fix this: Add the same full Intelligems code block (anti-flicker snippet, init script, and bundle) to your page builder's layout file. For GemPages, look for theme.gempages.liquid in the Layout folder of your Shopify theme code editor. Place the block at the top of <head>, just like in theme.liquid.

To verify the script is loading on a page: Open the page in your browser, go to DevTools (right-click → Inspect → Elements), and search for intelligems or cdn.intelligems.io. If nothing appears, the script isn't installed in that page's layout file.

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. We have several internal tools we can use to help reduce flickering.

PreviousOptimizing Your Price-Test IntegrationNextEdgemesh

Last updated

Was this helpful?