How To Embed Calculator Into Shopify
In this tutorial you will learn how to embed Creative Widgets calculator into your Shopify store.
How to Embed Creative Widgets Calculator within Liquid Theme Preview​
Here's a step-by-step guide for embedding a Creative Widgets calculator into a Shopify store using the Custom Liquid section:
Adding calculator to a theme adds it to every page of the template. If you want to granularly control to which product is calculator added to, you can add it directly to product description.
Navigate to Theme Editor​
Open your Shopify admin panel and go to Online Store > Themes. Click the Customize button on your active theme to access the theme editor.
Add Custom Liquid Section​
In the theme editor, navigate to the page where you want to embed the calculator. Click the Add section button in the left sidebar to open the sections menu.
Search for Custom Liquid​
Use the search bar in the sections menu and type "custom liquid" to locate the Custom Liquid component. Click on it to add it to your page.
Paste Calculator Snippet​
Copy the embed code from your Creative Widgets calculator editor. Paste the complete snippet into the Custom Liquid section's code editor. This snippet typically includes the calculator's unique identifier and configuration.
Validate Display​
Save your changes and preview the page to ensure the calculator renders correctly. Check that all interactive elements function as expected and the styling matches your store's design.
How To Embed Creative Widgets Calculator Within Product Description​
Navigate to Product Listing​
Open your Shopify admin panel and go to Products. Select the specific product where you want to add the calculator from your product list.
Open HTML Editor​
In the product description editor, locate and click the Show HTML button (displays as <> icon). This is typically found in the toolbar above the description field.
Paste Calculator Code​
Copy the embed snippet from your Creative Widgets calculator editor. Position your cursor within the HTML code where you want the calculator to appear. Paste the complete snippet at that location - you can place it before, after, or between existing content blocks.
Save and Verify​
Click Save to apply the changes. View the product page on your live store to confirm the calculator displays correctly within the description and functions as expected.
This method embeds the calculator directly into individual product pages without modifying theme files, making it ideal for product-specific calculators like size guides or cost estimators.