---
title: "Integrating on Hydrogen (Remix)"
slug: "onboarding-integrating-on-hydrogen-remix"
description: "Learn to set up subscription plans in your Shopify store with our step-by-step guide, including code snippets and integration tips for a seamless experience."
updated: 2025-11-12T10:25:22Z
published: 2025-11-20T21:38:27Z
canonical: "help.skio.com/onboarding-integrating-on-hydrogen-remix"
---

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

# Integrating on Hydrogen (Remix)

## Setup

**Repository [**[Hydrogen Playground](https://github.com/skio-org/hydrogen-remix-playground)**]**

Linked is the example repository that follows the instructions from this article. This example repository is built from the latest version of [Shopify's Hydrogen Skeleton Template](https://github.com/Shopify/hydrogen/tree/main/templates/skeleton) v2024.7.10 (as of 10/16/24).

## Step 1 - Update Product and Variant queries

We should retrieve the necessary selling plan information from the product and variant queries. In [**/app/routes/products.$handle.jsx**](https://github.com/skio-org/hydrogen-remix-playground/blob/main/app/routes/products.%24handle.jsx), update **PRODUCT_FRAGMENT** and **PRODUCT_VARIANT_FRAGMENT** to include the following fields:

**PRODUCT_FRAGMENT**

```plaintext
p...
requiresSellingPlan
sellingPlanGroups(first: 3) {
 nodes {
  appName
  name
  sellingPlans(first: 30) {
   nodes {
   id
   name
   description
   recurringDeliveries
    options {
    name
    value
   }
  }
 }
}
```

**PRODUCT_VARIANT_FRAGMENT**

```plaintext
...
sellingPlanAllocations(first: 30) {
 nodes {
  sellingPlan {
   id
   name
   priceAdjustments {
    orderCount
    adjustmentValue {
     ... on SellingPlanFixedAmountPriceAdjustment {
      adjustmentAmount {
       amount
       currencyCode
      }
     }
     ... on SellingPlanPercentagePriceAdjustment {
      adjustmentPercentage
     }
     ... on SellingPlanFixedPriceAdjustment {
      price {
       amount
       currencyCode
      }
     }
    }
   }
   options {
    name
    value
   }
  }
  checkoutChargeAmount {
   amount
   currencyCode
  }
  priceAdjustments {
  price {
   amount
   currencyCode
  }
  compareAtPrice {
   amount
   currencyCode
  }
  perDeliveryPrice {
   amount
   currencyCode
  }
  unitPrice {
   amount
   currencyCode
  }
 }
}
```

## Step 2 - Add the plan picker code

In **/app/components** folder create a JSX file - **PlanPicker.jsx** with the following code from the repository: [https://github.com/skio-org/hydrogen-remix-playground/blob/main/app/components/PlanPicker.jsx](https://github.com/skio-org/hydrogen-remix-playground/blob/main/app/components/PlanPicker.jsx)

## Step 3 - Integrate the plan picker in the product form

In [**/app/components/ProductForm.jsx**](https://github.com/skio-org/hydrogen-remix-playground/blob/main/app/components/ProductForm.jsx) do the following:

Add state management to handle the selected subscription plan as shown below:

```plaintext
const [selectedSellingPlan, setSelectedSellingPlan] = useState(null);
```

Render the plan picker within the product form:

```plaintext
<>
 selectedVariant={selectedVariant}
 selectedSellingPlan={selectedSellingPlan}
 onPlanChange={(sp) => setSelectedSellingPlan(sp)}
/>
```

Include the selected selling plan ID in the payload of the form:

```plaintext
<>
 disabled={!selectedVariant || !selectedVariant.availableForSale}
 onClick={() => {
  open('cart');
 }}
 lines={
  selectedVariant
   ? [
    {
     merchandiseId: selectedVariant.id,
     quantity: 1,
     ...(selectedSellingPlan && {
      sellingPlanId: selectedSellingPlan.id,
     }),
     selectedVariant,
    },
   ]
  : []
 }
>
 {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
```

## Step 4 - Update Cart query to include subscription info

In the [**/app/libs/fragments.js**](https://github.com/skio-org/hydrogen-remix-playground/blob/main/app/lib/fragments.js) file, update all the CartLine fragments to include the following fields:

```plaintext
sellingPlanAllocation {
 sellingPlan {
  id
  name
  options {
   name
   value
  }
 }
}
```

## Step 5 - Add selling plan label to Cart's Line Item component

In the [**/app/components/CartLineItem.jsx**](https://github.com/skio-org/hydrogen-remix-playground/blob/main/app/components/CartLineItem.jsx), include the sellingPlanAllocation field in the component's context:

```plaintext
 const {id, sellingPlanAllocation, merchandise} = line;
```

Then, in the component's view, render the selling plan label as follows:

```plaintext
<ul>
 {selectedOptions.map((option) => (
  <li key={option.name}>
   <small>
    {option.name}: {option.value}
   </small>
  </li>
 ))}
 {sellingPlanAllocation ? (
   <li>
    <small>{sellingPlanAllocation.sellingPlan.name}</small>
   </li>
 ) : null}
</ul>
```

## Step 6 - Customer Portal

The Skio Customer Portal, like many other Shopify apps, utilizes Shopify's App Proxy system to load the customer portal. There are two options that Skio can offer at the moment:

1. Load the app proxy within the **Liquid** environment of your store. A subdomain should be setup that directs to the liquid version of the storefront (ie: account.mystore.com or shop.mystore.com). When a customer is navigating to manage their subscription they should be directed to this subdomain (ie: shop.mystore.com/a/account/login). A redirect should be setup on the liquid theme as well to handle any other traffic that may need to be directed back to the headless storefront!
2. Load the customer portal on any desired page of your headless store through an **iframe.** Documentation on that is [here](/help/docs/how-do-i-render-the-skio-login-customer-portal-in-an-iframe) - [/help/docs/how-do-i-render-the-skio-login-customer-portal-in-an-iframe](/help/docs/how-do-i-render-the-skio-login-customer-portal-in-an-iframe)

As always if you have any questions or need any assistance with setup, please reach out to [migrations@skio.com](mailto:migrations@skio.com) for more information or assistance!

### 

## Result

![Screenshot 2024-10-16 at 4.04.52 AM.png](https://cdn.us.document360.io/a953bba6-c70d-43ce-bc77-d7f32a8fc514/Images/Documentation/30106829747867(1).png?sv=2026-02-06&spr=https&st=2026-11-06T19%3A54%3A42Z&se=2026-11-06T20%3A54%3A42Z&sr=c&sp=r&sig=ue53Z6cjEMahEnUITcc4O%2BUIu%2FOruW8S9%2BCrl6bdNTQ%3D)