Step 1: Access Your Theme Files
From your BigCommerce admin, go to:
Storefront → Themes → Current Theme → Advanced → Edit Theme Files
Open the file:
templates/pages/product.html
Step 2: Inject GraphQL for Product Metadata
Locate the existing GraphQL block in product.html. It typically looks like this:
---
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}}
---
Below this section (but before the ending ---), paste the following GraphQL query:
gql: "query productQueryToGeneratePageMetaForAsk($productId: Int!) {
site {
product(entityId: $productId) {
entityId
metafields(namespace: \"Warehouse Locations\") {
edges {
node {
id
entityId
key
value
}
}
}
variants(first: 200) {
edges {
node {
sku
entityId
isPurchasable
upc
mpn
gtin
metafields(namespace: \"Warehouse Locations\") {
edges {
node {
id
entityId
key
value
}
}
}
prices {
price { ...MoneyFields }
basePrice { ...MoneyFields }
salePrice { ...MoneyFields }
retailPrice { ...MoneyFields }
priceRange {
min { ...MoneyFields }
max { ...MoneyFields }
}
retailPriceRange {
min { ...MoneyFields }
max { ...MoneyFields }
}
saved { ...MoneyFields }
}
defaultImage {
url(width: 1000)
}
inventory {
isInStock
}
}
}
}
productOptions(first: 10) {
edges {
node {
entityId
displayName
... on CheckboxOption {
checkedByDefault
}
... on MultipleChoiceOption {
values(first: 50) {
edges {
node {
entityId
label
isDefault
}
}
}
}
}
}
}
}
}
}
fragment MoneyFields on Money {
value
currencyCode
}"
Step 3: Include Asklo Scripts and Styles
Still in product.html, add the following inside the <head> or right before the closing </body> tag:
<script type="module" src="https://resources-webcomponents.klevu.com/latest/klevu-ui/klevu-ui.esm.js"></script>
<link href="https://resources-webcomponents.klevu.com/pqa/pqa_full.css" rel="stylesheet" />
Step 4: Add JavaScript for Asklo Product Meta
Place this JavaScript block in product.html, after the existing product setup:
<script type="text/javascript">
let fallbackProductInfoForAsk = {
sku: "{{product.sku}}",
url: "{{product.url}}",
weight: "{{product.weight}}",
inventoryStatus: "{{#if product.can_purchase '===' false}}OUT_OF_STOCK{{else}}IN_STOCK{{/if}}"
};
let productVariantsForAsk = [];
let productMetaFieldsForAsk = [];
let variantMetaFieldsForAsk = [];
{{#if gql.data.site.product}}
{{#each gql.data.site.product.variants.edges}}
{{#if node.entityId}}
{{#each node.metafields.edges}}
variantMetaFieldsForAsk.push({
key: "{{node.key}}",
value: "{{node.value}}",
encoding: ""
});
{{/each}}
productVariantsForAsk.push({
itemVariantId: "{{node.entityId}}",
sku: "{{node.sku}}",
weight: "{{node.inventory.weight}}",
title: "{{node.title}}",
url: "{{node.url}}",
image: "{{cdn node.defaultImage.url}}",
price: "{{node.prices.salePrice.value}}",
inventoryStatus: "{{#if node.inventory.isInStock}}IN_STOCK{{else}}OUT_OF_STOCK{{/if}}",
metafieldsV2: variantMetaFieldsForAsk
});
{{/if}}
{{/each}}
{{#each gql.data.site.product.metafields.edges}}
productMetaFieldsForAsk.push({
key: "{{node.key}}",
value: "{{node.value}}",
encoding: ""
});
{{/each}}
{{/if}}
// Add basic fields manually
productMetaFieldsForAsk.push({ key: "currency", value: "{{currency_selector.active_currency_code}}", encoding: "" });
{{#if product.gtin}}productMetaFieldsForAsk.push({ key: "gtin", value: "{{product.gtin}}", encoding: "" });{{/if}}
{{#if product.mpn}}productMetaFieldsForAsk.push({ key: "mpn", value: "{{product.mpn}}", encoding: "" });{{/if}}
{{#if product.upc}}productMetaFieldsForAsk.push({ key: "upc", value: "{{product.upc}}", encoding: "" });{{/if}}
{{#if product.weight}}productMetaFieldsForAsk.push({ key: "weight", value: "{{product.weight}}", encoding: "" });{{/if}}
function getProductInfoForAsk() {
return {
itemId: "{{product.id}}",
itemGroupId: "{{product.id}}",
itemVariantId: "{{product.id}}",
locale: "{{ locale_name }}_US",
title: {{{JSONstringify product.title}}},
url: "{{product.url}}",
description: {{{JSONstringify product.description}}},
vendor: {{{JSONstringify product.brand.name}}},
sku: "{{product.sku}}",
priceMin: "{{product.price.price_range.min.value}}",
priceMax: "{{product.price.price_range.max.value}}",
options: [
{{#each product.options}}
{
name: {{{JSONstringify this.display_name}}},
values: [{{#each this.values}}{{{JSONstringify this.label}}}{{#unless @last}},{{/unless}}{{/each}}]
}{{#unless @last}},{{/unless}}
{{/each}}
],
images: [],
variants: productVariantsForAsk,
metafieldsV2: productMetaFieldsForAsk
};
}
</script>
Step 5: Embed the Asklo Widget
Now, choose where to show the Asklo widget (e.g., under the "Add to Cart" button). Open:
templates/components/products/product-view.html
Paste the following snippet where you want the Asklo widget to appear:
<klevu-init disable-user-session="true">
<klevu-product-query
pqa-widget-id="pqa-xxxx-xxx-xx-xxxx-xxxxx"
pqa-widget-layout="embedded" <!-- or "popup" -->
product-info-generator="getProductInfoForAsk()"
item-id="{{product.id}}"
item-group-id="{{product.id}}"
item-variant-id="{{product.id}}"
locale="{{ locale_name }}_US"
>
</klevu-product-query>
</klevu-init>
Replace pqa-widget-id with your actual Asklo Widget ID from the Asklo Hub. You can choose either embedded or popup layout.
Final Result
Once set up, your product page will load Asklo widget like this (see below):
Example: The Asklo widget appears as a Live FAQs module under the product info.