How do I render the Skio Login/Customer Portal in an iFrame?

Updated
  • Updated on Dec 4, 2025
  • 1 minute(s) read
  • Migration Team
  • K
 Prev Next

If you want to display Skio's Login or Customer Portal pages on custom pages within your Shopify store, you can embed them using an iFrame.

By default, Skio pages are accessible at these URLs:

  • Login page: yourdomain.myshopify.com/a/account/login

  • Customer Portal: yourdomain.myshopify.com/a/account/subscriptions

These URLs are generated automatically for all Skio merchants and cannot be changed in the Skio Dashboard.

How to embed Skio pages in an iFrame

To embed the Skio Login or Customer Portal in an iFrame, use the following URL structure in your <iframe> element:

https://storefront-iframe.skio.com/a/account/login?hostname=yourdomain.myshopify.com

Replace yourdomain with your store's Shopify domain (found in your Shopify admin).

For Customer Portal v3 (CPv3), use cpv3.skio.com instead.

CSS added to your page's DOM won't apply to content inside the iFrame. To style Skio Login or Customer Portal pages, use Custom Blocks in your Customer Portal settings to add your CSS directly.

Auto-login users within an iFrame

You can also auto-login (magic login) customers to Skio's Customer Portal within an iFrame. This is especially useful for headless storefronts. Use the following code snippets to generate the magic login URL:

Liquid

{% liquid
  assign store_id_hash = 'STORE_ID_HASH'
  assign skio_hash = customer.id | append: store_id_hash | md5
%}

{%- capture skioIframeSrc -%}
  https://storefront-iframe.skio.com/a/account/shopify-login?hostname={{ shop.domain }}&shop={{ shop.permanent_domain }}&email={{ customer.email | url_encode }}&hash={{ skio_hash }}&id={{ customer.id | url_encode }}&totalSpent={{customer.total_spent | url_encode}}
{%- endcapture -%}

Javascript

import md5 from 'crypto-js/md5';
/**
* Generate a Skio auto-login URL to be used in iframe.
* @example <iframe src={generateIframeSrc(this.customer)}></iframe>
* @returns {String} URL string
*/
function generateIframeSrc(customer) {
 const STORE_ID_HASH = "YOUR_STORE_ID_HASH_FROM_SKIO_DASHBOARD"
 const STORE_HOSTNAME = "YOUR_STORE_HOSTNAME" // your store's public domain
 const STORE_SHOPIFY_DOMAIN = "YOUR_STORE_DOMAIN" // your store's myshopify domain
 const url = new URL("https://storefront-iframe.skio.com/a/account/shopify-login");
 url.searchParams.set("hostname", STORE_HOSTNAME);
 url.searchParams.set("shop", STORE_SHOPIFY_DOMAIN);
 url.searchParams.set('email', customer.email);
 url.searchParams.set('id', customer.id);
 url.searchParams.set('hash', md5(`${customer.id}${STORE_ID_HASH}`));
 url.searchParams.set("totalSpent", customer.total_spent);
 return url.toString();
}

Note

The Store ID Hash can be obtained from the Skio Dashboard -> Resources -> Theme Setup page. 

Related articles