Storefront with external backend

[waqarali141]

I have a shopify store, what i want is for my customer to show them product match score and a custom product description, which is generated by a backend service that i am running on python django. 

I want the storefront to consume this API in junction with shopify backend. I want to stay in shopify eco system while making some API calls to my external backend service which holds some business logic for product personalization.

This external API should be able to retrive shopify customer data and products that are listed on shopify. Base on predefined functions it creates a customized product description for that particular customer and then returns the data to storefront.

[Dotsquares]

hi @waqarali141 

You can achieve this by integrating your Python Django backend with Shopify’s storefront using the following approach:

1. Use Shopify Storefront API for Displaying Data
Your Shopify store can fetch product and customer data via Shopify Storefront API.

Your theme (Dawn or any custom theme) will make API calls to your Django backend to retrieve the product match score and customized description.

2. Expose Your Django API to Shopify
Your Django backend should expose an API that:

Accepts customer ID & product ID

Returns a match score and custom description

Can retrieve Shopify product/customer data via Shopify Admin API

3. Fetch Data in Shopify Theme (Liquid + JavaScript)
Modify your product page template (product.liquid) to make an AJAX call to your Django API and inject the response into the page:

fetch("https://your-backend.com/api/product-score", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    customer_id: "{{ customer.id }}",
    product_id: "{{ product.id }}"
  })
})
.then(response => response.json())
.then(data => {
  document.getElementById("custom-description").innerHTML = data.custom_description;
  document.getElementById("match-score").innerText = `Match Score: ${data.match_score}%`;
});

4. Authentication Between Shopify and Your API
Use Shopify OAuth or an API Key to ensure secure requests.

5. Store Data Efficiently (Optional)
If needed, cache the match score & description in Shopify’s Metafields for faster load times.