Skip to main content

Setting Whatmore up for your Custom and Shopify Headless store

Onboarding and Widget Setup


1. Create an account on www.dashboard.whatmore.live

2. From the onboarding dashboard, select "Shoppable Videos"

3. Select "Custom" from the drop-down menu of store types.


4. You can import videos directly from your social media, including Instagram and TikTok, or upload them from your computer.

5. To import from your socials, simply enter the username and select the videos you want, or choose all to import at once.

6. You can tag products to the videos by entering their Product Page URLs.

💡 Pro Tip: To tag multiple products to the same video, simply separate the Product Page URLs with commas ",".


API Integration

Start by adding your Product API Details​.

Add Your Product cURL Command

You need to provide us with an API to fetch product details from your store. You'll see a text box where you need to paste a cURL command to fetch the same.
Make sure to include required authentication and headers in the curl.

cURL Command Format Example:

curl https://yourstore.com/products/PRODUCT_IDENTIFIER \ -u YOUR_CONSUMER_KEY:YOUR_CONSUMER_SECRET

Paste this complete cURL command into the text box shown below:

Match Your Fields

Whatmore will fetch a sample response from your API and display our required Whatmore fields alongside a dropdown for mapping them to fields in your response. Select the matching keys using the table below—if a field is nested, you can expand the dropdown (tree view) and choose the nested key.

Common Field Mappings:

Whatmore Field

Custom Field

Product Title

name

Product ID/SKU ID

id

Discounted Price

price

MRP

regular_price

Product Link

permalink

Product Image

images[0].src

Currency

Enter Manually



7. Once you return to onboarding, you can choose to add a homepage carousel or skip this step for now.

A homepage carousel is a great way to make a strong first impression by featuring your top videos or products and giving shoppers an interactive way to explore your store.

8. The onboarding process is complete, welcome to Whatmore! You will be redirected to the Whatmore homepage.

9. In the Whatmore dashboard, navigate to Homepage → Homepage Video Carousel → Setup. Choose your carousel template and review the live preview on the right in both mobile and desktop views. Then copy the generated snippet and paste it into your website’s homepage to publish the widget.



10.​ Similarly you can setup other Homepage and Collection Page widgets from the dashboard.


11. Further, you can customise the look and feel of your widget.

🔗 Visit this article for a detailed walkthrough of the customisation options for widgets.

12. As explained in steps 4 and 5, you can add more videos to any widgets for an improved engaging experience.

Order Tracking For Conversion Metrics

Use this when your store is not Shopify (custom website / WooCommerce / Magento / custom cart) and you want Whatmore to attribute purchases to Whatmore video views / add-to-carts.

What you need from Whatmore

  • store_id (your Whatmore Store ID)

  • token (authorization token)


Step 1) Add the tracking function to your website

Add this once in your site’s frontend code (global bundle, or only on the order success page):

async function sendOrderTrackingRequest({ orderId, orderItems, storeId, token }) { const url = `https://api.whatmore.live/external-shop-order-tracking/private?store_id=${encodeURIComponent(storeId)}`; const payload = { order_id: orderId, order_items: orderItems, // These are populated by Whatmore widgets on the site. whatmore_video_view: localStorage._whatmore_viewed_products ? localStorage._whatmore_viewed_products : "[]", whatmore_add_to_cart: localStorage._whatmore_add_to_cart_products ? localStorage._whatmore_add_to_cart_products : "[]", }; const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, body: JSON.stringify(payload), }); if (!res.ok) { throw new Error(`Order tracking failed: ${res.status} ${res.statusText}`); } return res; }


Step 2) Call it on the “Order Success / Thank you” page

Trigger this once per successful order (important: don’t call it on every page load).

Example (single-item order)

const storeId = "STRXXXXXXX"; const token = "YOUR_TOKEN_FROM_WHATMORE";  const orderId = "ORDER_1000123"; const orderItems = [   { product_id: "SKU-TSHIRT-BLACK-M", price: "1199", quantity: 1, currency: "INR" }, ];  sendOrderTrackingRequest({ orderId, orderItems, storeId, token })   .then(() => console.log("Whatmore order tracking sent"))   .catch(console.error);

Example (multi-item order)

const orderId = "ORDER_1000456"; const orderItems = [   { product_id: "SKU-TSHIRT-BLACK-M", price: "1199", quantity: 1, currency: "INR" },   { product_id: "SKU-JEANS-BLUE-32",  price: "2499", quantity: 1, currency: "INR" }, ];  await sendOrderTrackingRequest({ orderId, orderItems, storeId, token });

Notes on fields

  • product_id: Use a single, consistent product identifier across your entire integration. Whatever ID your Product API returns and Whatmore ingests (e.g., SKU, internal product ID) must be the exact same value you send in

    order_items[].product_id for order tracking. If these don’t match, Whatmore won’t be able to map purchased items back to the correct products.

  • price: string is fine (e.g., "10.99"). If you use number, keep it consistent.

  • currency: ISO code like INR, USD.


Step 3) Validate it’s working

  1. Place a test order.

  2. Open DevTools → Network on the success page.

  3. Confirm there’s a POST request to:
    /external-shop-order-tracking/private?store_id=...

  4. Confirm it returns 200/2xx.


Common gotchas and errors

  • Calling twice (e.g., success page re-renders): add a guard like sessionStorage flag keyed by orderId.

  • Empty Whatmore arrays: if the shopper never interacted with Whatmore widgets, whatmore_video_view / whatmore_add_to_cart will be "[]"—that’s expected.

  • Ad blockers: if you see missing calls, consider retrying once after a short delay.

  • Product IDs must match across APIs: The product_id you send in order_items[] must use the same identifier that your Product API returns for that product (the one Whatmore uses to map/catalog products).

    • Example: if your Product API uses SKU ("SKU-TSHIRT-BLACK-M"), then the order payload must also send SKU.

    • If your Product API uses an internal numeric ID ("8843021549818"), then the order payload must send that ID—not SKU.


Did this answer your question?