World Clock widget

Shopify embed guide

How to Add a World Clock to a Shopify Store.

The usual route to a World Clock on Shopify is installing yet another app, with its own subscription, its own scripts added to your theme, and its own uninstall residue. A hosted embed skips all of that: the widget runs in a sandboxed iframe served from a CDN, and your theme code stays untouched.

Live starter preview

Step by step

Embed the World Clock in your Shopify store.

01

Create the widget in Fugte

Start from the World Clock starter, generate a variation with the built-in AI, or paste your own code.

02

Customize and publish it in Fugte

Text, colors, images, numbers, and options are no-code settings, so you can match your branding without touching code. Publishing gives the World Clock a stable hosted link and an embed snippet.

03

Add a Custom Liquid section in your theme

In Shopify admin, go to Online Store → Themes → Customize, add a "Custom Liquid" section or block where you want the widget, and paste the embed snippet.

04

Or paste it into a page

For standalone pages, open the page in the Shopify editor, switch to the HTML view (the <> button), and paste the embed where the World Clock should appear. Save, then preview.

Good to know

Shopify specifics worth planning around.

No app install means nothing is added to your theme.liquid and nothing to clean up later.

The widget runs in a sandboxed cross-origin iframe, so its CSS and JavaScript cannot conflict with your theme or other apps.

Custom Liquid blocks can be placed in product, collection, and page templates through the theme editor.

Updates happen in the widget editor. You never re-edit the theme to change text, colors, or offers.

This widget

What the World Clock needs from the embed.

The section above applies to anything you put on a Shopify store. This part is specific to the World Clock.

The clock is short, and its height is set by how many cities you list rather than by anything the visitor does. Set the frame height on the editor's Iframe tab to fit the list you have, and revisit it when you add a city, or the new row ends up scrolling inside the frame.

City names sit on one line and a long one is cut off rather than wrapped, so short labels survive a narrow box best. "Support" and "HQ" read better than "Customer support (EMEA)" at any width.

The times come from the visitor's own device, so a wrong device clock shifts every city by the same amount. The gaps between cities stay correct either way.

Ideas

Where the World Clock fits.

Remote teams

A live world clock for the cities your business spans, with your own label on each one

Support hours

A live world clock for the cities your business spans, with your own label on each one

International storefronts

A live world clock for the cities your business spans, with your own label on each one

FAQ

Common questions.

Will the World Clock slow my store down?

The embed is an iframe loaded from a CDN alongside your page rather than script injected into your theme, so it does not block your theme from rendering.

Do I need a developer or a Shopify app?

No. The whole workflow is copy-paste in the theme editor. If you can add a section in Customize, you can add this.

Can the World Clock read my store data?

No, and that is by design. The World Clock is a self-contained front-end widget. It does not have Shopify API access, which also means there are no app permissions to review.

Try it

Put a World Clock on your Shopify store today.

Start free, customize the World Clock without code, and embed it with one link.