AstroLogics API

Add widgets to a Shopify store

You can show a daily panchang or a horoscope on a Shopify store in a few minutes, with no app and no code beyond one short snippet.

Early guide: we have tested the widgets in a browser, but not yet on a real Shopify store. Try this on a page that is not your home page first, and tell us at developers@astrologics.in if anything differs.

What works this way

Widget On Shopify
Panchang Yes, with a publishable key
Horoscope Yes, with a publishable key
Kundli, matching and Vastu No. They carry birth details or plot details, so they need a server of your own, and a Shopify store does not give you one

There is no AstroLogics app in the Shopify App Store.

1. Create a publishable key

Open API keys and create a publishable key. Under allowed origins, list each address your store is reached at, one per line. An origin must match exactly, so include each variant your visitors use:

https://your-store.myshopify.com
https://www.your-domain.com
https://your-domain.com

A publishable key is safe in a page because it works only for read-only operations and only from these origins. Never paste a test or live key (al_test_, al_live_) into a theme: anyone can read it.

2. Add a section to your theme

  1. In Shopify admin, go to Online Store, then Themes, and choose Customize.
  2. Open the page you want, and choose Add section, then Custom Liquid.
  3. Paste one of the snippets below, replacing YOUR_PUBLISHABLE_KEY.
  4. Save, then open the page on your store's real address to check it.

Custom Liquid is available in Online Store 2.0 themes. The theme editor's preview may not count as one of your origins, so if the widget shows a refusal there, check the real page before changing anything.

Today's panchang

Set lat and lon to the place the panchang is for. Without them, it uses New Delhi.

<script src="https://developers.astrologics.in/widgets/v1.js" defer></script>
<astrologics-panchang key="YOUR_PUBLISHABLE_KEY" lat="28.6139" lon="77.209"></astrologics-panchang>

A horoscope

Leave out sign to let visitors choose. Or fix it with, for example, sign="leo", and set period to weekly for a weekly reading.

<script src="https://developers.astrologics.in/widgets/v1.js" defer></script>
<astrologics-horoscope key="YOUR_PUBLISHABLE_KEY"></astrologics-horoscope>

Two widgets on one page are fine. The script needs to be there only once, and including it twice does no harm.

Language and colours

Add lang="hi" to an element for Hindi. If your store has Hindi and English versions, Liquid can follow the visitor's language:

<astrologics-panchang key="YOUR_PUBLISHABLE_KEY" lat="28.6139" lon="77.209" lang="{{ request.locale.iso_code }}"></astrologics-panchang>

Widgets do not inherit your theme's styles. To match your store, set the colours and font in a <style> tag in the same section:

<style>
  astrologics-panchang { --astro-accent: #1f4e79; --astro-font: Georgia, serif; }
</style>

Credits

The widget calls the API from each visitor's browser, so every page view spends your credits: 1 for a panchang, and 1 for each horoscope shown. Nothing is cached between visitors. Compare your store's traffic with your plan before putting a widget on a busy page, and avoid the header, the footer and other parts of the theme that appear on every page.

Your plan's rate limit applies too. When a busy page goes over it, or the credits run out, visitors see a short message in place of the reading. The rest of your store is not affected.

If it shows an error

Message What to do
The origin is refused (domain_not_allowed) Add the exact address from the browser's address bar to the key's allowed origins
The key is refused (invalid_api_key) Check that you pasted the whole al_pub_ key and that it is not revoked
Too many requests The page is over your plan's limit. Put the widget on a quieter page, or use a higher plan

Your visitors' privacy

These two widgets send no birth details. The script sets no cookies, and the browser's request reaches our servers as any request does, with the visitor's IP address. See caching and data retention, and mention the widget in your store's privacy policy.

Next: widgets · authentication · WordPress plugin