I sell tablecloths and because people all want different sizes, I want to have a kind of customization calculator for a number of products on the website.
Via Elfsight I managed to create the code that needs to be in the website.
But unfortunately I don’t know anything about it myself, and after a lot of struggling I can’t get it into my website. Who can help me with this?
The intention is that, in addition to the standard tablecloth sizes, people can now also order a custom-made tablecloth with this formula on the product page.
Of course, it will update the amount text in browser, but then you’d need a way to update your product price in cart so that proper amount will be charged on checkout and this is a more complex task.
In Shopify you add a variant to your cart which has a price predefined in back-end and this, together with quantity defines the amount to be charged.
Popular way to approach flexible price was adding a base product accompanied by a number of $1 addon products.
Another approach is to use draft orders where you can manipulate price, or use Shopify functions to amend price at checkout.
Anyway you’d need an app to do actual price manipulation.
That’s why i suggested you look at “product options” or “product builder” apps – they will have it sorted out.
I recommend using Easify Product Options – it’s perfect for custom products like your tablecloths. You can easily set your own formula, and the price will automatically update based on the dimensions your customer fills in. Super easy to set up, no coding needed at all. Here’s how it works:
That’s a great idea — having a custom size calculator directly on your product page really improves the buying experience, especially for made-to-measure products like tablecloths.
If you already have the Elfsight code snippet, you’ll just need to embed it correctly in your Shopify theme:
From your Shopify admin, go to Online Store → Themes → Edit code.
Open the product template file (usually something like product.liquid or main-product.liquid).
Paste your Elfsight script below the product description or wherever you want the calculator to appear.
Click Save, then refresh your store page to test it.
If it still doesn’t show up, double-check that your Elfsight widget is set to “Public” and that the script tag isn’t being blocked by your theme or an app.
Once that’s working, you can even style it a bit with custom CSS to match your store’s branding.
Hope that helps — you’re definitely on the right track!
If you want customers to enter custom dimensions and instantly see the updated price on the product page, the easiest way to handle this (without coding struggles) is to use a Shopify custom Price Calculator app, especially one designed for dimension-based or made-to-measure products.
Instead of embedding external code from Elfsight, which can break or conflict with your theme, a dedicated Shopify price calculator app will do wonders for you.
