Shopify

A Shopify store uses the same widgets as any other site: one script tag and a publishable key, pasted into a Custom Liquid section in the theme editor. There is no app to install, nothing reads or writes your store, and all 22 widgets work.

1. Get a key and list your store's origins#

Create a publishable key (kj_pub_…) in the dashboard. A publishable key only works from the origins listed on it, so add every address your storefront is served from:

• https://<shop>.myshopify.com — your store's Shopify address, and
• every custom domain, for example https://www.example.com and https://example.com.

The scheme must match and there is no trailing slash. A key used from an origin it does not list is refused with 403 forbidden_origin, and the widget says so on the page, with the origin to add. See authentication.

Never paste a secret key (kj_live_… or kj_test_…) into a theme. Everything in a theme is sent to every visitor's browser; only a publishable key belongs there.

2. Add a Custom Liquid section#

In the Shopify admin: Online Store → Themes → Customize. Open the page the widget belongs on — for a page of its own, first create one under Online Store → Pages — then Add section → Custom Liquid, and paste one of the examples below. Save, and the widget is on the storefront.

Each example carries its own script tag, so each section works on its own. Two sections with the script on one page are fine: the script loads each widget's code once however many times it appears.

To load the script once for the whole store instead, put the script tag alone in Edit code → layout/theme.liquid, just before </head>, and paste only the <kj-…> tags into the sections. A theme update can replace theme.liquid, so the per-section script is the safer default.

Examples#

Replace kj_pub_your_key with your key in each.

Today's panchang#

The day's tithi, nakshatra, yoga, karana and vara, sunrise and sunset, and the day's windows, for a city. 1 credit a page view.

<script src="https://cdn.kaaljyoti.com/widgets/v1.js" data-key="kj_pub_your_key" defer></script>

<kj-panchang city="delhi"></kj-panchang>

For a place that is not one of the built-in cities, give the coordinates and a label; see <kj-panchang>.

Panchang and muhurta, in Hindi#

Two widgets in one section, both in Hindi. 2 credits a page view.

<script
  src="https://cdn.kaaljyoti.com/widgets/v1.js"
  data-key="kj_pub_your_key"
  data-lang="hi"
  defer
></script>

<kj-panchang city="varanasi"></kj-panchang>
<kj-muhurta city="varanasi"></kj-muhurta>

A kundli page#

A birth form with a place search; on submit, a report in tabs. 7 credits per submit, then more as tabs are opened — see <kj-kundli-form>.

<script src="https://cdn.kaaljyoti.com/widgets/v1.js" data-key="kj_pub_your_key" defer></script>

<kj-kundli-form></kj-kundli-form>

Horoscopes#

The twelve signs as icons; a visitor picks one, then the day, week, month or year. Nothing is asked for until a sign is picked; 5 credits per sign, period and day.

<script src="https://cdn.kaaljyoti.com/widgets/v1.js" data-key="kj_pub_your_key" defer></script>

<kj-horoscope></kj-horoscope>

Kundli matching#

Ashtakoot guna milan from two birth forms. 3 credits per submit.

<script src="https://cdn.kaaljyoti.com/widgets/v1.js" data-key="kj_pub_your_key" defer></script>

<kj-match-form></kj-match-form>

Matching your theme#

data-theme="auto" (the default) draws no card: text and lines take your theme's colours. For a card, set light or dark, and pick a style with data-preset. data-font="inherit" uses your theme's font.

<script
  src="https://cdn.kaaljyoti.com/widgets/v1.js"
  data-key="kj_pub_your_key"
  data-theme="light"
  data-preset="traditional"
  data-font="inherit"
  defer
></script>

<kj-panchang city="jaipur"></kj-panchang>

Every other script and element attribute — sign icons, the place search, colours through custom properties — works exactly as on the widgets page.

What a page costs#

The widgets run in each visitor's browser, so every figure is per page view, at the credits of the routes each widget calls. Identical requests on one page are made once, and a store out of credits for the month shows a polite "Monthly limit reached" card in place of the widget.

What a Shopify store cannot do#

• No PDFs. A PDF is never made for a publishable key, and a PDF button needs a server proxy holding a secret key. A Shopify theme has no server of its own to run one on.
• No server rendering, for the same reason.

FAQ#

The widget says the key does not allow this origin#

That is forbidden_origin: the page's origin is not on the publishable key. The widget names the origin to add. The usual cause is a custom domain: https://<shop>.myshopify.com is on the key, but the storefront is being viewed at https://www.example.com, or the other way round. Both need to be on the key.

Is there a Shopify app?#

No. Apps on the Shopify App Store must bill merchants through Shopify, and Kaal Jyoti credits are bought directly from us, so the widgets go in with a Custom Liquid section instead. It does the same job, with all 22 widgets.