search

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.

hashtag
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" blocking="render" fetchpriority="high" src="https://cdn.intelligems.io/esm/xxxxxxxxxxxx/bundle.js" async></script>
  ...
</head>

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

PreviousOptimizing Your Price-Test IntegrationNextEdgemesh

Last updated