XFlow Back in Stock Alert helps you recover potential sales from out-of-stock products by allowing customers to subscribe for restock notifications. When a product variant is unavailable, customers can enter their email address and receive a notification when the product becomes available again.
Kalles theme supports XFlow integration in different areas of the storefront, including Product Page, Featured Product section, and Product Card. Depending on where you want to display the back-in-stock button, the setup method will be different.
Product Page / Featured Product: Add XFlow using Shopify App Block.
Product Card: Add XFlow manually to the product card template because Shopify does not support App Blocks inside product cards.
Before using XFlow with Kalles, install XFlow Back in Stock Alert from the Shopify App Store and complete the initial setup in the app.
After installation, enable the app embed so XFlow can load correctly on your storefront.
Step 1: Go to Shopify Admin → Apps and open XFlow Back in Stock Alert.
Step 2: Click Enable app embed on the XFlow dashboard.
Step 3: You will be redirected to the Shopify Theme Editor. Under App embeds, enable XFlow Back in Stock Alert → Click Save to apply the changes.
After enabling the app embed, configure your XFlow settings, such as notification emails, subscription form, and other app preferences from the XFlow dashboard.
Use this option when you want to display the back-in-stock notification form on a Product Page or inside a Featured Product section.
Step 1: Go to Online Store → Themes → Customize and open your Kalles theme.
Step 2: Open the Product Page template or select the Featured Product section where you want to display the notification form.
Step 3: Click Add block → Apps → XFlow Back in Stock Alert.
Step 4: Click Save and test with an unavailable product variant.
Use this option when you want to display the Back in Stock button directly on product cards, such as on collection pages, product grids, related products, or recommended products.
Unlike the Product Page and Featured Product section, Shopify doesn't support App Blocks inside product cards. To display XFlow on Kalles product cards, you need to add the XFlow code to the product card file and add the required CSS.
Step 1: In the XFlow app, go to Settings → Notify me widget settings.
Open the Notify me button tab → enable Product card.
Step 2: Go to Online Store → Themes → Edit code and find the card-product.liquid snippets. Kalles includes multiple product card snippets for different layouts. Add the following code to the end of each card-product.liquid file you want XFlow to work with. You can add the code to all available card-product.liquid files to ensure the button works across different product card layouts.
Here is the Liquid code:
{% liquid
assign xflow_product = card_product
assign selected_variant = xflow_product.selected_or_first_available_variant
assign collections = ''
for collection in xflow_product.collections
assign collections = collections | append: collection.id | append: ','
endfor
%}
<script>
window.XFLOW = window.XFLOW || {};
window.XFLOW.Shopify.products['{{ xflow_product.id }}'] = {{ xflow_product | json }};
window.XFLOW.Shopify.products['{{ xflow_product.id }}'].image = {{ xflow_product.featured_image | json }};
window.XFLOW.Shopify.products['{{ xflow_product.id }}'].selected_variant_id = {{ selected_variant.id | json }};
window.XFLOW.Shopify.products['{{ xflow_product.id }}'].is_main_product = false;
window.XFLOW.Shopify.products['{{ xflow_product.id }}'].collections = {{ collections | remove_last: ',' | json }};
window.XFLOW.Shopify.products['{{ xflow_product.id }}'].variants = [{%- for variant in xflow_product.variants -%} { "id": {{ variant.id | json }}, "title": {{ variant.title | json }}, "available": {{ variant.available | json }}, "compare_at_price": {{ variant.compare_at_price | json }}, "price": {{ variant.price | json }}, "inventory_quantity": {{ variant.inventory_quantity | json }}, "inventory_policy": {{ variant.inventory_policy | json }}, "inventory_management": {{ variant.inventory_management | json }}, "image": {{ variant.image | json }} }{% unless forloop.last %},{% endunless %}{%- endfor -%}]
</script>
<xflow-bis-button-product-card
data-product-handle='{{ xflow_product.handle }}'
data-product-id='{{ xflow_product.id }}'
data-collections='{{ collections | remove_last: ',' }}'
></xflow-bis-button-product-card>Step 3: Add the following CSS to your Kalles theme. In Online Store → Themes → Customize → Theme settings → Custom CSS, add:
Here is the CSS code:
.xflow-button {
--xflow-btn-radius: var(--radius-button);
--xflow-btn-font-size: 14px;
--xflow-btn-font-weight: 400;
}
.hdt-card-product .xflow-button {
--xflow-btn-padding: 6.5px 20px;
}
.hdt-card-product:where(.hdt-pr-list, .hdt-pr-style6) .xflow-button {
--xflow-btn-padding: 10px 20px;
}Step 4: Save your changes and open a collection page, product grid, or other product listing containing an out-of-stock product. Check that the Notify me button appears correctly on the product card.
