How to Embed a Verystep Tool on Shopify (Custom Liquid)

Why Custom Liquid, not the page editor?

Shopify pages and blog posts have a rich-text editor with a “Show HTML” view, and pasting an iframe there sometimes works. Sometimes. The editor is built for formatted text, and on save it can tidy your code into something that no longer runs — a stripped attribute here, a vanished tag there. The theme editor’s Custom Liquid section exists precisely for raw markup: what you paste is what ships. For anything you want to still be working next month, use Custom Liquid.

Sellers tend to embed the working tools: the AQL sampling calculator below, the landed cost calculator on a sourcing page, the CBM calculator next to freight explanations. The full platform list is on the embed overview.

Step by step

1. Open the tool and copy its embed code — the example uses the AQL Calculator.
2. In Shopify admin, go to Online Store → Themes → Customize and navigate to the page (or product template) that should carry the tool.
3. Click Add section and choose Custom Liquid.
4. Paste the snippet into the Custom Liquid field.
5. Drag the section into position, check the preview on mobile width, and save.

Want it on one product page only? Create a separate page template for that product in the theme editor and add the section there, so the rest of the catalogue stays clean.

Worked example

The exact snippet from the AQL Calculator’s embed box:

<iframe src="https://verystep.com/embed/aql-calculator/" title="AQL Calculator" width="100%" height="520" loading="lazy" style="border:0"></iframe>

The AQL result table is wide; on product templates with a narrow column, the frame still fits because its width is 100% and the tool adapts. If the results run long on your layout, raise the height from 520 in steps of 40.

If something looks wrong

It worked yesterday, broken today. If the snippet lives in a page edited through the rich-text editor, a later save probably re-processed and stripped it. Move the code into a Custom Liquid section and the problem goes away for good.

Blank frame. Check the pasted src kept its https:// and closing tag. Then check the storefront in a private window — some ad-blockers are enthusiastic about iframes, and the editor preview is not proof.

The section shows on every product. You added it to the default product template. Create a dedicated template for the pages that need the tool and assign those products to it.

Keep going

Selling on your own WordPress store instead? The routine is the Custom HTML block. On Wix it is the HTML iFrame element, and on Squarespace a Code Block with a plan caveat.