Install Weftwise
Most stores are live in five minutes. You paste one script tag, and optionally one line on your product template.
Before you start
You need a store key. It looks like ww_live_yourstore_… and is locked to your domain, so it's safe to put in your theme. Request a key if you don't have one.
You also need permission to edit your site's theme or add custom code.
1. Add the script
This adds the Fabric help button to every page. It opens a panel with the yardage calculator and the AI fabric expert.
<script src="https://weftwise.vercel.app/embed.js" data-key="YOUR_STORE_KEY" defer></script>
Place it just before the closing </body> tag. Replace YOUR_STORE_KEY with your key.
2. Platform steps
- In Shopify admin, go to Online Store → Themes.
- Duplicate your live theme first, so you can test safely. On the copy, choose ⋯ → Edit code.
- Open
layout/theme.liquidand paste the script just above</body>. Save. - Preview the copy, check the Fabric help button, then publish it.
quantity, so the calculator's Set quantity button works without extra setup. If you sell by the half yard, add data-unit="half-yard".- Install the free WPCode plugin (Plugins → Add New → search “WPCode”).
- Go to Code Snippets → Header & Footer.
- Paste the script into the Footer box and save.
WooCommerce product pages use a quantity field named quantity, so quantity fill works as-is.
- In your Wix dashboard, go to Settings → Custom code (under Advanced). This needs a paid Wix plan with a connected domain.
- Choose + Add Custom Code, paste the script, select All pages, and set placement to Body – end.
- Apply and publish.
Wix product pages don't expose a standard quantity field, so shoppers type the recommended yardage themselves.
- Go to Settings → Advanced → Code Injection. This needs a Business or Commerce plan.
- Paste the script into the Footer box and save.
If quantity fill doesn't connect, set data-quantity-selector to your product page's quantity input (see Options).
Paste the script before </body> on every page, or in your shared footer template. It loads in the background and never blocks your page.
3. Calculator on product pages
Put the calculator right under the add-to-cart button, where buyers decide how much to order:
<div data-weftwise="yardage"></div>
Shopify: open the product template in the theme editor, add a Custom Liquid block below the buy buttons, and paste the line. You can set the width from a metafield:
<div data-weftwise="yardage" data-width="{{ product.metafields.fabric.width_in }}"></div>
Without data-width, Weftwise reads the width from the listing text, such as “58/60” or “45 in wide”, and falls back to 60 inches.
Options
Add these attributes to the script tag.
| Attribute | What it does | Default |
|---|---|---|
data-key | Your store key. Required. | — |
data-color | Brand color for the button and panel, as a hex value. | #26306b |
data-label | Text on the floating button. | Fabric help |
data-position | right or left. | right |
data-launcher | false hides the floating button, so only inline calculators and your own buttons open it. | true |
data-unit | How your cart counts: yard, half-yard or meter. | yard |
data-quantity-selector | CSS selector for the quantity input to fill. | input[name="quantity"] |
data-width | Fixed fabric width in inches for every page. | read from page |
Product details the expert uses
The fabric expert reads the product's name, description and Product schema from the page. Most Shopify and WooCommerce themes include these already. For the sharpest answers, make sure listings state fiber content, weight, width and stretch.
To pass details explicitly, add an element anywhere on the page:
<div hidden data-weftwise-product="95% polyester 5% spandex ITY knit, 190 GSM, 58/60 in, 4-way stretch"></div>
JavaScript API
Open the panel from your own button, or use the estimator in your own code.
Weftwise.open(); // opens on the calculator Weftwise.open("ask"); // opens on the fabric expert Weftwise.close(); Weftwise.refresh(); // mounts calculators added after page load Weftwise.estimate({ garment: 10, size: 1, width: 60, repeat: 12, nap: true, qty: 1 }); // → { yards: 5, meters: 4.57, lines: [...] }
Catalog Studio
The Studio is for your team. Add a fabric photo and the supplier's title or spec sheet, and it returns a clean title, specs, product copy, tags, SEO fields, shopper FAQ and schema markup. Results export as a CSV with Shopify import columns.
Studio keys are separate from store keys and must be kept private. Don't put a Studio key in your theme.
Privacy and limits
- Weftwise sets no cookies and stores no shopper conversations.
- Only the shopper's question and the product details on the page are sent to the AI.
- Store keys only work on the domains connected to them.
- Each shopper can ask about 12 questions a minute, which stops abuse without getting in the way.
- The yardage calculator runs entirely in the browser and works even if the AI is unavailable.
Troubleshooting
The button doesn't appear
Check that the script tag is on the page and the key is spelled exactly. Open your browser's console and look for errors from embed.js.
The calculator shows, but there's no “Ask an expert” tab
The key isn't connected to this domain yet, or you're testing on a preview address. Send us the address you're testing on and we'll add it.
“Set quantity” doesn't appear
Weftwise didn't find a quantity box. Set data-quantity-selector to match yours.