Display Product Variant Option data in Big Commerce theme files

In relation to the Big Commerce documentation thanks to this question/answer, I have the following in templates/pages/product.html:

---
product:
    videos:
        limit: {{theme_settings.productpage_videos_count}}
    reviews:
        limit: {{theme_settings.productpage_reviews_count}}
    related_products:
        limit: {{theme_settings.productpage_related_products_count}}
    similar_by_views:
        limit: {{theme_settings.productpage_similar_by_views_count}}
    gql: "query productById($productId: Int!) {
        site {
            product(entityId: $productId) {
                variants(first: 25) {
                    edges {
                        node {
                            sku
                        }
                    }
                }
            }
        }
    }"
---


{{#partial "page"}}
    {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}

    {{#each product.shipping_messages}}
        {{> components/common/alert-info message}}
    {{/each}}

    <ul class="tester-gql">
        <li>{{#if gql}}GQL 1 exists!{{else}}No GQL 1{{/if}}</li> <!-- data called as per documentation -->
        <li>{{#if product.gql}}GQL 2 exists!{{else}}No GQL 2{{/if}}</li> <!-- logical data call as per piping of 'related_products' attribute -->
        <li>{{#if product.related_products}}Related Products exists!{{else}}No Related Products{{/if}}</li> <!-- to test the output of a default product attribute -->
    </ul>

    <div itemscope itemtype="http://schema.org/Product">
        {{> components/products/product-view schema=true  }}

        {{{region name="product_below_content"}}}
        
        {{> components/products/tabs}}
    </div>
{{/partial}}
{{> layout/base}}

But I cannot see the gql data (in tester-gql), i.e. when loaded I get:

<ul class="tester-gql">
        <li>No GQL 1</li>
        <li>No GQL 2</li>
        <li>Related Products exists!</li>
</ul>

So we can see that Related Products is there but not gql. Does anyone have any ideas why this could be?

gql is a top-level object. You need to un-indent it.

---
product:
    videos:
        limit: {{theme_settings.productpage_videos_count}}
    reviews:
        limit: {{theme_settings.productpage_reviews_count}}
    related_products:
        limit: {{theme_settings.productpage_related_products_count}}
    similar_by_views:
        limit: {{theme_settings.productpage_similar_by_views_count}}
gql: "query productById($productId: Int!) {
    site {
        product(entityId: $productId) {
            variants(first: 25) {
                edges {
                    node {
                        sku
                    }
                }
            }
        }
    }
}"
---