Shopify integration

Embed Orizn widgets in Shopify

Step-by-step guide to add visa, budget, and travel widgets to your Shopify site in under 2 minutes.

Shopify's theme editor supports custom HTML inside Pages, Blog articles, and theme Sections. The Orizn widget integrates as a custom section, an inline block on a product description, or a standalone Page — all without needing a private app or theme code customization.

Tested with Shopify 2026 (Online Store 2.0)Free forever

What you'll get

Three quick wins

🎒

Visa widget on travel gear products

Embed under a Japan-themed product so buyers check visa rules without leaving the PDP.

🌐

Multi-market friendly

Pair with Shopify Markets — the widget auto-detects the visitor's language out of 15 locales.

💰

Stacks with Shopify affiliate apps

Your Orizn ORIZN-XXXXX code works in parallel with Shopify's referral apps.

Setup

Step-by-step in Shopify

Five concrete steps from opening the editor to hitting publish.

1

Open Online Store → Themes

From Shopify admin, go to Online Store → Themes. Find your live theme, click Customize. The theme editor opens with the home page loaded by default.

2

Pick where the widget goes

For a Page: switch to a Page template (top center selector → Pages → choose the page). For a Product: switch to Products → Default product. For a custom section: use Sections → Add section → Custom Liquid.

3

Paste into a Custom Liquid section

Click Add section → Custom Liquid (under the General category). A code field opens in the right panel. Paste the two-line Orizn snippet. Shopify accepts <script> tags inside Custom Liquid blocks without sanitization.

4

Preview

The right panel updates the live preview as you type. Drag the section to the position you want (above/below the product description, for example). Test mobile via the device toggle at the top.

5

Save

Click Save (top right). The widget is live immediately on the customer-facing storefront. If you used a Pages template, also create the page itself under Online Store → Pages and assign the template.

Code

The snippet for Shopify

Copy the variant that matches your setup. Switch tabs to see the affiliate or iframe versions.

html
<div id="orizn-visa"></div>
<script src="https://visa.orizn.app/embed/visa.js" async></script>

Watch out

Common Shopify pitfalls

The things that catch first-timers — fix in advance.

Rich Text fields strip scripts

The page's rich-text body editor (TinyMCE) removes <script> on save. Use the Custom Liquid section or paste in HTML view (<> icon) of the rich text editor.

Hydrogen / Headless storefronts

If you're on Shopify Hydrogen, embed via a React component with Suspense rather than Custom Liquid — see the React snippet on /embed/getting-started.

Checkout pages are locked

You cannot inject custom code into the Shopify Checkout (except via Checkout UI Extensions on Plus plans). Keep widgets on the storefront, not the cart/checkout.

App-injected CSP

Some Shopify security apps tighten the storefront CSP. If the widget silently fails, check those apps' settings and allow visa.orizn.app under script-src.

FAQ

Questions about Shopify

Do I need Shopify Plus to embed Orizn?

No. Any Shopify plan (Basic and up) supports the Custom Liquid section we use.

Can I add a widget to a product description?

Yes — switch the rich-text editor to HTML view (<> icon) and paste the snippet. Or use a Custom Liquid section on the Product template for cleaner separation.

Will this conflict with my page-speed score?

No measurable impact. The widget is async-loaded after the storefront's critical render path.

Does it work with multi-currency stores?

Yes. The budget widget supports data-currency override; the other widgets are currency-agnostic.

Other platforms

Embed Orizn elsewhere

Ready?

Ready to embed in Shopify?

Grab the snippet, paste it where the steps above describe, and ship in two minutes.