---
title: "How do I render the Skio Login/Customer Portal in an iFrame?"
slug: "how-do-i-render-the-skio-logincustomer-portal-in-an-iframe"
updated: 2026-03-20T19:18:43Z
published: 2026-03-20T19:18:43Z
canonical: "help.skio.com/how-do-i-render-the-skio-logincustomer-portal-in-an-iframe"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.skio.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

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,

1. Use the following URL structure in your `<iframe>` element:

```plaintext
https://cpv3.skio.com/a/account/login?hostname=yourdomain.myshopify.com
```
  1. If you’re using [Customer Portal v2](/help/docs/customer-portal-v2-walkthrough), replace [cpv3.skio.com](http://cpv3.skio.com) with [storefront-iframe.skio.com](http://storefront-iframe.skio.com) in the above URL.
2. Replace `yourdomain` with your store's Shopify domain (found in your Shopify admin).

> [!NOTE]
> Custom CSS on your Shopify page won't affect the styling inside the iFrame. To customize the look of the login or portal pages, navigate to **Storefront** > **Customer Portal** in the Skio Dashboard and [add your CSS using Custom Blocks](/help/docs/customizing-customer-portal-branding#what-are-the-branding-settings-for).

## 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

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

        {%- capture skioIframeSrc -%}
        https://cpv3.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 -%}
```

> [!WARNING]
> The `STORE_ID_HASH` can be obtained at [dashboard.skio.com/theme](http://dashboard.skio.com/theme).

### Javascript

```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 = "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://cpv3.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();
        }
```

The Customer Portal is an interface that allows subscribers to manage their subscriptions, including options to pause, modify, or cancel their subscription plans.

Your Skio Dashboard is the backend view of Skio where you manage your subscription program. This is the page you see when you log in to the Skio app, and it's where you'll configure products, view customer data, adjust settings, and access analytics to monitor your subscription performance.